You may have experienced browsing a website and was confused with various design elements that you had no idea where to even begin to look.
If you struggle to focus, then the website is likely missing a clear visual hierarchy.
In this article, Why Visual Hierarchy In UX Is Important, we will discuss a website’s visual hierarchy and how it helps users to focus their attention.
This article will also discuss the following sub-topics, which contribute to how we look at designs. This will help us understand how the human eye processes design elements, which as a UX designer helps you to arrange UI elements more effectively
Content in any digital space layout follows a specific hierarchy. For example, we see headers above the body text. The menus, which usually go at the top, bottom, left, or right side of the screen.
Visual hierarchy is done by designers to present the highest priority content on any given page first. The rest of the elements are delivered from highest to lowest priority.
By “hierarchy”, simply refers to organize elements on a web page that are arranged from highest priority to the least. Hierarchy is also used to show relationships between content blocks.
UX designers use visual hierarchy to rank UX design elements and influence in the order that they want users to view them. They use some guiding principles such as contrast, scale, balance, and more to help them establish each element in its rightful place to help them make important elements stand out.
The importance of visual hierarchy in UX
Visual hierarchy has a huge impact on the user’s experience. This does not just affect the first impression of a website or a product, but more so on how users make sense of it and enjoy its benefits.
Visual hierarchy plays a key role in the planning of your information architecture to help users navigate through the website, product, or app easier.
And because of improving the navigation, visual hierarchy also reduces the amount of effort for users in terms of engagement with the product, website, or app.
And as a rule of thumb: The goal of a UX designer is to remove friction and to enhance the usability of a product. Paying attention to your visual hierarchy is one way to achieve this goal.
So let us take a look at the UX design principles, how they work, and how these principles help influence the navigation of content.
Visual hierarchy principles
Reading patterns
All UX designs know the importance of good composition. It can make or break a product on the very first impression. Thus, good composition is key in those crucial first moments.
Why? Because users tend not to read all content or components on the screen. A further study by Weinreich et about the empirical study of the web found that most users have a habit of just scanning through the pages for a few words. And the users’ screen time on the screen is not enough for them to read everything, so they scan to check only the areas of interest.
These findings are important in helping us understand how crucial visual hierarchy design is and its role in reading patterns.
The next question is, how do readers scan and what are the factors that impact this scanning?
Let us take a look at the different reading patterns below to help us understand users’ scanning behavior.
The F-pattern
This is more commonly seen on screens with a lot of content. The F-pattern is where users follow a line and only venture into content in short horizontal lines, thereby forming the shape of an F, as shown in the example heatmaps below.
This reading pattern was first brought about by NNG in 2006 and has been the most used reading pattern in web design since.
There are several reasons why users scan pages in this shape. The common reason is that users are looking for quick answers to their questions or concerns, rather than reading through the entire content. Users are not willing to read the whole content on the page, rather they seek to minimize interaction to find what they are looking for.
The NNG study considers the F-shape pattern to be the brain’s default scanning setting for texts, whether the visual hierarchy is present or not. More to this, they consider the reading pattern as a bad thing as users tend to only process a few words out of the entire thing, leaving out large chunks of information unread.
In addition to this, it can create issues with a responsive UX design that even if you create your visual hierarchy to F-pattern, the words will be placed differently based on the screen size.
A user scanning the website on a desktop focuses on a different set of words compared to a user reading on the mobile phone.
The workaround to this, however, is easier than we think. The key is on proper content structuring, where the most important UI elements to capture the user's attention.
You need to utilize hierarchy, so users won’t miss out on the most important information and this includes getting the most important content at the beginning, for texts this means getting the main points in the first two paragraphs. And for headings and subheadings, it is important to use descriptive words at the beginning.
The Z-pattern
Compared to the F-pattern, the Z-pattern is when users focus more on visual components rather than the written content. This is usually the case for one-page websites or landing pages where users do not digest a lot of written content.
Knowing that users scan the page in Z-shape, UX designers need to place the most important elements in the corners of the Z to make sure that users do not miss them out.
The most important elements that are usually placed in the corners of Z are the logo, login section, information about the site, and the call to action (CTA) button, as shown in the classic example below:
The layered cake pattern also takes place when there is a lot of written content on the page, however, it is still different from the F-pattern.
Instead of staying on a vertical line and only rarely reading the paragraphs, users are offered texts broken up into sections and sub-sections. This follows the pattern with many headings and subheadings as users read content and make their way down the page as shown in the photo below.
One of the key requirements for this pattern is well-structured content. The layered cake pattern is about avoiding long paragraphs that makes users scan the page. Instead, you force users to aim for the many different sections that you have defined. Thus, the titles and descriptions need to be descriptive and accurate as these all point users to the right sections that they are looking for.
Another important thing to note is the distance and proximity between the sections and the font size and color. Allow enough space between sections so users can easily identify these sections.
In a broad sense, the Gestalt theory tackles how humans make sense of the things they see. It supports the theory that humans see objects by grouping them, in effect, finding patterns that form a bigger picture.
These 5 Gestalt principles have an impact on the design visual hierarchy of the product. These suggest ways for designers to present different elements of the product cohesively.
The key to these principles is about making sense of the outside world as opposed to how our eyes capture the visuals.
Closure
This is principle shows that if different components are given to the users in a series of bits, then our brains will fill in those gaps on their own. Our brain is wired to see the complete pictures, which leads us to see the whole even before we notice the parts that make it up.
Continuity
Our brains form connections between components and identify a pattern. Once we have noticed the pattern, our brains will follow that pattern.
Similarity
It follows that elements that are visually similar be grouped since our brains consider them as parts of the same form.
Common fate
Elements that move in the same direction add a connection in the eyes of the user. For example, sliding menus create this effect.
Figure and ground
The human brain perceives elements to be figures (in focus) or the ground (background). Our eyes can perceive and stipulate on which one to focus and process first.
Proximity
This means the proximity between different components, which perceives if they are perceived as together or as part of the whole.
White space has an important role in effective visual hierarchy design. However, you need to make everything right when designing your website with whitespace since this tends to have fewer components. The same goes for minimalist designs.
Since there are fewer elements, white space, and minimalist designs do not have any issues of being upstaged by too many elements. However, the downside to this is the visual hierarchy needs to be perfect and precise because it has very little support and nowhere to hide.
The key when doing this kind of user interface design element is to better understand the function of active white space, which is left intentionally between components for the sake of effective visual hierarchy, structure, and readability.
For the minimalist design, carefully watch your typography, use of colors, and spacing and proportions.
When it comes to typography hierarchy, think of what you are doing with your headers and do the same thing in your digital product. Typography organizes the text, so users understand where to start and what is most important. As a designer, you can decide where users start reading and what they should notice first.
The key point here is you can play with scanning patterns to shape the design based on your goals. You can decide to follow common scanning patterns or go against them in creative ways.
Let us review some of the classic typography techniques that you can use to establish a visual hierarchy with text.
Size and scale
Size is the most common way to convey importance. This is also the easiest way to encourage users to start reading at a certain point as we are used to reading bigger font first then move on.
The key to playing with size is scale—the relationship between sizes of different components.
Start with the size of the body of the text, then go from there. Make sure that the body of the text allows readability. Then, it is easier for you to identify the parts you want your users to focus on.
Contrast
The use of different typefaces adds contrast. Many UX designers select one serif and one sans-serif typeface for the same page to make a palpable difference between the font.
The key here is even with big differences, the font should follow the same shape.
Another way to add contrast is weight. The weight of the typeface can immediately add contrast, thereby establishing hierarchy. For example, pairing thin and heavy, bold typography adds visual hierarchy.
This maintains balance and harmony, even when plenty of contrast is added. That said, UX designers often feel good when it comes to delivering out-of-the-box visual designs.
The web and mobile visual hierarchy design tends to be the same. The same principles apply with one major difference: the large disparity between the available screen space.
The limited space on mobile impacts how designers plan for mobile products and just like what we always anticipate, designing for mobile is harder with designers living up to the expectations of the users. This means the user interface design must meet the standards of the product needs to maintain its function and appeal.
With the reduced space on mobile, each hierarchy becomes more important, as users can see everything on the entire screen.
The key to designing a visual hierarchy on mobile is to focus more on navigation rather than on the flow. The navigation should be on point for mobile design.
This means in mobile user interface design, there should be less content, so it won’t clutter the screen. Thus, the guidance should not be leading the user to more content, but rather guiding the user to the next screen, making navigation a top priority.
Tips for a strong visual hierarchy
From what we have learned, if your visual hierarchy is strong, you are leading the users to a page’s functionality with ease and at the same time gives them the right visual cues.
Good user research is what you need when it comes to creating a strong visual hierarchy. However, here are some takeaways when it comes to designing for users:
When it comes to interface, users react fast and decides in milliseconds whether to stay or leave.
Users often follow predictable reading paths, which are influenced by culture. For example, left to right reading for Western users and use F or Z patterns. You can reinforce or break these reading patterns to guide users to your goals.
Users prefer recognition over recall. Thus, it is important they can scan instead of reading a lot or remembering things.
Keep business goals in mind. This means to list your goals and base your UI designs around these goals.
Keep functionality first. While visual hierarchy provides UI elements for aesthetics aspects, you need to understand that structuring and organizing elements call for a UI design that is clear to use and navigate.
The use of the grid is key when it comes to applying different elements during the creative process of visual hierarchy. A grid helps structure all the visual elements and put them into appropriate sizes and proportions.
Apply the golden ratio, which is a mathematical proportion of UI elements of different sizes. This golden ratio is also considered to be aesthetically pleasing to the eyes.
Color choices and combinations are also important when it comes to building a good visual hierarchy. Know that colors also have their hierarchy and may define and influence your users. Like for example, bold colors are easy to notice so UX designers often use them as a means of creating contrast.
Final thoughts
Before you even begin with your design, take a step back from the visuals and define first the hierarchy of the content and the important keys you want for the users to take away.
Once you have those, then you can focus more on applying variations in color and contrast, you can start scaling or grouping.
After you have created your design with visual hierarchy in mind, look if the design reads exactly as you intended by testing with your target users.
Once you have properly established your visual hierarchy and it has accurately reflected the different design visual elements, users can easily understand it and can complete the tasks on their end, which creates trust in the design and the brand.
