How do you create a strong visual hierarchy?

People look at faces and the center early. Then objects that feel closer and high contrast.

A design's visual hierarchy is how a designer directs your eyes to the most important element first, down to the least important. In a strong visual hierarchy, many different people will look at the elements of a design in the same sequence. A strong visual hierarchy may also help people process your design faster.

There is good research on what design features attract eyeballs at all (visual salience), but less on what influences the order of those eye fixations (scanpaths). Existing research suggests the following lose priority of influence:

1. Faces are highly likely to be noticed early in scanpaths.

2. The Center of a design is seen earlier (called the "center bias").

3. Depth cues: Objects that feel near are noticed before those that feel far (which could also account for big things being seen before small things).

4. Local contrast: Eyes are likely to fixate on areas that are different from their immediate surroundings.

5. Attentional templates: You look where you've had success looking before.

Note that these factors may be processed in parallel, so consider using multiple dimensions at once (e.g., a big face in the center). And avoid target/distractor interference, where important objects share features with unimportant objects, as this slows down processing (e.g., you want an important circle over an unimportant square, not an important square over an unimportant square).

Have a question or comment? Let us know.