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:
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.
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. |