Skip to main content

Designing the user interface: text, colour, images, moving images and sound

Completion requirements
View all sections of the document
Printable page generated Thursday, 28 March 2024, 9:05 PM
Use 'Print preview' to check the number of pages and printer settings.
Print functionality varies between browsers.
Unless otherwise stated, copyright © 2024 The Open University, all rights reserved.
Printable page generated Thursday, 28 March 2024, 9:05 PM

Designing the user interface: text, colour, images, moving images and sound

Introduction

Why is the way something looks important? Text, colour, images, moving images and sound all interact to produce a user friendly environment within a user interface. This course will help you understand the effect each software component has on the user and explain how a consistent and thoughtful application of these components can have a significant impact on the ‘look’ of final product.

This OpenLearn course provides a sample of postgraduate study in Computing and ICT.

Learning outcomes

  • After studying this course, you should be able to:

  • design a user interface, making effective use of typeface, colour, still and moving images, and sound.

1 Devices

1 1 Getting the best from interaction devices

Once we have chosen an interaction device for a user interface, we need to consider how to use it effectively. We have relatively little control over the appearance or use of input devices, so we concentrate on the design of the feedback provided by output devices. In particular, we concentrate on the following software components that form this feedback.

  • Text. How can we ensure that the text is legible? Which font should we use? How long should the lines be?

  • Colour. Which colours go well together? How should colour be used in order to communicate information more effectively? How can we ensure that the colours we use have the correct connotations?

  • Images. What are the different types of image? How do you choose the right one?

  • Moving images. When is it useful to animate images? When can video clips be used to good effect?

  • Sound. When can sound be useful? What are the different categories of sound and when should each be used?

Many of these issues are also relevant to input devices, such as the choice of colour for the panic button in a train or the font chosen for entering text into a form-fill application.

These software components are usually relatively easy and cheap to change, but applying them in a consistent and thoughtful manner can make a big difference to the usability of the User Interface (UI).

It is important to be clear what you are trying to achieve when you use these components. We are assuming that you want to communicate information and functionality in a simple but effective manner. This is different to a graphic designer, whose priority may be to create a design that is fresh and innovative. These differences have practical implications. For example, an advertising website designed by a graphic designer may have shorter line lengths, and employ more colours and images than we would recommend.

2 Text

2.1 The role of text

Text is the dominant component in most education and training software, and on many websites. It also plays a central role in standard software applications such as word processors and spreadsheets. It is a flexible and powerful means of communication.

Activity 1

Look at a multimedia encyclopaedia. Identify four ways in which it uses text. For each, what are the characteristics of the text (for example, is it a single word or a block of text)? What is its purpose?

Discussion

On my encyclopaedia I identified the following uses of text.

  • Blocks of text intended to provide information about a particular topic.

  • Headlines in bold with a larger type size. These structure the information.

  • Buttons with text on them. The text, usually a single word, communicates the meaning of the underlying command.

  • Captions under illustrations to identify them and explain their content.

As we can see from this activity, text is used in very different ways within UIs. Thus there is a variety of issues to consider.

2.2 The characteristics of text

Text has a number of technical advantages over other media.

  • Text files are small. Images, sound, animation and video all produce large computer files, even when compressed. These files can be slow to load from CD-ROM or to transmit via the Internet; this can reduce the usability of the UI. Text files are much smaller.

  • Text can be manipulated very easily. For example, it is possible to search for words. If you are visiting a website, this sort of facility can save a huge amount of time. This is difficult to achieve with other media.

However, it is probably society's reliance on text-based materials that maintains the central role of text. Nevertheless, although certain sectors of society spend much of their time reading and writing, this is not true for all sectors; as a UI designer you should explore the attitude of your user group to text. For example, you might like to find out their average reading age and the newspapers they read.

2.3 How to use text to good effect

Two aspects of the use of text are:

  • How to ensure that your text is legible.

  • How to write text that suits the medium.

We consider the first of these in this section. We do not cover how to write English that is appropriate for your particular readers here. However, it is important to ensure that your text does not contain words or expressions that may be unclear to your readers. You must select text that is meaningful to your users.

The bullet points below give guidelines for creating legible text for a UI. Some of these also apply to text on paper. This is a complex area and it is hard to develop guidelines that apply in all circumstances, so you should apply these with care, always taking into account the needs of your particular users. Do not forget that your users may have poor eyesight.

The term font is used widely in this context. A particular font is made up of two components: the typeface, such as Times New Roman or Arial, and the type size, which may be within a range such as 8 point to 72 point. There is some inconsistency in the literature concerning the definitions of font and typeface, but we feel these definitions are clear and useful.

