Visual Hierarchy in UX Design

Humans are visual creatures. Our eyes perceive information visually, and the order in which we do so plays a tremendous role in user experience. One of the goals of UI design is to create interfaces that focus user attention on high-value content or interactive elements. When designers work on a page/screen layout, they need to think about what they want users to notice first, second, and third—they need to create a visual hierarchy.

But how to do it properly? You need to rank your content and design elements in terms of visual importance. Let’s explore how to do that and create the ideal visual hierarchy for your app design.

What is visual hierarchy and why do we need it?

Visual hierarchy is the order in which a user processes information on a page or screen. Proper visual hierarchy establishes a clear path for the user’s eye by organizing content and graphical elements from most to least important. Designers can influence what users perceive by using visual characteristics of elements and principles of visual organization.

Solid information architecture and good visual hierarchy on individual pages improves usability and conversion. Proper visual hierarchy helps designers direct attention toward sign-up forms, call to action buttons, or marketing messages and, as a result, encourages users to interact with these valuable components.

Visual characteristics of individual objects

All objects in visual design have a visual weight, a characteristic that defines the importance of the element in a design’s hierarchy. Generally, the more weight an object has, the more likely it is to get a user’s attention. The item that first grabs the eye’s attention is at the top of the hierarchy—it has maximum visual weight. Following is a list of the basic visual characteristics that impact visual weight, traits that can help you achieve a hierarchy object by object.

Size

Size is arguably the most effective way to emphasize content and visual elements. People notice bigger objects first. The larger the element, the more attention it attracts. Consider this article’s headline: “Visual Hierarchy in UX Design.” A large font header at the top of this page signaled to you where the article starts.

Another important principle related to this concept of size is scale, which is the size of an object in relation to another. When multiple objects are on a page, we measure how large or small an individual object is by comparing it to others.

Notice how the largest word “PROGRAM” captures readers’ attention. Image credit Festival of Dangerous Ideas.

Size also plays a vital role in interaction design. Fitts’s Law states that larger-size interactive elements are easier to engage with, so users use less effort interacting with them.

Color

Bold, contrasting colors demand attention, and they can be used to emphasize specific elements. Designers often leverage this property to make certain crucial elements, such as CTA buttons or error messages, stand out. In contrast (literally), if you want to minimize the importance of a particular element within your design hierarchy, reducing contrast is a handy tool.

Whitespace

It’s possible to draw attention to an individual element by giving it ample room to breathe. More space around an item will attract the eye toward it. If there is substantial whitespace (or negative space) around a call to action button on a landing page, this button will be more visible to visitors.

Generally, the more negative space you give an item, the more important that item becomes. Image credit Gnb-architects.

Alignment

Alignment creates an order between design elements. Page layouts are typically designed according to a grid of vertical and horizontal lines. In the grid-based layout, it’s easy to attract attention by breaking the grid; however, it is important to use this approach carefully. Breaking the grid too frequently can make your design look sloppy and unfocused.

Textures

All visual characteristics that we’ve covered above are about the functional properties of individual objects. Textures are different—they are decorative properties. But despite the fact that textures primarily affect aesthetics, adding texture to your design can influence hierarchy. Texture can create visual interest and draw the user’s attention to certain parts of your layout.

Principles of visual organization of elements

Now that you understand what a visual hierarchy is and what visual elements impact it, how does it all come together? In the early 20th century, German psychologists Wolfgang Köhler, Max Wertheimer, and Kurt Koffka began studying how people perceive the world and created a Gestalt theory: “The whole is other than the sum of its parts.”

The concept of visual hierarchy is based on the Gestalt psychological theory, which states that the human brain “structures individual elements, shapes, or forms into a coherent, organized whole.”

Several design factors inform how users do just that, bringing individual elements of a UI into one cohesive picture in their mind. These principles include:

Proximity

Proximity is a fundamental principle of composition. It states that closely placed elements appear related. When we place some elements together, we give viewers a clear signal that the objects are related. The principle of proximity helps designers make content more apt for quick scanning and comprehension. For example, placing related objects close to each other creates a connection between those objects.

Similarity

The law of similarity states that elements with a similar visual appearance seem to be related.

You probably see different groups of colored circles rather than a single collection of circles. Image credit Nick Babich.

At the same time, because our brain tends to group similar things together, we also notice things that are dissimilar to the group (such dissimilarities are called “anomalies”). An anomaly naturally draws the viewer’s attention because it’s different from the rest of the group.

Repetition

Repetition is based on the Gestalt rule Law of Common Region. According to this rule, elements tend to be perceived in groups if they share an area with a clearly defined boundary.

Repetition of visual elements creates unity, which improves recognition. Check out this article’s page layout for a moment. It too leverages repetitive elements to help you comprehend the content, like paragraph text—the same font size is used for all sections of body text, and the same fonts and styles throughout clearly unify the article. Visually repetitive choices on our end make it easier for you, the reader, to scan this page.

Typeface weight and pairing

When we talk about design hierarchy, it’s essential to consider the vital role typography plays in visual design. The vast majority of information we receive from digital products is text-based content. A text hierarchy that makes a layout clear, unambiguous, and easy to digest is imperative. Typeface hierarchies can be created by using text of various sizes, weights, and spacing. And, in many cases, it’s possible to create an effective typeface hierarchy using only one or two font families.

Google font Roboto offers an impressive list of styles that allow for creating a complex visual hierarchy. Image credit Nick Babich.

Whitespace also makes content more readable and can support your text hierarchy. Good use of whitespace between paragraphs and in the left and right margins has been shown to increase comprehension by almost 20%. Generously spaced content helps readers focus on and process information you want them to retain.

Scanning patterns

When people visit a new website, they typically scan web pages to determine if they want to dive deeper. The ways they do this, called scanning patterns, influence every design hierarchy. There are two common scanning patterns that work both on printed and digital pages: F-shape and Z-shape patterns.

F-shape and Z-shape patterns are so named because of the shape readers’ eyes trace when they scan a page. In the first case, a scanning pattern, if it were being tracked, would produce a heat map that looks like the letter “F,” meaning readers scan a page as if they were writing the letter F with their eyes. Similarly, readers also often scan a page as if they were writing the letter Z with their eyes.

As a designer, you need to optimize your designs for these reading patterns, creating an effective visual hierarchy that guides users toward the information you want them to see and proves to them quickly that this page has the information they seek.

F-shape pattern

With the F-shape pattern, readers begin by scanning left to right along the top; then they read a couple of text rows and finish by scanning down the left side of the page, looking for cues for interesting information. As they find the clues, they start to read the text rows. This pattern is useful for text-heavy pages like articles or blog posts.

Designers have many ways to utilize the F-shape pattern, such as:

Make the most crucial information bold and align it to the left side of your page
Break up monotone blocks of text with headlines and bullet points
Add visuals to your copy

Z-shape pattern

With the Z-shape pattern, the reader’s eye scans from top left to top right (where vital information is likely to be found), then moves down through the content (following a diagonal) to the bottom left, and then moves to the bottom right. This pattern is good for pages with relatively low amounts of content (for example, product landing pages are good candidates for this pattern). The Z-shape pattern informs web designers’ common choice to place the most important information in the corners.

Conclusion

At its core, design is about effective communication. We live in a world where the average attention span is only seconds long, meaning it’s critical to communicate necessary information and actions in a glance. A proper visual hierarchy, crucial for the success of any design, can help achieve this objective. It’s a designer’s task to present content into chunks of visually relevant information that are easy on the eyes. Both functional and decorative elements should be placed strategically to create a proper scanning flow with excellent usability.