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.
Usually, I don't update my articles just because somebody redesigns a website I criticized. After all, any site I mention is only used as an example of a larger principle and the critique of any specific design choice is still valid, whether or not the mistake is live on one particular site. But fixing a usability problem the same day is unusual, and also allows me to show you the above screenshot of the improved menu. I think you'll agree that it's much easier to read than the earlier design.
