We have many words for the frustration we feel when an interface isn’t directing us to what we need to know. Loud, messy, cluttered, busy.
These words have been appropriated from other parts of life, of course, but we need them to express our feeling of being overwhelmed visually by content on a screen or page. We need them to express how unpleasant a user experience it is to not know where to direct our attention next.
A better term, one that graphic designers have used for a long time, is visual hierarchy. It’s a bit more technical than our favorite words, but it nicely encapsulates the problem we’re dealing with and the solution we can strive for.
Visual hierarchy suggests there is a proper way to view content visually: in a hierarchical way. In other words, there is a pecking order to things…some content should be viewed first, some second, some third, and on down the line. The most important content is at the top of the hierarchy. It’s the visual element you look at first, which then directs you to what to look at next. Just like a great writer starts with a interesting lead that sends you breathlessly into the next paragraph, a thoughtful designer will efficiently move the viewer from one piece of content to the next.
And just as a writer wouldn’t put the climax of their story at the beginning you wouldn’t put the call to action button at top of a landing page. That would leave the user with no context about why they should take that action. In this way you use hierarchy to tell a story, to provide context that culminates in the action being taken.
The best visual hierarchies lead users to take the action confidently. They have a clear, obvious order in which to view and act on things, with the most important things first. If you’re creating a sign-up screen, for example, the hierarchy might be made up of a catchy headline, some supporting motivational copy (perhaps features & benefits of using the service), a signup form, and a submit button. These elements should be visually coherent, looking like what they are, so that users are guided through them in the right logical order.
Weak hierarchies, on the other hand, don’t set appropriate context. They may leave out something important, they may frame their topic incorrectly, or they may place design elements in the wrong order. Weak hierarchies fail to organize information in a helpful way and leave users without a clear idea of what to do or read next. When this happens…unfortunately we know all too well what to do. We borrow a word from somewhere else to state our displeasure. We say “there is too much going on here”. But what we’re really talking about is visual hierarchy, one of the most important principles in all of user experience.
