Visual Hierarchy User Experience (UX) topic overview/definition

Visual Hierarchy: Concept Definition

Visual hierarchy is the order in which a user processes information on a page; its function in user interface (UI) design is to allow users to understand information easily. By assigning different visual characteristics to sections of information (e.g., larger fonts for headings), a designer can influence what users will perceive as being further up in the hierarchy.

The visual characteristics that a designer can use to influence users’ perception of the information are:

  • Size: the larger the element, the more attention it will attract
  • Color: bright colors are more likely to draw attention over muted ones
  • Contrast: dramatically contrasted colors will catch the eye easily
  • Alignment: an element that breaks away from the alignment of others will attract more attention
  • Repetition: repeating styles can give the impression that content is related
  • Proximity: closely placed elements will also appear related
  • Whitespace: more space around elements will attract the eye toward them
  • Texture and style: richer textures will attract more attention than flat ones

When information design does not have a strong visual hierarchy, a user’s eye follows a predictable reading path. This path is culturally influenced, as it is connected to the standard reading direction of written text. In the Western world, two main left-to-right paths exist, which can be described as a Z and an F pattern. A designer has the opportunity to use visual hierarchy to reinforce these natural paths, or deliberately use visual characteristics to break such patterns so as to draw the viewer’s attention to a focal point. Thus, the successful manipulation of this hierarchy empowers designers to lead users, quite literally, along a cleverly devised visual journey to a goal.

For your convenience, we’ve collected all UX literature that deals with Visual Hierarchy. Here’s the full list: