Usability Basics for Landing Page Design

• Tweet
• Buffer

"Common sense is not so common." - Voltaire

Have you used common sense on your landing page?

Or have you simply slapped your landing page together?

Review your site to ensure that you have followed these guidelines. If you have not, flag any deviations as the basis for redesigning your page.

Some overall goals of usability are:

• Decrease the time required to finish tasks
• Reduce the number of mistakes
• Shorten learning time
• Improve satisfaction with your site

When we are considering usability for landing pages, we should always take into account the following picture of our visitor's typical mind-set and behavior:

• The visitor has extreme impatience.
• The visitor's commitment level to your website is low.
• Text is scanned, not read.
• The visitor has a short fixation on more prominent items of interest.
• The visitor will pay attention to certain kinds of pictures.
• The visitor's typical desired next action is to click on something.

Information Architecture

Information architecture defines the way that information is organized on your website. This is typically hierarchical in nature (and looks like an extended outline on your sitemap page). Remember, the Web is a hyperlink medium. People do not necessarily follow orderly or linear progressions (like they would when reading this column, for instance). They jump around and follow their nose. For this reason, some websites provide multiple navigation schemes to support their visitors' mental maps.

In general, your site navigation should:

• Be easy to understand (and grouped into logical units)
• Be visible (not require scrolling to find key navigation)
• Support the visitor's task (and not your company's organization)
• Be consistent throughout the site (except when the context for the task changes)
• Use clear and distinct labels (so people know what to expect on the next page)
• Provide context (visitors need to know where they are in your site)
• Be tolerant of mistakes (allow visitors to easily reverse their last action and get back to their previous state)

Accessibility

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.

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 system and cannot be fooled or reasoned with. Their initial gut impression of your site will influence their motivation to continue, trust in your site, confidence in the information that you provide, perception of the ease of use, and overall satisfaction.

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 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 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. For reflected light sources like books, black text on white background is best. Projected light sources like computer monitors are actually best with light text against a dark background. The light emitted by the light-colored pixels on the screen interferes with your ability to pick out the passive dark pixels of the text itself. However, there is such a long-term bias from the printing world regarding dark text on light backgrounds that you should use it whenever possible.
  
  
• 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.

The point of good usability is to make things easy for your visitors. Remember, if it's not obvious, you are losing a lot of money. Subject your landing page to the "Obvious Standard" to improve conversion rates.