When designing text for use on screen, you should be aware of the following points. (These points have been adapted from Götz (1998), Hartley (1994) and Rivlin et al. (1990).)

  • Typeface. There are two main kinds of typeface: serif and sans serif. A serif is the finishing stroke at the end of a letter. See Figure 1. Sans serif typefaces are more suitable than serif typefaces for use on a screen: the resolution on screen is likely to be poorer than on paper, and the details of serif typefaces may be lost.

  • Type size. Because of the poor resolution of most screens, reading from the screen usually requires a larger type size than reading from paper. (10 point is quite readable on paper but much less so on screen.) Typically, text between 11 and 14 point should be used. Headings should be between 14 and 20 point. Larger sizes are also better for all-day use, in workplaces such as call centres. It is possible to use smaller type sizes for areas of the screen that are read episodically, rather than continuously, such as menu bars.

  • Letter spacing. Spacing between letters is important, as letters that are too close together (like this) or too far apart (l i k e t h i s) can reduce legibility.

  • Interline spacing. The legibility of smaller type size can be improved by increasing the line spacing.

    The longer the line, the wider the line spacing should be (and the wider the line spacing, the longer the line can be). However, if the line spacing is too wide, then the lines may not be perceived as being related to each other.

  • Line length. The maximum line length on a screen should be around 60 characters (or 8–12 words). This allows a meaningful unit of text to appear in most lines.

    You should avoid very short lines, as they fragment the text and it is more difficult to construct the meaning.

    You should avoid hyphenating words, because the reader has to stitch the word back together in his mind and this takes time and effort.

  • Justification. Fully justified text (left- and right-justified) can create uneven gaps between the words on a page. It is usually best to left-justify blocks of text, as this gives a predictable place for the eyes to start from when they jump back to the beginning of the next line. Some argue that right margins should generally be left unjustified.

    If you are placing very short pieces of text next to other items on the screen (for example, putting captions on buttons or under icons), then you need to consider the relationship of the text to the item it belongs with. For instance, text on buttons usually looks neater if it is centred.

  • Line endings. It is easier for the reader to follow a line if it has a distinct thought in it, so – where possible – line endings should coincide with grammatical boundaries. That is, a single line should contain a single idea or concept.

  • Paragraph spacing. Paragraphs should be separated by blank lines, rather than by indentation of the first line.

Figure 1 Different typefaces (from Götz, 1998)
Figure 2 Text that is difficult to read
Figure 2 Text that is difficult to read
Review question 1

Figure 2 above illustrates a screen containing some text. Use the guidelines to give a critique of this screen, explaining how it should be changed in order to make it more legible.

Answer
Comment

The following describes how we would modify the text:

  • Typeface. A serif typeface (Times New Roman) was used in the original. We would change it to a sans serif typeface such as Arial.

  • Type size. The type size is too small in the original; we would make it bigger.

  • Letter spacing. This is reasonable.

  • Interline spacing and line length. The lines are excessively long in the original; we would reduce the line length to around 60 characters. We would also increase the interline spacing to improve legibility.

  • Line endings. Where possible, we would try to make line ends coincide with grammatical boundaries (i.e. a single idea or concept to each line of text). This may result in a considerable variation in the line length.

  • Paragraph spacing. There is only one paragraph, but it is rather long, so we would split it into two.

1.3 Colour

1.3.1 The role of colour

We can use colour in the following ways.

  • To draw attention. You will often find that important buttons or areas of the screen are a different colour. For example, warning signs are often in bright colours, such as amber or red. Your eyes are drawn to these colours.

  • To show status. As the status becomes more critical, the colour might change. An example of this is traffic lights changing from amber to red.

  • To make the information on the display clearer. Colour can be used to organise the screen or to show perspective.

  • To make the display more attractive. We are concentrating on usability rather than aesthetics here, but it is important to ensure that the combination of colours is visually appealing.

In this section we concentrate on the meaning of different colours, how to use colours together and how to use colour to represent information.

1.3.2 The characteristics of colour

Screens can only display a subset of the colours visible to the human eye. This limits the accuracy of colour reproduction. There is also variation between computers, so a web page on a PC may look different when viewed on a Macintosh. There are similar problems with colour printers.

These issues can cause problems for some sectors, such as the fashion industry.

There are also differences in the way we perceive colour from a screen compared to the way we perceive colour from paper. This means that the screen versions of colours can appear rather pale and unreal when compared with the equivalent paper versions. It also increases the likelihood of flickering for colour combinations such as red and blue. Examples of flickering are shown in Figure 3 (b) (b).

1.3.3 Choosing colours with the right connotations

When you use a colour, you should think about what it is likely to mean to the people who look at it, as colours can have different connotations. Colours can even make people feel different. For example, pink has been shown to have a calming effect on emotionally disturbed people.

These connotations are partly cultural, so you may find they do not ring true for you if you are a member of a non-western culture, such as Chinese or Indian. For example, in western culture, red is often used as a warning colour, but in China it is a joyful colour. However, connotations can be learned and our society is increasingly international, so these differences are gradually becoming less of an issue. As communications improve, it is increasingly the case that the employees of multinational firms can have more in common with each other than with people living in their home towns.

