Lure Mobile User With These 2 Hierarchy Tricks

Hierarchy in mobile design is a tricky thing to master. On the one hand, we want to direct attention. On the other, we don’t want to overwhelm. Two tools will help us address these conflicting goals in a surprisingly simple way.

Let’s start by defining the problem. A hierarchy is more than type-size choices. It’s a series of signposts that guide readers along a page. The mobile world has an additional burden: to help readers decide if the page even has the information they want, of if they should look elsewhere — and do so in a hurry.

Luckily two design principles provide the answer. You can use size and color — specifically, value — to make a hierarchy that works well on mobile devices.

You can follow along and give this tutorial a go in UXPin.

For this tutorial, we’ll be making a simple marketing site with the goal of enticing potential customers to get in touch with the business. So let’s get started.

1. Start with content

Whenever possible, we suggest working with real content — or a close estimation to the content that the design must support. Sometimes that requires a dose of lorem ipsum. If so, be sure to work with a variety of amounts. You never know how many words a heading or section will require.

2. Grab the reader’s attention

Readers start with the “hero element.” Typically the largest, topmost and highest-contrast element on a page, heroes are at the top of the visual pecking order.

There’s no doubt where to start in the example above. Its placement and size make the hero obvious. The words tell people what the content is about while the typeface, Squanda One, and size show them its serious tone. Beyond that, however, we run into trouble. Everything has the same visual weight, and even changing sections’ colors doesn’t help separate them from each other.

3. Lead the reader through the content

Because our goal is to get users to read a page, we need to direct them down the page. A hierarchy needs to provide both a starting point and the next point. The obvious solution: make the subheads smaller.

The example above does just that, setting each subhead at 24px compared to the hero’s 48px. It works well enough, but is it too small for comfort? In a mobile environment, smaller can be hard to read. That’s where color comes into play.

4. Lower contrast to balance importance

The more an element stands out from its surroundings, the quicker it grabs attention. By contrast, the more something blends in, the less important it seems.

Above, we’ve put the subheads up to 48px, same as the hero text, but toned back their contrast. The result has less impact with the same readability. But maybe it’s too much.

5. Do a little of both

When we pair contrast with type size, we can create more a hierarchy with better readability.

Both the headline and the subhead above have nearly the same type size: 36 and 32px, respectively. But when we apply a shade of gray to the subhead, we immediately play down its importance relative to the headline while making it an easy-to-scan bit of information for users on the go.

That’s the power of this one-two combo: Both size and color can imply importance, but they’re best when used together. 

Now take what you learned and create a prototype with a free account to UXPin.