Pattern 57: Words before icons
AKA:

Back to Diagram 1 - Getting started Back to Diagram 2 - Useability Back to Diagram 3 - Adding detail Back to Diagram 4 - Workflow/security

View sensitizing image - tbd

You already display CONTENT BEFORE GRAPHICS (55) but now you want to include images that represent icons that are clickable. You understand the need for clarity and simplicity: KISS (38).

Even when an icon or small graphic downloads quickly it should still be supported by words. The page should be clickable as early as possible, so download the words first.

Therefore

It is usually a good idea to reinforce icons with words. Download the words first.

This pattern is related to THE HALT AND THE LAME AND THE STRANGER AT THE DOOR (51), SHORT TEXTS (44), and INTERNATIONALIZATION (52).


Discussion - forces - known uses

Icons are culturally specific and their use depends on background knowledge that may not be shared by all users. For example, consider the symbol shown in the figure below for a moment. You either know what it means immediately or, I suggest, will never guess. Here is a clue. Most European or American readers over 40 will have used a device with this icon in its interface.

Figure 57.1 An icon [refer to book]

Browse the language What is Wu? Look at an example pattern sequence Structure of the patterns
Comment on Wu Contributors Return to TriReme home page Links to related sites