Digital technologies 10

In this module we will consider some other aspects of the digital technologies subject - systems, algorithms, programming, and interface design.

Systems

Input - Process - OutputSystems thinking is a key idea in the Australian Curriculum: Technologies. As indicated in the diagram at right, at the simplest level systems comprise elements that deal with input, process, and output. All three are necessary for any system to be useful to us.

If there is no means of input then we cannot affect the system and it 'does its own thing' rather than respond to our needs or wants. If there is no process then logically whatever goes in comes out unchanged and that is unlikely to achieve anything useful to us. If there is no output then whatever goes in and is processed simply disappears and we gain no benefit.

Of course, most systems are more complex than those three simple boxes might seem to imply. Each of the elements will usually have multiple components that work together to achieve more than any of them could do alone. In the most general sense the components could include people and various devices. In the case of computer systems there are physical components (hardware) and the sets of instructions that determine what the other components do (software). Sometimes the people who work with computer systems and are part of the broader system are jokingly referred to as liveware.

Modern computer systems support a wide variety of input and output devices. Input devices may include keyboard, mouse, trackpad, touch screen, microphone, camera, scanner, and various sensors. Output devices may include display screen, projectors, ink jet printer, laser printer, 3D printer, and speakers. Which devices are present in any particular system will depend upon who will be using it and the purposes it is expected to serve. Familiar devices, such as keyboard, mouse, display, and printer, evolve over time, some devices become obsolete and new ones are introduced. Examining the design and selection of input and output devices to meet specific needs and wants would be a legitimate part of learning about digital technologies.

Closer examination of the input and output elements will reveal that they are often systems in their own right with their own input, process, and output elements. For example, a keyboard must take input in the form of a tap from a finger and convert it to electrical impulses representing characters that are then conveyed by wire, or wirelessly, to the computer where they are processed by other sub-systems. Similarly, a printer receives as input a stream of electrical pulses and converts that to output as a pattern of dots on a printed page.

Essential as input and output elements of computer systems are, it is the process element that has most effect on the outcomes. The power of computer systems depends on their being able to execute simple instructions very quickly. My first personal computer, purchased in 1979, had a processor running at 1 MHz and 48 kB of memory. My current home computer has a quad-core processor running at 2.7 GHz and 8 GB of memory. It is several thousand times faster than my first computer and can perform simple instructions much more quickly than I could hope to. Those instructions are extremely simple. At their most basic they may involve moving a single bit of data. What's more, despite the increased speed, computers remain very literal. They do exactly as they are instructed without any common sense interpretation. Somebody has to develop the software with all those instructions and ensure that they are correct.

Software development

Software development is an engineering process and is typically accomplished using design processes that are essentially similar to those described in Module 6. That will involve understanding the problem to be solved (a need or want), imagining possible solutions, selecting and planning a solution, building and testing, evaluating and improving. One of the fundamental strategies is decomposition, that is, breaking a problem into sub-problems. Where the sub-problems are the same as or similar to problems that have been solved previously then solutions can be reused or adapted.

Planning for software development can use a variety of methods depending on the nature of the problem, skills and preferences of the software engineers, or resources that are available. Two approaches that may be applied in the technology education classroom are story boarding and flowcharting.

Story boarding is a visual approach to planning that is often associated with dramatic performances or film making. It allows a high level overview of the process that is being planned and will typically include representations of how things will look at various stages. In the case of software that could assist with planning user interfaces and display of information as well as the flow from screen to screen. A storyboard may resemble a comic strip. Although story boarding can be accomplished with pencil on sheets of paper there may be advantages to using cards that can be arranged in different sequences or software like PowerPoint that can simulate some of the actions such as clicking buttons in the user interface.

Flowcharting is also visual but represents the process rather than the look and feel of the product. It uses a specific set of symbols that have conventional meanings and can be used to plan the step-by-step detail of a process at various levels. It can be done using pencil and paper but the availability of templates for drawing the specific symbols will help and there is software that can be used.

