• Small text Medium text Large text
  • Default colours Black text on white background Yellow text on black background
Cardiac-eu.org

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:

  • more distinctive;
  • more efficient for denoting spatial attributes;
  • easier to recognise and remember over long periods of time;
  • easier and faster to learn when the size of the symbol set is small; and
  • language independent

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:

  • The user
  • Viewing distance between the user and the interface
  • The complexity of the symbol: a simple symbol with one or two elements (e.g. the ISO/IEC symbol for on/off) can be reduced to a very small size and still recognized by most people while a complex one may not
  • The display qualities of the medium including: the resolution, the contrast, the focus and glare
  • The viewing conditions including environmental factors such as poor illumination, and physiological and psychological factors such as fatigue and workload.

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.

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

  • Symbols should match the medium
  • Symbols should create the illusion of manipulatable objects, e.g., it should be clear that they can be selected, how to select them and be obvious when they are selected
  • Graphical symbols should be constructed with as few graphical components as possible (usually not more than 2 or 3 components)
  • Symbols should always be presented upright
  • Smooth gradients of colour typically work better than sharp delineations
  • The symbol stands out from the background
  • Ensure that each icon is distinct from, and clearly visible within, a surrounding group of symbols
  • Symbols should be designed according to a grid, or a basic pattern as human perception is sensitive to optical weight. Thus symbols sharing the same pattern are more easily recognized, and provide a feeling of unity and of consistency
  • Angles smaller than 30° as well as filled areas are avoided

Visual graphics

  • Make icons highly discriminable
  • An icon should remain comprehensible and discriminable through any changes in appearance due to changes in its state or mode
  • Do not overlap icons
  • Do not differentiate by colour alone
  • The visual appearance of icons should be consistent within the set of icons
  • Label icons consistently

Visual animations

  • Animation should not reduce the comprehensibility and recognisability of an icon
  • Animate within icon boundaries so as not to occlude other icons or obscure the user's context
  • Keep animations simple
  • Do not animate automatically

Speech output

  • Offer a summary or outline of a page
  • Present information in a logical order
  • Use different voices for different interface elements
  • Simulate human voices as much as possible
  • Do not exceed 160 words per minute
  • Present messages serially
  • Experienced users should be able to reduce the number of prompts
  • Eliminate non-relevant speech

Non-speech audio output

  • Use real world sounds whenever possible
  • The pitch should be within the hearing range (minimum 125 Hz to 150 Hz, maximum of 5kHz)
  • Use a clear and easily understood metaphor
  • Keep earcons as short as possible
  • Put a gap between consecutive earcons
  • Provide active training or an intelligent help facility

Vibro-tactile icons

  • The human skin is most sensitive around 250 Hz, and stimuli should be between 50 and 400 Hz
  • Do not use more than 4 intensity levels
  • Do not use more than 9 frequency levels
  • Ensure that the stimuli are not painful after prolonged use
  • The user should be able to adjust the stimulus intensity
  • Provide a facility for turning off tactual output for users who find it annoying
  • Minimise audio noise from the tactual display

Kinaesthetic output

  • Ensure that the output is easily discriminated by the potential users
  • Provide exploration strategies
  • Provide navigation information

Multimodal symbols

  • Serial events in different modalities must have a natural sequence
  • Use a modality to present information it is well suited to present, and allocate each different part of the information conveyed in a symbol to the modality it suits best

