Web Site Menus and Colors - Being creative AND user friendly.
Today I visited the Procter
& Gamble web site and
noticed that site navigation was a bit inconsistent, which led me to an
interesting concept in web site navigation which hadn't occurred to me
before. The web site is broken down into 6 sections: Home; Products; Company;
News; Careers; Investing. You navigate to each section using the menu that's
across the top of each page. Then each section has an additional section
specific menu down the left side of the page. In general, the section menus
look like the one you see to the left. When fully collapsed all the choices
are in blue preceded with what you and I would call a twistie. When
expanded, well here's one of the places where it gets inconsistent.
In the image above you may have already figured out that I had selected
Pet Nutrition & Care. This is indicated by the change in color of the
menu item and the change in orientation of the triangle to the left. In
the Products section the menu items change to different colors when moused
over or selected, with green being the only color used more than once.
In other sections of the site, all section menu items change to light blue
when moused over or selected. When the menu item has a sub menu both the
menu item and the sub menu item change to light blue when selected and
both triangles point down. This is the way the section menus work for the
Company, News and Investing sections of the site.
| For the Career section
of the site they tried yet another approach seen here to the right. As
in the Products section, each menu item changes to a different color when
moused over or selected. The color matches the background color of
the image to the left of the menu item, and also the background of the
pull out menu when one exists. The one flaw was the placement of
the pull out menus. When I scrolled the page a bit the pullout menus were
no longer next to the menu item they were associated with and I could not
mouse to them and make a selection. What really caught my eye about this menu was the text above it: Easy Access Menu: On/Off . What you see to the right is the menu when the Easy Access feature is toggled off. To display the Easy Access menu you simply click the text. The Easy Access Menu will appear and On will be bold. |
| So what does the Easy Access
Menu look like? Well it looks like the image to the left. Its a fully expanded Technicolor menu that could make you blind if your browser is set to display text in a small font as it was here. Don't get me wrong I really like the idea of offering site visitors a choice between seeing a completely expanded menu versus a collapsed one that requires the casual visitor to either mouse over each menu item to see a pull out menu, or click menu items one at a time to see their sub menus. I just think this one was not particularly well done. In other parts of the site where colors were used the menu item colors were keyed to the colors on the section's home page. So when you go to the Products section of the site you see some information on the page about what you will find when you select each menu item. There's an image and "bulleted" list for Personal & Beauty, House & Home, Health & Wellness, etc. The words Pet Nutrition & Care are displayed in Green, the same green used in the menu. The words Baby & Family are displayed on the page in purple. Purple is the mouse over and selection color for that menu item. So there is some logic in place here. To some extent that logic is used for this menu as well but it wasn't as obvious to me at first because on the Careers page the paragraph for Corporate Info is headed by text in cobalt blue rather than the light blue used as the highlight color in the menu when its collapsed. In addition, the expanded menu uses the darker blue rather than the highlight color for the Corporate Info section. So in the expanded menu does the use of color add anything to the usability of the menu? Well in this case I don't think so. The colors standout but there's no differentiation in the text, nothing to draw your eye to particular menu items or headings so that you can easily scan the menu and find what you need. Instead you end up reading all the choices until you find the right one. Here are two possible alternatives that I think work better. In each of these you can see more clearly that All the entries in green relate to Recruiting, while all the entries in Blue relate to Corporate Info.
In the menu on the left your eye is drawn to Recruiting Blueprint because the point size of the text is slightly larger, bold and green. The sub menu choices also standout because they are bolder than the rest of the Recruiting menu items,although not any larger in size. In the menu on the right the main menu items stand out even more because they are rendered in reverse video. The sub menu items stand out less so because they are not bold, however the color differentiation provides enough feedback for the user to notice the difference. One other thing about the menu as implemented on the P&G site - Visitors who are color blind but prefer an expanded menu may have difficulty using it. Bold facing category headers or using reverse video will make main menu items stand out regardless of how the eye interprets the colors. | ||||||||||||||
-