Tips for Organizing Your Landing Page

If visitors 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? Is 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 can’t 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?

Because most of our Web experiences are 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. Don’t 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’re targeting an older audience, and make sure that 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 expected only on hyperlinks. If you must emphasize text, consider other methods (e.g., different size, bolding, italics, text color, or background color).
• Justification: Don’t 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. Don’t 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 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 deemphasize something. Don’t 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). Don’t change these defaults unless you have a 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. Don’t use high-contrast graphical images as background for text.