Web App Masters: Escaping Navigation Hell

by Luke Wroblewski March 23, 2010

In her Escaping Navigation Hell presentation at the Web App Masters Tour in San Diego, CA, Hagan Rivers walked through several strategies for getting people around Web applications with lots of screens including application maps and four distinct kinds of navigation.

  • How can we help people move around large applications with lot of screens? In most cases, the answer is navigation systems but they can quickly take over applications. How do you get out of this navigation hell?
  • Option 1: Design without navigation. Create all the screens based on what they need to do. Assume the way people got to each screen was perfect –don’t need to think about navigation.
  • Option 2: Navigation is an application. Its entire purpose is helping people find their way to the things they want. Navigation is a mini-application that lives alongside the main application. This is like the menu bar in a desktop application.
  • Option 3: Design navigation last. If you design it first, you don’t know what screens are needed, which ones will be used most, etc.
  • Navigation is a combination of logic and widgets. Logic is the information architecture: what’s on each screen, mental models, organization, and flow. Widgets are the UI components used to present the navigation.
  • To see the relationships between screens, create a 30,000 ft. view.
  • Start by tagging screens as hubs, spokes, modal screens, lists, single item pages, applications, groups, selection screens, wizard, new content creation screens, option screens, etc.
  • New content creation screens are important for applications because they are where people go to make stuff (need navigation).
  • Modal screens do not need navigation other than “save” and “cancel” buttons. Important to flag screens as modal since they need no other navigation.
  • From this overview, create an application map (a diagram that calls out the types of screens and how they are related).
  • What’s the difference between an application map and a site map? They are different in the same way a site and an application is different.
  • Site map shows hierarchy. Application map shows area of focus. Hierarchical navigation needs to get people to the content they want with as few clicks as possible. Pogo-sticking is more appropriate in applications.
  • If parts of an application maps include hierarchical information –use a site map.
  • There are four different kinds of navigation: 1.) Local Navigation 2.) Global Navigation 3.) Cross Navigation 4.) Dashboard Navigation
  • Local navigation –if you designed your screens first, you have already designed the local navigation. Local navigation is what you need to get specific tasks done. Its like kindergarten tables with all of the crayons, papers & scissors you need.
  • Local navigation in hubs keeps all the tools you need where you need them. It should be consistently placed across hubs.
  • Local navigation on spokes needs to provide direct links back to hubs. If modal, just need ok/cancel navigation.
  • All spoke screens that are not modal should have a link back to the hub they came from.
  • Both modal and non-modal spoke pages need the tools you need to work on them on the screen.
  • Global navigation: navigation present and the same on every screen (except modal screens). Main job of global navigation to get people to hubs. All the hubs in the global navigation do not need to look the same.
  • Frequently visited screens and important screens can be in the global navigation, even if they are not hubs. Selection screens: “New” lists (that create content) are also good candidates for global navigation. Recently changed items can be global navigation –selection spoke screens can be surfaced up front. Unfinished work screens can also be included. These items can be repeated in local navigation and global navigation.
  • You need the right hubs in order for global navigation to work.
  • Are these things the user things or the database’s things? –If the later, this leads to “navigation” problems.
  • Cross navigation is the concierge of navigation –the guy who knows what you need. Goes to related screens (not part of current hub or spoke area). You can include cross-links as elements in an application map.
  • Dashboard navigation is a set of links that provides an overview of an application. They link to really important screens. Dashboards can support different use cases and different types of users.
  • Dashboard navigation supports global navigation, provides training and an overview of workflow through access to key links and data.