19 July, 2006 / Navigation Patterns in Web Application


Navigation is one half of usability. Well, maybe slightly less, but it is very important for sure. Do you know simple test for navigation? Visit this page and try to answer just 3 questions:

  1. Where I am now?
  2. Where can I go?
  3. How did I get there?

Did you answer them? Yeah, google doesn’t make great UI all the time, their web site is not perfect in some areas :) I bet only second questions can be partially answered. If you can answer on all these 3 questions being on page, navigation is at least good.


Each web application has hierarchy. You have areas, sections and pages. For example, diagram below shows small part of TP 2.0 hierarchy. Areas are in gray, sections in blue and pages in green.

Usually, there are several areas, dozens of sections and many pages. You always have two tradeoffs: make hierarchy deep and narrow or plain and wide. I don’t recommend hierarchy deeper than 3-4 levels, otherwise it will be hard to get back to the sun from the bottom. And I don’t recommend hierarchy wider than 10-12 items, since too many options make user frustrated.

The best way to make great navigation is reflect user expectations about domain. For example, if user thinks that Bug is something related to Quality Assurance, it is better to create Quality Assurance section and put Bugs page into it. If you put Bugs page into Issues Management section user will hardly find it quickly.

Where I am now?

So where I am on the page below? System gives some hints:

  • Current project is shown in drop down, so we are in Project area
  • Planning tab is active: has blue color and all its items are visible. So we are in Planning section
  • User Stories item highlighted in tab, so we are in User Stories page
  • Breadcrumb shows current page in hierarchy.

Four hints that shows my current coordinates in TP 2.0 hierarchy. Each level has its hint, while breadcrumb reflects all levels. In fact one may think that breadcrumb will be enough, but that is not true. Breadcrumb is not highly visible on the page, it is a secondary element. Many people don’t pay attention to breadcrumb and silently ignore it.

Several UI elements works together to unload user’s memory:

  • Menu with tabs. Current section highlighted
  • Breadcrumb with current page enlarged
  • Current project drop down
  • Sections color coding. Each section in TP has own color. With time user starts to ‘feel’ current section.

Where can I go?

This important question is harder to answer than previous one. If you provide too many links, it will be confusing for user. If you provide tool little links, basic navigation will take more clicks and pages reloads. We can categorize all navigation paths:

  • Vertical navigation (up and down in hierarchy)
  • Horizontal navigation (in scope of single area or section)
  • Jump navigation

I have several rules that almost always use in navigation development:

  • Make areas menu visible on all pages. If you will not do that, user will have to click Home link to see areas menu. For example, let’s imagine that TP does not have top menu. I am inside project and suddenly find out that I should change something in Admin. Without top menu I have to click Main link on breadcrumb and then Admin link. But why should I reach Admin via Main? This is not intuitive. So top menu should be visible on all pages.
  • Make important actions available with a single click.
  • Make all items in current section always visible. For example, if you in Planning section, links on all pages in Planning area should be visible. Otherwise user may not discover invisible links.

Screenshot below shows how these patterns work in TP 2.0.

Quick links drop down. Maybe we will add another drop down with other actions but Add in future.

How did I get there?

Maybe this question is less important, but solution is hardest from my point of view and at the moment TP 2.0 does not have a good one. All we have is breadcrumb, but it does not show actual user path, but only page’s place in hierarchy.

Among several solutions we are reviewing are:

  • Remember last 10 pages user visited and show them in a list somewhere. This will give complete path and user will have clear answer, but will take valuable place. Well, we can take these 10 last pages and put them into hidden layer that will be visible on “Show Last Visited Pages” link. But we doubt that users will actually use this link
  • Put Back link on all pages. Yes, you are right, all web browsers have Back action, but I personally know several people who don’t use them!

If you have other solutions of navigation problems, post them!


At July 19, 2006 3:43 AM, Anonymous Anonymous said...

according to your release plan
when will be the time of first release of tp2.0
can't wait for the moment!

At July 20, 2006 9:58 PM, Blogger TargetProcess said...

We are going to release public preview with limited functionalty (Code Name "Minima") in the end of July.
Online demo will be avilable next week for sure.

At July 23, 2006 7:08 AM, Anonymous Anonymous said...

I don't think the answer to the question "How did I get here?" will be relevant to most advanced users. This would be more important on ecommerce and community sites.


At July 27, 2006 7:17 AM, Anonymous Anonymous said...

release date?

we've just begun using targetprocess (we paid for it) and the UI improvements will be a big help to us.

on another note, someone should use a spell checker on some of the pages on this site. the product is wonderful but spelling errors on the site give the wrong impression.

At July 28, 2006 5:10 PM, Anonymous targetprocess said...

We've corrected 4 misprints on this site. Thanks!

Release date is not set so far.

At July 28, 2006 5:32 PM, Anonymous targetprocess said...

And about 15 on main site corrected as well.


Post a Comment

Links to this post:

Create a Link

<< Home


We are developing TargetProcess agile project management software and blogging about our progress.

Subscribe to the RSS feed
Stay tuned by having the latest updates via RSS
Follow TargetProcess on Twitter
Get in touch with our team

Try TargetProcess
TargetProcess quick tour