“Web Navigation Design” Workshop with James Kalbach

On Tuesday I attended James Kalbach‘s one-day workshop on “Web Navigation Design” organized by Smart Experience, a small independent design school run by Victor Lombardi. The workshop took place in a conference room at the lovely Center for Architecture on LaGuardia Place in Manhattan.

Victor invited me to attend the sold out workshop, and I’m glad that he did. While much of what Jim spoke about wasn’t new to me, he did a fantastic job of distilling many disparate theories and synthesizing them into a set of well-organized, easy to digest principles. I’m certain that everyone in the room walked away fully equipped to take on their next navigation design challenge.

I was particularly thankful that Jim spent a considerable amount of time in the morning going over strategy and business objectives. This “up front” work often gets glossed over or is talked about very abstractly. Jim did a great job in setting up structured activities that each of us can use to bring clarity and discipline to the often-befuddled early stages of a project.

It was a 9am to 5pm workshop, with two 15-minute breaks in the morning and afternoon, and just 30 minutes for lunch. Needless to say, there’s a lot of content here and I realize that as a bulleted list of tweets it may be hard to follow. Unfortunately Jim is not at liberty to post the slides from this workshop, but I am more than happy to elaborate on any section of the course that’s of particular interest to you. And I’m sure that Jim would be willing to answer any questions as well.

Without further ado, here are my Twitter notes:

Part 1

• @threefour, principal of @SmartEx, a publishing-school hybrid, introducing @Pivo1, user experience designer at LexisNexis
• @Pivo1 is the author of “Designing Web Navigation” (with @AaronGustafson) published by O’Reilly
• 15 people in the room. We’re going around the table introducing ourselves. Lots of IAs, content strategists, here
• What is navigation? “All the links, labels & other elements that provide access to pages & help ppl orient themselves”
• Also affecting nav: URLs/browser controls, visual design/color/style, headers/labels/titles, layout/page schema, etc
• @Pivo1 citing @jjg‘s Navigation Design phases: Strategy, Scope, Structure, Skeleton, Surface. Below Struct abstract, above concrete
• What is design? Empathy, Integrative, Optimism, Experimentalism, Collaboration. From Tim Brown’s “Design Thinking”
• Empathy: imagine the world from multiple perspectives. Integrative: see the big picture and create novel solutions
• Optimism: always a better solution. Experimentalism: creatively explore new directions. Collaboration: cross-disciplinary
• “Right now my title is Human Factors Engineer, which I don’t like at all.” — @Pivo1. Would prefer “design” in his title somewhere
• Woman at the table saying she still has a problem calling herself a designer because others think of it as cosmetic/visual
• Irene McAra-McWilliam’s “Design Transformation”: Identity, Insight, Idea, Instantiation
• Identity: motivation, vision, brand, principles, goals, users. Insight: opp’ty, empathy, hypothesis, focus, perception, possibility
• Idea: conception, ideas, metaphor, modeling, creativity, intelligibility, brainstorming. Instantiation: crafting, detailing, protot
• @Pivo1 citing @jmspool‘s “Journey to the Center of Design” keynote. Successful exp design teams have vision, feedback, culture
• @Pivo1 citing @peterme and @brandonschauer‘s “Subject to Change”: Experience Strategy, Empathy, Prototyping, Organizational Support
• Don Norman: “Do not solve the problem that’s asked of you. It’s almost always the wrong problem.” Businesses see symptoms, not prob
• “Can you summarize your company’s strategy in 35 words or less?” Simple, clear, succinct strategy statement will be a guiding light
• We’re discussing why businesses often don’t explicitly state their problems and strategies
• Not known, assumed everyone knows them, diff stakeholders, diverging perspectives, don’t know how to communicate them effectively
• I brought up the fact that many businesses I work with (esp startups) are far more in love with their solution than their problem
• @Pivo1 showing a Cause & Effect (“Fishbone”) Diagram
• Folks are drawing their own fishbone diagrams to make their problems specific. One macro problem and its underlying micro problems
• What is a brand? Brand image: name/logo/slogan. Brand experience: associations/emotions consumer has when interacting with product
• “A brand is the attitude of a company, internal & external, and the promise to the consumer” All design elements must support brand
• @Pivo1 is putting up logo-less images and having people guess the product/service: Craigslist, Amazon, iPod (2 circles, 2 squares)
• Identity – elements of a brand: Philosophy, Mission, Brand Values, Brand Personality, Core Promise
• Philosophy: short statement about long-term vision of org, “the reason for being”. Broad, ambitious goal, emotional & memorable
• Mission: Concrete, overarching objections for the brand and for the organization in the mid- to long-term
• Brand values: principles of daily work, expressed as a list of nouns framing the brand definition
• Brand personality: the characteristic attributes and qualities of the brand, expressed as a list of adjectives
• Core promise: responsibility the brand offers consumers, what the brand ultimately stands for
• Going through Identity elements for Google. Philosophy: do no evil. Mission: organize world’s info, make it universally accessible
• Brand values: user-centered, speed, focus, no boundaries. Brand personality: open-minded, democratic, ambitious, reliable, credible
• Core promise: understand what you mean and give you back exactly what you want
• Elements of Strategy: Objective. Scope. Trade-offs. Unique selling proposition (USP)
• Objective: concrete business aim in the mid-term. Scope: limits offering by user groups, regions, markets, language, etc
• Trade-offs: what product/service doesn’t offer. USP: key aspects that differentiate your offering from competitors, your advantage
• We’re going over a Strategy Canvas from Blue Ocean
• I talked about this at #ui13 during @peterme and @andrewcrow‘s session. @threefour piped in about Blue Ocean back then :)
• Project elements: vision, goals, scope, constraints, assumptions, risks.
• @Pivo1 creates a product definition document that describes each element in a few sentences. Helps to identify success at the end
• Vision: long-term picture of where product/service should be. Goals: concrete, short-term objectives for project.
• Scope: specific set of features/functionality that project seems to implement. Constraints: factors that limit project in some way
• Assumptions: conditions assumed to be true for project to succeed. Risks: factors that threaten completion, success of project
• @Pivo1 keeps an Excel spreadsheet with one tab for each project element, collecting nuggets as he learns more about the project
• “You’re never going to get all of these questions answered at once.” You get the information over time, from various sources
• Wanna get your clients/stakeholders to remember the project goals? Put it in your wireframe copy in lieu of lorem ipsum — @Pivo1
• I asked what to do when client is a visual thinker, doesn’t understand words. @threefour suggested creating artifact 2 yrs from now
• @Pivo1 showing his Design Matrix. Down: all the elements I mentioned before. Across: IA, IxD, Nav Design, Visual Design, Content
• My silence is due to the fact that we’ve broken up into groups for an exercise. Filled out matrix, now drawing homepage wfs

