Visual Hierarchy: How to Guide the Eye Through Your Interface

Picture the homepage of a small bike repair shop. Let’s call it “Kurbelwerk.” At the top there’s the logo, next to it six menu items. Below that come a welcome message, a photo of the workshop, the opening hours, three services, a note about the winter check-up, a phone number and a “Book an appointment” button. Everything is there. And yet something odd happens: people land on the page, look around briefly and leave again without booking anything.

Ask them why, and you hear things like “I didn’t know where to start” or “I never even saw the button.” The problem isn’t the content. The problem is that every element is equally loud. Headings, opening hours and the booking button have roughly the same size, the same font weight and the same spacing. The eye can’t find a way in.

That’s exactly what visual hierarchy is about. In this article you’ll learn what the term means, which five tools you use to create it, and how to check in a few minutes whether your design really guides the eye where you want it to go. No prior knowledge needed.

What visual hierarchy means

Visual hierarchy is the arrangement and styling of elements on a surface so that the eye perceives them in order of importance. The Nielsen Norman Group (NN/g), one of the best-known usability research firms, describes it in a similar way: the elements of a page are organized so that the eye is guided to each one in order of its importance.

Put more simply, a good hierarchy answers three questions before anyone consciously thinks about them.

• What’s the most important thing here?
• What belongs together?
• What can I do next?

That sounds like aesthetics, but it’s mostly a matter of usability. People rarely read websites and apps word for word. They scan, look for anchor points and decide within seconds whether they’re in the right place. A clear hierarchy takes thinking work off their hands. That mental effort is called cognitive load, and the less of it goes into finding their way around, the more attention is left for the actual task.

One important point to start with: hierarchy is always relative. An element isn’t “big” or “prominent” on its own, only in comparison to its surroundings. Red text stands out immediately on a gray page, but not at all on a colorful page full of red elements. That’s why hierarchy only works if you plan it for the whole page rather than for each element separately.

The five tools of visual hierarchy

To make importance visible, you essentially have five levers: size, weight, color and contrast, spacing, and position. Each one is explained below with a before-and-after example from the Kurbelwerk homepage. The tools work on their own, but they’re strongest in combination.

1. Size: big things get seen first

Size is the strongest and most intuitive signal. Larger elements attract more attention, and we automatically read them as more important. That applies to text just as much as to images, buttons and surfaces.

NN/g advises restraint here: for text, three size levels are usually enough, large for the main heading, medium for subheadings and small for body text. Using ten different font sizes doesn’t create a finer hierarchy, it creates noise. If two sizes differ only slightly, the eye can no longer tell them apart clearly.

On the Kurbelwerk homepage, it looks like this:

Before: The welcome line “Welcome to Kurbelwerk,” the heading “Our services” and the note “Book your winter check-up now” are all about 22 pixels. Nothing stands out.

After: A single large heading says what it’s all about: “Your bike, repaired in 48 hours.” The subheadings are clearly smaller, the body text smaller still. The welcome line is gone because it doesn’t explain anything.

A typical beginner’s trap is making everything important big. If five things are big, none of them is big anymore. Size only works as long as it’s rare. That’s why NN/g recommends deliberately keeping the number of large elements on a page small.

Exactly how big body text should be on screen, and how line length and line height affect readability, is a topic of its own. Here it’s only about how sizes relate to each other.

2. Weight: bold, regular, light

Weight means the stroke thickness of a typeface, whether it’s set in bold, semibold, regular or light. Weight is the subtler sibling of size. It emphasizes something without taking up more space.

Weight is especially useful in two situations. First, to differentiate within one size level, for example setting a product name in bold and the description below in regular, even though both are the same size. Second, to make individual key terms in body text easy to find, so that someone scanning the page gets caught on them.

Before: The list of services reads “Service, 59 euros, including brake and gear check” on one line, all in regular text. If you’re looking for the price, you have to read.

After: “Service” is bold, the price “59 euros” sits in semibold to the right, and the description below is in regular weight and a slightly lighter color. Name, price and details can now be taken in separately.

Here, too, bold only works when used sparingly. A paragraph in which half the words are bold reads like a text with no emphasis at all, only more tiring. A good rule of thumb is to highlight no more than one or two terms per paragraph.

3. Color and contrast: standing out through difference

Color draws the eye, but it’s not the color itself that does it, it’s the difference from the surroundings. NN/g stresses exactly this point: emphasis comes from contrast in lightness and saturation compared with what’s around it. A bright orange button acts like a signal on a calm, light page. On a page full of strong colors, it gets lost.

This effect even has a name. The Von Restorff effect, also known as the isolation effect, describes how, among several similar items, the one that differs from the rest is the most likely to be noticed and remembered. The psychologist Hedwig von Restorff described it in 1933. For your interface, that means: give the most important action a color that hardly appears anywhere else.

Before: On the Kurbelwerk page, the menu items are green, the headings are green, the winter check-up note sits in a green box, and the “Book an appointment” button is green too.

After: Green stays the brand color for the logo and small accents. Headings become dark gray. The “Book an appointment” button is the only element with a strong, filled orange surface and white text. The winter check-up gets a light, understated background.

