Eye-tracking studies, a key to UX design

Eye-tracking studies record the location and number of visitor glances needed to perform an assigned task. For the same task, the website that requires the fewest glances has better usability, a quantifiable component of user experience (UX). UX investigates the subjective and informs the following:

In addition to ease of use, UX studies the emotional response people have to a design.

The second line

The main menu does not need to be visually distinctive. If it's on the second line where visitors expect it, then they will find it. Besides navigation, the main menu has another function, to span the page in order to create a boundary between the top navigation section and the content section below it. Utility navigation at the bottom of the page should also span the page to form a bottom boundary of the content section.

Navigation should be consistent and visible, not hidden, drop-down or otherwise animated. Use a single row for the main menu, when possible, rather than multiple rows. Place additional utility navigation at the bottom or the left of each page.

Use the main menu to show users where they are on the website by some method like altering the shade or tint of the selected link. Make menu names clear at a glance. Creative names in navigation confuse visitors.

Elements that draw attention

A number of techniques below draw attention to elements on a page when the rest of the page is in a comparatively understated style. The techniques can be used in combination with one another.

White space

White space — margins and line spacing — attracts attention to what it surrounds. Bullet lists and short paragraphs draw more attention than long paragraphs because they have more white space.

Contrast

Often, the highest contrast areas on a page will be the areas with the most white space. Put an image of the page in a photo editor, reduce all colors to shades of gray, then blur the image. The areas with highest contrast will draw attention. Navigation areas are often in color while the content area is in black and white. In this way, the navigation areas have less contrast and visual appeal than the content area. Avoid too many areas on a page with high contrast, which dilutes focus.

Position

Website designers can move page elements around and get visitors to look wherever they want. Without making a specific effort, the upper left portion of the content section will receive more attention than other parts of the page.

Form layout

Input fields draw attention. Forms can cause confusion with a complex layout. Left-align input fields in a single column. Put a clear field label directly above each field. Adequately space the fields. As with menu labels, avoid creative names. Keep forms as short as possible by not requesting unneeded information.