Part 2

• And we’re back from the break
• It occurs to me that when I introduced myself, @Pivo1 seemed to acknowledge that he knew me (or my name). Have we met previously?
• Principles of Web Navigation: Transitional Volatility, Quick Reactions, Scent of Information, Banner Blindness, Berrypicking
• Transitional Volatility = how much the navigation within a site varies from page to page. Via David Danielson: http://is.gd/8XFN (expand)
• Danielson tested 3 variations of a website. Found that absolute consistency not necessarily good. Need to convey “moving forward”
• “Small changes help in orientation and give a sense of movement through the site.” — David Danielson
• Think about the use of inconsistency in the navigation to provide value, communicate to your users
• Quick reactions. People scan pages quickly. 25% of all pages displayed <4 seconds. 52% of all visits were <10 seconds; pe …
• @Pivo1 is referencing the Harald Weinreich study
• “Satisficing” — people take the first best option. People create opinions about a site very quickly, within 0.05 seconds
• “Initial impression effects subsequent interaction — ‘Halo Effect'” – Lindgaard et al
• Pre-Attentive Processing: visual processing that occurs before we use our focused attention, <0.5 seconds
• @Pivo1 citing @jmspool for Scent of Information. People looking for trigger words on a page, they scan it quickly
• Information Scent = how strong or weak the words on the page correspond to the users’ information needs
• Information scent occurs over time. “Confidence in navigation based on the labels” as the user goes through the experience
• @Pivo1 showing old Staples homepage, alphabetical laundry list of products. @Pivo1 arguing this performs well, but I gotta disagree
• If you don’t know what you’re looking for, the three-column list is very hard to scan. This supports a search posture, not a browse
• Banner Blindness: users overlook elements on page even when they’re largest b/c they’re physically separated & user focused on task
• @Pivo1 showing cartoon to illustrate that what business communicates isn’t always what customers hear
• Berrypicking: Search strategies and behavior change quickly; information needs evolve. Marcia Bates 1989 work
• “Berries are scattered on the bushes; they don’t come in bunches.” Users are foraging for information online
• Support multiple forms of navigation, integrated browse and search. I brought up Endeca’s Guided Navigation functionality
• @Pivo1 now going into navigation mechanisms, some of which he talks about in his book “Designing Web Navigation“
• Step Navigation: next, previous, first, last links. Direct Access Paging: numbered pagination links like on Google
• Some sites have gotten away from paging altogether, using aging to load more results at the bottom of the same page. a9.com, Dopplr
• @Pivo1 citing @keithinstone‘s study of breadcrumbs: 1. Location. 2. Path. 3. Attribute.
• Bars and Tabs quite commonly used for top navigation. Advantage: see breadth of content in one view. Disadvantage: hard to scale
• Vertical Link List typically in the left column. Advantage: longer labels, stronger information scent. Disadvantage: hard to scan
• Tree mechanism on a vertical link list, expand an item to reveal items beneath it
• Site map: laundry list of every single page on the site organized by section. Seem to be coming back into fashion. Good for SEO
• Partial site map at bottom of every page becoming popular. More contextual navigation
• A-Z Index mechanism provides back-of-the-book alphabetical listing of every page in the website. Requires a LOT of work to do well
• Directory mechanism = all pages of the site listed by “department” — matches company’s organization
• Lunch break!

