You have arrived at part three of our three part series on critical elements of user interface design that are often ignored. In Part I, we dove into the importance of preserving white space and Part II focused on writing and implementing strategic microcopy.
Part III is all about visual hierarchy.
Have you visited a website where you don’t know where to start? Your eyes dart around the screen because there is too much to look at so you can’t find what you want. You’re lost, overwhelmed, and probably annoyed.
Sites like that are frustrating and often have very high bounce rates (aka users who leave the website after viewing only one page).
What are they missing?
Strategically implemented visual hierarchy.
Visual hierarchy provides clear visual clues to the structure of your content so that your users’ eyes travels from one piece of content to the next seamlessly. It’s based on the principle that great design should be presented in a way that makes intuitive sense.
Here’s an example of a website with poor visual hierarchy:
Overwhelmed? We are too. Now here’s an example of a website with strong visual hierarchy:
Notice the difference? The esurance site quickly communicates the purpose of the site and then offers a clear action for the user to take. Within seconds, you know what esurance is and what to do on the site – and you probably noticed a clean, modern, breathable design to boot.
We can’t say the same about the DMV site.
So how can you achieve visual hierarchy? Let’s break it down into three important steps:
Step One
Define your business objectives in order of importance. Ask questions like: What is/are the goal(s) of your business? What action(s) do I want site visitors to take?
Step Two
Consider what your site visitors want and rank those objectives in order of importance. Ask questions like: Why do users visit my site? What are they looking for?
Step Three
Combine steps one and two into one list and prioritize again. This consolidated list should act as your guide for presenting content on your site’s homepage. We know it’s tempting to put as much information as you can at the top of the page, but remember how overwhelming that is for a user. To keep users on your site, you need to prioritize information and present it accordingly.
There are a several design strategies that we use to employ visual hierarchy:
Size
When you increase the size of an object, you increase it’s importance. The biggest element in a design will be the first place a users looks so make sure it deserves that attention. And remember, size doesn’t just draw attention to an object. It can also be used to take emphasis away from other objects by making those appear smaller.
Color
Adjusting the color of an element in design is a great way to establish content hierarchy and add meaning. But color can be tricky to manage. Be mindful of the message and overall feel you want the color to convey – and be willing to exercise restraint. It’s easy to overload your design with too many colors and shades but it’s best to stick to a few – and be sure to retain a significant amount of white space for breathability…
Whitespace
Remember when we wrote about whitespace two weeks ago? It’s important in visual hierarchy too. Whitespace helps organize your design so that the right content stands out on the page.
Typography
When choosing a typeface, you’ll need to balance two opposing requirements: site consistency and varied font weights/styles for visual intrigue. Choose a typeface that has at least a regular, bold and italic style. You might also look at mixing serif and sans-serif fonts to improve your composition.
Contrast
Contrast for the purpose of visual hierarchy is only related to size and color. Here’s a great test to see if you are doing a good job with contrast: look at your page with blurred vision. Can you still see individual blocks of information? If you can tell them apart, you’re doing great!