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 first line

The odds are good visitors found the website through a search engine. When visitors do not see quickly what they are looking for, then they return to the search engine either to search the website or to find another website. Visitors expect to find the following elements, collectively known as administrative links, right aligned at the top of the page:

Links at the top of the page should be in the same style as the utility navigation, understated and visually weaker than the main menu. Utility navigation should be located at the bottom or the left of each page.

Place the logo in the upper left corner to identify the website. Link the logo to the home page. If there is sufficient space left of the administrative links, then the logo can go on the same line. Otherwise, put the logo on a new line below the administrative links.

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 can confuse visitors.

The content section

Place the main content or input fields in the left of the content section. Keep the content section in an understated style in order to avoid the perception of an advertisement. Even as priority decreases further down the page, what is against the left margin will get more glances than what is against the right margin.

Advertisements draw attention when they are relevant to the content. Ads are most likely to attract notice when they are against the right margin in the content section and to a lesser degree at the top of the page. Again, the more produced the ad, the less likely people are to see it. Plain text ads attract more attention than graphical ads. When text ads mimic the website style, they draw more glances than ads in a unique style.

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.

Size

The biggest thing on the page must be important. This might be the first header in the content section. Consider making the first header larger than the other headers, surrounding it with extra white space, or both.

Color, 3-D effects, bold

Complementary color schemes draw attention. Used in combination with 3-D effects and bold type, which also draw attention, complementary color schemes are common for conversion elements like payment buttons.

Links

Anything that looks like a link or a button will draw attention. Do not mix navigation sections and content sections. Distinguish the areas with clear boundaries and different backgrounds. Do not confuse visitors with elements that look like links or buttons but lack a navigation function. Avoid blue text except when it has a navigation function. Progress indicators should not look like links or buttons unless they contain links to stages of the process.

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.

Images, illustrations, videos

Content is the most influential factor in a successful website. Images must be unique and relevant to the content. Visitors tend to go straight to the text without ever glancing at the images because stock photos are so common. Eliminate superfluous elements, useless images and optional input fields.

News and retail websites will never be short of related images. Compensate with more white space when the content does not lend itself to visual representation.

As a rule — a rule with many exceptions — relevant images and illustrations should take less than half of any screen as the visitor scrolls up and down a page. Images are more likely to be noticed when they are of exceptional quality, high contrast and contain a single subject instead of a group of subjects — a formula similar to an icon.

Image attributes that attract attention include uniqueness, foods and friendly faces with eyes looking at the viewer. Technical illustrations provide the best example of relevant images. Even more so than photographs, drawings and illustrations must be unique and relevant. Avoid drawings in the style of clip art.

Even while visitors avoid most web animations and videos, they appreciate animated instructions and progress indicators. Videos should have play controls for pause, repeat, etc.