Part 3

• And we’re back!
• Tag Cloud: often confusing as a navigation mechanism. Not always clear you can click on them. Not clear what size signifies
• Tag Clouds show the “zeitgeist effect” — what people are talking about. Just one representation of metadata. Tags can be listed
• Dynamic Menu, a.k.a. fly-outs, pop-ups, pop-outs. Advantage: easy to scale. Disadvantage: bad physical affordance, poor info scent
• Ribbon Navigation: band or palette of options associated with tabs. Used by MS Office 2007, also http://handbag.com
• Rotating Navigation: tiles that cycle through in the same smaller real estate. http://npr.org http://gateway.com http://nypost.com
• Rotating navigation can be useful with several user types to appeal to w/in limited real estate. However, needs to be right speed
• Radial Navigation: options presented in the round based on the item you selected. Like http://songza.com
• Visual Navigation: organic, unstructured diagrammatic representation of content http://visualthesaurus.com/ http://grokker.com
• Browser navigation: back and forward buttons, history, tabs, title, bookmarks, URL, status bar, scroll bar. They’re all cues
• URLs should be readable, hackable (to help you understand structure and move from place to place), and “copy-and-paste-able”
• Types of Navigation. Not all mechanisms are equal. Different importance and function. Mechanisms form a system of navigation
• Navigation mechanisms differentiated by: content they access, interaction, task support, visual design, layout and location
• Categories of nav: structural (links pgs in a hierarchy), associative (links pgs by topic), utility (links to pgs to help use site)
• Structural Navigation. @Pivo1 showing a matrix with Main and Local across the top; down: content, interaction, task, design, layout
• Content: main content of the site under main categories, local content in sub-categories.
• Interaction: main & local — v consistent transitions to next pg. Task: main (am I on the right site), local (access specific info)
• Design: main — prominent and large, consistent throughout site; local — prominent, but not necessarily large or consistent
• Layout: main — top center, top left or top right; consistent placement throughout site. Local– top or on sides, closer to content
• Associative Navigation: contextual, adaptive, footer. Contextual: gives access to diff areas of site, helps see what else there is
• Adaptive: links to content within the same section, close to the content
• Footer: provides access to variety of diff pgs, predictable interaction, usually text only, always at bottom of page
• Embedded Navigation: underlined links within the body of a page. Contextual Navigation: related links listed beside content
• Other nav types: quick links, adaptive navigation (customers who bought this also bought that), footer links
• Utility Navigation: global, toolbox, extra-site. Toolbox lets user perform task themselves, like calculate costs. Usually prominent
• Extra-site accesses new sites, dramatic transitions/re-orientation, communicates about other services, not prominent but not hidden
• Google is a great example of extra-site navigation. Lots of various web properties with diff designs/users/purposes, all connected

