Articles Comments

GUI Journal » Controls, GUI Design, Mistakes » GUI Design: Hidden in Plain Sight

GUI Design: Hidden in Plain Sight

OK, I admit it: I am having a significant birthday this year and so I figure my life is now pretty much half over. There are some signs that I am not as young as I once was: I need friends to repeat words more often than I care to admit, and I have various sets of eyeglasses for appropriate uses. However, is that any excuse to make it so hard for me to find and read menu options on web sites?

I took a look at several financial web sites (places where someone my age or older is likely to frequent) and found some interesting implementations.

BAD WEB SITE MENU

Figure 1 is a screen shot from a financial web site that I visit often. The web site shows a dark blue bar that is a combination of a menu bar and tab panel. The current selection “Business News” is slightly-less-dark blue than the rest of the bar. The mouse cursor is hovering over the “Retirement” menu item which is shown in the same slightly-less-dark blue and has a light gray drop-down menu below it.

Figure 1. Financial Web Site #1 with Only Slight Color Variations on the Menu Bar and Drop-down

Figure 2 shows the same web site with the mouse hovering over an underlined item in the drop-down menu.

Figure 2. Financial Web Site #1 with Mouse Cursor over a Drop-down Menu

The first time I came to this web site I didn’t even notice that a menu had dropped down. There is no border around the drop-down menu and its background is only slightly different from the white background behind. When the mouse cursor moves from the menu item to the drop-down, the dark blue returns to the same color as the rest of the menu bar and the item in the drop-down gets underlined. Apparently the web site designers are only interested in viewers with excellent eyesight. Very poor design.

A LITTLE BETTER WEB SITE MENU

Figure 3 shows the web site of another financial institution. It has a menu of options that change color from gray to green and show a drop-down menu when the mouse hovers over them.

Figure 3. Financial Web Site #2 with Mouse Cursor Hovering Over Menu Item

Figure 4 shows the same web site with the mouse cursor hovering over an item in the drop-down menu which changes color from gray to green.

Figure 4. Financial Web Site #2 with Mouse Cursor over a Drop-down Menu

The drop-down menu itself on the second web site is much better than the first because it has an obvious border and the individual items in the drop-down are separated by lines which make it clear which selections are on a single line and which spread across two lines. Unfortunately the top level menu is not any better than the first web site. Changing the color from gray to green when hovering is no easier to detect than the slight changes in the dark blue on the first web site.

The top level menu is also implemented in an unusual way. Figure 5 shows the panel that is displayed when “Personal Finance” is clicked. Note that it is not a tab panel, but instead shows a breadcrumb trail with Money and Personal Finance as the first two steps. Breadcrumbs are fine and often are a good implementation, but this web site only shows breadcrumbs for the first two levels. Clicking the options at this level sometimes changes the display below it or other times links to a completely new page, but doesn’t show any more breadcrumbs.

Figure 5. Financial Web Site #2 with Breadcrumbs?

The second web site has a very easy to read drop-down menu, but all other aspects of the menu bar implementation (including mouse hovering) are no better than the first.

MUCH BETTER WEB SITE MENU

Figure 6 shows a screen shot of a web site for a third financial institution. The navigation here is much the same as the first web site, but these designers made their tab panel layout obvious. They also show drop-down arrows on those tabs where hovering with the mouse will cause a drop-down menu to appear.

Figure 6. Financial Web Site #3 with Mouse Cursor Hovering a Menu Tab

Figure 7 shows the same web site with the mouse hovering over an item in a different drop-down menu. The drop-down menu item changes both text and background color when hovering.

Figure 7. Financial Web Site #3 with Mouse Cursor over a Drop-down Item

This web site menu implementation is much better than the first two for several reasons. First,the concept of tabs is obvious. Second, the distinction between the selected and unselected tabs is apparent. Third, the arrows make it clear that drop-down options are expected. It would be better if there was some change in the tabs when hovering over the different tabs available for selection (besides the appearance of the drop-down menu), but hovering over the drop-down menu items displays very well, with the color of both the text and its background changing. This is a menu/tab panel implementation that is much better than either of the first two. The drop-down menu does get a little lost in the background however; a contrasting color and a border would help. But overall this is by far the best of the three.

KEY DESIGN POINTS

  1. Tab controls should be obvious and not hidden inside an apparent menu bar
  2. Drop-down menus should be distinct from the background, both in color and layout
  3. A consistent and clear navigation system should be used across all panels that doesn’t mix the functionality of a menu bar, a tab control, and breadcrumbs depending on the level

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: Controls, GUI Design, Mistakes · Tags: , , , , ,

Leave a Reply

*


one + = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>