Visual Hierarchy - Order

In my experience, good visual hierarchy is most important and most often missing element of project and business documents and plans. It could be because analytical people sometimes don’t have the design mentality to do it well, It could be because it takes a little extra time and effort to pull off, but I think a major reason it’s done so poorly so often is because it isn’t discussed, broken down, and practiced in team settings. To do my part in changing this trend, I’m compiling examples of good visual hierarchy.

Some elements of visual hierarchy that we will explore are:

  • Order
  • Impact
  • Arrangement
  • Grouping
  • Conditional Formatting

The ‘Fuzzy Eyes’ or ‘At a Glance’ test

If you were to look at the information without out of focus eyes or just glance at it for a moment, would you have the basic idea? Would you be able to explain what’s happening by that short view?


First Example - Order

Can you tell, at a glance, what number between 1-100 is missing?

My guess is no. In this example you have to start counting numbers and crossing them out before you find the one that's missing. 

How about this example. Can you tell what number between 1-100 is missing? 

My guess is you can in less than a second. In this example, we can see the gap visually first without having to identify or assess any numbers. Then, we can see that rigorous order has been applied so we know what number is missing after looking at any surrounding number.

Johnathan Deckert