A PICTURE IS SMALLER THAN A THOUSAND WORDS

Aus DPWiki - The Design Pattern Wiki

Illustration

Well chosen pictures like the icons on Palm m505 are smaller and faster graspable than the corresponding words.

Context

…you want to design a MOBILE APPLICATION for a handheld device. Now you think about how elements like controls should be designed.

Problem statement

How should you represent common controls and items?

Problem description with forces

One possibility to display common controls is to represent them by words (repeated on every screen).

However, words can take up lots of space which is especially limited on small devices.

Words also need to be translated for international interfaces to make them understandable in different languages.

Examples

The Palm diary application has four views which are chosen using simple icons at the bottom left of the screen. The association from views to icons is obvious in the design of the icons, which are like miniaturized version of each view.

Here is an enlargement of the icons:

And here are the four views (one day/one week/one month/day plus todo items):

Solution

Therefore:

Use pictures! People like pictures, especially in color and they are confronted with pictures all the time.

By replacing text with well chosen pictures, you can provide just as much information as contained in the text.

Judicious use of easily understood icons can enhance the usability and overall user experience of an application's user interface. Icons can provide quick and easily understood graphical cues to functions and status of information, while at the same time conserving space and improving the look and feel [1].

However icons are sometimes less intuitive than the words they represent, users will need to learn what the icons mean and obscure icons for uncommon commands will never be learned. So think well about when you use icons for common controls and what icons you use.

Diagram

References

How big icons and other common controls should be designed is described in BIG THUMB.

To provide a textual description to icons that is only displayed when needed, use TOOLTIPS.

Notes

This pattern was adopted from Charles Weir and James Noble [2]. It was modified to be adapted to the structure and format of this pattern language and supplemented where necessary.

Literature and Links

1. SAP Labs Japan (Oct. 2003): SAP Style Guide for White-Collar Worker PDAs - Icon Library, Version 1.0 02/10/03; http://sapdesignguild.org/resources/sg_White-CollarWorkerPDAs/index.htm <LI>Weir, C. and Noble, J. (2001): A window in your pocket - Some small patterns for user interfaces. In Proceedings of the European Conference on Pattern Languages of Program Design, EuroPloP 2001. The Hillside Group, Inc. </OL>