Keep Like with Like

Grouping associated items together ensures that they are noticed. It's common behavior to look for related objects in the same area. If they're not there, people often assume that they don't exist or that something is amiss. For example, if people were looking for product specifications, they'd probably look somewhere near the product description. If it's located elsewhere on the page, they most likely won't notice it.

The navigational areas are sprinkled throughout this page with no apparent hierarchical order. For example, corporate information is placed on the left, bottom and top of the page. Having like items in different places causes people to aimlessly hunt around.

"I'm thinking this is a horrible site because nothing makes sense to me. On the homepage, they have options on left, bottom, and upper corner. And nothing seems clear about what it's going to lead you to."

(Facing page, top) The icon key on the California State Parks Web site appears too far down a long page, so many people didn't know it existed. Presenting the icon legend at both the top and bottom of pages might provide better visual cues. However, since the meaning of the icons is not evident, text links would work better.

(Facing page, bottom) Almost every user in our tests had difficulty signing up for Devil Mail because the sign-up button was hidden below the viewable area of the page. The login area appeared to be the only actionable area of the page, so users tried to sign up there. The illusion of completeness strikes again.

For Web applications, place the input area in close proximity to the output/results area. People can easily miss visual feedback when the two areas are spaced too far apart or not within the same viewable or work area.

This small online application is intended to help meeting planners select meeting rooms that are appropriate for their event needs. When users interact with the list of room features (say, Light switch), the diagram updates to show the location of the chosen features. However, the floor plan diagram is so far below the input area that people didn't even notice when it was updated. Even worse, people who viewed the screen at 800 by 600 pixels didn't see the floor plan at all because it's pushed below the viewable area. The illusion of completeness made small-screen users think that the small room diagram was all that was available on the page. (Try covering up the bottom half of this screen shot to see why.)

Users with low vision who use screen magnifiers don't have the full visual context of the screen and have to move their magnified view around to various areas to get context. So any changes or feedback that appear outside the magnified area can easily be overlooked. Putting the active areas close to each other helps all users, but especially those with low vision, who can see only one part of the screen at a time.

Notice that the description for the left-hand navigational items appears at the top of the page instead of by the items. When related items are placed too far apart, people don't notice the change. This is even more problematic for audiences who use screen magnifiers and won't know if changes occur outside their viewable area.

The area above the dotted line is what users see without scrolling on a 1024-by-768-pixel screen. Clicking the characters in the green area, which is above the fold, reveals the showsbut the visual feedback occurs below the fold. Kids can easily miss shows because they can't see changes without scrolling the page. Place visual feedback and input areas in close proximity and in the same viewable area so that information isn't lost.

Sloppy Formatting of Forms

Careless formatting of forms is another area that trips people up. When fields appear scattered and disorganized, it's difficult to tell which label goes with what widget. Properly aligned widgets and spacious layouts help people recognize groupings and understand the relationship between them.

The lack of structure on this form creates visual cacophony. Highly associated entries such as street number and street name are awkwardly separated. The text boxes are spaced so far apart that people in our study misunderstood their association. It's better not to split fields for street addresses.

The crammed layout makes it difficult to tell which text boxes the labels and examples refer to. The lack of indentation and proper spacing caused people to overlook the radio buttons and assume that they were required to enter the location in both ways.

People can easily miss the radio buttons and checkbox on the right because they're too far removed from the main input area.

The two-column layout on this page doesn't match the registration workflow that users are accustomed to. People are used to completing similar information in the same place, working from top to bottom. Having to go all the way to the bottom of the form and scroll all the way up againwith questions midway diverting their attentionis jarring and leads people to overlook or forget about the choices in the panel on the right.

Registering in the wrong place is a common mistake among users. Most registration screens have an area reserved for new customers, but more often than not they use the other side because it has input areas while the new user side does not. People are highly attracted to text boxes because they appear actionable. Users would rather do something than read something. That's why they gravitate toward open boxes and ignore everything else on the registration page.

New users tried to register using the Member Login area of this site. The text boxes are much more prominent than the Register button for new registrants on the opposite side of the pagetoo far away for users to notice it. New members tried creating usernames and passwords in the member area and wondered why the system rejected their entries.

Similarly, people ignored the Not Registered Yet? area on this site and went directly to the Member Sign In side. Formatting both sides more evenly would have attracted more new users. Better yet, let new users enter information in the member side and have the back-end handle the rest.

This is the preferred solution for having a login screen that is accessible to people who are not registered users. The first question is the same for everybody, and the second question clearly presents two radio buttons, with the Yes button chosen by default if the computer has a cookie indicating that the user is likely to be a returning customer. This screen has a bit too many design elementsfor example, even though Search should usually be ubiquitous, there's no need to present three Search boxes to compete for the user's attention on a login screen. Among the page's other positive elements are clear links to resolve two common problems: forgotten passwords and changed e-mail addresses. Just-in-time help is usually better than requiring users to find the answer to a problem in a comprehensive online documentation system where they are just as likely to get lost.

Offering Save for Later and Remove buttons is nice, but edit tools should not be given such prominence in the order summary area. Also, the Purchase Now option is redundant because it's understood that shopping carts are meant for purchases. Removing unnecessary options and placing things in the right areas unclutters the interface and improves scannabilty.

Prioritizing Web Usability
Prioritizing Web Usability
ISBN: 0321350316
EAN: 2147483647
Year: 2006
Pages: 107

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: