717 798 3495
By Mike Perla
Director of Conversion Optimization & Creative, Fathom Online Marketing
When it comes to converting visitors, addressing usability issues – or “friction” – should frequently be your first step. No matter how compelling your business offer, you will certainly lose conversions if visitors have difficulty absorbing your content or determining what step to take next.
Page hierarchy and readability are essential to good site design and aid visitors in understanding what actions they can take on the page and why they should act.
Page Hierarchy
When a visitor arrives at your site for the very first time they are surveying their digital surroundings. They are taking in all the different page elements and attempting to make sense of it all. This can be made to be intuitive and painless by establishing clear hierarchy.
At times companies feel the need to use numerous colors and graphic styles on their site to make up for a lack of imagery, or to spice up a seemingly boring product/service offering. The result is a variety of conflicting page elements that make it hard to identify what is important. A lower conversion rate is guaranteed when visitors must sort through numerous competing page elements.
Therefore, color and graphic style should be consistent and follow a set structure that is deployed throughout a page and/or site. For example, a primary call to action (CTA) button should always “pop with contrast” or stand out more than any other page element. This ensures the primary CTA will draw the attention of your visitors even when there are additional CTA buttons vying for their attention. Other such examples include having consistent color and style for secondary CTAs, page links and content headers.
In addition to color, size and placement play an important role in hierarchy. A larger design element will be perceived as carrying more weight or more importance than a smaller design element. Similarly, a design element placed in a more prominent area on the page is much more likely to draw attention to itself.
The last aspect of hierarchy I am covering is proximity. A page element’s proximity to other elements can imply meaning or purpose. For example, you might have a phone number, a contact button, and live chat all in the same area of a header. These are methods of contacting a company and therefore belong in the same area. Additionally, you could have a testimonial accompanied by a headshot with and an individual’s name. Individually those elements lose their meaning, but in close proximity you associate the headshot and name with the testimonial.
Readability
Whether you’re displaying informational content or persuasive copy, the key is being concise: clearly communicating your meaning with as few words as possible. I am not referring to broken English or text message shorthand, but rather eliminating the fluffy, flowery language riddled with adjectives and adverbs… the exact opposite of what English teachers taught you in school.
If you already consider your copy to be concise, consider how it is formatted. Are your paragraphs dense or is the copy broken out into smaller, easily digestible chunks? You should break your paragraphs up into smaller portions of content to make your content easier to read.
Breaking up a paragraph into individual bullets is a great tactic when listing out product/solution benefits or differentiators. In addition, within each bullet it is important to make key words or phrases bold to enhance scan-ability. The bold copy helps drive visitors’ eyes through the content.
Readability must always come first when text or copy is laid over design elements: graphics, photography, or call-to-action buttons. In such situations the copy should always “pop” off design elements through use of contrast.
In the end, visitors will not stay on your site if they have to strain to read your content.
Conclusion
Basic design principles like page hierarchy and readability are often overlooked by designers and developers. Yet, they can play a large role in a site’s ability to convert.
Have you seen increases in conversion from revising page hierarchy or improving readability?
About the Author
As Director of Conversion Optimization & Creative, Mike Perla heads the conversion rate optimization and website design teams of Fathom Online Marketing. He joined Fathom in 2006 with more than 10 years of experience as a designer and developer for both online and print media. Right after joining the company, Mike led Fathom’s rebranding and was instrumental in the launching of its video production department.
Mike has managed and directed high-traffic website designs. He has also developed proprietary Flash applications and has been involved in the promotion of best practices for conversion rate optimization, web design, persuasive copywriting, persona development and market positioning.
See Mike Live!
Mike is sharing usability strategies for reducing online friction at Conversion Conference Fort Lauderdale 2012 on October 9th and 10th in Florida. Join him in his session on “Usability: Reducing Friction and Boosting Conversion.” See the full agenda or read more about this session. You can also follow Mike on Twitter for some pre-conference networking.
Save $100 when you register with Mike’s discount code FL12524. Only 14 days to go – get your Conversion Conference pass now!
It is true that when a visitor arrives at your site for the very first time they are surveying their digital surroundings. They are taking in all the different page elements and attempting to make sense of it all.
It is true that when a visitor arrives at your site for the very first time they are surveying their digital surroundings. They are taking in all the different page elements and attempting to make sense of it all.