Skip to content
Skip to main content

About this free course

Download this course

Share this free course

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

Start this free course now. Just create an account and sign in. Enrol and complete the course for a free statement of participation or digital badge if available.

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?



  • 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.