• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Navigation Research

on

  • 5,893 views

[TIP: WATCH THIS PRESENTATION IN FULL SCREEN MODE] A presentation for the Information Architecture Summit 2004, it both summarizes web navigation research up to that date and presents a method for ...

[TIP: WATCH THIS PRESENTATION IN FULL SCREEN MODE] A presentation for the Information Architecture Summit 2004, it both summarizes web navigation research up to that date and presents a method for designing navigation.

Statistics

Views

Total Views
5,893
Views on SlideShare
5,884
Embed Views
9

Actions

Likes
9
Downloads
3
Comments
0

2 Embeds 9

http://www.slideshare.net 8
http://www.fachak.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Navigation Research Navigation Research Presentation Transcript

    • Incorporating Navigation Research Into a Design Method Victor Lombardi Information Architecture Summit 2004 Hi! 1
    • Tell ‘em what you’re gonna tell ‘em… Survey recent navigation research Suggest ways to use research findings Integrate research into a design method First I’d like to present some recent research on navigation you may not have seen. For each research finding I’ll suggest an approach to using it. Finally, I’ll gather the individual approaches together in the context of a navigation design method. 2
    • At the last Summit, there was a wonderful debate revealing how little we agreed on The excellent Wayfinding Panel at the 2003 IA Summit asked, ‘Does an underlying spatial metaphor make it easier for users to find information they are looking for?’ The panelists went beyond the issue of spatiality, exploring fundamental ideas about navigation, but without much resolution. In the course of the discussion many of us were exposed to new ideas and new research, inspiring me to search for more information. 3
    • Scope of My Work Browsing and directed search Mostly top-down, user-centered Any medium, not just the web Excludes classification The scope of my work was limited to browsing and directed search and did not include free-text search. Usually I was concerned with helping users find a known item, but I also thought about exploration and orientation. While there are many helpful bottom-up methods in information architecture, navigation necessarily involves matching users to their goals, a top-down exercise. I believe an overly bottom-up approach paints us into a corner with a limited amount of navigation options. All the examples focus on website design although the findings should apply to other media as well. There is already a substantial body of information about classification, and how it relates to navigation, so I excluded it from my search in order to find lesser known research. 4
    • The Shape of Information The first line of research I’d like to explore is the Shape of Information. I’ll start by asking you a question… 5
    • Do you know what kind of document this is? Do you know basically where you are in this document, the beginning, middle, or end? Can you guess what other information is around this excerpt? If you’re familiar with this genre of document, you know it’s a Chinese food menu and that you are somewhere inside the menu, probably not at the very top or bottom. It’s a simple example, but the fact that you can identify the document, know where you are, and what is around you without further context or labeling is a powerful concept. The shape of information helps us predict the context, ordering and grouping of elements. With this information, we become oriented and can navigate, all without the use of titles, headings, breadcrumbs, navigation bars, etc. 6
    • Food Delivery Home Menus Delivery About Us Home > Menus > Chinese Chinese Menu Chinese Greek Number Spicy? Price Name Indian 01 Yes 4.95 Chicken with Garlic Sauce 02 Yes 4.95 Garlic Chicken Italian 03 No 4.95 Lo Mein 04 No 4.95 Chow Mein 05 No 4.95 Veg Egg Foo Young 06 Yes 4.95 Sesame Chicken 07 No 4.95 Chicken with Snow Peas 08 No 4.95 Fried Rice If we thought about laying out the information from a Chinese food menu in digital system we might end up with something like this. The “Information Architect’s” version includes all the elements we’ve been taught make context and navigation clear: large titles, highlighted navigation, and every facet explicitly labeled with text. It seems relatively unsophisticated and unintuitive in comparison with the native layout on the last slide. If classification and labeling are our hammers, every problem looks like a nail. 7
    • “The shape of information is conveyed both by (Dillon et al) physical form and by information content.” Andrew Dillon and his colleagues established this line of research, and define shape as, “a property conveyed both by physical form and by information content.” His experiment showed how those familiar with academic journal articles could identify parts like the abstract, experiment results, and discussion without seeing the context or section labels. By the way, I should note that I’m condensing research that people have spent years on into a few slides with simplistic examples. This doesn’t do justice to them, and if you plan to use these findings in your own designs I highly recommend you read the research reports too. They’re all listed at the end of this presentation. 8
    • Dillon points out that navigation is different in the physical world than in the digital world: While wayfinding like road signs only tell you where you are now and the distance and direction to other places, the shape of information communicates meaning, and so contributes to the end goal of comprehension, in addition to enabling navigation. Content is not different from navigation: In the example of the Chinese food menu we understood what we were seeing, where we were, and what is around us all without explicit navigation, so the content itself - because we are familiar with it - enables us to navigate. 9
    • “The form of a document is a powerful metaphorical construct in document recognition.” Elaine Toms has done similar research supporting the idea of information shape. 10
    • Shrimp Toast (4) $3.95 Fried Chicken Wings (8) $2.95 Wonton in Hot Oil $3.95 Cold or Hot Noodles in Spicy Sauce $3.95 Marinated beef (2) $3.50 Fantail shrimp (4) $4.95 Hacked Chicken in Spicy Sauce (cold) $4.95 Chicken in Cold Noodles (cold) $4.95 Hot and Sour Cabbages (cold) $2.95 Sweet And Sour Cucumber (cold) $2.95 Shrimp Dim Sum $3.95 Scallion Shrimp Toast (4) $3.95 Fried Chicken Wings Chicken in Cold Noodles (cold) $4.95 Hot and Sour Cabbages (cold) $2.95 Sweet And Sour Cucumber (cold) $2.95 Shrimp Dim Sum $3.95 Scallion Shrimp Toast (4) $3.95 Fried Chicken Wings (8) Toms conducted a study comparing three different versions of documents: •A full version, with content and form intact •A content version, with all structure deleted •A form version, will content changed to X’s and 9’s (I’m continuing to illustrate these points using the Chinese menu for sake of continuity) These two versions, the full and content versions, were recognized more often, but… 11
    • 9.99 99 xxxxxxxxxxxxxxxxx xxxx xxxx xxxxxxx xxxxxx 9.99 99 xxxx xxxxxxxxxx xxxxxxxxxxx xxx xxxxxxxxxx 9.99 99 xxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxx xxxx 9.99 99 xx xxxxx xx xxxxxxxxxxxxxx xx xx xxxxxxxxx 9.99 99 xxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxx 9.99 99 xxxxxxxx xxxxxxxx xxxxxxx xxx xxx xxxxxxx 9.99 99 xxxxxxxxxxxxxxxxx xxxx xxxx xx xx xxx xxxxxx 9.99 99 xxxxxxxxxxxxxxxxx xxxx xxxx xxxxxxx xxxxxx 9.99 99 xxxx xxxxxxxxxx xxxxxxxxxxx xxx xxxxxxxxxx 9.99 99 xxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxx xxxx 9.99 99 xx xxxxx xx xxxxxxxxxxxxxx xx xx xxxxxxxxx 9.99 99 xxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxx 9.99 99 xxxxxxxx xxxxxxxx xxxxxxx xxx xxx xxxxxxx 9.99 99 xxxxxxxxxxxxxxxxx xxxx xxxx xx xx xxx xxxxxx 9.99 99 xxxxxxxxxxxxxxxxx xxxx xxxx xxxxxxx xxxxxx 9.99 99 xxxx xxxxxxxxxx xxxxxxxxxxx xxx xxxxxxxxxx 9.99 99 xxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxx xxxx Although users recognized this version, the form version, less often, the recognition was twice as fast. Apparently our cognitive processing of the form happens more quickly than the processing of the semantics of the content. This ability to communicate the nature of the information through its form reinforces the benefit of leveraging content’s native shape. 12
    • Shrimp Toast (4) $3.95 Fried Chicken Wings (8) $2.95 Wonton in Hot Oil $3.95 Cold or Hot Noodles in Spicy Sauce $3.95 Marinated beef (2) $3.50 Fantail shrimp (4) $4.95 Hacked Chicken in Spicy Sauce (cold) $4.95 Chicken in Cold Noodles (cold) $4.95 Hot and Sour Cabbages (cold) $2.95 Sweet And Sour Cucumber (cold) $2.95 Shrimp Dim Sum $3.95 Scallion Shrimp Toast (4) $3.95 Fried Chicken Wings (8) $2.95 Wonton in Hot Oil $3.95 Cold or Hot Noodles in Spicy Sauce $3.95 Marinated beef (2) $3.50 Fantail shrimp (4) $4.95 Hacked Chicken in Spicy Sauce (cold) $4.95 Chicken in Cold Noodles (cold) $4.95 Hot and Sour Cabbages (cold) $2.95 Sweet And Sour Cucumber (cold) $2.95 In another experiment by Toms, content in one genre was formatted as a different genre (here I’ve represented it as a menu items formatted as glossary entries). When participants were asked to identify the genre they selected the genre of the format, not the content. So in this case they would have said this is a page from a glossary. This again reinforces the impact that form has on our understanding of a document. 13
    • Shrimp Toast (4) $3.95 Fried Chicken Wings $3.95 Shrimp Toast (4) (8) $2.95 Wonton in Hot Oil (8) Fried Chicken Wings $3.95 Shrimp Toast (4) $3.95 Cold or Hot in Hot Oil $2.95 Wonton Fried Chicken Wings (8) Noodles in ShrimpHot (4) $3.95 Spicy Toast $3.95 Cold or Sauce Hot Oil $2.95 Wonton in $3.95 Marinated Chicken Wings (8) Fried beef (2) Noodles in Spicy Sauce $3.95 Cold or Hot in $3.50 Fantail shrimp beef (2) Hot Oil $2.95 Wonton $3.95 Marinated (4) Sauce Noodles in Spicy Hot $4.95 Hacked Chicken or (4) $3.95 Cold $3.50 Fantail shrimp beef (2) $3.95 Marinated in Spicy Sauce Chicken Sauce Noodles in Spicy $4.95 Hacked shrimp (4) $3.50 Fantail $3.95 Marinated beef (2) in Spicy Sauce Chicken $4.95 Hacked shrimp (4) $3.50 Fantail in Spicy Sauce Chicken $4.95 Hacked in Spicy Sauce We can leverage this familiarity with shape when designing. When collecting or creating content, we can retain shapes already familiar to users, and format information in familiar shapes when possible. 14
    • Stewart 38 years old I can’t I love Actor boil an Chinese egg food Has anyone seen the Ruby Foo menu? In reading the navigation research, I often felt the need to change the way I model an end-user audience to improve how I would design navigation for them. In this case when researching users and modeling them I can sometimes find their familiar information shapes directly and sometimes I had to find them indirectly by observing other behavior. For example, if someone can’t cook, loves Chinese food, and lives in an area with Chinese restaurants, chances are pretty good they will recognize a Chinese menu. 15
    • EXPERTISE: Computers: Menu Website: Ordering Food: Recognition of shape depends on experience and expertise of that genre, so it’s also important to integrate these attributes into user models. While reading through research on navigation, just about everyone cites user expertise as a factor, regardless of the task being studied. So I’ve borrowed an approach that Jakob Nielson offers in his book Usability Engineering to look at three facets of expertise: •Knowledge about computers •Expertise in using the specific system (e.g. a menu website) •Understanding of the task domain (e.g. ordering food) I'd like a better, more quantifiable, way to summarize a user's level of expertise in a persona. This could lead to generalizations about what types of interaction will work for certain types of user. Short of that, I like to put the personas together on one page so comparative judgments can be made, e.g. Cary is a computer novice and is unfamiliar with Internet conventions, while Marion is above average and spends an hour a day on the Internet. If at this point you’re thinking, “This guy is just stating the obvious,” well, yes, it does seem obvious, but… 16
    • Shrimp Toast (4) $3.95 Fried Chicken Wings $3.95 Shrimp Toast (4) (8) $2.95 Wonton in Hot Oil (8) Fried Chicken Wings $3.95 Shrimp Toast (4) $3.95 Cold or Hot in Hot Oil $2.95 Wonton Fried Chicken Wings (8) Noodles in ShrimpHot (4) $3.95 Spicy Toast $3.95 Cold or Sauce Hot Oil $2.95 Wonton in $3.95 Marinated Chicken Wings (8) Fried beef (2) Noodles in Spicy Sauce $3.95 Cold or Hot in $3.50 Fantail shrimp beef (2) Hot Oil $2.95 Wonton $3.95 Marinated (4) Sauce Noodles in Spicy Hot $3.95 Cold or $4.95 Hacked Chicken (4) $3.50 Fantail shrimp beef (2) $3.95 Marinated in Spicy Sauce Chicken Sauce Noodles in Spicy $4.95 Hacked shrimp (4) $3.50 Fantail $3.95 Marinated beef (2) in Spicy Sauce Chicken $4.95 Hacked shrimp (4) $3.50 Fantail in Spicy Sauce Chicken $4.95 Hacked in Spicy Sauce ? Shrimp Toast (4) $3.95 Fried Chicken Wings $3.95 Shrimp Toast (4) (8) $2.95 Wonton in Hot Oil (8) Fried Chicken Wings $3.95 Shrimp Toast (4) $3.95 Cold or Hot in Hot Oil $2.95 Wonton Fried Chicken Wings (8) Noodles in ShrimpHot (4) $3.95 Spicy Toast $3.95 Cold or Sauce Hot Oil $2.95 Wonton in $3.95 Marinated Chicken Wings (8) Fried beef (2) Noodles in Spicy Sauce $3.95 Cold or Hot in $3.50 Fantail shrimp beef (2) Hot Oil $2.95 Wonton $3.95 Marinated (4) Sauce Noodles in Spicy Hot $4.95 Hacked Chicken or (4) $3.95 Cold $3.50 Fantail shrimp beef (2) $3.95 Marinated in Spicy Sauce Chicken Sauce Noodles in Spicy $4.95 Hacked shrimp (4) $3.50 Fantail $3.95 Marinated beef (2) in Spicy Sauce Chicken $4.95 Hacked shrimp (4) $3.50 Fantail in Spicy Sauce Chicken $4.95 Hacked in Spicy Sauce Shrimp Toast (4) $3.95 Fried Chicken Wings $3.95 Shrimp Toast (4) (8) $2.95 Wonton in Hot Oil (8) Fried Chicken Wings $3.95 Shrimp Toast (4) $3.95 Cold or Hot in Hot Oil $2.95 Wonton Fried Chicken Wings (8) Noodles in ShrimpHot (4) $3.95 Spicy Toast $3.95 Cold or Sauce Hot Oil $2.95 Wonton in $3.95 Marinated Chicken Wings (8) Fried beef (2) Noodles in Spicy Sauce $3.95 Cold or Hot in $3.50 Fantail shrimp beef (2) Hot Oil $2.95 Wonton $3.95 Marinated (4) Sauce Noodles in Spicy Hot $4.95 Hacked Chicken or (4) $3.95 Cold $3.50 Fantail shrimp beef (2) $3.95 Marinated in Spicy Sauce Chicken Sauce Noodles in Spicy $4.95 Hacked shrimp (4) $3.50 Fantail $3.95 Marinated beef (2) in Spicy Sauce Chicken $4.95 Hacked shrimp (4) $3.50 Fantail in Spicy Sauce Chicken $4.95 Hacked in Spicy Sauce The challenge here, like most tasks in information architecture, is making it scale to large volumes of information. Consider the challenge of displaying many different types of documents in their native shape while combining them all into one information system meant for use by different people (who may not have the same shape familiarity). Our inclination is to break documents down into components, put the components into a content management system, and output those components in a limited set of templates for display in homogeneous ways. Or simply make all information look like typical format of the medium, e.g. following web page conventions. When the documents re-emerge from this information meat grinder the native shape is lost. Balancing the efficiency of large-scale publishing with the retention of native shape is a challenge. 17
    • Transitional Volatility Next I’d like to talk about a line of research called Transitional Volatility. 18
    • “…all-or-nothing volatility distributions were more noticeable, and more disorienting, than more (Danielson) subtle and graded changes.” Transitional Volatility by David Danielson is a rare, rigorous look at the common guideline to 'make navigation consistent' in a world that has big websites where the navigation must change from time to time. His finding showed that complete consistency is not always the best route, and in fact sometimes changing the navigation is helpful. He defines transitional volatility as “the extent to which users encounter changes in the Web interface as they move within or between sites.” While it sounds dangerous, volatility is by its nature neither a good nor a bad phenomena. Danielson studied how users reacted to changes in the navigation appearance from page to page of a website. He tested use of three versions of one site, each with a different navigation scheme. His sample site used a 'well-formed' and limited hierarchy, such that each of the two upper levels' items always had subordinates, and no item at the third level had any subordinates. His test gave participants directed-search tasks, in other words trying to find a specific piece of information by following links. He tested three sites with different navigation schemes but the same information hierarchy… 19
    • The 'full overview' had a full site map-like outline in the left navigation bar, with second and third levels of the hierarchy indented. 20
    • The 'partial overview' placed the top level links in global navigation along the top and listed the second and third level categories for the currently selected top level category in the left hand navigation bar. 21
    • The 'local context' version also placed the top level links in global navigation along the top. It listed the second level choices for the currently selected top level category in the left hand navigation bar. This navigation only listed the third level categories for the currently selected second level category. 22
    • For our purposes, the first –full overview – version didn’t offer interesting results. In Danielson’s tests, using the partial overview navigation (on the left) made it harder for users to find items than the local context navigation (on the right). Interestingly, both left hand navigation bars change completely upon the selection of a top-level navigation choice. And yet the local context - which changes more often - was less disorienting. How can this be? What the heck is going on here?? 23
    • NOODLES NOODLES NOODLES Vegetarian Vegetarian Vegetarian Chicken Chicken Chicken Beef Beef Beef Pork Pork Pork Vegetarian Chicken Beef Noodle In Broth Mixed Veggies Chicken Feet Bean Sprouts Spinach Sun Sun Style Mandarin Broccoli Fun Fun Style Cantonese Pickled Cabbage Shredded By changing more often and showing each third level choice, this local context navigation better prepares users for further changes. It keeps users from becoming disoriented by changing in subtle ways instead of all at once. Using the local context navigation also caused a perception of a larger and more coherent site. Jesse James Garret nicknamed this the Seven Veils Effect: “by alternately showing and hiding what's available, you create the impression that there's more to see than there really is.” Woohoo. Danielson says, “Users [tended] not to notice the option changes, and probably got a chance to see connections rather than differences.” 24
    • Navigate Predict Incorporate Reorient To understand this fully, we can look at how the user’s experience changes during navigation. The user navigates and then, perceiving a change, reorients at the destination page of a transition. The destination page is incorporated into the user’s perception of the recent content. The user predicts content and navigation option changes in page-to-page transitions and then navigates again. If there is a subtle change, the reorientation is easy and the user perceives the new page as part of the current collection of pages. If the change is infrequent and/or dramatic then more reorientation is necessary, and it’s harder to predict how the navigation will change next. So it's just not the page right before the change that sets expectations, the user has a subtle and complex memory of pages they've experienced. Several similar pages that lead to one big change is very disorienting. More frequent, subtle changes are easily adapted to and considered consistent with what has been experienced already. 25
    • Keep navigation consistent So if you take this familiar guideline, “Keep navigation consistent” … 26
    • Keep navigation consistent …and had to update it… 27
    • Keep navigation consistent Change navigation in subtle ways …it might be, “Change navigation in subtle ways.” Notice that I don’t say, “Keep navigation changes subtle” because that includes the possibility that it not be changed at all, which may be a disadvantage to revealing connections among concepts. Changing the navigation more frequently in subtle ways better prepares users for change and better reveals connections among information. 28
    • What Do Web Users Do? “What Do Web Users Do?” is a good question to ask before creating navigation… 29
    • “Page revisitation…accounts for 81% of page visits.” “The most frequently occurring time gap between subsequent pages was one second, and gaps of more than ten seconds were relatively rare.” (Cockburn and McKenzie) What Do Web Users Do? An Empirical Analysis of Web Use by Andy Cockburn and Bruce McKenzie examined the surfing behavior of many web users. They looked at the title, URL and time of each page visit, how often they visited each page, how long they spent at each page, the growth and content of bookmark collections, as well as a variety of other aspects of user interaction with the web. I like this research because it focused on the aspect of time, an under-represented area of user experience research. Previous studies have shown that revisitation (navigating to a previously visited page) accounts for 58% to 61% of all page visits. This study shows that page revisitation is now even more prevalent, accounting for 81% of page visits when calculated across all users. In other words, when visiting websites we are creatures of habit. The results also show that browsing is rapidly interactive. Users often visit several pages within very short periods of time, implying that many (or most) pages are only displayed in the browser for a short period of time. 30
    • Support revisitation Design pages to load quickly Shorten navigation paths Minimize transient pages The authors offer some familiar and some new recommendations. But on websites of significant size these are easier said than done. 31
    • Food Delivery Food Delivery Home Menus Delivery About Us Home Menus Delivery About Us & Chinese Chinese Lao-tzu, a Chinese philosopher once said: Governing a great nation is Greek like cooking a small fish - too much handling will spoil it. He also said Indian The Way that can be experienced is not true; The world that can be constructed is not real. The Way Italian manifests all that happens and may happen; The world represents all that exists and may exist. To experience without abstraction is to sense the world; To experience with abstraction is to know the world. These two experiences are indistinguishable; Their construction differs but their effect is the same. Beyond the gate of experience flows the Way, Which is ever greater and more subtle than the world. A question we should ask is if we should sometimes think in terms of two types of pages, transient pages and destination pages, as represented here? Should all pages load quickly, or is it alright for 'destination' pages (with target content) to be larger? If we have a lot of information but must shorten navigation paths, it begs the question: should websites be smaller? What is the right size for a particular website? 32
    • First time user nth time user 30% 70% % of site use: • Comprehend breadth • Place order Information of service • Re-place a past priorities: • Understand process order • Place order In any case, when devising a persona, scenario, or interaction model, we can consider whether the users are first time or repeat visitors. We can outline what each case needs in terms of content and navigation and factor that into our design. 33
    • Effective View Navigation The next line of research is called Effective View Navigation. 34
    • “Despite the vastness of an information structure, the views must be small, moving around must not (Furnas) take too many steps and the route to any target be must be discoverable.” George Furnas boils navigation down to its essential challenge: you have a lot of information to offer but only a limited way of displaying it, and the user must be able to find the desired information and do it in a small number of steps. He took a different approach to thinking about navigation, looking at it through the lens of graph theory to find efficient navigation paths. Some of his findings provide a theoretical base to now common practice. After an interesting logical analysis of the problem he concedes that one navigation scheme - what we might call global navigation today - would be hard-pressed to provide access to a large information structure. Along the way he predicts the rise of a combination of global and local navigation. 35
    • “Always remember the strategy of putting a traversable infrastructure on an otherwise unruly information structure!” His ideas of efficient view traversability provide a good mathematical explanation of creating short paths to target information and a helpful last resort after other methods fail, 'always remember the strategy of putting a traversable infrastructure on an otherwise unruly information structure!' For example, as a last resort, stuff the information into a balanced tree. If we combine this with a user-centered design method, we might say, 'If research of the users does not reveal a clear path to the information, and the users understand the domain enough to understand the meaning of a set of hierarchical categories, then stuff the information into a balanced tree.’ This perspective becomes another useful input into the breadth vs. depth problem of navigation. Furnas identifies multiple structures with efficient view transversibility: •The local view of a balanced tree •Multicolumn lists •The local view of a hypercube (e.g. a faceted classification with binary facets) •Fisheye views 36
    • A Navigation Method That’s the end of the research I’m discussing here. Now I’d like to talk about how I integrate that research into my design method. 37
    • The designer is faced with a blank sheet of paper, needing to synthesize a great deal of project information into a single design artifact. I am taking this designer’s perspective: creating artifacts, rather than testing them. Much current work on navigation is expressed as guidelines that emerge as a result of testing. These guidelines describe good and bad artifacts, or how people react to certain artifacts, but not the complex process of creating the artifacts in the first place. 38
    • This leads to hundreds of guidelines. You remember to follow all these guidelines, right? It’s OK, no one does. 39
    • “There is a wide gap between designers' articulation of constraints and designers' effective implementation of them.” (Chevalier & Ivory) Besides, we’re not good at simply following guidelines. Web Site Designs: Influences of Designer’s Experience and Design Constraints by Aline Chevalier and Melody Y. Ivory points out: “We found studies showing that constraints are extremely important for understanding and for solving a design problem… There is a wide gap between designers' articulation of constraints and designers' effective implementation of them.” “During the experimental study, designers articulated constraints that they considered to make design decisions. Afterwards, separate analysts assessed whether their designs actually respected the constraints that the designers articulated… Even the experienced designers could only satisfy 75% of the constraints they were given. While they achieved up to 95% of the client constraints, they couldn't satisfy more than half of the user constraints.” The designers that performed better relied on their experience, not guidelines: “professional designers in the condition without constraints were able to infer client constraints, because they had contextual knowledge acquired through experience (stored as mental schemata).” As solutions they suggest ways to evaluate designs, which could be helpful. But I would like to find a more confident way to design an artifact to begin with, not just devise better ways to find flaws. 40
    • Experiment Create Guidelines Classify I think we’re following a path where we begin by experimenting and then record what we learn in the form of guidelines. For example, on the Web the 1990’s were a time of using what we could learn from classification and hypertext work and a great deal of experimentation. This has lead to many more guidelines for creating websites. Once we have a long list of guidelines we do what we usually do with long lists - classify them… 41
    • Requirements Engineering Introduction Site Specification Planning Site Design User analysis Site Development Design Site Usage and Evaluation Structure Site Maintenance Production Preparation Maintenance Administration e-commerce topics Here are the top-level categories of two examples that do an admirable job categorizing a large number of web usability and design guidelines. The example on the left is from A Framework for Organizing Web Usability Guidelines by Scapin et al and on the right is from Web design guidelines by the IBM Ease of Use Group. But these categories aren’t granular enough to use when designing navigation. 42
    • Site Genres Creating a Navigation Framework Creating a Powerful Homepage Writing and Managing Content Building Trust and Credibility Basic E-Commerce Advanced E-Commerce Helping Customers Complete Tasks Designing Effective Page Layouts Making Site Search Fast and Relevant Making Navigation Easy Speeding Up Your Site These categories, from the book The Design of Sites, focus on the design stage and include two areas dedicated to navigation. These approaches help a great deal. But in the midst of large IA projects I find that the effort involved in synthesizing the overwhelming amount of information about the users, business, content, and technology makes it desirable to have a stronger method to address the navigation design problem. Chevalier & Ivory argued that “heuristic evaluation with ergonomic criteria suggested by Nielsen has not been adapted for web site designers…because the ergonomic criteria are both too abstract and too numerous. Our hypothesis is that it would be more effective to provide designers with a subset of ergonomic constraints that respect the users' real needs.” Absolutely. There are simply too many guidelines to follow these days. There has to be a way of winnowing them down. A better design method might help. 43
    • Experiment Create Guidelines Classify Contextualize I would not only like my guidelines categorized, I want them put in context. For me, “navigation” is still too large a category. It describes an activity that occupies perhaps the majority of my time designing. I know in reality I do some things before other things, so I should be able to put the guidelines in order as well to give them some context within the method. 44
    • Summarize Research Create Intended Experience Gather Content Navigation & Interaction Design Classify Information Here are the ordered steps in which I’ve placed the guidelines. This allows me to focus only on the guidelines I need at a particular step in the design process. This order may not work for you, but the idea of ordering your guidelines may work for you. For example, Furnas’s guideline to “put a traversable infrastructure on an otherwise unruly information structure” naturally falls near the end, after I’ve explored other ways to “rule” the information structure. The IA community has discussed the degree to which our approach is systematic, and how systematic is should be. Personally, I think there is too much guessing involved in current methods, with an over-reliance on testing. Given a more systematic method, we could design with more confidence. To the paranoid among us I say we are far from the point where navigation design can be automated; there are still many decisions for which we have no research and at which designers must use their experience to improvise a solution. At the very least, this becomes a better way to use guidelines, which otherwise are hard to remember and use. 45
    • Summarize Research User Strategy Operations (incl. expertise, revisitation, etc.) Brand Marketing Technology At the start of the process I summarize all the research I’ve done. In particular, I model the users –for example using personas – making sure to include assessments of their expertise (which later informs how I shape the information) and their revisitation behavior. 46
    • Create Intended Experience Storyboard Scenario Prototype Identify Address Mental Stages (e.g. Model Kuhlthau’s ISP) Next I express what I intend the resulting experience to be. Creating an artifact that benefits people is the whole reason for my design, so this step must come at the beginning. A storyboard describes the intended user experience from the user’s perspective: “Cary goes to the menu website. He checks if they have the food he wants. He investigates the payment options and if they deliver to his neighborhood…” Expressing the intended experience using a technique like storyboarding already starts to imply a flow of navigation, and does so in a user-centered way. 47
    • Gather Content Identify Content Shape New Audit Content Content Next I gather any content that exists and identify any content that should be created, and then shape it to leverage what users are already familiar with. The shape of the information may include cues to navigation, like sections that are particular to a type of document and the section headings. So this step further implies more navigation design. 48
    • Navigation & Interaction Design Link Change Nav Interaction Content (e.g. Subtly Design with transient and destination pages) Optimize Structure Next I link together the content in a way that retains any desired shape and facilitates the intended experience for the users. At this time interaction design also happens. You’ll notice that it’s only at this late stage – when I’ve done a lot to form the navigation in accordance with the users and the content – do I think about Furnas’ guideline to optimize the structure. 49
    • Classify Information Choose Create Classify Model Model Finally at the end I do any necessary information classification. From earlier steps I may already have a rough idea of essentially what categories or facets are necessary for navigation purposes, and at this stage I would formally develop a structure and populate it. This is perhaps the biggest difference between my method and how information architecture is often done. It’s common to collect the information, classify it, and turn the category and facet labels into navigation elements. If the information is classified so early in the method, the information organization determines the user’s experience. If the goal is simply information seeking or usability this approach may be fine. I prefer the goal of a great product and a beneficial experience for user’s above mere usability, so I place classification later in my method. I spent the last few years learning sophisticated ways of doing bottom-up information organization. This is great for managing content, but limited my flexibility when it came time to create other aspects of the design, such as the navigation. 50
    • Summary Read research Do research Incorporate it into your own method In summary, there’s a lot of great research being done that can help you design in practical ways. I highly recommend staying current. There’s also a lot of areas for which we have no research but could use some to inform our methods. I’ve presented my method which may or may not work for you. In any case, a similar way of creating a method may help you design more confidently. It may also be a more useful way to organize design guidelines than merely classifying them, or trying to remember them all mentally. 51
    • References Design of Sites Douglas van Duyne, James Landay, Jason Hong http://www.designofsites.com/ Effective View Navigation George W. Furnas http://www.si.umich.edu/~furnas/Papers/CHI97-EVN.2.pdf Expertise and the Perception of Shape in Information Andrew Dillon and Dillon Schaap Journal of the American Society for Information Science, 47, 10, 786-788. A Framework for Organizing Web Usability Guidelines Dominique Scapin et al http://www.tri.sbc.com/hfweb/scapin/Scapin.html It's the journey and the destination: Shape and the emergent property of genre in evaluating digital documents Andrew Dillon and Misha Vaughan http://www.ischool.utexas.edu/~adillon/publications/journey&destination.pdf Thanks to Ulrike, Bella, Wendy, Tanya, James, and Jody for feedback! 52
    • References Spatial-Semantics: How Users Derive Shape from Information Space Andrew Dillon http://www.asis.org/Publications/JASIS/vol51n0600.html Transitional Volatility David Danielson http://www.stanford.edu/group/siqss/itandsociety/v01i03/v01i03a08.pdf Usability Engineering by Jakob Nielsen http://www.amazon.com/exec/obidos/tg/detail/-/0125184069/noisebetweenstat What Do Web Users Do? An Empirical Analysis of Web Use Andy Cockburn and Bruce McKenzie http://www.cosc.canterbury.ac.nz/~andy/papers/ijhcsAnalysis.pdf Web design guidelines IBM Ease of Use Group http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572 Web Site Designs: Influences of Designers Experience and Design Constraints Aline Chevalier and Melody Y. Ivory http://webtango.ischool.washington.edu/papers/designers.pdf Bye! 53