Flowcharts eventually specify an algorithm for a process or computer program. An algorithm is a set of unambiguous rules for solving a problem in a finite number of steps. If, when it is converted to a computer programming language, an algorithm is going to be relied upon to deliver the intended result it must be clear and unambiguous and it must come to an end.

Programming languages

At the most basic level all data and instructions in digital computers must be represented in binary as 0s and 1s. The original computers had to be programmed by setting rows of switches up or down to represent the bits. Eventually computer programs were written to take instructions expressed in simple codes and assemble them into binary code for the computer. This was assembly language.

Other languages have been developed to take instructions expressed in language more easily understood by humans and translate them into a form that can be processed by the computer. Scratch is an example of a visual programming language that can express algorithms in a form that is intelligible to humans and translate the instructions for action by the computer.

There are many different computer languages that may be used for different purposes but, with few exceptions, most of them express the same basic algorithmic ideas. Once those ideas are grasped moving between languages is a matter of learning how those ideas are expressed in the specific programming language.

Algorithmic elements

The key algorithmic ideas of sequence, selection and iteration or repetition are presented here in flowchart form with examples in Scratch or JavaScript (a language commonly used for programming in webpages) where the constructs are available.

Sequence

Instructions are performed one after another.

Flowchart Scratch Lego EV3 JavaScript
sequence Scratch sequence EV3 sequence pos = pos + 50;
dir = dir + 90;
pos = pos + 50;
dir = dir + 90;

Selection

A choice between alternative instructions is made depending on the outcome of some test.

Flowchart Scratch Lego EV3 JavaScript
simple selection Scratch simple selection EV3 selection

if (pos > 100) {
   dir = 90;
}

Flowchart Scratch Lego EV3 JavaScript
binary selection Scratch binary selection EV3 binary selection if (pos > 100) {
   dir = 90;
} else {
   dir = 270;
}
Flowchart Scratch Lego EV3 JavaScript
multiple selection n/a n/a switch(colour) {
  case 1:
    dir = 90;
    break;
  case 2:
    dir = 180;
    break;
  case 3:
    dir = 270;
    break;
  default:
    dir = 0;
}

Iteration or repetition

The algorithm repeats one or more steps a specific number of times or while some condition applies.

Flowchart Scratch Lego EV3 JavaScript
Definite iteration/repetition Scratch definite repetition EV3 definitie repetition for (i = 0; i < 4; i++) {
   pos = pos + 50;
   dir = dir + 90;
}
Flowchart Scratch Lego EV3 JavaScript
pre-test iteration Scratch pre-test iteration n/a i = 0;
while (i < 4){
  pos = pos + 50;
  dir = dir + 50;
  i = i + 1;
}
Flowchart Scratch Lego EV3 JavaScript
post=test iteration n/a EV3 posttest repetition i = 0;
do {
  pos = pos + 50;
  dir = dir + 50;
  i = i + 1;
} while (i < 4);

Managing software development

Planning algorithms and converting them to code in a suitable language is a large part of the work of software development but it is not the entire story. It is necessary to consider what data will be required and how it will be represented in the system. It is also necessary to plan for user interaction with the software and develop any graphic elements that may be required for display. All of these components may be addressed in the technology classroom and will contribute to learning in the curriculum key idea of project management.

Like other engineering processes, software development seldom has a single correct solution. There are likely to be multiple possible solutions from which one must be selected, developed and tested for suitability. If it is not suitable then another alternative might be tried.

An agile approach to software development differs from the traditional waterfall approach of first developing a tight specification and then developing and delivering a completed solution. In an agile approach components may be built and tested rapidly so that any failure occurs early and can be learned from before large amounts of time and effort have been committed to an unsuitable solution.

A systematic approach is necessary. Even before any code is written it is important to test algorithms using sample data to ensure that they perform as expected. This process is known as desk checking. Necessary tasks and their sequence should be documented together with details of data structures, and the names of variables, files and media assets.

Because any technology solution, including software, is developed in response to human needs and wants it is important that software development include consideration of the user. Understanding of human factors such as limits on working memory, colour vision, manual dexterity and more should inform design of user interfaces. Solutions that are found to work in one project should be considered for transfer to future projects as part of maintaining consistency in user experience.

