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 New York What's New for 2015?
You spoke, we listened! ClickZ Live New York (Mar 30-Apr 1) is back with a brand new streamlined agenda. Don't miss the latest digital marketing tips, tricks and tools that will make you re-think your strategy and revolutionize your marketing campaigns. Super Saver Rates are available now. Register today!

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

UPCOMING TRAINING

Featured White Papers

Google My Business Listings Demystified

Google My Business Listings Demystified
To help brands control how they appear online, Google has developed a new offering: Google My Business Locations. This whitepaper helps marketers understand how to use this powerful new tool.

5 Ways to Personalize Beyond the Subject Line

5 Ways to Personalize Beyond the Subject Line
82 percent of shoppers say they would buy more items from a brand if the emails they sent were more personalized. This white paper offer five tactics that will personalize your email beyond the subject line and drive real business growth.

WEBINARS

    Information currently unavailable

Jobs

    • Lead Generation Specialist
      Lead Generation Specialist (The Oxford Club) - BaltimoreThe Oxford Club is seeking a talented writer/marketer to join our growing email lead-generation...
    • Health Marketing Editor
      Health Marketing Editor (Agora Inc.) - BaltimoreCome flex your intellectual muscle as part of Agora, Inc’s (http://agora-inc.com/) legal team...
    • Marketing Systems Analyst
      Marketing Systems Analyst (OmniVista Health) - BaltimoreOmniVista Health is looking to add a Marketing Systems Analyst to our expanding team. We...