Unless otherwise stated, copyright © 2022 The Open University, all rights reserved. Show
Designing the user interface: text, colour, images, moving images and soundIntroductionWhy 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
1 Devices1 1 Getting the best from interaction devicesOnce 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.
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 Text2.1 The role of textText 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 1Look 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.
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 textText has a number of technical advantages over 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 effectTwo aspects of the use of text are:
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).)
Figure 1 Different typefaces (from Götz, 1998) Figure 2 Text that is difficult to read Show description|Hide description Figure 2 Text that is difficult to read Figure 2 Text that is difficult to read Review question 1Figure 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. AnswerComment The following describes how we would modify the text:
1.3 Colour1.3.1 The role of colourWe can use colour in the following ways.
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 colourScreens 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 connotationsWhen 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 2Table 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.
Table 1: Connotations of different colours
(Götz (1998) with modifications by the course team) AnswerComment 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.
1.3.4 How to use colour to good effectThe 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
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
from Götz, 1998 Intrinsic brightness has some important implications.
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 informationAll 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
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 oceansFigure 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 1Timing: 0 hours 10 minutes How effectively is colour used in Figure 6? (Or your own online calculator?) Take into account the following points:
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 2Microsoft 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.
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 Images1.4.1 The role of imagesWe can use images in several ways.
In this section we concentrate on communicating information. Activity 3Flick 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.
4.2 Using images to good effectThe following are the main types of image.
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.
Review question 3Consider the use of images in the following three cases. What additional benefits would the use of each image provide?
AnswerComment
1.5 Moving images1.5.1 Different types of moving imageOn 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 effectYou can use animation for the following purposes.
Thus, animation is important and useful, but you should only use it when absolutely necessary. Exercise 2Timing: 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 effectYou can use video clips in many of the situations where you could use animation. However, video has the following additional uses.
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 Sound1.6.1 The role of soundThe use of sound is becoming increasingly common, particularly for the following types of application.
1.6.2 Different types of soundSounds come in four categories.
We look at the first three of these categories below, concentrating on the information that they can communicate to the user. Activity 4List 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 effectSound effects can communicate information in a variety of ways. In particular, they can do the following.
As these examples suggest, sound effects usually reinforce other types of output.
6.4 Using music to good effectMusic 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 effectSpeech 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:
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 soundPre-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 3Timing: 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
ConclusionThis 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. ReferencesEyewitness 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. AcknowledgementsExcept 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 Copyright © 2016 The Open University What action must you take to allow a graphic to be moved freely?Double-click the picture to add it to your Word document. Back on Word's editing screen, right-click the image that you just added and select Wrap Text > In Front of Text from the menu. Your picture is now freely movable. Drag and drop it anywhere you want in your document.
When a document is inserted Word inserts the document at the location of the insertion point?When a document is inserted, Word inserts the document at the location of the insertion point. To add the most recently defined border with one click, use the Border arrow. You can change column width by dragging the column's boundary. The Office font set uses Book Antiqua for headings and Century Gothic for body text.
Are letters that look like capital letters but are not as tall as a typical capital letter?In typography, small caps (short for "small capitals") are characters typeset with glyphs that resemble uppercase letters (capitals) but reduced in height and weight close to the surrounding lowercase letters or text figures.
Which font is part of the office font set?(T/F) The office font set uses Book Antiqua for headings and Century Gothic for body text.
|