UX Power Up: Visual Hierarchy (Mobile UX)
Frank Spillers, founder of Experience Dynamics,
it’s time for this week’s UX Power Up. So, today’s Power Up focuses on the graphic
design topic of visual hierarchy. We’re going to apply it to a mobile medium. Visual hierarchy
is one of these terms that kind of coincides with what we’ve discussed on other UX Power
Ups, the topic of a task oriented design… the idea with visual hierarchy is that you
put your main task, or the main thing you want the user to see.. kind of as you get
down the page or down the canvas, the less important things are further down. That’s
what we mean by visual hierarchy, it’s kind of like important stuff at the top, and the
less important stuff down below – so it makes sense, right?
What does that look like in a mobile environment? There are 2 apps I wanted to mention: the
first app, is from Opentable, and the next app, is from Yelp. So, Opentable, has the details that you need
for the restaurant up here, ya know – the time, place, location… and then they have
their call to actions, which is: book a table, or contact, something like that. Then as you
go down, as you basically swipe down you’ve got further details.
The Yelp app, follows kind of a classical information architecture view, we have the
details, the name of the restaurant details, address, the call to action, and so forth
and so on. Nothing wrong with the Yelp version, except for it shows less visual hierarchy
than the Opentable example. Where Opentable has actually got their visual hierarchy – everything
is happening here. And remember, in the mobile context, you are moving around a lot, so that
means you’re glancing as well, and your comprehension is actually 50% less than it is on a desktop.
There have been studies that have been done on that. So you’re sitting there with your
phone and seeing it all here, with your call to action, and you’re able to tap the right
button. Here, you’re swiping through, and that’s fine, because you’re in a mobile medium.
But it means that you might have to swipe down here to get the call to action, as opposed
to seeing it straightaway, in this preferred visual hierarchy example.
So, thinking about hierarchy, thinking about tasks in a mobile environment, if you can
show it upfront, the better. Otherwise, think about how you might able to adjust your content
or bubble up your call to action so that they are more easily glanceable, and easier to
comprehend. That’s it for this week’s UX Power Up. Happy
UX’ing. We’ll see you on a future Power Up.