Even connotations widely accepted in western culture, such as red for danger, need to be used with care. For example, a car may have a red light that indicates when the handbrake is on. This correctly warns that you could damage the car if you drive off with the handbrake on. However, it also effectively indicates that it is safe to take your foot off the brake pedal when the car is on a hill. This mixed message is rather confusing, and it might have been better to use another colour.

The situation is simpler for domains where established colour conventions already exist. For example, in British politics, red is associated with the Labour Party and blue with the Conservative Party. This type of colour coding can be applied more easily.

The colour saturation can also be significant. Colours aimed at young people tend to be pure and bright, whereas colours evoking the natural world are relatively subdued, and colours aimed at older people are deeper.

Fashion also plays an important role in the choice of colours, particularly for young people. For example, the colour of fashionable clothes changes regularly, as does the colour of home décor. Thus you should not use bright orange if it is thought to look dated.

As this area is so subjective, it is difficult to know how to apply these ideas. We are really straying into the domain of graphic designers. However, you still need to make decisions about the colours that you use, so you should do this carefully. Make sure that you apply the colours consistently, always taking into account the characteristics of the users, the tasks they are carrying out and the environment in which they will be using the computer system. It is good practice to evaluate your choices with users in order to inform your decisions.

Review question 2

Table 1 contains some colours and possible connotations. Do you agree with these connotations?

Taking into account these connotations and the colour intensity, suggest a background colour for the following e-commerce websites.

  • A site to sell CDs to young people under 25. The site aims to be exciting and trendy.

  • A site to sell outdoor clothing to walkers.

  • A site to sell expensive jewellery to older people.

Table 1: Connotations of different colours
ColourPositive connotationsNegative connotations
RedActive, invigorating, exciting, powerful, strong, energetic, attractive, dominatingAggressive
BlueControlled, abstinent, mysterious, intellectual, harmonious, deep, dreamy, faithful, rational, sensibleAggressive, introverted cold, melancholic
Blue/Green/TurquoiseRefreshingAloof, self-willed, unemotional, cold, sterile
GreenRefreshing, harmonious, optimistic, close to nature, calm, gentle, conciliatory, strong-willedJealous, envious, inexperienced
YellowColourful, extrovert, cheerful, youthful, lively, full of fun, lightSuperficial, exaggerated, vain
OrangeExciting, direct, joyful, alive, communicative, warmIntimate, vigorous, possessive, cheap
Dark redGraceful, serious, dignifiedArrogant
(Götz (1998) with modifications by the course team)
Answer
Comment

As the bracket at the foot of the table suggests, the course team disagree with some of the connotations – so you may too.

The following are only suggestions for websites; you may have better ideas.

  • A lively colour such as bright red, yellow or orange seems appropriate. All of these colours are active and exciting. As such, they should attract young people.

  • A subdued green could be used, as it would remind users of the countryside and the enjoyment they get from walking.

  • Deep red would create a dignified environment, which would be appropriate for the purchase of an expensive item of this sort.

1.3.4 How to use colour to good effect

The effective use of colour is a complex and technical area. In Table 2 we have listed some general guidelines.

Table 2: Making effective use of colour
Number of coloursIf you are using colours to organise the screen, then it is better to limit their number: too many colours can be confusing and unpleasant to look at. Some guidelines recommend no more than six colours, in addition to black and white, for any one screen, and fewer is often better. Some experimental evidence suggests that using many colours arbitrarily can result in users suffering eyestrain, fatigue and disorientation.
Design for monochromeDesigning in black and white first can help to focus attention on the layout of the UI. Also, not all users may have colour screens. Do not forget that monochrome displays can be extremely effective, like the display in a railway station that indicates when the next train is about to arrive.
Colour perceptionColour perception varies greatly. About 8% of the male population is colour blind. Red, orange and green are often confused, as are purple, blue and magenta, and white, grey and cyan.
Colour for reinforcementColour should not be used in isolation. For example, speed limit signs on UK roads have a red border, but they also have black text on a white background stating the maximum speed.
Götz, V. (1998) Color and Type for the Screen, RotoVision SA.

An important factor when you use several colours is the intrinsic brightness of each. Table 3 gives the brightness of a variety of pure colours. The brightness of mixed colours depends upon the brightness of each colour in the mixture and the relative quantities of each. For example, mixing dark blue with white results in light blue. Light blue is a brighter colour than dark blue.

Table 3: Intrinsic brightness
PercentageAchromatic coloursColoursIntrinsic brightness
100WhiteVery high
Yellow, Yellow-greenHigh
OrangeHigh to medium
Medium greyRed, GreenMedium
VioletMedium to low
BlueLow
0BlackNone
from Götz, 1998

