Visual Hierarchy
The processing of visual characteristics has a hierarchy. To better understand what variables influence this visual hierarchy, an eye tracking study was conducted (Faraday, 2000). The main factors were found to be size, scanning, images, text style, and position.
This evidence of how a person processes information on a Web page demonstrates the importance that visual characteristics have in the accurate delivery and understanding of information.
Visual Hierarchy findings: (Faraday, 2000)
Size
- Larger text dominates over smaller; and act as successful entry points.
- Images must be much larger than text to act as an entry point. Don't rely on users looking at images first.
Scanning
- Left-right, top-bottom reading order was found for text & bullets, but not between images, titles or links.
- Discontiguous areas of common background color did not cause sequencing e.g. subjects did not shift between the left & bottom regions, even if they share a
background color. Use a contiguous, same colored region if content is to be related.
Images
- If text and images are of similar size then text is more likely to be an entry point. One caveat here is image content : logos may not work well. However, also found titles preferred as entry points over images.
Text style
- Text style is secondary to size : normal sized text rarely acted as entry point, even if bold or a hyperlink. Use a larger font for important details.
- Bold and Hyperlink text were looked at for longer than normal text. Use text style to draw out content
Position
- The middle / top of the page seems to be dominant ; the left hand column and bottom are secondary.
- Beware that text at bottom of the screen is rarely seen. Place important content at the top of the page.
Above text is excerpted from:
Faraday. Visual Paths and Learning. accessed 2017 http://www.cofc.edu/~learning/visualhier.html