Contrast also works in the other direction. You can deliberately make elements quieter by giving them less contrast, for example showing metadata like dates or categories in a lighter gray. But there’s a lower limit: text has to stay readable. The Web Content Accessibility Guidelines (WCAG), the international guidelines for accessible web content, require a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text at level AA. So “quieter” means a little less contrast than the main content, but never so little that anyone has to squint.

There’s one more accessibility rule that ties directly into hierarchy: color should never be the only way to tell things apart. Some people perceive certain colors differently, for example with red-green color vision deficiency. A primary button that differs from a secondary one only by its hue may not be recognizable as the primary button to them at all. So always combine color with a second signal, such as a filled surface instead of just an outline, or larger text. You’ll find more on this in the article Color Blindness in UX Design.

Which colors you choose for an entire interface and how to build a color palette is a topic of its own. For hierarchy, one question is enough to start with: which element should stand out most, and does it have the strongest contrast on the page?

4. Spacing: what’s close together belongs together

Spacing is the most underrated tool, especially among beginners. White space (it doesn’t actually have to be white) looks like unused room at first glance. In reality, it does two jobs for hierarchy.

First, spacing shows what belongs together. We perceive elements that sit close to each other as a group. This principle comes from the Gestalt principles, a set of rules describing how people perceive shapes and groups. That’s why a heading should sit closer to the text it belongs to than to the text above it.

Second, spacing gives an element weight. A button with plenty of room around it looks more important than the same button squeezed in between other elements. White space is a kind of stage: whatever stands on it alone gets attention.

Before: Every element on the Kurbelwerk page is separated by an even 16 pixels. The heading “Opening hours” has the same distance to the text above as to the text below. You can’t see where one section ends and the next begins.

After: Spacing is small within a section and much larger between sections, for example 16 pixels inside and 64 pixels between blocks. The booking button sits below the main heading with generous space and no neighbors competing with it.

How to define spacing systematically, for instance with a fixed grid or a spacing scale, belongs in an article of its own. For now, one rule is enough: the space within a group is smaller than the space between groups.

5. Position: top left gets read first

Where an element sits affects when it gets seen. In languages read from left to right and top to bottom, the eye usually starts at the top left. What’s at the very top is seen more often than what sits far down the page.

A well-known example is the F-pattern. Jakob Nielsen described it in 2006 based on an eye tracking study with 232 people. Eye tracking is a method that records where people look on a screen. On text-heavy pages, the gaze often moved in a rough F shape: once across the top area, then a shorter horizontal movement a bit further down, then vertically down the left edge. A follow-up study by NN/g eleven years later came to a similar result, on smartphones as well.

The F-pattern isn’t a design goal, though. It’s more of a warning sign. It shows how people move through content that gives them little guidance. NN/g’s conclusion: the most important information goes first, and headings, paragraphs and bullet points should start with the words that carry the actual information. Someone who only scans the left edge should still understand what it’s about.

Before: At the very top of the Kurbelwerk page are the opening hours and a long welcome message. The booking button only appears after three sections, and on a smartphone it’s far below the visible area.

After: At the top are the core promise and the “Book an appointment” button. The opening hours move into a compact block further down and also into the footer, where many people expect that kind of information.

Position has a second side: habit. People expect the logo at the top left, search at the top and the shopping cart at the top right. If your design deviates from that, they have to search, even if your hierarchy is otherwise clean. The principle that people expect your website to work like the other sites they already know is called Jakob’s Law.

How the tools work together

In practice, you rarely use just one tool. The most important elements are usually bigger, bolder, higher in contrast, have more room and sit higher up. Less important elements are smaller, lighter, paler, sit closer together and further down. The more signals point in the same direction, the clearer the hierarchy becomes.

Conversely, confusion arises when signals contradict each other. A typical example: a small but bright red line saying “Note: delivery times extended” competes with a large, dark heading. Which one matters more? The eye jumps back and forth. When you notice two elements fighting for attention, deliberately pick one and dial back one or two signals on the other.

Example: primary and secondary buttons

The interplay is most obvious with buttons. Almost every view has one main action that most people want to take, plus a few secondary actions. A dialog for saving changes is a good example.

Before: Three buttons of the same size and the same gray, side by side: “Save,” “Cancel,” “Discard.” Anyone clicking quickly can easily hit the wrong one, and “Discard” throws away all changes.

After: “Save” is a filled button in the accent color, the primary button. “Cancel” is a secondary button with an outline and no fill. “Discard” sits slightly apart as a text link in a warning color, with a confirmation step before anything is actually deleted.

In this example, color (filled versus unfilled), contrast, spacing (the risky action sits apart) and position all work together. None of the three buttons is hidden, but each has a clear weight. As with forms, there’s exactly one main action per view. You’ll find more examples in the article Forms Nobody Abandons.

Example: a card in a list

Small building blocks have their own hierarchy too. Take a product card in a shop for bike accessories.

Before: Image, product name, item number, description, rating, delivery time, price and button, all left-aligned one below the other, all in the same font and size.