User interface design

Human-machine systemThe user is an important part of any working computer system. Design of the system will necessarily include user interface design and should consider characteristics of users and options available for exercising choice such as the use of buttons and selection lists. Consistency is important and it is sensible to copy interface features that have been used with success in previous projects. The illustration at right places the human user between the computer (machine) and the environment where roles will include transferring data into the computer and interpreting results for application in the world.

The interface is simply the parts of the system that the user interacts with. It provides the communication channel between user and computer and will consist of physical (input and output) components and conceptual elements such as methods for selecting items to act upon and schemes for representing data and other system components. Communication moves through multiple layers:

Semantic layer
Thinking about a task in terms that are meaningful to the user, such as asking "What document files do I have?"
Syntactic layer
Thinking the steps necessary to accomplish some task such as locating, selecting and opening a folder to access a file.
Physical layer
Performing the actions necessary to access the file such as moving and clicking the mouse.

The design of user interfaces is based on information from a variety of sources. They may include psychological theories, ergonomics, evidence from experience and experiments. Information processing theory imagines the brain as a computer executing algorithms and offers some useful insights for interface design including the limitation of human working memory to 5 to 7 chunks of information at one time, the need to frequently refresh attention, and the relative ease of recognition of one object among others compared to recalling something unaided. Ideas about mental models suggest that interfaces work best when they can connect to prior experience and associate ideas by offering some link by metaphor or analogy between the user interface and that experience. The modeling of Macintosh and Windows interfaces on a desktop with folders and files is a well known example. Media player controls on a computer closely resemble controls on a stereo system or DVD player, and the tools in image editing software include pens, brushes and erasers.

This table presents some interface design guidelines based on psychological principles.

Transparency Should not intrude on the work of the user
Ergonomic efficiency Minimal physical and mental stress
Consistency Predictable outcomes of actions
Recognition Easier than recall
Error handling Helpful messages
Reversibility Cancel and undo

Visual design: 4 principles

Although user interface design involves more than simply visual design that is an important element that can affect functionality. Hence it is worth considering some simple principles of visual design that can be applied in any project with a visual component, including interface design. Williams (1994) promoted four principles with a memorable acronym that represents something a designer does not want to produce – Contrast, Repetition, Alignment, Proximity. That simple approach is widely recommended (see, for example, Gupta, 2016; Travis, 2015).

  Principle Purpose How Avoid
Contrast If not exactly the same, make items VERY different Draw attention, create interest, and aid organisation Use different typefaces, line thickness, colours, sizes. Be strong! Wimpishness and merely similar items
Repetition Repeat some aspect (shape, colour, font) throughout Unify and add visual interest Be consistent, make repeated elements stronger Repeating to the point of annoyance
Alignment Every item should connect with some other item Unify and organise Always align with something Multiple alignments and centred alignment
Proximity Group related items together Organisation, proximity implies relationship Group related elements, restrict number to 3 to 5 Placing unrelated items together or items in middle or corners

Using colour

Colour can be problematic for some users and should be used with care. Consider legibility, especially as affected by contrast, and the ancillary messaging associated with colour. Colours may have strongly associated symbolic meanings (red = stop, green = go) but they may vary across cultures and contexts.

Use colour conservatively and redundantly with other aspects of the design that lend meaning. The best approach is often to design in monochrome and add colour to an already well formatted design.

Alternatives to coding

There may be occasions when limited access to resources or lack of prior knowledge and skills requires alternatives to coding in the the technology classroom. Alternatives that might be considered include:

References

Gupta, G. (2016). C.R.A.P. Design Principles. Retrieved from http://blogs.quovantis.com/crap-design-principles/

Travis, D. (2015). A CRAP way to improve usability. Retrieved from http://www.userfocus.co.uk/articles/A_CRAP_way_to_improve_usability.html

Williams, R. (1994). The non-designer’s design book. San Francisco: Peachpit Press.