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.
menu design guidelines
are thus clear, at least for vertical menus:
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
, 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.
8 hours after posting this article, I got email from the University of Michigan design team that they had redesigned their navigation menu.
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
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.
Share this article: Twitter | LinkedIn | Google+ | Email