Now available: Design for Impact by Erin Weigel

Future Practice Interview: Jim Kalbach


As part of our Future Practice webinar series, we’re interviewing presenters to give you a preview of what they’ll cover. Next up is Jim Kalbach on The Principles of Web Navigation: Advanced Design Techniques. A librarian by background, Jim is perhaps best known for his O’Reilly book, Designing Web Navigation.

Jim’s webinar takes place on June 16, 2009, 1-2pm EDT. Use code RMWBNR for a 20% discount off your ticket purchase.

Lou Rosenfeld: Given that web design has matured quite a bit over last decade, what challenges lie ahead in designing web navigation systems?

Jim Kalbach: Sure, web design has matured over the last decade. But I believe there are still areas of web navigation to explore and innovate. I’m constantly coming across new combinations of navigation mechanisms that are fresh and new. For instance, the carousel navigation mechanism is becoming popular. This is a navigation element that presents multiple texts or images in the same area of the page through sequential presentation. Users can scroll through the content, or it may “play” the sequence automatically. You see these on news sites quite often, as well as on ecommerce sites. I think we still need to better understand how this type of navigation really works, for instance, and how people experience it. So I don’t believe we’ve exhausted everything there is to know about normal web navigation, and there is room to deepen our understanding of how to design web navigation and how people experience web navigation.

But there are big changes on the horizon as well. Semantic technologies, for one, pose particular challenges for web designers. These technologies allow us to automatically categorize content as well as to automatically extract metadata. The question then becomes, How do you navigate all that metadata? Chris Anderson, author of The Long Tail, refers to this as “the navigation layer.” He points out that as we add more metadata to online content, navigation becomes more critical. There’s been a lot of effort put into developing semantic systems in recent times from a technical standpoint. But we don’t really fully understand how people are actually going to navigate semantically enhanced information and how businesses can create value from it. That’s the real challenge, I believe.

Lou Rosenfeld: Have you found any good examples that demonstrate a more semantically-driven approach to navigation?

Jim Kalbach: There are some news sites out there that are semantically-driven that are pretty good, such as or (which I quite like). Or, Primal Fusion has an interface that allows users to create websites on the fly—including the navigation. There are some good UI elements in this UI, for sure. Another semantically-driven interface I was particularly impressed by is Freebase Parallax. (Watch the video on the Parallax site for a good overview).

So there are lots of different UIs and navigation models being developed around semantic technologies. But I still feel most of the semantic services lack providing real value to the consumers of information from an experiential standpoint. They are sometimes clunky to use, require a long learning curve, or the results aren’t helpful and convincing. For instance, automatic clustering sometimes produces categories that are just plain meaningless. There’s an opportunity for innovation in navigating semantic information spaces, I believe.

The company I work for acquired a semantic technology company a few years ago. I had the pleasure of working on some of the UI designs. One thing we found is that simple displays of information often work best, particularly when designing for a broad audience. Complex visualizations and tricky filtering mechanisms sometimes cause more problems than they bring value. Simple bars charts or just plain text lists can be more effective than—and just as powerful as—complicated visualizations. I think we still have a lot to learn around designing navigation of semantically enhanced content.

Lou Rosenfeld: How does search fit into this discussion? Is it something we should consider separately from navigation?

Jim Kalbach: Search and navigation go hand-in-hand. This is a point that I make in book and in my webinar. My recommendation is to consider all the ways you can integrate search and browse. Often, the two are conceived of separately, and they are usually two different features from a technical standpoint. The search is over here, and the navigation is over there. But your site’s visitors really just want to find information, and they may rapidly alternative between searching and browsing. This behavior is what Marcia Bates called “berrypicking” over 20 years ago. It’s still completely relevant today in context of the web.

Lou Rosenfeld: How do new technologies, like AJAX or Flex, change web navigation and its design?

Jim Kalbach: AJAX and Flex change a lot of things. In particular, they potentially remove the experience of transitioning from page to page. In hypertext systems like the web, a user clicks on a page, waits for the new page to reload, and then re-orients to the new page. There are a transition in moving from one page to the next. David Danielson, a researcher at Stanford University refers to the amount of change in navigation and page design someone experiences during the move from one page to the next “transitional volatility,” a topic I’ll discuss in the webinar. AJAX changes this: instead of having to re-orient to a new page, you just have to re-orient to the newly loaded content.

In terms of navigation design, this means we have to provide more in-page controls and options. This requires more interaction design skills. You have to consider error conditions and how to persist state, among other things. It requires a different way of thinking about navigating content.

Lou Rosenfeld: In an increasingly convergent digital space, do we now have to support navigation across channels? How do we do that?

Jim Kalbach: We definitely have to consider how to support cross-channel navigation as the web moves beyond the desktop. This is an area web designers are still exploring, and there is no single technique for doing cross-channel design that I know. I think it’s mostly about conceiving and designing navigation systems that are scalable and independent of any one particular medium.

I was browsing Apple’s App Store with my PC the other day when I notice the navigation mechanisms for the “Top 10 Apps” and other highlighted lists of apps allows users to scroll from top to bottom. It seemed a little odd for the web at first, but it makes sense overall: This top to bottom scrolling directly mirrors the navigation experience you have when accessing the app store on an iPhone using the touch screen. So Apple seems to have consciously created navigation consistency across platforms. I think we’ll see more and more of that kind of thinking.

Or, consider the relationship between online navigation and offline wayfinding. The folks from Maya Design have presented many case studies about their experiences designing cross-channel navigation systems for the Carnegie Library in Pittsburgh. They talk about their approach to designing navigation systems for both the physical building and the web site of a library. The signs hanging up in the library itself that support wayfinding work together with the navigation of the web site: they use the same labels, tone of voice, and appearance, for instance. So, cross channel navigation design doesn’t even have to be digital—it also spills over into the physical world.

Lou Rosenfeld: With mashups, web services, and applications, how must web navigation design change to keep up?

Jim Kalbach: This is where I think design techniques like Cores and Paths are critical—an approach introduced by Are Halland, a talented information architect from Norway. Within the Cores and Paths approach, designers first identify and design the core content they offer. This may text or images, or it may be functionality or even a service. Then you design the paths inward and outward to that core.

YouTube is so successful, in part, because they’ve designed their core well—the video. These are distributable across the web, but the navigation functions one needs to operate the video are all there—embedded in right in the video. There’s also subtle, but effective branding. It’s this kind of thinking about the design of content that we’ll all need to master in light of mash-ups and services. It’s not only about designing pages and page templates, but about designing content and navigation to and from that content.

Lou Rosenfeld: In your webinar you cover advanced techniques. Can you give us an example and explain why it’s important to use?

Jim Kalbach: I’ve already mentioned two of the principles I’ll talk about: berrypicking and transitional volatility. The other one is the notion of the scent of information, popularized by Jared Spool. In his research he noticed a common pattern of user behavior: people first scan a web page for trigger words. Trigger words are the terms that match the information need that motivated them to look for information in the first place. Labels for navigation are therefore critical in the user’s experience when interacting with your website.

Information Scent is ultimately about confidence in navigating: how well do the labels, links, and navigation give users a sense of moving forward in the right direction? This is going to determine the overall success of the site. If people can’t navigate with confidence, they will eventually leave.

The trick is then to find to the right labels to give visitors the trigger words they are looking for. Though not as easy as some people think, there are tactics designers can use to increase the scent of information on their sites. We’ll talk about some of them in the webinar.

Lou Rosenfeld: …which promises to be fascinating; thanks Jim, looking forward to June 16th!