[ Previous | Next | Contents | Glossary | Home | Search ]
Motif and CDE 2.1 Style Guide

Visual Priority

Visual priority refers to the priority of elements, or what elements on the screen appear most important to the user. Because of their visual nature, some elements appear more important than others. The following guidelines ensure that what users perceive as most important is actually what is most important:

  1. Determine what information is important.

    User interviews and task analysis enable you to determine what information is important to users, the feedback they need, and the elements they look for.

  2. Determine the best combination of the visual variables to communicate important information.

    Visual priority changes as the user interacts with the system and moves from task to task. When an element becomes important to a task, it should become more noticeable than when it is not needed.

You can achieve visual priority with the visual variables described in "Visual Variables". You can use visual variables alone or together. Table 6 shows some of the ways visual variables convey priority:

Table 6. Visual Variable Priorities
Visual Variable Priority
Color If the background layer of less important elements is composed of neutral, low-contrast colors, adding saturation and contrast to the color of an element elevates it.
Shape In an interface that is full of rectangles, changing the shape or orientation of an element makes it more noticeable and, therefore, more visually important. Also, adding animation to an interface element elevates it to the highest visual priority.
Size The amount of space an element, or many elements of a type of element, occupies can be a size variable. When one type of element occupies more space than others, that type becomes the dominant element type.
Contrast When one element is smaller or different from other elements, it is not necessarily de-emphasized. It can be an anomaly and therefore more apparent. For example, if you have a composition made up of large elements of white, black, and grey, and you incorporate one small dot of red, the eye is attracted to the small red dot because it is an anomaly of both size and color.

[ Previous | Next | Contents | Glossary | Home | Search ]