Intrinsic brightness has some important implications.

  • For legible text, there needs to be sufficient contrast between the brightness of the background and foreground colours. For example, white text on a yellow background would be difficult to read but white on black would not, as Figure 3 (a) demonstrates.

  • You should be careful when using bright colours, such as white or bright yellow, for large areas of the screen because they can become tiring to look at. Whilst black text on a white background is easy to read, it would be better to tone down the white if your users are reading from the screen all day. Pale grey, cream or magnolia can be good alternatives.

  • Contrasts in the brightness should not be too extreme, as this may lead to flickering (there are other causes of flickering that we do not go into here). Figure 3 (b) shows a variety of colour combinations, many of which you will probably find difficult to read because they flicker.

As colour perception is so personal, it is good practice to allow your users to modify the colour scheme.

Figure 3 Contrast between colours (from Götz, 1998)

1.3.5 Using colour to represent information

All UIs need to communicate information. Colour can be particularly effective for this. Table 4 summarises some of the techniques that are available.

Table 4: Using colour to represent information
TechniqueDescriptionExample
Colour for emphasisColour can be used to emphasise the important areas of the screen or the key parts of a diagram.Figure 4 shows two contrasting representations of marshalling signals. Part (b) uses colour to emphasise the lights; it is much easier to understand than part (a).
Colour for groupingColour can be used to organise the screen.Areas of the screen containing different types of information may have a different background colour.
Colour codingColour can be used to represent a particular object or status; this is known as colour coding.In an accounts package, the overdue accounts could be indicated by a red symbol.
PerspectiveColour can be used to reinforce perspective on the screen.You should use dark or dim colours for the background and brighter colours for the foreground. Thus, the title bar of an active window is usually a brighter colour than that of an inactive window.
LayeringRelated to the use of perspective is the use of colour to represent different layers within a diagram.In an air traffic control system, high-flying planes could be a different colour to low-flying planes. The colours should be naturally related to each other, such as different shades of blue.
Götz, V. (1998) Color and Type for the Screen, RotoVision SA.
Figure 4 Marshalling signals (Tufte, 1990, p.63)

Box 1 discusses an interesting use of colour.

Box 1: Colour in the general bathymetric chart of the oceans

Figure 5 is part of the General Bathymetric Chart of the Oceans (International Hydrographic Organisation, Ottawa, Canada, 5th edition 1984, 5.06). The map shows the ocean trenches of the western Pacific and Japan Sea. It uses colour in an interesting and powerful way.

There are two distinct colour groups: different shades of green/brown and different shades of blue. We naturally associate these colours with land and sea, so there is no need to memorise their meaning. The colours are graded according to height (or depth), so the deeper the blue, the deeper the sea.

The colours are not used in isolation, as the contour lines also indicate the gradations.

The colours have been chosen so that they are clear to colour-blind users.

None of the colours are bright.

The contrast between the background colour and the text colour is good, so the text is legible.

Thus each point on the map signals four variables: latitude, longitude, sea/land, depth/altitude measured in metres. This would be very difficult to achieve without the use of colour.

Adapted from Tufte (1990), p. 91
Figure 5 The general bathymetric chart of the ocean
Figure 6 An online calculator
Exercise 1
Timing: 0 hours 10 minutes

How effectively is colour used in Figure 6? (Or your own online calculator?) Take into account the following points:

  • Number of colours.

  • Colour perception.

  • Colour for reinforcement.

  • Intrinsic brightness.

  • Colour for emphasis.

  • Colour for grouping.

  • Perspective.

Discussion

Number of colours. Eight different colours are used, which is rather a lot. The colours appear to have been chosen arbitrarily. Each colour is used to help identify a group of buttons.

Colour perception. The colour combination is acceptable for most users with impaired colour vision.

Colour for reinforcement. Colour is used to help identify different groups of buttons. This grouping is reinforced by the numbers and letters on the buttons. Thus colour is not used in isolation.

Intrinsic brightness and colour for emphasis. The red and blue are both bright mixtures of the colour and this makes them stand out. For example, MC and 9. This makes them rather tiring to look at. It is not clear why some of the red buttons need to stand out as much as they do, but the blue buttons (the numbers) do need to be obvious. The grey background means the contrast between the text colour and the background is not that great, so flickering is not a problem.

Colour for grouping. The buttons are grouped together according to function: the buttons with blue text are numbers, the buttons with red control the memory, and so on.

Perspective. The buttons are bordered with darker grey to make them look as though they are raised from the screen and afford pressing.

It is important to consult users about their colour preferences from the start of the UI development process. Many designers will seek views at the first meeting with users, often employing coloured sketches to gain ideas, opinions and suggestions. They will then continue to evaluate the colours during each iteration of the design. Many systems give users the option to change colours to meet their personal tastes.

Activity 2

