What is Visual Hierarchy in UX? 7 Key Principles

Visual hierarchy is a fundamental principle in design. It’s the idea that you can direct people’s attention to the most important parts of a page’s contents by manipulating design elements or visual characteristics.

You can influence how users read content by emphasizing certain elements on a page.

This simple but effective visual hierarchy was recently widely shared in the UX design community.

What is the importance of visual hierarchy in UX/UI design?

UX/UI design is dependent on visual hierarchy. Previous interactions with digital products heavily influence users’ behavior.

This helps to explain the patterns of user behavior that are frequently found in user research.

Simply put, an unplanned visual hierarchy can confuse users by drawing attention to the wrong places and making it more difficult for them to find things.

A visual hierarchy, which allows users to navigate your product easily (to find what they want where they expect it), will reduce friction and improve usability.

Visual hierarchy, mental models and user expectations

This can be explained in another way: Imagine you are looking for a job at the company of your dreams. Google the company name and go to their homepage. To get to their careers page, where do you start?

You might scroll to the bottom and begin to search for a link that takes you to “Careers”, “About Us”, or “Team” pages.

Mental models

A mental model is an intuition that leads you to scroll down to see the footer. These mental models represent what users think about a user interface. Because they are unique, different users might have different mental models of the same UI.

These models are also based on beliefs and not facts. Norman Nielsen Group describes mental models as “model(s), of what users know or think about a system like your website”.

User expectations

We’ve seen that user expectations largely determine user behavior. Mental models, in turn, influence these. For a refresher, see our complete guide to mental models for UX design.

What are the principles behind visual hierarchy?

This is not a complete list. There are many other principles of visual hierarchy we won’t be covering.

These seven principles will give you an overview to help with further exploration and research.

Attract attention with scale and size

Like the lush.io example, size and size (the relative size of elements to each other) is crucial to grab users’ attention. Larger elements will be viewed first.

This principle can design your visual hierarchy and direct your attention to the most important parts of your content.

It should be used with caution, just like all other principles. It can be detrimental to their impact if too many elements are added.

Use color and contrast to make elements stand out.

You can influence the user’s interaction with your UI by changing color and contrast.

As you would expect from color theory, bright colors draw more attention than those with duller tones. High contrast can also draw attention

Leave a Reply