6 Usability Basics for Landing Page Optimization

If I can't find something on your landing page, it might as well not exist. Accessibility has to do with how information is organized, how much emphasis is assigned to items and how easy the information is to access. Here are six usability basics for landing page optimization that'll help anyone find your landing page:

1. 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?

2. Feedback. When users take actions, do they get immediate feedback? Do the pages change when they click on or mouse over important content?

3. 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?

4. Fault tolerance. Do you anticipate common user errors or refuse to deal with them because only “illogical” people make them? Do you suggest meaningful or helpful alternatives when visitors have reached apparent dead ends? Does your site support the easy reversal of unintended actions by users? Are your error messages supportive or alienating?

5. Affinity. Does your intended audience like your site? Do online visitors feel comfortable or anxious during their visits? Do they consider you professional and credible? Are your sites' visual look and feel and editorial tone appropriate for your audience? Remember, these questions are answered automatically by the visitors' limbic — i.e., emotional — systems and cannot be fooled or reasoned with. Their initial gut impressions of your site influence their motivation to continue.

6. 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 web experiences are currently based on reading, legibility requires special attention. Follow these web legibility guidelines:

• Font styles. Use sans serif fonts such as Arial, Helvetica or Geneva. Don't use serif fonts — or fonts with small lines at the end of characters — such as Times Roman, Courier or Palatino. At typical monitor resolutions, which are much lower than printed materials, serif fonts are harder to read.
• Font sizes. Use 10- to 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 target an older audience. Make sure you allow sufficient spacing between lines as well. 
• Font consistency. Don't use a wide range of font styles, colors or sizes. 
• Underlines. Don't use underlines in regular text. Underlines are — by very strong convention — expected only on hyperlinks. If you must emphasize text, consider other methods, such as different size, bolding, italics, or different text or background color.
• Justification. Don't justify paragraphs of text to create equal-length lines. The jagged ends of unjustified lines help people position themselves in the text and increase reading speed and comprehension. Always use left-justified text. Don't center body text, especially bullet lists of varying line lengths.
• All caps. Avoid using text in all capital letters; it's harder to read.
• Line length. Blocks of text more than 50 characters wide are hard to read. Consider putting forced carriage returns — also called hard breaks — in your paragraphs so your lines don't 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're intentionally trying to de-emphasize something. Don't use reverse font treatments or lighter text against darker backgrounds.
• Link text. Blue underlined links are the de facto standard, as is purple for previously visited links. Don't 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 also should be relatively light to enhance legibility. Don't use high contrast graphical images as background for text.

Tim Ash is president/CEO of San Diego-based SiteTuners, a landing page optimization company. Tim's a frequent columnist and writer on conversion improvement and the author of the best-selling book “Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions.” You can reach him at tim@sitetuners.com.

• MORE ON
• E-COMMERCE