Microsoft Windows allows users to customise their systems to suit their personal preferences. Browser home pages can also be personalised. Observe five or six users’ selections of colour. Ideally, walk across a large open-plan office and simply take notice of the different choices people have made.

Discussion

When I crossed my open-plan office, I noticed the following.

  • A wide range of options had been selected, some of which did not meet my own ideas of good colour combinations.

  • A few users had done little beyond accepting the system defaults.

This demonstrates that people have many different colour preferences, which are probably impossible to predict without testing, including a willingness to accept the designer's selections – or an inability to change the defaults!

1.4 Images

1.4.1 The role of images

We can use images in several ways.

  • To motivate, to attract the attention of the user, to amuse and to persuade. These uses are particularly important in advertising and marketing.

  • To communicate information. This is often exploited in computer-based learning materials.

  • To help overcome language barriers. This approach is widely used in instruction manuals for consumer items.

  • To support interaction. For example, screen metaphors and icons.

In this section we concentrate on communicating information.

Activity 3

Flick through a newspaper or magazine (perhaps online) and choose four images. Why has each of these images been used? What does the image achieve? What information does it provide you with?

Discussion

When I looked through a newspaper, I found the following images.

  • A photograph of a man being taken into court. This drew my attention and made the event seem more tangible. It provided me with information about the appearance of the suspect and the process of being taken into court.

  • A diagram of how a bank robbery was carried out. This provided detailed information about the layout of the bank and the sequence of events. This added clarity to the textual description.

  • A series of drawings of clock faces, supporting the explanation of a sequence of events during a day in the stock market. This clarified the explanation.

  • A graph in the business section illustrated the highs and lows of the FTSE index.

4.2 Using images to good effect

The following are the main types of image.

  • Pictures. These include photographs, drawings and cartoons.

  • Diagrams. These include maps and other representations of relationships between objects, such as family trees and Venn diagrams. Some writers classify maps as charts. We have chosen not to do this.

  • Graphs and charts. These are visual representations of numbers. Thus, they include pie charts, histograms, line and bar charts.

Each of these represents different types of information.

Pictures can provide information that would be difficult to describe in words. Figure 7 shows an illustration of the Museum Willet-Holthuysen in Amsterdam. The illustration contains a large amount of detail about the size, shape and relative position of the various rooms in the house.

Diagrams take advantage of the two-dimensional layout of the screen to illustrate relationships and processes. For example, it would be possible to show the relationship between members of the Royal Family or the flow of blood around the body. At work you may use software to generate dataflow diagrams and entity models.

There are a variety of graphs and charts that can be used for displaying numeric information. Figure 8 shows a selection of these images. It is important to choose the appropriate type according to the data you want to represent. For example, a histogram can be used to show month-by-month changes, while a pie chart shows the relative amounts of the different elements that make up the total.

It is common to incorporate some form of functionality into images. For example, you may be using a web page to search for information about hotels in a particular part of Europe. Such web pages often contain maps that allow you to click on the relevant country in order to find the necessary information.

Figure 7 The Museum Willet-Holthuysen (from Eyewitness Travel Guide, 1997)
Figure 8 Charts and graphs

When you are considering using an image, you should remember the following points.

  • Choose the most appropriate type of image (picture, diagram or graph/ chart), according to the information you need to convey and the impact you wish to make.

  • Design the image so that it meets the requirements of the task as closely as possible. Unnecessary or inappropriate diagrams can be distracting for the user.

  • Follow any relevant conventions, to ensure consistency with other images of that type. For example, if you include data-flow diagrams, they should use the appropriate symbols.

  • Combining text and images can be particularly effective. Images are often enhanced by relating them to text.

  • Take the user's screen resolution into account, otherwise the details of the image could be lost.

  • Images, particularly photographs, can result in very large files and long download times for websites, so they should provide significant benefits for the user carrying out their task.

Review question 3

Consider the use of images in the following three cases. What additional benefits would the use of each image provide?

  • How could you use a picture to improve an employee record on a personnel system for a large company?

  • How could you use a diagram to add clarity to a screen-based control system for a car factory?

  • How could you use a graph or chart for a management information system providing data about absentee rates in a factory?

Answer
Comment
  • A photograph of the employee could be put on the record. This would mean that the personnel officer could readily identify the individual if she wanted to speak to him.

  • A diagram of the factory floor could be included. This could include all the machines, indicating their status and highlighting any problems that have arisen. Illustrating the positions of the different machines could help the operator to solve problems. For example, if one machine has broken down and there is an operational one nearby, then this could be used instead.

  • A bar graph could be generated that illustrates the level of absenteeism for each month in the year. This representation would make it much easier to spot the highs and lows. This information could be used for investigating why problems arise at particular times in the year.

1.5 Moving images

1.5.1 Different types of moving image

On paper, you can show movement by a series of diagrams each with a very small change. Figure 9 illustrates such a scenario. This has its uses, as it allows the process to be studied very carefully.

