The Joy Of Navigation Design

So, I wanted to find out more about designer Ann Willoughby, so I googled her.

sparklines

The top link is to a page on AIGA website.

So, now I know more about Ann Willoughby. But I’m intrigued. She’s listed in a box called “Meet Our Board.”

sparklines

Also in that box I see Nathan Shedroff listed as president. And I did a double take.

I’m on the AIGA site. I see a box labeled “Meet Our Board.” And I see Nathan is listed as President. Is Nathan president of the AIGA? That didn’t *sound* right, I thought somebody else was, but looking at Ann’s page, and clicking to his page on the site, didn’t give me any other clues.

sparklines

So, I desperately searched out navigational cues to figure out what was going on here. The URL: “http://www.aiga.org/Content.cfm?Alias=nathan_shedroff” is useless — there’s no suggestion of hierarchy or place there.

The word “Members” in the navigation bar seems to be highlighted (it’s black, the others are gray), but clicking it takes me to a page about member benefits and I don’t see anything about any boards.

Huh. So now what? Nathan is the president of what board? Clicking around the other global navigation elements (Forum, Publications, Initiatives) turned up nothing.

So I do a search on “Nathan Shedroff”, and here are the results (I can’t link to the results, because the results page does not provide a unique URL):

sparklines

Ahh! That looks like a breadcrumb. And it shows a thing called “about our board” in something called “communities of interest”.

Clicking “about our board” reveals this page. If you read closely, you might see something about the AIGA Center for Brand Experience. Well. What’s that? There’s little clue on this page.

sparklines

Going back to that search result, the link above “about our board” is “communities of interest.”

sparklines

Oh! Look at those things over on the right side. “Brand Experience”!

sparklines

And on that page, a link to “Meet Our Board”, featuring Ann Willoughby, who got me started on this wild goose chase.

All of this could have been mitigated with a few simple conventions/best practices in navigation design. All I needed were breadcrumbs on that original Ann Willoughby page to tell me where I was on the site, and how to click “up” a level. Barring that, the global navigation could have been better tied to the second-level navigation. If you look at the “Communities of Interest” page above, what you probably didn’t see was that there’s an item in the left-hand navigation that is now ‘selected.’ But because the left-hand navigation is so far removed from the global navigation, it never occurred to me that the two were related.

Had I clicked down through the site, this all might not have been as much of an issue, but when I found myself on a page deep within the AIGA’s labyrinth, care of Google, I was totally disoriented.

Now, ask yourself, how does the “Page Paradigm” help you here? The page paradigm totally ignored what became the *key* element of my research. My original “goal” was to learn about Ann Willoughby. On reading that page about Ann, my goal shifted, to learn more about this “board”. Shifting and evolving goals are not only common — they are the norm.

The page paradigm totally broke down, because I couldn’t click something to take me to my new, evolving goal, nor could I click the back button on my browser, as that would just bring me back to Google. Strong navigation design would have oriented me in this information space (AIGA.org), serving as a scaffold for attempting to deeply understand a topic and its relationships.

In thinking about it a little further, imagine someone coming to the site who isn’t as personally invested as I was in tracking this down (I’m friends with Nathan, and have met Ann, so I’m perhaps not typical). Upon clicking to Ann’s original page, and then to Nathan’s, that person might have simply assumed that Nathan is the President of the AIGA, and left the site, not realizing this was incorrect. And then this person could have acted on this incorrect information in some way. Navigation design isn’t just about finding things — it imbues meaning based on the contexts it provides.

