Pictograms, Icons and Symbols

Pictograms, icons and symbols are widely used components of user interfaces in ICT applications and services, e.g. for navigation, status indication and function invocation. Examples of such applications and services include information retrieval (e.g. websites), messaging (e.g. email and SMS), public services (e.g. public telephones and ATMs) and real time communication services (e.g. fixed and mobile telephony). However, the inappropriate use of graphical icons, symbols and pictograms can seriously reduce usability.


Types of pictograms, icons and symbols

Icon

Icons used by the BBC on their websiteWithin the field of human-computer interaction, an icon is a graphic on a visual display terminal that represents both functions (actions) and objects on the computer system.

Icons may represent a file, folder, application or device on a computer operating system. In modern usage today, the icon can represent anything that the user wants it to: any macro command or process, mood-signaling, or any other indicator. User friendliness demands error-free operation, where the icons are distinct from each other, self-explanatory, and easily visible under all possible user setups.

Earcon

An earcon is a brief, structured sound pattern (known as musical motives), used to represent a specific item or event but is not to be confused with an auditory icon.

Although likely to be used in a computer/user interface, an example could also be a five-day weather forecast on a local news programme where each day's temperatures set the pitches in a five tone sequence. Earcons are generally not auditory caricatures of the specified item or event, that is, they are abstract rhythmic / melodic patterns rather than everyday sounds.

Earcons are generally synthesized sounds, while auditory icons are usually recorded from existing everyday occurrences

Auditory icon

Auditory information which uses a real world, easily understood non-speech sound to communicate information.

Emoticons (or emotional symbols)

Graphical symbols or ASCII characters that convey emotions or emphasize the communication by messages. An example of a well known emoticon is a smiley face :-) or a frowning face :-(

In web forums, instant messengers and online games, text emoticons are often automatically replaced with small corresponding images. Similarly, in some versions of Microsoft Word, the Auto Correct feature replaces basic smileys such as :-) and :-( with a single smiley-like character. Originally, these image emoticons were fairly simple and replaced only the most straightforward and common character sequences. Emoticons have now expanded beyond simple cartoon facial expressions to a variety of still or moving images. Some of these graphical emoticons do not actually represent faces or emotions; for example, an "emoticon" showing a guitar might be used to represent music. Further, some instant messaging software is designed to play a sound upon receiving certain emoticons.

Examples of emoticons used in MSN and their ASCII characters

Multimodal

Multimodal interfaces combine various communication channels, for example, sound, graphics, video, speech, force and vibration.

Pictogram

A pictogram or pictograph is a symbol representing a concept, object, activity, place or event by illustration.

Pictograms remain in common use today, serving as signs or instructions. Because of their graphical nature and fairly realistic style, they are widely used to indicate public places such as, public toilets, airports and train stations.

A standard set of pictograms (see diagram below) was defined in the international standard ISO 7001: Public Information Symbols.

Examples of the pictograns defined in ISO 7001

Symbol

A symbol can be an object, picture, written word, a sound, or particular mark - that represents something else by association, resemblance, or convention, especially a material object used to represent something invisible. Symbols indicate or serve as a sign for and represent ideas, concepts, or other abstractions. For example, in some countries, a red octagon is the symbol that conveys the particular idea of "STOP". Other common examples of symbols are the symbols used on maps to denote places of interest, such as crossed sabres to indicate a battlefield.

Design of icons and symbols

Well-designed icons and symbols can have the following advantages over written commands and labels. They can be:

Simplicity

Icons used for ICT interfaces must be easy to understand. Currently the 'enter' button on most keypads uses a 'return' arrow which is a left-over from the old style typewriters where this icon indicated a 'carriage return'. The meaning is not obvious unless you are old enough to remember moving carriage typewriters.

However, the use of a simple icon, such as the 'return' arrow, is approved of by the Apple Human Interface Guidelines (2008) as they recommend using one easily recognisable object, because the basic shape or silhouette of an icon can help users to quickly identify it. Ziegler and Fähnrich (1988) also state that graphical symbols should be constructed with as few graphical components as possible - usually not more than 2 or 3 components.

Icons such as the icon for on/off seem to evolve with little thought to the difficulties users might have in understanding them. In many cases it would be better to use the appropriate words rather than leave the users to guess the meaning of the icons. This latter suggestion has been confirmed by an investigation carried out by Fennell (2007) into icons and labels for buttons on audio devices, which revealed that partially sighted people show a significant preference for the button to be labelled with a word, rather than an icon, when possible.

Size

According to the ETSI standard 201 379 (1998), no general recommendation can be given on the minimum acceptable size of an icon, this is because what is acceptable depends on a number of parameters:

For this reason, the best way to assess the minimum acceptable symbol size is to design the symbol and test it with test subjects from the relevant user target population.

Shape

According to the ETSI standard 201 379 (1998), on some equipment, particularly small machines, special manufacturing considerations or lack of space preclude the use of graphical symbols of the exact recommended shape. In such cases, the design of the graphical symbols used may be modified provided that their pattern differs as little as practicable and still conveys clearly the intended meaning.

Colour

Colour can be informative when used to link information as long as it is used in moderation. It does this by linking elements together, to indicate organisation and relationships. Colour helps in searching tasks by drawing attention.

The Apple Human Interface Guidelines (2008) recommend using colour "judiciously to help the icon tell its story". Colour should not be added just to make the icon more colourful and smooth gradients typically work better than sharp delineations of colour. Optimally 2 - 4 colours should be used.

Users also look at a colour to be able to identify its purpose. For example, red can be associated with 'stop' or 'danger' but a significant proportion of the male population in the UK is red/green colour blind. Some people with retinitis pigmentosa may have difficulties reading a red display. A lesser proportion of the population is blue/yellow colour blind. Therefore use of colour alone to signify a meaning should be considered carefully.

Adequate contrast between symbol and background is essential. Woodson (1981) recommends that some type of border should always be used around a symbol to prevent it from blending with background images.

An investigation by Fennell (2006) into personal preference for the colour contrast of icons revealed a preference for the following colour contrast option: black icons on a white button, with a black surround.

Image showing preferred colour contrast option with black icons on white buttons with a black surround.

In cases where a black/white colour combination is not used, black can be replaced by another dark colour (such as navy blue or dark brown). Similarly white can be replaced by another light colour (such as cream). The contrast of the icon and the button should be kept as high as possible.

Positioning icons and symbols on devices

Photo of a lady peering closely at a screen to identify text and iconsThe position of labels with text or icons is crucial for an unfamiliar user with impaired vision. All too often labels are positioned in a way that they are obscured from the user's view when the controls are being operated. The problem is particularly common when the control panel is at an acute angle to the user's line of sight or at an inappropriate distance. When deciding on the positioning of graphics or labels, the way people who are left handed use the controls should also be considered. Also, many people with low vision like to get their face close to the control panel to read the labels, or use face-mounted or hand-held magnifiers.

 

Checklist for pictograms, icons and symbols

Recommendations

Visual graphics

Visual animations

Speech output

Non-speech audio output

Vibro-tactile icons

Kinaesthetic output

Multimodal symbols

Relevant standards

Further information

Acknowledgements

Picture acknowledgements

The author would also like to thank Richard Hodgkinson for his additional comments and ideas.

Last updated: 20.11.2009   © Copyright reserved    Website design: Digital Accessibility Team