Relevant standards

  • BS 8501 (2002) Graphical symbols and signs. Public information symbols
  • BS 8502 (2003) Graphical symbols and signs. Creation and design of public information symbols. Requirements
  • ETSI EG 201 379 (1998) Human Factors (HF); Framework for the development, evaluation and selection of graphical symbols
  • ETSI EG 202 048 (2002) Human Factors: Guidelines on the Multimodality of Icons, Symbols and Pictograms
  • ETSI EN 301 462 (2000) Symbols to identify telecommunications facilities for deaf and hard of hearing people
  • ETSI ES 202 432 (2006) Human Factors (HF); Access symbols for use with video content and ICT devices
  • ETSI ETS 300 375 (1994) Human Factors (HF); Pictograms for point-to-point videotelephony
  • ETSI TR 070 (1993) Human Factors (HF); The Multiple Index Approach (MIA) for the evaluation of pictograms
  • IEC 60417 Graphical symbols for use on equipment
  • IEC 60878 (2003) Graphical symbols for electrical equipment in medical practice
  • ISO 11429 (1996) Ergonomics - System of auditory and visual danger and information signals
  • ISO 3461 General principles for the creation of graphical symbols.
  • ISO 7000 (1989) Graphical symbols for use on equipment.
  • ISO 7001 (1991) Public information symbols.
  • ISO 7239 (1990) Development and principles for application of public information symbols.
  • ISO 9186-1 (2007) Graphical symbols - Test methods - Part 1: Methods for testing comprehensibility
  • ISO 9186-2 (2008) Graphical symbols - Test methods - Part 2: Method for testing perceptual quality
  • ISO/IEC 11581 (2000) User symbol interfaces and symbols: Icon symbols and functions
  • ISO/IEC 13251 (2004) Information technology - Collection of graphical symbols for office equipment
  • ISO/IEC 18035 (2003) Information technology - Icon symbols and functions for controlling multimedia software applications
  • ISO/IEC 19765 (2007) Information technology - Survey of icons and symbols that provide access to functions and facilities to improve the use of information technology products by the elderly and persons with disabilities
  • ISO/IEC 80416-1 (2008) Basic principles for graphical symbols for use on equipment - Part 1: Creation of symbol originals
  • ISO/IEC 80416-2 (2002) Basic principles for graphical symbols for use on equipment - Part 2: Form and use of arrows
  • ISO/IEC 80416-3 (2002) Basic principles for graphical symbols for use on equipment - Part 3: Guidelines for the application of graphical symbols
  • ISO/IEC 80416-4 (2005) Basic principles for graphical symbols for use on equipment - Part 4: Guidelines for the adaptation of graphical symbols for use on screens and displays (icons)
  • ISO/IEC Guide 74 (2004) Graphical symbols - Technical guidelines for the consideration of consumers' needs
  • ITU-T E.121 (1996) Pictograms, symbols and icons to assist users of the telephone service
  • ITU-T E.920 (1995) Procedures for designing, evaluating and selecting symbols, pictograms and icons. Part 1 Design principles and symbols for the user interface
  • JIS S 0032 (2003) Guidelines for the elderly and people with disabilities - Visual signs and displays - Estimation of minimum legible size for a Japanese single character
  • JIS T 0103 (2005) Design principles of pictorial symbols for communication support

Further information

  • Addullah, R. & Hubner, R. (2006) Pictograms, icons and signs: a guide to information graphics. Thames and Hudson.
  • Brewster, S. A., Wright, P. C. & Edwards, A. D. N. (2008) Guidelines for the creation of earcons. [accessed 07/11/08].
  • Buxton, W., Gaver, W. & Bly, S. (1994) Auditory icons. In: Buxton, W., Gaver, W. & Bly, S. Auditory interfaces: the use of non-speech audio at the interface.
  • Fennell, A. (2007) A short investigation into icon preference for volume buttons: Part 2. [accessed 04/11/08].
  • Fennell, A. (2006) A short investigation into icon preference for volume buttons: Part 1. [accessed 04/11/08].
  • Hodge, S. (n.d.) 7 principles of effective icon design. [accessed 07/11/08].

Acknowledgements

  • Apple (2008) Human interface guidelines: creating icons. [accessed 07/11/08].
  • Clarke, A. M. ed. (1996) Human Factors guidelines for designers of telecommunications services for non-expert users. HUSAT Research Institute LUSI Consortium.
  • ETSI EG 201 379 (1998) Human Factors (HF); Framework for the development, evaluation and selection of graphical symbols
  • Fennell, A. (2007) An investigation into audio device icon preference. [accessed 04/11/08].
  • Fennell, A. (2006) A short investigation into colour contrast preference for buttons. [accessed 04/11/08].
  • Gill, J. (2000) Which button? designing user interfaces for people with visual impairments. [accessed 04/11/08].
  • Wikipedia (2008) Earcon. [accessed 07/11/08].
  • Wikipedia (2008) Emoticon. [accessed 07/11/08].
  • Wikipedia (2008) Icon (computing). [accessed 07/11/08].
  • Wikipedia (2008) Pictogram. [accessed 07/11/08].
  • Wikipedia (2008) Symbol. [accessed 07/11/08].
  • Woodson, W. E. (1981) Human factors design handbook. New York: McGraw-Hill.
  • Ziegler, J. E. & Fähnrich, K. P. (1988) Direct manipulation. In: Helander, M. ed. Handbook of
    Human-Computer Interaction. Amsterdam: North-Holland.

Picture acknowledgements

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