Figure 9 Techniques of calligraphy (Tufte, 1990, p.68)

You can achieve actual movement on the computer screen through animation or the use of video clips. To create an animation you need to understand the principles of animation and be able to use the relevant software. With video, in addition to having a video camera, you need to have editing software and a means of transferring the video from the camera to the computer. For both you need a lot of time and expertise, so only develop these components yourself if you are certain of their value to the user and it is not possible to buy them in from elsewhere.

People are used to seeing high-quality moving images on their television screens for several hours each day. They are therefore likely to expect similar quality on their UIs. Images that fail to meet this standard are unlikely to motivate users about the product. The cost of producing broadcast-quality video is very high, so it must serve a key purpose and not simply be expensive wallpaper.

Some moving images are clearly part of the UI and others are part of the content of the software. For example, an animation showing files flying from one folder to another would be part of the UI, but an animated advertisement on a web page would be part of the content of the page. Unfortunately, in many cases, it is very difficult to make a clear distinction of this sort. In addition, at present, most moving images are used in an unsophisticated way that requires very little interaction from the user. For these reasons, we struggled to identify sufficient examples for the next two sections that are clearly only part of the UI and are not content. However, the principles remain the same. In the next few years, the use of moving images is likely to become more sophisticated.

1.5.2 Using animation to good effect

You can use animation for the following purposes.

  • To illustrate movement. An example of this would be an educational program that teaches about the muscles a horse uses when it runs.

  • To provide dynamic feedback. For example, in some operating systems when you are copying a number of files, an animation appears that illustrates files flying from one folder to another. This is dynamic feedback, confirming that something is happening.

  • To attract attention. For example, an advertisement on a web page may include some movement in order to attract the user's attention. This can become a visual irritant.

  • To show that the computer system is operating. Dynamic screen savers are the most obvious example of this technique. Some kiosks simulate a user operating the system. This draws the attention of potential users and shows some of the functionality of the system.

Thus, animation is important and useful, but you should only use it when absolutely necessary.

Exercise 2
Timing: 0 hours 10 minutes

It takes a few seconds for mobile telephones to connect to the network. This causes some users to become anxious, as they think the telephone is not working. Draw an animation to be used on the screen that indicates that the telephone is trying to establish the connection. You can use a drawing or animation program, or simply sketch on paper.

Discussion

I found this quite difficult, as the screen is likely to be small and the concept is quite abstract. However, the time taken to connect can be disconcertingly long, so an animation could be reassuring. Figure 10 shows an animation of a telephone and a mobile telephone aerial, with arrows moving from the telephone to the aerial.

This will only be effective if users can recognise the images.

Figure 10 An animation for a mobile telephone

5.3 Using video clips to good effect

You can use video clips in many of the situations where you could use animation. However, video has the following additional uses.

  • To convey human behaviour and emotions. For example, a training package teaching customer care for a bank may show a clip of an angry customer coming into a bank. Being able to see his facial expressions and body language would provide a lot of additional information.

  • To show events that users cannot see directly. For example, video could be used to show the inside of a nuclear reactor or a recent historical event.

  • To motivate. For example, seeing a clip of the users of your software struggling with the UI should motivate you to improve it!

  • To provide additional contextual information. Animations tend to focus upon the particular sequence of events, whereas video usually also provides information about the location, the clothes people are wearing, and so on. This makes it essential to update video regularly, or the age of the package soon becomes apparent to users.

Over the next few years, as technology continues to develop, it is likely that the use of video clips will increase. They have already been used extensively in computer-based training and multimedia educational packages.

1.6 Sound

1.6.1 The role of sound

The use of sound is becoming increasingly common, particularly for the following types of application.

  • Applications where the eyes and attention are required away from the screen. Relevant examples include flight decks, medical applications, industrial machinery and transport. If you are a runner, you may have a heart rate monitor that allows you to monitor how fast your heart is beating. This is often indicated by an auditory beep, which speeds up as your heart rate increases. In some monitors, the beep stops when your heart is within the target range. This can be extremely off-putting as it is ambiguous: either you are within the target range or your heart has stopped beating altogether!

  • Applications involving process control. In some process control applications alarms must be dealt with, or continuous monitoring is required. In these situations the sound indicates a system change, which the user may need to attend to. For example, some print managers speak relevant phrases when problems occur, such as ‘out of paper’ or ‘printer jam’.

  • Applications addressing the needs of visually impaired users. Screen readers are particularly important for visually impaired users. These read out the content of the screen. It is important to follow certain layout conventions in order to make screen readers as usable as possible. The Bobby standard provides assistance with designing web pages for visually impaired users.

1.6.2 Different types of sound

