Neo Insight's e-newsletter on Customer Experience topics and techniques.
We invite you to subscribe to
our monthly e-newsletter:

In this issue

Design landing pages to focus attention
Form design – Label alignment tips
Free Trials – Customer-Centric Index

Upcoming events

June 24, 2009	CHIStuds 2009 – CapCHI Presentation of Carleton Students' User Experience Research, Ottawa, ON, Canada
July 19-24, 2009	HCI International – Human-Computer Interaction Conference, San Diego, CA, USA
Sept 15-16, 2009	IDEA2009 – Information Architecture and User Experience Conference, Toronto, ON, Canada
Sept 15-18 , 2009	UX Week – Adaptive Path's User Experience Conference, San Francisco, CA, USA

Design landing pages to focus attention

Who and what are your landing pages designed for? Knowing the answer to this question is critical to website success.

What is a landing page? Your Home page is a landing page. Any page arrived at via your main navigation. Any page arrived at via search. They are all landing pages.

Your landing pages should have a strong focus on supporting the top tasks of your mission critical visitors. Unfortunately, we often see a more democratic approach taken –giving everyone an equal amount of real estate.

Everyone may want their share of the landing page real estate, especially on the Home page, but giving in to this temptation constitutes website suicide. You create a dense jungle of unrelated content all screaming for your visitors’ limited attention. People either have to hack their way through the jungle or find another website that offers a clearer path. What would you do?

Time is the currency on the web. People spend their valuable, and finite, time to engage with your website. If you waste their time, they will have a negative experience and will leave. They will not convert. They will not click through to achieve their task. They will not fill out forms. They will not download reports or software. They will not buy something.

Awareness is the first step in any learning, transactional or decision making process. When people come to a web page to achieve some task, they must first be aware that the page supports their task.

Do I see what I want? How long is it going to take me to get it?

Make top tasks stand out – Do not have multiple links and content each screaming for attention. Top task links and content should be assigned proportionately more screen real estate and made more prominent.

Make things quick to do – Get people started on their top task or on the path to their task as quickly as possible. Provide a clear, uninterrupted path to their task and support progress toward their goal every step of the way.

Eliminate clutter – Once you clearly understand your critical visitors’ top tasks, eliminate or downplay anything that does not directly support those tasks.

Refine remaining content – Ruthlessly edit any remaining content. Use concise bullets instead of paragraphs. Align links so they are easy to scan. Organize content with concise headings so people can jump immediately to the content of interest. Move critical words to the beginning of bullets or titles.

See Jakob Nielsen's Alertbox, April 27, 2009 for a good summary of writing web headlines. Another good resource is Caroline Jarrett's Principles of Editing that Works.

You may feel that each item on your landing pages is useful to someone. However, the cumulative effect of trying to accommodate everyone’s needs is that no one is well served.

Tim Ash nicely summarizes some Rules of Web Awareness in his book Landing Page Optimization:

If the visitor can't find something easily, it does not exist
If you emphasize too many items, all of them lose importance
Any delay increases frustration

Begin with the desired experience (outcome and impact) in mind and work backward to remove anything that distracts or detracts from that experience.

Give us a call at 613 271-3001 or 866-232-8522 if you need help identifying your top tasks or designing your landing pages.

Form design – Label alignment tips

Input forms invariably show up on most websites we test. Often people give little regard to forms design but the details can really affect the speed and accuracy with which people fill them out. An eye-tracking study on label alignment, conducted by Matteo Penzo, provides some design guidance.

The study found left-aligned labels were easiest to scan but were associated with the longest completion times. The large distances between some short labels and the entry field caused excessive scanning and cognitive load.

Right-aligned labels significantly reduced the scanning distance and cut completion times in half.

But the layout with best completion times and minimal cognitive load was top-aligned, above the input fields. This placement allowed people to capture both the label and input field in a single gaze – no scanning required. People concentrated on the data entry because the labels were always within view.

The main drawback of using labels above the field is that it requires more vertical space. The advantage is that it permits more flexibility for longer field names and longer input fields.

Image showing different alignment options

When to use top-, right-, and left-aligned labels in a form

Top left-aligned labels – Use this label placement when completion time is critical, the data being collected is common (e.g. billing and shipping information), and the flexibility to support longer labels or larger input fields is important (e.g. language translations). This placement requires more vertical space and it is important to control the spacing between fields and between the labels and the associated fields to ensure efficient scanning.

Right-aligned labels – Use this placement of labels when vertical space is at a premium and people are familiar with the type of information being requested. If scanning of labels is important, it will be more difficult to scan the ragged left edge.

Left-aligned labels – Use only when the data required are unfamiliar and people have to depend heavily on scanning and reading the labels. Try to keep label lengths similar. If short and long labels are mixed, some labels may be a large distance from their associated entry field.

These may seem like small details but they all contribute to the effectiveness, efficiency and satisfaction of dealing with forms. Some other form guidelines include:

Only ask for the minimum amount of information absolutely necessary to proceed with the current task or transaction.
Avoid multi-column input forms except for some common types of sequential entries like first name, last name or date and time.
Minimize errors by being flexible enough to accept phone numbers, credit card numbers, postal codes etc. in a variety of formats.
Help users correct errors. Indicate the field needing correction by placing a clear, and helpful error message near the field to be corrected.
Help users as they progress through the form. Provide integrated help at the point of need
Don’t require the user to switch between manipulating a form element with a mouse and entering information from the keyboard. Let all input be done via the keyboard.

Free Trials – Customer-Centric Index

On Monday, June 22, 10-11 am EDT, our partner Gerry McGovern will be giving a free webinar about our Customer-Centric Index – a unique 2-minute survey that identifies strategic priorities of what's most annoying your customers. It allows you to focus your scarce resources on the areas where they will achieve maximum improvement and impact.

Join us on June 22nd to find out how the index works, how we've been using it to benchmark University websites, and how you could qualify for a free trial. This is a limited time offer.

Quote of the month

“What information consumes is rather obvious: it consumes the attention of its recipients. Hence, a wealth of information creates a poverty of attention..."

Herbert A. Simon – Computer and Social Scientist

If you have any comments on The Insighter, or ideas on usability topics you'd like to hear about, send us an email with your comments.

We invite you to subscribe to
our monthly e-newsletter.