21 thoughts on “The Joy Of Navigation Design

  1. That’s absolutely fascinating, Peter, and you make a wholly valid point. I know that some folks don’t think that breadcrumbs mean all that much, but when you’re Googled into a deeply-linked site, well, you need to know how that one page relates to the site if you’re not immediately getting the information that you want to have. The information that you need could be on that site, and it’s up to the site designer to help you find it. I think breadcrumbs are a worthwhile solution for that.

  2. Good stuff from 2 perspectives. It is interesting to land in the middle of the site and see how well the context is supported.

    And, I made the same comment about the bloody page paradigm – he has missed a BIG ‘goal’ which I said is “notice something else on the page that is interesting and click it”. I *really* think that this is a big deal from a persuasion and learning perspective and something we need to think more about: http://www.maadmob.net/donna/blog/archives/000308.html

  3. I agree – breadcrumbs ought perhaps to be seen as supporting that key idea of “Where am I…?” (cf Keith I’s Stress Test) that is of particular importance when not arriving on a site “through the front door”. Again, designing for a “typical” user who is focused on one key task a la Mark H’s Page Paradigm, neglects all the other possible interests a user may have. Breadcrumbs – even if they are on the periphary of many users’ clicking activity – at least open the horizon to other opportunities.
    Peter, I also think that your post is important from the perspective of labelling and nominative determinism. Categorising and labelling do lead to associations in people’s minds which can then be difficult to usurp. As you point out, the navigation and labelling on AIGA could lead one to assume that Nathan is the President of AIGA. We must be aware of the “political” (for want of a better word) impact of our classifications, this example is a minor disjoint between intended meaning and understood meaning but there could be more important misunderstandings in reader reception.

  4. The Joy of Navigation Design

    Via InfoDesign, Peter Merholz gives us an insight intoThe Joy Of Navigation Design, while at the same time taking a another swipe at the Page Paradigm, as his search for specific information takes a number of tangential diversions, Now, ask…

  5. Excellent example. Many sites which I have access to log files all show 40 percent or more of the visitors are coming to the site from an external site and are dropped into the middle of the site. When you take this into account when performing usability testing you quickly see many users do use breadcrumbs when they are available. The problems is many of the folks I stating breadcrumbs do not work have tested sites from the main entry and in these situations users rarely use breadcrumbs.

    I have found users are often very confused on large heirarchial sites when there are no breadcrumbs and only *global* navigation. The use of *Home* is often not what the user was expecting *Home* to be. When breadcrumbs are available many users will read the breadcrumbs and have some idea where *Home* will take them or have a much better idea that they have been dropped into outside the site structure they though they were in.

    I have rarely seen users state they would be better off with breadcrumbs. Most users do not notice breadcrumbs, unless they have lost their sense of relation to their mental picture of their relationship to the information they thought they were seeking.

    Sidenote — I have often found the AIGA site to be very frustrating for a variety of reasons. The structure of information is often not clear and many times graphics are used when text is appropriate. It can be a pretty site, but is not often usable.

  6. You’ve set up a false dichotomy between breadcrumb links and the Page Paradigm. If you are visiting the site with a goal, and using the Back button when things don’t pan out, your usage fits right in. (Although to be fair, I’d say that your usage patterns are probably different from the vast majority of users who aren’t trained IAs.)

    As I wrote in my column last week, the goal of the Page Paradigm isn’t to remove breadcrumb links from websites – it’s to encourage people to think about the user’s progress in a site from page to page.

    In the case of the AIGA site, breadcrumb links *might* help – but as your other readers have pointed out, there are bigger problems afoot on that site. Focusing obsessively on breadcrumb links doesn’t get at the more strategic problems. Remember, customer experience is strategic: http://www.goodexperience.com/columns/03/1117.rose.html

  7. The page referrer information is a great tool for helping people who are coming from outside of the site.

    Site designers can show the surfer some general helping information about the site on the first page they see.

    Even more sophisticated website sometimes show the user links to more information on the site containing the search word/s that were used in an external search.

  8. I’m sorry, but you have to have a very limited view of my argument to think that I’m setting up a dichotomy between the Page Paradigm and breadcrumb links. “Breadcrumbs” has become a fetishized object that’s not really what we’re talking about here.

    And my issue is that your original explanation of the Page Paradigm you stated two things that I would argue are patently untrue.

    1. “Web developers often waste time worrying about “where content should live.” and “All the site-organization links, so carefully consistent with their display in other areas of the site… totally ignored by the user.”

    While it might be true that users don’t care where they are on the website, it’s also true that when web designers “waste time” worrying about where content should live, and obsessing over site-organization links, that they help users understand the context in which they are getting their information. Navigation design isn’t just about “where you are”, but about “what you are reading.”

    2. “Fulfill the Goal quickly and easily, and it’s a good experience.” As my case points out, my initial goal was filled quickly and easily through the Google link. Subsequent goals that emerged from that page were not satisfied — the Page Paradigm doesn’t address evolving goals. It also doesn’t address the fact that someone might think they have accomplished the goal, and yet walk away with false information (“Nathan Shedroff is president of the AIGA”).

    I guess what makes me upset is that I find your take on web use and web design remarkably shallow. Information retrieval/access/use on the web is remarkably complex. You do your readers a disservice with these guru proclamations that gloss over this messiness.

  9. As Peter puts it, there is no “the goal” – different users will have varied goals. I like the Page Paradigm in that it focuses in optimising visibility and access to a specific and important goal, but agree with Peter that the way it was expressed perhaps leads the concept open to attack in that it is a “monomaniacal” approach (I mean this in the sense that it just focuses too strongly on one specific point). Perhaps the time is ripe for Mark H to gently revise the piece so that the benefits of the paradigm shine through without inflaming discord – after all, we are all working with the single purpose of “making stuff useful”, as I like to put it.

  10. I think some very valid points were raised here but I think of even more importance that an article such as this that is going to be included in a newsletter such as Webrefernce Update, and especially an article discussing site navigation and the user experience should make sure that the syntax for a link to an external site not contain errors. Your basic web user would probably not know that they could just add the missing “t” to htp: themseleves.

  11. The problem you outlined has little to do with breadcrumbs or any other navigational element, in my opinion. It has to do with poor contextual information on the page.

    You found Nathan’s name under the label President, near a label that said AIGA. You immediately assumed that the page was implying that Nathan was the president of AIGA. Interestingly, you didn’t assume that Nathan was the president of anything else, such as the United States or Martha Living Omnimedia.

    Had the page been just labeled correctly, saying AIGA Center for Brand Experience, this confusion would’ve never happened, this article would’ve never happened, and my comments would’ve never happened. It’s an issue of poor labeling.

    Could you fix it with navigation elements? Yes. Is that the right way? I don’t think so.

    But, then again, I’m neither an IA nor a designer. So, what do I know?

  12. Jared, I agree that the primary concern here is “context.” My point is that, on the web, smart navigation design serves a dual purpose — wayfinding (how to get where you’re going) and context-setting (making it clear where you are).

    Considering that page real estate is always an issue, any time you can have an element intelligently serve two purposes, go for it. A headline for “AIGA Center for Brand Experience” would have made it clear what this is about — but why not couple that with smart navigation so you can allow movement on the site that takes advantage of this knowledge?

  13. See?! Weblogs *can* make a difference.

    And you’re right. We are talking about two things. I focused on navigation, because I found the lack of any wayfinding and orientation cues a problem.

    This might seem fatuous on my part now that it is after the fact, butI had considered talking about module/component design, and how if the module were clearer, that would have been a step in the right direction.

    This is the direction the current page takes, and it is responsive to the questions I had of “board of what? president of what?”

    But if you land on this page, and you wonder more about the context of the “AIGA Center for Brand Experience,” this page isn’t going to help much. Yes, they’ve added a module below the board box, but that feels tacked on, and not where I’d guess to look.

    Also, this page, and the main page for AIGA Center for Brand Experience do a poor job of making clear what the relationship this Center has with the AIGA at large. Again, because it’s not clear that it’s part of this “Communities of Interest” program that the AIGA has.

    Navigation isn’t *the* solution, but a strong navigation design does a lot to scaffold people’s understanding of an information space.

    How about apples to apples comparison?

    TrendMicro’s ScanMail for Microsoft Exchange

    Symantec’s Symantec Mail Security for Microsoft Exchange

    One has a clear navigation design tell you where this product “lives” and how it relates to others. The other doesn’t.

    Does it matter?

  14. I’m in agreement with everything you’ve said.

    However, I disagree with the thematic implication that problems like this always could and always should be solved through navigation.

    It feels like you’re trying to convince me that navigation is the hammer of the information architect and, as an information architect, everything is a nail.

    If I’m incorrectly reading between the lines and you are not asserting that IA and “strong navigation design” is the cure for all the world’s ills, then I think this issue is settled.

    xoxo

    Jared

  15. Peter and Jared,
    Thanks so much for your comments. I agree that there needs to be more context provided for the user. The basic problem we at AIGA are faced with is how to give communities within the organization access to their own sections of the site without creating a navigation scheme more than three levels deep. (Global nav > Communties > Brand experience > Meet our board > Ann Willoughby.) The solution (or lack thereof) we’ve come up with so far is to eliminate the first two level of navigation in the area controlled by the individual communties. So, when you enter the “Brand experience” section the “communities” link disappears from the left hand nav. It is a clean fresh start! The user is left with only “Brand experience” specific navigation. This works relatively well if you are working your way from outside in, picking up contextual clues along the way. But, if you land on “Ann Willoughby”, you have no idea how she relates to the larger context of the site. In this case, it seems like we need both clear labeling and breadcrumbs…though, as far as breadcrumbs, I am loath to add yet another navigational system to what is already a somewhat already an overabundance of navigational options.
    Thanks,
    David

  16. Navigation has been my life here at Vanguard for the past 8 months. I can see both problems in this example – bad orientation clues in the content and bad navigation. I think both need to form a mutual support system for the users of web sites.

    On the topic of Navigation – I recently posted this to SIG-IA:

    “… designing navigation is not just about HCI. Designing navigation is about the manifestation of semantic relationships as sets of hyperlinks. The creation of solid navigation systems depends just as much on LIS skills as it does on HCI, graphic design, and interactive design skills.

    Whether we use words or icons the key to empowering them for our audience is to make sure that our sites convey meaning and distinction and create understanding. That requires us, the IAs, to have a firm grasp of the semantic domains our sites embody.”

    Cheers,

    Dave

  17. Gore voters losing and blaming Nader. Users whose surfing habits don’t match other users’. And now, IAs who want to see “breadcrumbs” that mark a path they never traveled.

    I applaud the attempt by AIGA to get away from the single-parent hierarchy. That rigid hierarchical structure gives each page a defined “place” in the site — what Karl Fast likes to call the “buddha nature” of a page. The page “belongs” in its slot.

    But, in a point I fear is a truism, websites are dynamic and the buddha nature is totally unnecessary. There can be plenty of contexts for the same information, in which case clicking “up a level” loses all meaning. When you found Ann’s page, clicking up a level in your context actually meant scanning the web again for more info about her.

    Better that the site not try to predict your context. I think AIGA did a pretty good job of pointing out other items (e.g. News/Events, meet our board) that *might* be of interest, especially if it’s also in *their* interest that you browse those items. And not to tell you how their profile user would get to that page — you’re not that user.

    I’m a faceted classification fanatic, so I may be biased, even though the whole point of faceted classification is to eliminate biases.

  18. Fix the damn link to Nathan’s site already!

  19. Fascinating discussion and points from everyone.

    On the topic of single hierarchy often being insufficient and thus, the concept of “one level up” being broken, I think it goes back to what Jared was saying about context.

    We might learn a little from the way the blogging world has developed. Instead of posts being placed into a specific slot in a hierarchy (e.g., this post might be under “Information Architecture >> Navigation”), blogs often just put a number of relevant catagories.

    Want to know more? Click on the relevant category. So in AIGA, the page might, instead of a breadcrumb, have a space where the related categories are linked “AIGA Brand Experience” being one of them. The only problem is that blogs are much much smaller and such a solution could potentially get messy very quickly if one is too generous with the categories.

  20. The Objective of Information Architecture