Web Usability Illustrated: Breathing Easier
With Your Usable e-Commerce Site (continued)

1.Provide "affordance" to controls

Make clickable controls obvious

The button on the right looks clickable (has "affordance")

Test for self-evidency of controls ("Which areas can you click on?")

User should not have to use the mouse pointer for clues!

2. Reduce irrelevant eye movement

Avoid challenging eye movements like this.

Keep a left-right, top-down task flow

Avoid these label placements.

For languages that read left-to-right, keep labels to left of an edit field (see next).

3. Reduce clutter

Research shows ragged left appears cluttered

Align text on left margin

Create groups by color, proximity, shape, and alignment

Avoid irregular columns

Make buttons the same width when arranged in a column

4. Maintain reading speed

Avoid all caps for text. Users lose 14-20% in reading speed.

1. Carefully engineer user tasks

Research the task to meet user expectations and concepts

Aim to simplify, reduce steps (including scrolling)

Perform walkthrough with collegues to get feedback before designing the site

2. Match field length to the data

Avoid misleading users with arbitrarily long entry fields

Should users enter state abbreviation or the long name? (etc.)

3. Consider instructional prose

Break into smaller steps (shown here)

What's the airport code for Toronto? (hint: it begins with Y!)

Avoid computer concepts unknown to your users