Usability Basics for Landing Page Design

  |  May 24, 2010   |  Comments

Did you use common sense to design your landing page? Consider these best practices.

    "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.

ClickZ Live Chicago Join the Industry's Leading eCommerce & Direct Marketing Experts in Chicago
ClickZ Live Chicago (Nov 3-6) will deliver over 50 sessions across 4 days and 10 individual tracks, including Data-Driven Marketing, Social, Mobile, Display, Search and Email. Check out the full agenda and register by Friday, Oct 3 to take advantage of Early Bird Rates!

ABOUT THE AUTHOR

Tim Ash

Tim Ash is CEO of SiteTuners.com, a landing page optimization firm that offers conversion consulting, full-service guaranteed-improvement tests, and software tools to improve conversion rates. SiteTuners' AttentionWizard.com visual attention prediction tool can be used on a landing page screenshot or mock-up to quickly identify major conversion issues. He has worked with Google, Facebook, American Express, CBS, Sony Music, Universal Studios, Verizon Wireless, Texas Instruments, and Coach.

Tim is a highly-regarded presenter at SES, eMetrics, PPC Summit, Affiliate Summit, PubCon, Affiliate Conference, and LeadsCon. He is the chairperson of ConversionConference.com, the first conference focused on improving online conversions. A columnist for several publications including ClickZ, he's host of the weekly Landing Page Optimization show and podcast on WebmasterRadio.fm. His columns can be found in the Search Engine Watch archive.

He received his B.S. and M.S. during his Ph.D. studies at UC San Diego. Tim is the author of the bestselling book, "Landing Page Optimization."

Connect with Tim on Google+.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Analytics newsletter delivered to you. Subscribe today!

COMMENTS

UPCOMING EVENTS

Featured White Papers

IBM: Social Analytics - The Science Behind Social Media Marketing

IBM Social Analytics: The Science Behind Social Media Marketing
80% of internet users say they prefer to connect with brands via Facebook. 65% of social media users say they use it to learn more about brands, products and services. Learn about how to find more about customers' attitudes, preferences and buying habits from what they say on social media channels.

Marin Software: The Multiplier Effect of Integrating Search & Social Advertising

The Multiplier Effect of Integrating Search & Social Advertising
Latest research reveals 68% higher revenue per conversion for marketers who integrate their search & social advertising. In addition to the research results, this whitepaper also outlines 5 strategies and 15 tactics you can use to better integrate your search and social campaigns.

Resources

Jobs

    • Digital Marketing Analyst
      Digital Marketing Analyst (GovLoop) - Washington D.C.Are you passionate about audience acquisition? Love effective copy and amazingly effective...
    • Product Specialist
      Product Specialist (Agora Inc. ) - BaltimoreDescription: The Product Specialist is hyper-focused on the customer experience and ensures that our...
    • Partnerships Senior Coordinator
      Partnerships Senior Coordinator (Zappos.com, Inc.) - Las VegasZappos IP, Inc. is looking for a Partnerships Senior Coordinator! Why join us? Our...