After: The image is at the top and large. Below it comes the product name in bold, then the price, large and strong. Rating and delivery time sit small and gray on one line. The item number disappears from the card and only shows up on the product page. The button sits at the bottom with a little space above it.

The order follows what people want to know first when comparing: what is it, what does it cost, is it any good? The hierarchy reflects those questions. And that’s the core idea: visual hierarchy isn’t decoration. It translates the priorities of the people using your page into design.

Before you design: set priorities

Many hierarchy problems don’t start during design, but before it. If nobody on the team has decided what matters most on a page, everything ends up on screen with equal weight. Every department wants its topic to stand out, and in the end nothing does.

A simple exercise helps: write every piece of content for a page on its own note or card and put them in order. Not in groups like “important” and “less important,” but truly in sequence, from first place to last. That forces decisions. For the Kurbelwerk homepage, the result could look like this:

1. What the shop promises (fast repairs)
2. Book an appointment
3. The three most important services with prices
4. Winter check-up as a seasonal offer
5. Opening hours and address
6. About the shop

This list is the foundation for the design. Places one and two get the strongest signals, places five and six the weakest. If you work with a wireframe, a simple schematic sketch of a page without colors or images, you can already set up the hierarchy there using size, spacing and position, before any color comes into play. That has an advantage: if the hierarchy works in grayscale, color will only make it better.

How to test your hierarchy

The tricky thing about visual hierarchy: once you’ve designed a page yourself, you can never see it with fresh eyes again. You know where the button is, so you find it instantly. That’s why you need methods that give you an outside view.

The squint test

The simplest test costs nothing: squint until the page blurs, or put a strong blur over a screenshot in your design tool. NN/g recommends this squint test because it hides details and leaves only shapes, surfaces and contrasts. You then see what really stands out and which groups emerge.

Ask yourself two questions. Which element do I notice first when it’s blurred, and is that also the most important one? And can I still tell the sections of the page apart? If the answer to the first question is “a photo” or “an ad banner” rather than your main content, the hierarchy is off.

An important tip from NN/g: test with real content, not just the empty template. A high-contrast photo can dominate an entire page even if it only illustrates something secondary.

The five-second test

Show the page to someone who hasn’t seen it before, for about five seconds. Then cover it and ask: what was it about? What could you do there? What did you notice first? If the answers don’t match your priority list, you know where to sharpen things. This isn’t a scientific usability test, but it’s a quick reality check you can do with colleagues from other teams.

Data from real use

Once a page is live, tools can give you additional clues. A heatmap shows in color where people click or how far they scroll. If hardly anyone scrolls down to your most important button, or lots of people click on an image that isn’t linked, those are clear signs of a hierarchy problem.

Common mistakes and how to avoid them

Everything is important. The most common mistake of all. If every element is highlighted, none of them is. The fix is the priority list from above: decide what takes first place and dial everything else back.

Too many levels. Seven font sizes, four shades of gray and three accent colors don’t make a fine-grained hierarchy, they make chaos. Stick to a few clearly distinguishable levels. NN/g’s recommendation of about three sizes is a good starting point.

Differences that are too small. An 18-pixel heading above 16-pixel body text is barely recognizable as a heading. Differences need to be clear, or they look like a mistake.

Emphasis that looks like an ad. A colorful box with large text can easily look like an ad banner. Many people instinctively overlook elements like that, a behavior known as banner blindness, which NN/g has observed in eye tracking studies. If an important piece of information is styled like an ad, that’s exactly why it may get missed.

Hierarchy for desktop only. On a smartphone, a lot of things stack vertically. An element that sits prominently to the right of the heading on a large screen can drift far down on mobile. So check the order on small screens too.

Conclusion

Visual hierarchy decides whether people on your page immediately understand what it’s about and what they can do, or whether they have to search. With size, weight, color and contrast, spacing and position, you have five tools you can combine on purpose. The more of them point in the same direction, the clearer the message becomes.

The most important step, though, happens before the design: deciding what really matters most. On the Kurbelwerk page, that wasn’t the welcome message or the opening hours, but the promise of a fast repair and the button for booking an appointment. Once that was clear, the rest almost fell into place.

And finally: don’t rely only on your own eyes. A quick squint test and a five-second test with someone who doesn’t know the page will show you faster than any discussion whether your hierarchy works.

Checklist

• The content of the page is put in a clear order of priority.
• There is exactly one element that stands out most, and it’s the most important one.
• Text uses only a few clearly distinguishable sizes.
• Bold and color are used sparingly.
• The main action has the strongest contrast and doesn’t differ by color alone.
• Text meets WCAG contrast requirements even in “quiet” shades of gray.
• Spacing within groups is smaller than spacing between groups.
• The most important content is at the top, on smartphones too.
• The squint test with real content shows the intended order.

Sources

• Nielsen Norman Group: Visual Hierarchy in UX: Definition
• Nielsen Norman Group: F-Shaped Pattern For Reading Web Content (original study)
• Nielsen Norman Group: F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)
• Nielsen Norman Group: Squint Test
• Nielsen Norman Group: Banner Blindness
• Laws of UX: Von Restorff Effect
• W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum)
• W3C: Understanding Success Criterion 1.4.1 Use of Color