Sounds come in four categories.

  • Sound effects. Many UIs contain a range of warning beeps and reassuring sounds confirming that operations have been completed. These can include naturalistic sounds, such as the sound of a piece of screwed-up paper dropping into a waste paper basket.

  • Music. Many composers use computer systems to compose music, and programs such as games make extensive use of music. Short sequences of musical notes are also used in devices such as car alarms.

  • Speech. This is the most demanding of the categories, as speech recognition and speech generation are technically complex.

  • Ambient sounds. All the sounds the computer makes act as feedback. For example, the clicks of the CD-ROM and hard disk drives confirm that it is operating correctly. So important are these mechanical sounds that, in some systems, they have been recreated where they do not occur naturally. For example, in some handheld computers, the software generates a clicking sound when a key on the keyboard is pressed.

We look at the first three of these categories below, concentrating on the information that they can communicate to the user.

Activity 4

List five different sounds that you hear when you use your computer.

Discussion

This will depend upon the computer that you are using. On my machine, I get mechanical sounds when I press keys on the keyboard and when I insert a CD-ROM. I also listen to music via the CD-ROM player. A short tune plays when I first switch on; and every now and then, when I make a mistake, I get a loud and irritating beep.

1.6.3 Using sound effects to good effect

Sound effects can communicate information in a variety of ways. In particular, they can do the following.

  • Reinforce the visual component of the UI. Thus turning a page on the screen could be accompanied by an appropriate sound. This could be taken even further in a children's program about animals, which could include sounds of lions roaring and elephants trumpeting.

  • Confirm the successful completion of an operation. For example, when my mobile telephone succeeds in connecting to the network, it beeps.

  • Attract attention. For example, a warning sound might be used to draw the user's attention to an error message displayed on the screen.

As these examples suggest, sound effects usually reinforce other types of output.

6.4 Using music to good effect

Music in UIs is relatively undeveloped, except in games and specialist packages designed for composers and musicians.

Some operating systems have a signature tune that is played automatically when they are loaded. This informs the user that the operating system has loaded correctly and creates a sense of identity, but can be annoying for the user if they have to listen to it repeatedly. A development on this use might be to signpost different parts of the program using musical clips.

The use of music can be evocative. In most films, the atmosphere is created and the viewer drawn in by music. For example, romantic music by Tchaikovsky or Rachmaninov may accompany a melancholy section in a film. Music could be used in this way in a computer-based presentation, possibly at the climax of a talk. However you would need to take care, otherwise it could seem manipulative. I have a war games package that plays martial music at the beginning with the clear intention of putting users in the mood to play. However, after the tenth time of hearing it, I was pleased that an off button had been provided.

1.6.5 Using speech to good effect

Speech output is a powerful way of communicating information. It has particular benefits for the visually impaired. For those whose eyesight is good, speaking lifts may seem a novelty, but they provide useful information and reassurance for the visually impaired. Some applications of the technology have less obvious benefits, such as supermarket checkouts that read out the product and prices. These were found to breach the customer's sense of privacy and to be noisy. Again, good design depends upon a good understanding of the users and the environment in which the technology is going to be used. Box 2 describes an interesting speech-based system, but how many customers would want their financial details broadcast to the high street?

One of the benefits of good-quality speech output over text is that it communicates tone of voice, pace and accent. In this way it provides more information and helps to make the speaker seem more real to the user. The tone of voice can differ according to the content of the message: a warning message could sound urgent and an information message could sound reassuring.

Box 2: Advanced automatic teller machines (ATMS)

Over more than 30 years, bank ATMs have transformed the way in which we carry out banking transactions. However, the basic interaction technology has remained unchanged, using a numeric keypad and some buttons arranged around a small monochrome screen. More recently, this has been augmented by sound output indicating when an action needs to be taken, such as removing the card from the machine.

This approach has worked very successfully, but there have been ongoing problems with security. In particular, stolen cards can be used in the machines if the PIN number is known. One way around this is the use of iris recognition. In such systems, the user is required to look into a camera. The camera then takes a photograph of the iris, the coloured area around the pupil, and analyses the complex patterns. These patterns are unique to an individual and hence allow the system to identify the user.

A system known as STELLA is being piloted by NCR in Canada. In addition to allowing for iris recognition, this also allows for speech recognition and generation. Thus, the user walks up to the machine and stands on a pressure sensitive mat that indicates her presence. Having carried out the iris recognition, the user speaks to the system and the system provides the information available. Thus there is no keypad or screen.

Drawn from NCR Press Release: 21 June 1999

Michaelis and Wiggins (1982) suggest that speech output is most effective when the following conditions are met:

  • message is simple

  • message is short

  • message will not be referred to later

  • message deals with events in time

  • message requires an immediate response

  • visual channels are overloaded

  • environment is too brightly lit, too poorly lit, subject to severe vibration or otherwise unsuitable for transmission of visual information

  • user is free to roam around

These guidelines assume that the output is digitised human speech or playbacks of tape recordings.

(See Shneiderman, 1988)

