Explaining visual hierarchy

Just playing around with some images and verbage to explain visual hierarchy and the subtle things that can have a big impact. I appreciate that I may be stating the obvious, but I’d appreciate any thoughts/comments on the following as a teaching tool.

Lets start off with this boring fella!

Impossible/difficult to say if any of the boxes attracts more or less of our attention. You could argue that top left may grab a bit more attention, but overall a pretty dull looking image.

What about this…

Have I given you a headache? What grabbed your attention most? Difficult hey. Too many top of the tree colours competing for your attention. If there is too much shouting at you it becomes difficult to know what to look at.

What about this…

Much easier eh! We can all agree that we’ll be spending more time looking at that big red box than any of the other boxes. And this simple technique can work on a much smaller scale…

It is the red one that wins again isn’t it, but don’t you notice yourself drawn to those other boxes a bit as well. So now we have established three levels of visual hierarchy – and you can guarantee that most people will be drawn to the red box and the area around it first. Good eh!

What is better is that this subtlety works when you remove things.

The absence of a box draws attention too!

As does slight differences in the boxes…

A little twist makes one box stand out so much.

So with all this subtle power at our disposal, why do we ever feel the need to create things that look like this?

So many websites (particularly home pages) have too many things shouting and fighting against each other for our attention. The more you need to accommodate, the more subtle the techniques you need to engage to highlight the different elements, or else you run the risk of overwhelming people.


5 responses to “Explaining visual hierarchy

  1. How many Excel spreadsheets and PowerPoint presentations have I seen that are like the last of your examples. My eyes are still burning!

    And the “designers” of these works seem mystified when you suggest to them that their Pro Hart approach to visual communication actually makes things look more rather than less complicated.

    It’s not Tetris, people!

  2. Great post, btw.

  3. One of the reasons this often happens (I guess) is the people who decide what has to go on the homepage don’t really thing long enough what the order of importance of those things is (Or state that everything is important) If a designer than does not take the task to force them to come up with an order and just starts working based on their vague feedback.. well, examples enough

  4. In my experience, it’s because there are so many people involved in deciding what goes on the home page that they end up bickering over it, insisting that their part of the business is essential and has to be represented. It’s important to have a clear business owner who can reach the best solution though discussion and rational decision-making – so that the look the organisation presents is cohesive, rather than an in-your-face rainbow splash of widgets and fonts!

  5. You might like this sign I saw on the weekend at Ballina airport 🙂

    Visual Hierarchy FAIL

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s