Criticue is proud to present a series of informational articles intended to help our colleagues in the web design and ecommerce world. Every article will provide you with a key finding that we have made in our work of helping web designers create the most effective possible designs.
We strongly recommend that you have someone not associated directly with your creative staff review and test your web site. Criticue.com provides free, intelligent, curated reviews and ratings of your site by real users.
Small things can have huge effects… for better or worse. It’s no more true than in constructing your site.
Small mistakes in the design of an e-commerce or product sales page can cascade into a general visitor experience that hurts your chances of selling or converting.
Let’s look at how you can embrace visual hierarchy as a key web design tool that supports your business.
Why Hierarchy Matters
We will make a working assumption that you want your web site to produce as many conversions – sales, email list signups, or other visitor actions – as possible.
If your visitor doesn’t see information prioritized in a specific way, they will not take an action that you desire them to take on your site. A high bounce rate is one symptom of this problem, and another is very poor conversion rates.
One very common design mistake is poor visual hierarchy – not giving importance to the most important elements of your content. Hierarchy usually means a tree like structure. Here, we mean that you should plan content that progresses and is arranged in a way that your visitors will be mostly likely to be engaged with. Well constructed hierarchy pulls your visitor’s attention toward elements that you want them to pay attention to.
How to Show Hierarchy
A deliberate hierarchy should be evident in your web design. Everything on your page – the text, the layout of the page, and even the colors and the placement of minor elements such as underlines or highlights – can be used to communicate the hierarchy of your site to the visitor. Poor decisions in this area can have the effect of driving away sales.
The elements of visual hierarchy are:
- Titles and headlines vs body copy. Titles and headlines signify important summary information. Most site visitors are impatient and expect to read a useful summary of information before they go further and read your copy. Well written headlines and titles fill this need.
- Visual arrangement. Most written Western languages are read left to right and top to bottom. Also, centered information is more important visually than information at the edges. This means that if you want something to be seen and acted on, you need to place it in the center of the person’s field of vision. The natural direction of reading also indicates that content on the right is more noticeable than content on the left of the page. An element that the visitor must see should be somewhere in the center third of the page and preferably to the right.
- Color and text attributes. Color, font styles such as bold or underlined, and font size send a message of importance and hierarchy. Routine information that is not essential to the sales process should be rendered in a relatively small font or removed altogether from a sales page.
These elements can all drive visitor behavior.
Let’s look an example of poor use of visual hierarchy, and another page that uses hierarchy successfully in a prototyped design.
Figure 1 – Poor Use of Visual Hierarchy
Here we can see three common, but easily repaired problems with a typical site design for online sales of an inexpensive product.
- The “Buy” option is not obvious (even though it is repeated.) And the “Free Trial” button is almost unnoticeable. There are two “Buy Now” options, both easy to overlook or to require hunting by the user due to their positions.
- No summarizing information. The page lacks summarizing information, namely a meaningful heading, to give a visitor a reason to pay attention to the site or what it is offering.
- Unimportant information is given too much prominence. The teaser text of revisions is featured on the main page of the site, and consume most of the central area. But only current owners will care about revisions.
Let’s next look at a version that fixes all of these problems.
Figure 2. Good Use of Visual Hierarchy
The problems with the example shown in Figure 1 are eliminated:
- The two most important user options are very prominent. The Buy option is much more obvious due to larger size, better positioning and a different color. Also, the “Free Trial” is extremely prominent. Due to top-to-bottom reading order, “Buy Now” appears slightly more important than the “Free Trial”… as it should.
- A meaningful title that provides real information is used. “One application that will solve all your problems” should be replaced by a headline that explains the primary benefit of your product or service in a 10 word or less short sentence.
- Other important information is given center of page treatment – here, the screen shot of the application being marketed.
- Distracting subordinate information that doesn’t support the purpose of the page is summarized and demoted in importance. The version log is like a footnote here – as it should be.
Visual hierarchy is a key tool for creating focus on your product, gaining the attention of site visitors, and providing the conditions for conversions to happen. Pay close attention to placement, color, headlines, and type of content. And test your design thoroughly.