Designing for Clarity

We have many words for the frustration we feel when an webpage 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.

Visual Hierarchy

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. Take a look at these two videos about establishing clear visual hierarchies.

---

---

Create Clear Hierarchies

To sum up, 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. Weak hierarchies, on the other hand, don’t set appropriate context. They may leave out something important, they may frame their topic Links to an external site. 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.