# Visual symbols

Required by pattern Explorable interface
May require pattern Clickable symbols, Symbol explanation

 ...seventy percent of a human's sensory input is based on vision, and Explorable Interface interfaces are highly dependent on this visual component.

==> The visual display of data is the most efficient way to communicate information. However, you must not overwhelm the user with useless data or misleading metaphors. <==

From the beginnings of human culture, visual awareness has been a key element to communication. From cave drawings to the printed word, the visual record has outlasted all other forms of communication.

People are easily overwhelmed by visual stimuli. Overly complex symbols and phrases require more time to recognize and understand. Also, Misleading or vague metaphors can cause the user to make critical mistakes, or cause the user to second guess what you had intended.

An interface with a series of pushbuttons, which are labeled F1 through F8, is an example of a very literal translation of a hardware solution, but is not as helpful or friendly as it could be.

At the other end of the spectrum are overly clever icons: a piggy bank with a coin hovering above it representing a 'save' function, or a badly cracked piggy bank spilling coins representing an 'open' command. Here the programmer was thinking visually, but the the metaphor was too obscure.

Therefore:

==> Design the interface based on visual cues that are recognizable and understandable by the target audience. Determine if standard symbols (e.g. ISO or IEEE symbols) exist before creating your own. Examine existing applications in the same problem domain. Resist being overly clever and keep your metaphors simple. <==

The tricky part is _thinking visually_. Paul Heckel [Heckel 91] states that:

> Our instincts and training as engineers encourage us to think logically instead of visually, and this is counterproductive to friendly design.

Fractal Design's Dabbler program, which was designed for novice artists and children, makes good use of visual cues. The program is rich in symbols for paint brushes, pens, and markers. Even traditional pull down menus are represented as paint boxes. The use of metaphor here is engaging as well as easily understandable.

Good World Wide Web sites utilize visual symbols creatively. The National Weather Outlook at http://www.intellicast.com displays a map of the United States with symbols, on major cities, that give you quick indication of the current weather condition.

Help the user associate symbols with the function through the use of Clickable symbols. Providing Symbol explanations will help the user understand the meaning of the symbol...