What is visual hierarchy in UX? 7 key principles

What is visual hierarchy?

The way design elements are arranged to guide the user’s attention and support them in understanding what is being displayed on the app or website is referred to as the visual hierarchy. Visual hierarchy plays an integral role in user-centred design, with seven key principles often being harnessed to support the structure of information architecture – the flow of the content.

The seven key principles of visual hierarchy are:

1. Size and scale
2. Colour and contrast
3. Alignment and spacing
4. Typography and font
5. Imagery and iconography
6. Layout and composition
7. Movement and animation

#1 Size and scale

Selecting certain design elements to be more dominant in terms of size or scale compared to other aspects can encourage a user’s gaze to focus on specific areas of a screen display, whether that be a mobile, desktop or any other device. Headings and call-to-action buttons are often more prominent, whereas less emphasis is placed on secondary details, which are more likely to be smaller in size and scale. This design principle is one of the most common ways to establish the visual hierarchy in web design and acts as the visual scaffolding for the information architecture.

#2 Colour and contrast

A clear distinction can be made between elements in user interface design by selecting contrasting colours. Implementing this principle can influence the attention of a user, again guiding them in how to interact with the design. Saturated or bright colours usually stand out more than those that are muted, so it makes sense that the most vital elements within the design are bold and vibrant in colour, to ensure they stand out. 

#3 Alignment and spacing

The overall visual organisation of a design relies heavily on alignment and spacing. When design elements are spaced evenly and aligned in a considered way, a sense of calm and order prevails, which makes scanning information easier for users and enables them to quickly comprehend the details. When the alignment and spacing are consistent throughout a website or app, it supports the overall cohesiveness and professionalism of the design, which is best practice for the user experience.

#4 Typography and font

Selecting the right font styles and sizes can greatly impact how a user’s attention is guided, with typography playing a pivotal role in visual hierarchy. Choosing too many fonts can be baffling for a user, but having contrasting typography within a design can support the ideal order of how details should be consumed. For instance, any important details or headings could be in a larger, bolder font, whereas body text can be in a lighter, smaller font to create clarity. Having headings that stand out can also support easier scanning of content, with each heading and subheading providing an overview if not all information is read in full. 

#5 Imagery and iconography

Imagery and iconography can be highly impactful tools that support visual hierarchy, while also conveying meaning. Icons are incredibly helpful and can act as visual signposts that can support users in navigating their journey through an interface, whereas feature imagery can further articulate the key messages of the website, or the mood of a specific aspect. Using consistent icons and image styles throughout an interface is also important in creating visual cohesion, which positively supports the user experience.

#6 Layout and composition

The general behaviour of users needs to be considered when looking at the placement of design elements within an interface. The layout of elements including call-to-action buttons, menus and priority content sections needs to be deliberate, to reflect user expectations and to maximise their experience. If the overall layout and composition of a design is well structured and contains a logical flow, users will ideally engage with the website or app effortlessly. 

#7 Movement and animation

When done well, animations can be the perfect way to guide the attention of users and boost their user experience. But there are a couple of downsides to integrating movement and animation into your interface design. You can run the risk of overwhelming or distracting users with too much movement and animation and there’s also the reality of some graphics taking longer to download, which can create lag time for the user and interfere with their experience of the interface. When in doubt, keep it simple.

The wrap-up

Integrating the seven key principles of visual hierarchy in UX design clearly has many benefits that promote quality user-centred design. When coupled with other tools and approaches of UX design, including user testing, you can continually refine and improve interfaces to ensure that the user is front and centre of all decision-making and modifications, resulting in the best experience possible.