Textbook of Usability

Visual hierarchy is the arrangement and styling of elements to convey their relative importance. A well-designed hierarchy guides the viewer's eye through the page in the intended order, making the most important content most prominent and secondary content recede.

The tools of visual hierarchy:

• Size — larger elements are more important
• Contrast — high-contrast elements dominate low-contrast ones
• Colour — saturated or warm colours attract attention
• Position — top and left (in LTR languages) receive attention first
• Whitespace — isolation emphasises importance
• Typography — bold, italic, or distinct typefaces signal emphasis
• Alignment — consistent alignment creates grouping; exceptions draw the eye

Visual hierarchy draws on many principles from earlier chapters:

• Pre-attentive processing makes distinctive elements pop out
• Gestalt principles organise related elements into groups
• Fitts's Law favours large primary actions for frequent use
• Cognitive load theory favours clear priority to avoid extraneous load

Well-designed hierarchy allows users to understand the structure of a page before reading any content. Glancing at a well-designed article, the viewer can identify the title, key headings, call-to-action, and body text without reading a word. Poor hierarchy forces users to read everything to figure out what matters.

Visual hierarchy is one of the first skills taught to designers but remains one of the most frequently violated principles in practice. The temptation to make everything important results in nothing being important.