1.6.6 Problems with the use of sound

Pre-recorded digitised speech can be included in a UI relatively easily, but generating speech is harder. One of the methods for synthesising speech is called concatenation. The idea behind concatenation is that the computer stores sentences, phrases or word segments of real human speech. New sentences are constructed by arranging words in the right order. For example, with current telephone directory enquiry systems in many countries, after having made an enquiry of a human operator, a voice says something like: ‘the number you require is 273148’. The phrase ‘the number you require is’ is smooth and flowing (having been recorded in full by a human speaker). The number itself is rather jerky and stilted, as digital recordings of the individual digits are played back one after another.

Unlike the other media that we have considered, sound has the potential to intrude upon the environment. This can be overcome with the use of headphones, but not all users choose to use headphones and they are inadvisable in some hazardous environments. It is often a good principle to allow users to change the volume, switching it off altogether if necessary.

Sound is not good at conveying detailed information, such as describing events, unless accompanied by video or still images, and it is often difficult to remember precisely. To maximise its effects, it is often best to combine sound with other media.

Exercise 3
Timing: 0 hours 15 minutes

Imagine that you are designing a multimedia information kiosk for a leisure centre. The kiosk is intended to give information about the different facilities that are available, and to provide lists of times and prices. Give two different ways in which you could use each of the following media: video clips, animation, images and sound. Explain the advantages of each.

Discussion
  • Video clips. A talking head of the manager could be used to welcome users to the leisure centre. This would (hopefully) inspire them to use the facilities. Short clips could also be shown of the swimming baths, gymnasium and other facilities. These would give a real sense of what the facilities are like.

  • Animation. Animation could be used to attract the attention of passers by — there could be a rolling animation that shows that the system is operating. Many of the users will be using the kiosk for the first time, so it may be helpful to have animations, indicating what to do. Thus a button that must be pressed in order to proceed may have an arrow that repeatedly moves towards it.

  • Images. Photographs of staff members could be used, as could illustrations of the facilities. These would help the leisure centre to seem more attractive and friendly.

  • Sound. Music could be used in combination with the animation intended to attract passers by. Recordings from the different facilities could also be used. For example, the description of the swimming pool could be accompanied by sounds recorded by the pool. This could make the pool sound a happy and interesting place to be.

Conclusion

This free course provided an introduction to studying Computing and ICT. It took you through a series of exercises designed to develop your approach to study and learning at a distance and helped to improve your confidence as an independent learner. 

References

Eyewitness Travel Guide (1997) Amsterdam. London, Dorling Kindersley. pp. 120-1.
Götz, V. (1998) Color and Type for the Screen. Berlin, RotoVision (in collaboration with Grey Press).
Hartley, J. (1994) Designing Instructional Text. 3rd edn. London, Kogan Page.
Michaelis, P. R. and Wiggins, R. H. (1982) ‘A human factors engineer’s introduction to speech synthesisers’. In Badre, A. and Shneiderman, B. (eds) Direction in Human–Computer Interaction. Norwood, NJ, Ablex. pp. 149–78.
Rivlin, C., Lewis, R. and Davies Cooper, R. (eds) (1990) Guidelines for Screen Design. Oxford, Blackwell Scientific.
Tufte, E. R. (1990) Envisioning Information. Cheshire, CT, Graphic Press.

Acknowledgements

Except for third party materials and otherwise stated (see terms and conditions), this content is made available under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 Licence

Course image: Kjetil Korslien in Flickr made available under Creative Commons Attribution-NonCommercial 2.0 Licence.

This chapter is taken from: Stone, D., Jarett, C., Woodfoffe, M. and Minocha, S. (2005) User Interface Design and Evaluation, Morgan Kaufmann Publishers/Elsevier. Copyright © The Open University

Grateful acknowledgement is made to the following sources for permission to reproduce material within this product.

Figure 3 Gotz, V., (1998) Color and Type for the Screen, Rotovision SA;

Figure 4 Reprinted by permission, Tufte, E., (1990) Envisaging Information, Graphics Press;

Figure 5 Canadian Hydrographic Service, Department of Fisheries and Oceans;

Figure 7 Eyewitness Guide – Amsterdam, Dorling Kindersley © 1995, 1997, Dorling Kindersley Ltd;

Figure 9 Kayu Hirata and Tsugi Shiki Shi (1974) Techniques in Calligraphy, Nigensha Publishing Co., Ltd;

Tables 2, 3 and 4 Gotz, V., (1998) Color and Type for the Screen, Rotovision SA;

Every effort has been made to trace all copyright owners, but if any have been inadvertently overlooked, the publishers will be pleased to make the necessary arrangements at the first opportunity.

Don't miss out:

If reading this text has inspired you to learn more, you may be interested in joining the millions of people who discover our free learning resources and qualifications by visiting The Open University - www.open.edu/ openlearn/ free-courses