How to Guide Users With an Efficient Visual Hierarchy

An experience is the sum of all interactions. As soon as someone sees your site, an emotional reaction occurs subconsciously — that in itself is an interaction. Likewise, users also need to consciously decide how and where to click on your site.

Prototyping helps you refine all these tangible and intangible design elements. In this post, we’ll explain how to design more efficient layouts by mastering visual hierarchy.

An app or site needs to present certain information when the end user needs it most — and remove it when they don’t. The goal is to create an interface that respects users’ time and attention.

For example, let’s say a blog has four categories. Listing them in a sidebar offers a list that users can skim  (and then ignore) as they hone in on an individual post. A list, however, might not work for 20 categories since you’d create a wall of text. If users choose to read through it, they’ll spend precious seconds not engaged with a blog post.

So where’s the best location to show categories? The answer depends on the project, but the decisions remain the same.

Timing: When do users need to see categories?
Importance: How does a list of categories compare with blog posts and teasers?
Branding: What styles must the categories adhere to?

Timing

If we consider interaction design as a series of events, then timing is crucial. Consider this lo-fi prototype: 

Photo credit: UXPin

Users tend to look at large, high-contrast elements first. In this case, the headline screams for attention. After that, users have a choice: Check out the body text immediately below the headline, or skip to the sidebar and (hopefully) return to the body text. We want to streamline designs as much as possible, and that momentary detour spells trouble.

Design is more than a static presentation. As described in the free e-book Interaction Design Best Practices, users absorb information in stages, from initial page load through content interaction until they leave the page. Controlling each step means deciding how users enter the page, and what they do afterwards — an entire storyline. Category links aren’t just SEO-friendly decoration on the side. They’re exit opportunities that, in the design above, come way too early in the story.

We can solve that problem by considering the next factor.

Importance

Similar to timing, the categories’ relative priority informs their placement in the user experience. There’s no if/or in this decision. The more clear priorities are, the better users will flow along the path you want them to take.

Photo credit: UXPin

We can argue the merits (or downsides) of mega-footers. The point here is that users have only one place to go: Straight down. As exit routes, categories occur at the end of the story. Astute readers will notice that the category links are also smaller — about the same size as the body copy, which helps diminish their apparent importance.

Like we said, giant footers aren’t always desirable or practical compared to sidebars. An alternative is to build both.

Above, the sidebar keeps categories which you need to decide are more prominent than the others. For example, the categories to which this blog post belongs, or those that offer similar topics to what’s being presented. But their appeal is limited by size and color. Users are attracted to size and contrast, so playing down both keeps those highly-placed categories in second place compared to the page’s content. (See the final design live.)

Prototyping lets us explore options

Where does prototyping come into play? As you may have guessed, everywhere.

From the initial sidebar design to the final comp, prototyping helps us determine how the story should unfold. They show us exactly what 20 categories look like compared to a blog post. They let us explore what happens when we tweak type sizes and spacing.

An experience is the sum of all interactions, in order. You can take advantage of importance to manipulate the timing of a page, thus controlling how users perceive its content. To practice what you’ve learned in this post, go ahead and start a free trial with UXPin. You’ll be able to prototype quickly with thousands of pre-built elements, a custom animations editor and integration with Photoshop & Sketch.