Web App Masters: Escaping Navigation Hell

Lauren Cramer

April 8th, 2010

When it comes to web app navigation, only a few have mastered the subject at the guru level. Hagan Rivers is one of those gurus, or, as we like to call her, the Master of Navigation.

When you hear Hagan present, you hang on her every word. On the first day of the Web App Masters Tour in San Diego, Hagan gave a compelling presentation on why you should tackle navigation as its own application. Lucky for us, Luke Wroblewski (another Master from the Tour) captured the highlights in a blog post that he originally published at Lukew.com. He graciously allowed us to reprint it on Brainsparks.

If you missed Hagan in San Diego, you can still catch her at the Web App Masters Tour in Minneapolis, Philadelphia, and Seattle. Read the details on Hagan’s talk, Escaping Navigation Hell.

This post is the second of a series from Luke. The first one was on Designing Seductive Business Apps with Stephen Anderson. You can read more of Luke’s posts at Lukew.com.

Here are Luke’s highlights.

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.

Learn more from Hagan

If you followed any of the #WAMT tweets, Hagan proposed 3 “crazy ideas”. One, design without navigation. Two, navigation is an application. And three, design navigation last. Get the full rationale behind her “crazy ideas” at the Web App Masters Tour. The Tour visits Minneapolis, Philadelphia, and Seattle from the end of April thru July. You’ll find all the details at www.UIETour.com.

You can also hear more of her ideas on her podcast interview with Jared Spool, Escaping Navigation Hell.

Web App Masters TourUntil April 19, you can register for any of the Tour cities for $795 when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

Add a Comment