Navigation
Perhaps the most common flaw in web applications we’ve seen is poor navigation. Too many times, applications just seem to run wildly all over the place. And often, as applications grow over time, pages just get tacked on here and there, making the application even more unwieldy. Each page by itself might make sense to the user, but the overall application is confusing.
Fortunately, this is one on the easiest things to correct, at least if you are starting from scratch with a new application.
Navigation should be simple and logical. The user should instinctively always know where he or she is at within the application and how this spot relates to the rest of the application as a whole. What we want to prevent is the user from feeling lost.
Here are a few guidelines to consider:
- Provide a sidebar with buttons that highlight the currently active portion of the application.
- For a sidebar button that represents a group of subordinate pages, add a set of sub-buttons that open up when the user clicks the main button. The sub-button for the active subordinate page should also be highlighted. This button highlighting (of the main button and the sub-button) helps the user understand where he or she is at within the application. And by making other sub-buttons within that group visible, the user understands where he or she is at relative to related portions of the application. In a sense, this kind of structure provides a built-in “site map” for your application.
- Try your best to keep a consistent sidebar visible to the user at all times. Switching out sidebars throughout the application can be very confusing. If your application does have major sections that are not closely related to each other, consider adding header buttons. Then have a dedicated sidebar per header button. The active header button should be highlighted when that sidebar is active. Note that the website you are looking at right now is designed this way.
- Avoid dropdown menus from header buttons. The problem with these is that once the user selects an option within these menus, the entire menu disappears. The user then starts to lose track of where he or she is at. Instead, shift this menu structure to the sidebars.
- Once you have your menu structure laid out, try to make your navigation as flat as possible. By this we mean, try to hang as many pages as possible directly off of these sidebar buttons so that the user doesn’t have to go deeper and deeper into the application … and get lost in the process.
- Find ways to compact the application into fewer pages. The fewer the number of pages, the less chance the user will get lost.