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.
Navigation menus from three university websites. Left to right:
Indiana University, University of Michigan, and Vanderbilt University.
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.)
Menu alignment is admittedly a small point rather than a top high-ROI redesign priority. But it’s easy to get right — just don’t align to the right.
Updated Menu
8 hours after posting this article, I got
email from the University of Michigan design team that they had
redesigned their navigation menu. Fast work.
U. Michigan’s old (left) and new (right) nav menus.
Jakob Nielsen‘s
Alertbox, April 28, 2008
http://www.useit.com/alertbox/navigation-menu-alignment.html