Navigation Patterns in Web Application | Targetprocess - Visual management software

13 years ago

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? 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!

You can subscribe to our monthly newsletter here:

Thank you!

Сheck out latest blog posts:

Start your free trial

Enter your email
By clicking "Continue", you acknowledge and agree that we will process your personal data in accordance with our Service Privacy Policy and Terms of Service.

We’ve sent you a confirmation e-mail — please, go check it.

Or get a live
product demo