Usability Basics for Landing Page Optimization by Tim Ash, March 21, 2011 We’ve all heard the saying “perception is reality.” And when it comes to website usability, there is no truer statement. Bottom line: if a user cannot find something on your landing page, it might as well not exist at all. Website usability has to do with how information is organized, how much emphasis is assigned to items, and how easy the information is to access for the average web visitor. You don’t need to be a usability expert to make your site more usable. Here are some basic principles that can be applied to any landing page to increase its usability and, in turn, improve its conversion rate. Availability Do visitors know what their options are by visually inspecting the page? Is your navigation prominent enough, consistent, and placed in a conventional location? Feedback When users take an action, do they get immediate feedback? Does the page change when they click on or mouse over important content? Organization Is your information architecture clear, consistent, and based on appropriate visitor roles and tasks? Is it organized into a small number of digestible “chunks”? Is it easy to skim and scan? Fault tolerance Do you anticipate common user errors or refuse to deal with them because only “illogical” people would make them? Do you suggest meaningful or helpful alternatives when the visitor has reached an apparent dead-end? Does your site support the easy reversal of unintended actions by the user? Are your error messages supportive or alienating? Affinity Does your intended audience like your site? Do they feel comfortable or anxious during their visit? Do they consider you professional and credible? Are your visual look-and-feel and editorial tone appropriate for your audience? Remember, these questions are answered automatically by the visitor’s limbic (emotional) system and cannot be fooled or reasoned with. Their initial gut impression of your site will influence their motivation to continue. Legibility Is your font easy to read? Is it the right size for your intended audience? Do text and background colors clash, or assault the senses? Are too many fonts, sizes, and colors used throughout the page? Since most of our Web experiences are currently based on reading, legibility requires special attention. The following Web legibility guidelines should be followed: • Font styles Use sans serif fonts such as Arial, Helvetica, or Geneva. Do not use serif (with small lines at the end of characters) fonts such as Times Roman, Courier, or Palatino. At typical monitor resolutions (which are a lot lower than printed materials), serif fonts are harder to read. • Font sizes Use 10–12 point fonts for most body text. Larger and smaller fonts reduce reading speed. Consider increasing your font size by a couple of points if you are targeting an older audience, and make sure that you allow sufficient spacing between lines as well. • Font consistency Do not use a wide range of font styles, colors, or sizes. • Underlines Do not use underlines in regular text. Underlines are by very strong convention expected only on hyperlinks. If you must emphasize text, consider other methods (different size, bolding, italics, different text color different background color). • Justification Do not justify paragraphs of text to create equal-length lines. The jagged ends of unjustified lines have been shown to help people position themselves in the text and increase reading speed and comprehension. Always use left-justified text. Do not center body text—especially bullet lists of varying line lengths. • All-caps Avoid using text in all capital letters. It has been shown to be harder to read. • Line length Blocks of text over 50 characters wide are harder to read. Consider putting in forced carriage returns (also called “hard breaks”) in your paragraphs to make sure that your lines do not become too long when displayed on wider computer screens. • Contrast High contrast between text and background increases legibility. Black text on white background is best. Stay away from low-contrast text/background combinations unless you are intentionally trying to deemphasize something. Do not use reverse font treatments (lighter text against a darker background). • Link text Blue underlined links are a de-facto standard (as is the purple color for previously visited links). Do not change these defaults unless you have a very compelling reason. • Text background colors and images White backgrounds for body text are a strong convention. Navigation and header background colors should also be relatively light to enhance legibility. Do not use high-contrast graphical images as background for text. Tim Ash is the CEO of SiteTuners.com, a landing page optimization firm that offers consulting and conversion improvement tools. He is the chairperson of ConversionConference.com and a speaker at events worldwide. Tim is a contributing columnist at many publications and author of Landing Page Optimization. Filed under: Columnists, Revenue Tagged under: Columnists, Landing Pages, Optimization