What is visual hierarchy?
Having a hierarchy of your design serves more than one purpose. It helps the user understand how important one element is in relation to another, or where the user should start reading. It helps with understanding the product, and is crucial for good UX – users need to understand what each element is, and that includes its importance within the design.
With a good visual hierarchy to the design, you can expect users to have an easier time digesting information. Instead of having a screen with many identical components, users will have focal points and an order in which to notice and process things.
It was used by newspapers and magazines way before it was applied to digital design, and most people will know it even if they can’t define it.
Visual hierarchy design, in truth, comes in two parts: the visual cues designers have at their disposal, and the different ways those cues affect the user experience. For example, the designer can use size and color as cues to convey hierarchy – meaning the design can have bright colors in certain areas to create a reading pattern as a tactic.
It is true that for your visual hierarchy to make sense, you have to start planning it and building it as you wireframe your product.
The basics of visual hierarchy design: reading patterns
The idea is simple enough: you can use different visual traits in components to organize them visually, leading the user through the design. Let’s check out some of these key visual cues that all designers have up their sleeves in order to take the user by the hand on a path that touches all the most important areas.
Key reading patterns
All designers are familiar with the importance of a good composition. It can make or break a product on the very first impression and plays a central role in those crucial first few moments. That is because most users don’t actually read all the content or components on a screen.
In fact, Weinreich et al (2008) found in their empirical study of the Web that most users have a habit of scanning the page for a few words. Their stay time on the screen was simply not enough for them to read the actual content but rather scan the text for key areas of interest.
The Nielsen Norman group goes even further by saying that most users will read only between 20% and 30% of the page’s content in their article How little do users read.
This is important because it helps us understand how important visual hierarchy design is – and the role that patterns of reading play here. It is a fact that most users scan pages upon their first encounter – but how do they scan it? What factors impact this scanning?
The F-pattern
More common among screens that have a lot of written content, the F-pattern means users will follow a vertical line and only venture into the content in short horizontal lines – forming the shape of an F in heatmaps. It was first pinned down by the Nielsen Norman Group back in 2006, and it’s been a staple in web design since.
Z-pattern
Unlike the previous pattern, the Z-shape takes place in pages with less written content and more visual components. This is usually the case with homepages, or pages with hero images. It’s a more natural pattern when there isn’t so much content for the user to digest, which makes it perfect for most landing pages.
Layered cake pattern
A layered-cake pattern takes place when the page has plenty of written content, but it is fundamentally different from the F-pattern.
Instead of users staying on a vertical line and only barely reading the paragraphs, users would be offered the text broken up into many sections and subsections. This means that users will mainly read the headings and subheadings, venturing into the written content as they make their way down the page.
Typography in visual hierarchy
Typography plays an important part in visual hierarchy design. It’s been perfected by magazines and newspapers due to the sheer amount of written content on their pages. Order of importance is needed for people to identify the front page news title, for example.
Size and scale
The first and most commonly used way to convey importance is size. This is the easiest way to encourage users to start reading at a certain point, as we tend to read the bigger font first and then move on. The important thing to remember when playing with size is scale – the relationship between sizes of different components.
Contrast
It’s interesting to use different typefaces in order to add contrast. Many designers tend to select one serif and one sans serif typeface for the same page so that there is a palpable difference between the font. Look at how simple google makes the logo stand out.
Some great examples of visual hierarchy
Medium is a good example of a page with lots of written content that needs to be organized. While there are many different articles on display, there is a faint trace of the F-pattern, in which users can first scan the top part that includes both articles and the navigation bar. Then, users can go down vertically, seeing more potentially interesting content as they proceed.
Kitchen Stories is a wonderful example of visual hierarchy done right, because it has a lot of content to offer users in a small space. Kitchen Stories is all about the clean and spacious style from the website, but it masterfully transfers that style onto its mobile app.
Artsy is an app for all art lovers and collectors out there. We like this app because, while it has plenty of content, it’s all about the visuals. With plenty of eye-catching art to display, the app makes no effort to take the user’s attention away from the art. Instead, it sticks to black and white, with some color in the navigation.
Visual hierarchy is something that all users will depend on to make sense of what they see. Designers everywhere are constantly finding new ways to play with the visual elements at their disposal for products in order to convey a specific message to users. When it comes to visual design, it’s all about putting creativity to work, and keeping usability in mind.