Part 4

• We’re taking a sample web page and identifying all of the various navigation structures based on @Pivo1’s naming convention
• Page Types: Navigational (home, dept, gallery, search results), Content (article, product), Functional (search, forms,applications)
• Homepage is a navigational page because it helps people get where they’re going. VERY rarely is your homepage a destination
• @Pivo1 just mentioned Amazon’s Mechanical Turk. Bidding for jobs. I’d never heard of this!
• I have never been in a workshop that has mentioned @jmspool this much. My reaction (friend!) is so different than a year ago (God!)
• Rich Internet Applications (RIAs) – web apps that behave like software apps. Rich in interaction, content, functionality.
• Problems with RIAs: popups, back button, scrolling, new types of interaction (drag & drop, zooming), printing, bookmarking
• @Pivo1 citing Are Halland’s Cores & Paths. See his slideshow from IA Summit 2007
• Traditional navigation design: start with homepage, reflect site structure directly in navigation, put same navigation on every pg
• *Instead* Goal-oriented design: start with user’s goal, determine navigation needs (in and out), select mechanisms and navigation.
• When Are Halland gave his presentation at IA Summit 2007 (in Las Vegas), he was dressed as Elvis.
• Cores and Paths: 1. Identify core and design it. 2. Determine inward paths. 3. Determine outward paths.
• Cores: pages, flow, distributable, multiple cores. Example core: on Flickr — prioritized element plus supporting info.
• Inward paths: important for findability. Site search, homepage, RSS feeds, open APIs, partner, newsletters, emails, Google
• Outward paths: Shopping cart, buy used, sell, wish list, shopping list, wedding registry, baby list, tell a friend, rate, related
• Inward paths important for findability and user while Outward paths important for ROI and business
• Cores & Paths process: identify core > sketch core only! > define inward paths based on user research > define outward …
• … sketch navigation on core page first > sketch navigation needed on other pages to get to the core. Try it!!
• Been silent because we’re working in teams to design a website for high-end bicycles using the Core & Paths process
• Layout & wireframes/schema: 1. Abstract arrangement of content on pg. 2. Provide consistency. 3. Important for orientation/nav
• @Pivo1 citing Michael Bernard‘s “Developing Schemas for the Location of Common Web Objects”
• @Pivo1 citing @jmspool’s “Evolution Trumps Usability Guidelines“
• @jmspool’s study: 44 participants, 13 sites, 1000 transactions. Everyone had enough money to buy what they wanted…
• …UIE found no correlation between Bernard’s schema and online sales
• Wireframes should reflect the design of schema and systems, not pages. Unnecessary to wireframe every page in a website
• Wireframe process: input (user, content, business), start with the goal, explore alternatives, present wireframes, rework wfs
• “Think of wireframes as disposable sketches.” @Pivo1 prefers super low-fidelity wfs. They’re exploratory, not skeletons to draw in
• @Pivo1 just made us crumple up our sketches. Groans from the room. “A designer should have 5 different solutions to the problem”
• Now we’re redrawing the schema based on previous ideas.
• @Pivo1 just cited Bill Buxton and my favorite quote of his about sketching to get the right design vs. getting the design right
• And that’s all folks. Kudos to @Pivo1 for squeezing all this great content into a one-day workshop and not losing his voice!

Related Posts:

• Get a 15% discount to DelveUI in NYC July 23, 2009 | 4 comments
• September 2008 IxDA NYC: Dan Saffer’s Tap is the New Click September 22, 2008 | 3 comments
• 10 Most Common Misconceptions About User Experience Design — the presentation April 6, 2009 | 1 comments
• Video of Dan Saffer’s talk “Tap is the New Click” at IxDA NYC January 9, 2009 | 1 comments