6

I have an interesting quandary.

We are building a web application that is structured in a way whereby there are many ways to get to the "destination" pages. Some pages can also be part of multiple sections.

How do we structure our navigation to accommodate a way to maintain user-orientation?

Some of our previous thoughts :

  1. Having the nav open to the section (as opposed to it drilling down to the page as it could be tertiary page.) we also have the nav disappear on mobile so we can't rely on this.

  2. Having a history based breadcrumb but the Devs vetoed based on feasibility.

Has anyone encountered this before? How have you resolved your navigation?

  • I've encountered this before... I think. Do you have an illustrative site diagram or storyboard showing the linkages between sections or pages? – tohster Apr 2 '15 at 3:36
  • Can you clarify what #1 means? What is a 'section' on your site and how might nav work if it 'drilled down'? (Also see my comment below regarding implementation of history-based breadcrumbs.) – Drew Beck Apr 4 '15 at 3:46
1

The correct Information Architecture term is a multi-dimensional hierarchy.
Common websites that have that kind of structure are webshops (or Wikipedia).

Search
Webshops all rely heavily on the search functionality. I don't know if a search functionality is possible or useful within your web application, but it might provide the users with a fast way to navigate to their 'destination pages'.

Submenus
Less is more. If at all possible, try to minimize the amount of links users will see at the same time. If an user is looking for a specific type of Levi jeans it's advisable to start at a high level in the hierarchy, first deciding between pants and shirts. After that maybe choosing between chinos, jeans and pantaloons with a submenu (not even visible one step ago). And after that maybe even refine it by offering another submenu in the form of a filter menu with brand names and fit sizes. Maybe this is could, in some way, be tailored to your situation?

Breadcrumbs
Your devs have vetoed it, but it will be worth the investment to try to implement it. Breadcrumbs are an excellent way of letting the user know where they are within the website (or web application).

Titles and visual cues
Give a title to e-ve-ry page. Every single one of them. It's very important.
Visual cues help too. And the copy in buttons; not just a button saying 'back' but 'back to ...'.
And please don't use any jargon unless you're absolutely sure your user understands it. Use copy that makes it absolutely clear what it will happen next.

But how do you come to the right structure? That's the art of Information Architecture.
Card sorting is an easy way to do that. All you need is a pen, some paper and some time. Write out every page or page category. Group them as best as you can (this is most difficult in a multi-dimensional hierarchy, but there are always common factors) and change names or add group titles.
While doing this keep your user in mind. You and your devs might think a certain structure is logical and you'll assume the user will agree with you. But as a villain in one of Steven Segalls' movies once said:

Assumption is the mother of all fuck ups

You'll be amazed by how many times your assumption (or your hypothesis if you would) is incorrect if you would just take the effort to talk to some real users. (speaking from experience)

So there isn't really a template you can fill in so you can have the best structure for your navigation. There are some guidelines, but it's all trial and error. Start somewhere and go from there.

Build -> Analyse -> Iterate -> Repeat

  • 1
    Some good things here. Thanks for the term. Now I know how to refine my research. We did do a card sort but people got confused with things like for example "tomato" which could be both a "fruit" or a "vegetable". – Pdxd Apr 2 '15 at 11:12
  • History based breadcrumbs were vetoed because methods to actually implement them were incompatible with browsers we wanted to support not because of time or effort. I think that's a different forum question maybe. – Pdxd Apr 2 '15 at 11:14
  • 1
    I've found that the only way to reliably implement history-based breadcrumbs is to store the user's history yourself, as a cookie, using local storage, or in your app itself. Neither a cookie nor app storage have any particular browser compatibility issues, but may not be in line with how your app is built. – Drew Beck Apr 4 '15 at 3:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.