Monday, April 28, 2008

Right-Justified Navigation Menus Impede Scannability

Jakob Nielsen on right vs. left side navigation ...

"Users scan lists by moving their eyes rapidly down the left edge. Menu items that are right-aligned make scanning more difficult.

We know from eyetracking studies that users tend to rapidly move their eyes down the left-hand side of lists. People read the rest of a list item only if something catches their eyes in these left-most one or two words.

The menu design guidelines are thus clear, at least for vertical menus:

* Left-justify the menu, so that the user's eyes can move in a straight line and don't have to re-acquire the beginning of each new line.
* Start each menu item with the one or two most information-carrying words.
* Avoid using the same few words to start list items, because doing so makes them harder to scan.

Aligning a navigation menu with the right margin might look cool, but the resulting ragged left margin severely reduces the speed with which users can scan the menu and select their preferred options.

(Of course, the left-alignment guideline is for languages that read left-to-right. For languages that read in the opposite direction, the guideline is reversed: you should right-justify the menu. In either case, the point is to make it easier for users to scan down the side on which they start reading.)

Take a look at the following screenshots. I picked university sites for this illustration, but right-aligned navigation disease is found on business sites as well. (below)

Note how hard it is to scan the menus. Paradoxically, Vanderbilt provides us with an example of correct alignment in the same screenshot: it's much faster to scan the top menu than the bottom one.

To complicate matters, two of these screenshots also violate the guideline against USING ALL CAPS, which reduces legibility by about 10%. When you mix cases, the ascenders and decenders produce varied letterforms, while all caps produce boxy shapes. Users recognize words faster when you preserve traditional word shapes. (As an example, compare the word "Employment" in the left-hand menu with the word "EMPLOYMENT" in the middle menu.)

Finally, the contrast between the text and background colors in the middle menu is too low. Violating three legibility guidelines makes the middle menu particularly hard to read, especially for low-vision users. So, in this sampling, the University of Michigan takes the prize for worst menu design. (The school has a good human-computer interaction program, but apparently the site designers failed to consult the local experts.)"    (Continued via Jakob Nielsen's Alertbox))    [Usability Resources]

Navigation menus from three university websites. - Usability, User Interface Design

Navigation menus from three university websites.


Post a Comment

<< Home

<< Home