Deciding On a Navigation Metaphor for Your Business Application

2007-03-27T19:29:00Z

Coming up with a main navigation design for a complex business application is not easy. It's even harder when the app is highly configurable and the UI has to accommodate the needs of different user types.

One navigation for all
My company's application suite breaks down into several different products. However, to the end-user they are seamlessly integrated into one environment or web application. The main navigation serves as a gateway to the different features a user has access to. Regular employees can only access features such as setting their goals and doing their performance appraisal. For other users such as recruiters, the application is used for daily tasks including the creation of requisitions and to advance candidates. To sum it up, the design of the navigation has to take into consideration that some people are using the application on a daily basis and other users as little as once a year.

The horizontal menu approach
For a while we were using a pretty standard horizontal navigation bar. This type of navigation performs well in usability tests as everything is in front of the user. It is accessible with one click. The menu also serves as an orientation tool since menu items are highlighted and indicate the page the user is on. The menu had two main levels (two horizontal bars) as well as drop-downs on several menu items for quick access to recently viewed items.

This is comparable to a lot of navigations used on major Web sites such as Amazon.com or Fidelity.com.
This approach had three major disadvantages: First, the menu bars take up extremely valuable vertical screen real estate. We would like to move data grids and long forms as far up as possible so that critical data doesn't get pushed below the bottom of the viewable browser area. With the sub-menu bar exposed we lost about 50 pixels worth of vertical space. Secondly, it makes the screen look busier with all available navigation choices constantly displayed. This might be good for a power-user who knows the application well and wants quick access to everything. On the other hand, for a user who is in the system twice a year for a very specific task, seeing all available choices is too consuming and intimidating. The last disadvantage of this approach is the limited availability of horizontal space for long menu labels (the labels are customizable plus translatable). Adding dynamic horizontal scroll buttons on the right end of the menu bar is not too appealing.

No main navigation at all?
Another option was to remove the navigation entirely and force users to access all pages and features through contextual links in their homepage and their task list. The homepage in this case is a dashboard with feature specific widgets. The task list is one of the widgets available on that dashboard. There also is a globally available task list button on the top of the screen. This approach seemed suitable for users such as regular employees who log into the system a few times a year to perform a single task. You can see that it wouldn't work well for users who use the application more often, most of the time to perform several tasks. They would have to go back to the dashboard to navigate somewhere else. Finding the links might be hard as they are sprinkled across the different widgets on the dashboard.

The best solution
The best solution was to clean things up using a one button menu. This is not a new idea. It's pretty much how the MS Windows start button works. The button sits in the top right corner of the app, consuming very few pixels. It glows orange when hovering over it. Clicking on it drops down the main navigation panel. The panel is a DIV with see-through PNGs on its sides for the shadow effect. We regained a good chunk of vertical real estate and the application looks much more inviting for more novice users while providing the right level of accessibility the everyday user needs. Use of larger 32x32 icons makes menu options easily identifiable.

Similarly, Microsoft cleaned up the UI of Word by getting rid of the horizontal menu bar. A one button menu now has all the choices ready if needed. This makes for a much less overwhelming interface.

Early usability tests have shown that the new menu works well for our diverse set of user needs. It's another helpful step in making business applications more inviting and fun to use.

Additional options for power users
This is not where the potential of this type of navigation approach ends. This design lends itself to using helpful little shortcuts. For example, double-clicking on the round menu button takes the user back to the homepage -- the dashboard in our case. Ultimately the menu could be expanded by using key shortcuts, and individual menu items could be selected by using the up and down arrows on the keyboard. This is just like the Windows start menu behaves. Then we avoid the mouse click altogether. The user opens the app, clicks the alt key to expand the menu, and presses the down arrow key twice to get to the feature he or she needs. Once on the page the cursor already sits in the first form element -- not one mouse click...

Application UI Design

Deciding On a Navigation Metaphor for Your Business Application