In graphic design the concept of visual hierarchy indicates priority of visual items on a page. But how does this play out in mobile sites or applications? In this week’s UX Power Up Frank shares examples from two mobile apps to illustrate mobile visual hierarchy standards.
Transcript of video above…
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.
