Point Your Website Users In The Right Direction With Visual Hierarchy

On your business’ website you probably have more important pages that you want your users to eventually get to — filling out a form to submit a lead, looking at a product listings page to make an online purchase, and so on. If users are not converting on the key pages like you want, it might be because your website design is not using proper visual hierarchy to subtly direct users in the right direction. Here’s a quick guide on how to follow the principles of visual hierarchy in web design to guide users where you want them to go.

Bigger Is (Generally) Better

The general rule for web design is that the bigger something is on the page, the more noticeable it is for people viewing it. This is not a new concept, as newspapers have for centuries used bigger font to draw the reader’s eyes to the pictures and the headlines first so the readers can quickly and easily find what interests them. Here’s how you can use size properly to guide your website’s users where you want:

• Make your call to action button at least bigger than most of the text and other design elements on the page
• Have a big graphic or image close to something you want the users to look at or interact with
• Use larger text for your page titles and headings to make the page’s content easier to scan
• The less important something is for conversions, the smaller it should be

With that general rule in mind, it is important to not go overboard with it. You still want the design to look nice and sleek and not ridiculous. You can always play around with and test your design over time, increasing or decreasing the sizes of various elements a bit at a time until you find your sweet spot.

Not All Colors Are Created Equal

If you are looking at a page that is mostly black and white, with one word or graphic in bright red, you are going to notice the colored element most easily. Even on a page that already has other colored elements, there are certain colors that tend to draw the eye more than others. Here’s how to use color in your web design to set a visual hierarchy of the important elements on the page:

• Save the bright and vibrant colors for the most important calls to action, buttons, graphics, and text
• Use complimentary colors on your website to really make your important elements stand out more — yellow won’t stand out from white or green easily, but it will stand out from black or blue
• You can flip the hierarchy of color by using white text or buttons on an all-color background to stand out more

If you don’t know much about the theories of color hierarchy and design, you can have a consultation with web design professionals to point you in the right direction. And again, you should always be testing your website by playing around with different uses of color to see what gets the best performance.

Put Important Links Where Users Look

In general, users tend to scan a website page in either an F-pattern or a Z-pattern depending on what type of page it is (article, online store, etc). They also tend to scan from left to right, making both the top part of your page and the left side the most important sections. Here’s how to make use of them:

• Use a header section fixed at the top of the page so no matter how they scroll so important elements (logo, navigation links, search bar, contact information, etc) are always in prime accessible location
• Have a column, or sidebar, along the left with other important links and calls to action on less important pages to help direct users to those key parts of your site
• Have a footer (not fixed) at the bottom of each page with other important links, information and calls to action

---

The internet has been around long enough that it is pretty well known the typical pattern of how users tend to navigate a website and a web page. You can research these studies and principles and combine them with the size and color hierarchies above to really optimize the conversion rate of your website.

Are you ready to begin your next website project?
Let’s get started