Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

How to Create and Maintain an Effective Information Architecture and Navigation System for Science Gateway Websites

Tutorial presented by Shari Thurow and Noreen Whysel at the Gateways 2019 conference in San Diego, hosted by the Science Gateways Community Institute.

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

How to Create and Maintain an Effective Information Architecture and Navigation System for Science Gateway Websites

  1. 1. Copyright ©2014-2019. All rights reserved. How to Create and Maintain an Effective Information Architecture & Navigation System for Science Gateway Websites Noreen Whysel, Co-Founder. Information Architecture Gateway Shari Thurow, Co-Founder. Information Architecture Gateway
  2. 2. PART 1: INFORMATION ARCHITECTURE (IA) How to Create Information Architecture & Navigation Systems Copyright ©2014-2019. All rights reserved.
  3. 3. Tutorial Agenda - Part 1 •  What is Information Architecture? •  How We Make Things Make Sense •  IA Tools and Practices •  Activity: Card Sort •  Avoiding Cognitive Bias •  Key Takeaways Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  4. 4. About me: •  Research professional since 1991. •  Web designer/developer since 1996. •  Information architect & UX professional since 2002. •  MSLIS Pratt Institute, BA Columbia University. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. @nwhysel nwhysel@gmail.com
  5. 5. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. •  New York City College of Technology, CUNY Adjunct Lecturer, Communication Design •  XSEDE: Extreme Science and Engineering Discovery Environment Campus Champion •  Information Architecture Institute (IAI) Advisor, former Operations Manager •  Information Architecture Gateway Co-Founder Information Architect
  6. 6. Guide to Symbols This is a good idea, or this website implemented an information architecture best practice. This is a bad idea; don’t do this; or this website did not implement an information architecture best practice well. Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  7. 7. Guide to Symbols Usability / UX tests that can help you monitor & increase user engagement & conversions on your website. Tools that can help you increase the findability of your website. Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  8. 8. What is Information Architecture (IA)? Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  9. 9. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. IA TIP #1: “If you’ve ever tried to use something and thought, ‘where am I supposed to go next?’ or ‘this doesn’t make any sense,’ you are encountering an issue with an information architecture.” -- Information Architecture Institute What Is Information Architecture (IA)
  10. 10. What Is Information Architecture (IA) •  IA is focused on making information findable and understandable. (Rosenfeld, Morville, and Arango, Information Architecture: For the Web and Beyond) •  The organization, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found. (Peter Morville) •  Organizing, structuring, and labeling content in an effective and sustainable way. (Usability.gov) •  “Make Things Make Sense” (Richard Saul Wurman, Founder TED) Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  11. 11. IA is Ubiquitous Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  12. 12. Peter Morville’s UX Honeycomb Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Morville, P. (June 21, 2004). User Experience Design. Semantic Studios. Web. https://semanticstudios.com/ user_experience_design/ User Experience (UX) is a field of design practice that seeks to make digital products and services Valuable to the user.
  13. 13. Perils of Poor Information Architecture •  Inability to find content on your site •  Inability to connect your site concepts to the user’s search behavior •  Failure to comply with accessibility guidelines and requirements •  Inability to anticipate or scale to changes •  Frustrated, angry and/or indifferent users •  Loss of market penetration and site usage Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  14. 14. Impact of Well-Planned IA on Usability Perception Ratings Average Successful Unsuccessful Comfort 3.6 4.2 3.1 Easy to Find 3.2 3.9 2.5 Organisation Clear 2.9 3.3 2.5 Satisfaction 3.3 3.8 2.6 Average 13 15.2 10.8 Note: Numbers in bold indicate significant differences at .03 or less Source: Gullikson, S., Blades, R., Bragdon, M., McKibbon, S., Sparling, M., & Toms, E. G. (1999). “The Impact of Information Architecture on Academic Web Site Usability.” The Electronic Library, 17(5), 293-304. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  15. 15. How We Make Things Make Sense Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  16. 16. Benefit of a Mental Model Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. IA TIP #2: Understanding your users’ mental model helps you design a digital experience that makes sense, minimizes errors and improves user satisfaction.
  17. 17. How We Make Things Make Sense Image: Arnold, K. (N.d.). Dog, hound black silhouette.Wikimedia Commons. https://www.publicdomainpictures.net/en/ view- image.php?image=191489&picture=dog-hound-black-silhouette Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  18. 18. How We Understand Information: Pattern Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Image: Kucsma, J. Twitter post. (With permission). https://t.co/O1xyKTOc84
  19. 19. How We Understand Information: Pattern Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Images: NASA Jet Propulsion Lab. Web. https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA10227; Correlation plots of double knockout distribution across subsystems in M.tb and E.coli. Web. https://en.wikipedia.org/wiki/File:Correlation_plots_of_double_knockout_distribution_across_subsystems_in_M.tb_and_E.coli.png Figure 1 Figure 2
  20. 20. How We Understand Information: Affordances Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Source: Norman, D. (2013). The Design of Everyday Things: Revised and Expanded Edition. New York: Basic Books. Images: Wikimedia Commons, https://commons.m.wikimedia.org/wiki/File:A_double_toggle_light_switch.jpg; Pixabay.com, https://pixabay.com/vectors/background-bar-button-computer-1293455/; Google Material Design, https://material.io/components/selection-controls/
  21. 21. How We Understand Information: Affordances Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Source: Norman, D. (2013). The Design of Everyday Things: Revised and Expanded Edition. New York: Basic Books. Images: Pixabay.com (juice box) and Needpix.com (push pop)
  22. 22. How We Understand Information: Affordances Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  23. 23. How We Understand Information: Mental Model Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Source: Whysel, N. (2012). “Information Architecture of Emergency Management Systems.” The Information Architecture Summit. Presentation. New Orleans: Association for Information Science and Technology.
  24. 24. How We Understand Information: Mental Model Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Source: Whysel, N. (2012). “Information Architecture of Emergency Management Systems.” The Information Architecture Summit. Presentation. New Orleans: Association for Information Science and Technology.
  25. 25. A Mental Model of a Website Includes: Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation •  The layout of items on the page (header, sidebars, comments, etc.), which includes the relationship between items on the page, and •  The shape and scope of the site itself (breadcrumb, main navigation, utility links, footer, etc.) Whether the the design of your Gateway matches your users’ expectations of the above will greatly affect whether it is a delightful, usable and valuable experience. Source: O'Brien, D. (May 19, 2016). Good IA Starts with an Effective Site Tree. Atlassian. Web. https://treetesting.atlassian.net/ wiki/spaces/TTFW/pages/163881/Good+IA+starts+with+an+effective+site+tree
  26. 26. LATCH – Methods of Organization Location: Where things are within a system Alphabet: Indexing and other forced categorization (not natural) Time: When things happen(ed), in what order, over which period Category: Topic, field of interest, can imply a value judgement Hierarchy: Ordered grouping, assigning a value or weight “Information may be infinite, however…The organization of information is finite as it can only be organized by LATCH: Location, Alphabet, Time, Category, or Hierarchy.” --Richard Saul Wurman, 1996 Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Wurman, R.S. & Bradford, P. (1996). Information Architects. Zurich : Graphis Press Corporation.
  27. 27. Six Ways to Organize Information on a Website •  Labeling •  Categorizing •  Linking •  Arranging •  Relating •  Equating Image Source: Original photo by matthew_moss at Flickr https://www.flickr.com/photos/matthew_moss/4209399652 Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  28. 28. Labeling Categorizing Linking Arranging Relating Equating
  29. 29. CRAP Design Wait, what...? •  Contrast: Differentiates items through color, size, shape •  Repetition: Creates a consistent, organized information structure •  Alignment: Makes items easy to read, orderly, reduces confusion •  Proximity: Associates items that are related Source: Williams, R. K. (1994). The non-designer's design book: Design and typographic principles for the visual novice. Berkeley, CA: Peachpit Press. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  30. 30. Bad CRAP: WWHGD Source: World-Wide Human Geography Data Working Group. Web. http://www.wwhgd.com Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  31. 31. Better CRAP: WWPDB Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Worldwide Protein Data Bank. Web. http://www.wwpdb.com
  32. 32. IA Tools Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  33. 33. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. IA TIP #3: Before deciding on an information structure for your site, it is prudent to apply a number of of the following expert reviews and usability studies, involving test participants who represent real, potential users of your website. IA Tools
  34. 34. IA Heuristics We use heuristics to: •  Evaluate the information architecture of a website •  Focus on areas for improvement •  Predict how and whether a different structure will work Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Covert, A. (April 12, 2012). IA Heuristics: A Journey from Why to How. Web. https://abbytheia.wordpress.com/ 2012/04/12/ia-heuristics-journey/
  35. 35. Nielsen Norman 10 Usability Heuristics #1: Visibility of system status #2: Match between system and the real world #3: User control and freedom #4: Consistency and standards #5: Error prevention #6: Recognition rather than recall #7: Flexibility and efficiency of use #8: Aesthetic and minimalist design #9: Help users recognize, diagnose, and recover from errors #10: Help and documentation Source: Nielsen, J. 10 Usability Heuristics for User Interface Design. NNGroup. Web. https://www.nngroup.com/articles/ten-usability- heuristics/ Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  36. 36. Peter Morville’s UX Honeycomb Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Morville, P. (June 21, 2004). User Experience Design. Semantic Studios. Web. https://semanticstudios.com/ user_experience_design/
  37. 37. Pervasive IA Heuristics 1.  Place-making: Helps users reduce disorientation, build a sense of place, and increase legibility and way-finding across digital, physical, and cross-channel environments. 2.  Consistency: Suit the purposes, the contexts, and the people it is designed for (internal consistency) and to maintain the same logic along different media, environments, and times in which it acts (external consistency). 3.  Resilience: Shapes and adapt itself to specific users, needs, and seeking strategies. 4.  Reduction: Manage large information sets and minimize the stress and frustration associated with choosing from an ever-growing set of information sources, services, and goods. 5.  Correlation: Suggests relevant connections among pieces of information, services, and goods to help users achieve explicit goals or stimulate latent needs. Source: Resmini, A., & Rosati, L. (2011). Pervasive information architecture: Designing cross-channel user experiences. Burlington, MA: Morgan Kaufmann. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  38. 38. Abby Covert IA Heuristics Source: Covert, A. (April 12, 2012). IA Heuristics: A Journey from Why to How. Web. https://abbytheia.wordpress.com/2012/04/12/ ia-heuristics-journey/ Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  39. 39. Abby Covert IA Heuristics Source: Covert, A. (n.d.). Information Architecture Heuristics Poster: A Checklist for Critique. The Understanding Group. Web. https://understandinggroup.com/learn/ posters/ia-heuristics-checklist/ Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  40. 40. A Rose is a Rose (except when it isn’t) Information architecture is about naming things, and Taxonomies can help engineers and designers name things for both the front end and back end of an information system. Images: Hamachidori. (November 1, 2008). Rosa Red Chateau01. (N.d.). Wikimedia Commons. Web. https://commons.m.wikimedia.org/wiki/File:Rosa_Red_Chateau01.jpg (Creative Commons Attribution-Share Alike 3.0); McGill, S. (July 3, 2008). Compass Rose Browns. (N.d.). Wikimedia Commons. Web. https://commons.m.wikimedia.org/wiki/ File:Compass_rose_browns_00.png Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  41. 41. Speak Your Users’ Language Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation •  Mental model •  Ontology •  Keywords Ontology is the domain in which you are working. E.g., Orange as a color, a commercially farmed fruit or the botanic species. Images: Finch, Ellen Levy, Orange Blossom wb.jpg, Wikimedia Commons, https://commons.m.wikimedia.org/wiki/ File:OrangeBloss_wb.jpg#mw-jump-to-license, (Creative Commons Attribution-Share Alike 3.0)
  42. 42. What is a Taxonomy? Taxonomies are structured sets of terms used for tagging or categorizing content. Characteristics: •  Structural •  Hierarchical •  Controlled •  Defines Relationships Bread Broader Term (BT): Baked Goods Narrower Term (NT): Baguette, Pumpernickel, Pullman Related terms (RT): Cake, Muffin, Bun, Dough, Bakery See Also/Use (SA/USE): Flatbread, Pizza dough, Focaccia Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  43. 43. Controlled Vocabulary (n.) An organized list of terms, phrases and concepts to help someone understand a topic or domain. In library science: an authority list with a specific structure designed to: •  Control synonyms •  Distinguish between homographs •  Link terms based on their meaning Controlled Vocabulary Source: Covert, A. (2014). How to Make Sense of Any Mess. Publisher: Author and Chowdhury, G. G., & Chowdhury, S. (2007). Organizing information: from the shelf to the Web. London: Facet. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  44. 44. Preferred Terms: •  Red •  Green •  Blue A taxonomy is a controlled vocabulary with a hierarchical structure, including preferred and variant terms. Controlled Vocabulary Source: Covert, A. (2014). How to Make Sense of Any Mess. Published by Author. Variant Terms: •  Scarlet, Crimson, Vermillion •  Forest, Apple, Chartreuse •  Azure, Indigo, Cyan Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  45. 45. Where to Get Your Vocabulary Content Audit: Audit the content of your current site. What language, headings, graphics, navigation labels are used? What language is used. Competitive and Comparative Evaluations: Review the language, headings, graphics of sites that either compete directly with yours or that have similar content, audiences, etc. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  46. 46. Concept Mapping and Affinity Diagrams Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Images: NASA. Electricity Concept Map. (N.d.). Wikimedia Commons. https://commons.m.wikimedia.org/wiki/ File:Electricity_Concept_Map.gif; Whysel, N. (2019). Gateways 2019.; Whysel, N.. (2016). Unite for Humanity Hackathon, United Nations.
  47. 47. Card Sort Card sorts help to test these vocabulary terms with potential users. They are helpful for designing the structure of the main and sub navigation of a website or digital app. Open Card Sort: A generative user research exercise. Participants sort cards and apply categories after they are sorted. Closed Card Sort: An evaluative user research method. Participants are given a set of cards with words phrases or concepts written on them and are asked to sort them into categories provided by the researcher. Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  48. 48. Tree Test A tree test evaluates a hierarchical category structure, or tree, by having users find the locations in the tree where specific tasks can be completed. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Whitenton, K. (May 7, 2017). Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories. Web https:// www.nngroup.com/articles/tree-testing/
  49. 49. Task Flows and User Journeys A Task Flow outlines the steps one would make to complete a required task or process. A User Journey or user story outlines the problem or need, emotion and touchpoints as a user completes a task. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  50. 50. Task Flows and User Journeys Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Laubheimer, P. (December 4, 2016). Wireflows: A UX Deliverable for Workflows and Apps. Web. https:// www.nngroup.com/articles/wireflows/; Vice, J. (February 13, 2019). UX101: Complete Guide to Building Data-Driven User Journeys. Web https://www.uxbooth.com/articles/ux101-data-driven-user-journeys/
  51. 51. Task Flows and User Journey Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Worldwide Protein Data Bank. (N.d.). Web. http://www.wwpdb.com
  52. 52. Where to Get Your Test Participants Creating a set of Personas can help in selecting the types of people to invite to user tests. Use a (limited) number of personas as a reminder of the problems and goals of each subgroup of users. Image: Sundt, A. & Davis, E. (2017). User Personas as a Shared Lens for Library UX.” Weave: Journal of Library User Experience, Volume 1, Issue 6. http://dx.doi.org/10.3998/weave.12535642.0001.601 Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  53. 53. Wireframes and Site Maps Source: Blitzer, J. (n.d.). TASC Pathfinder. Web. Retrieved on September 20, 2019 from https://julieblitzer.com/TASC-Pathfinder Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  54. 54. Activity: Card Sort Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  55. 55. How to Perform a Card Sort •  Choose a representative subset of content from an existing, comparable or proposed website. These can be relevant topics or page names if selecting from an existing site. •  Write topics on index cards; one topic per card. Be sure that the granularity of the topics are similar. •  Select five to ten participants, or if doing in groups, five groups of three work best. Be sure to select samples from each of your potential user groups. Source: Donna Spencer, D. (April 7, 2004). Card Sorting: A Definitive Guide. Web. http://boxesandarrows.com/card-sorting- a-definitive-guide/ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  56. 56. How to Perform a Card Sort Open Sort Source: Donna Spencer, D. (April 7, 2004). Card Sorting: A Definitive Guide. Web. http://boxesandarrows.com/card-sorting-a- definitive-guide/ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Have participants sort the cards into groups that seem related, then ask them to give each group a name. Closed Sort Give participants a list of predetermined categories and have them sort the cards into these groups. Topic 1 Topic 3 Topic 2 Topic 4 Topic 1 Topic 3 Topic 3 Topic 3
  57. 57. Client: Virginia Dept of Motor Vehicles PROJECT: Redesign vehicle registration website USER TASK: Register a new vehicle METHOD OF INQUIRY: Open card sort Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  58. 58. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Source: Vehicle Registration Information. Virginia Department of Motor Vehicles. Web. https://www.dmv.virginia.gov/vehicles/#vehiclereg.asp
  59. 59. Avoiding Cognitive Bias Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  60. 60. Cognitive Bias, or How Our Brains Trick Us Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation “One important concept is that all research can be invalidated by biases. Biases in research can occur during the formation of research goals, development of tools used to gather responses, during the gathering of information, and when communicating the results….” Portigal, S. (2016). Doorbells, Danger, and Dead Batteries: User Research War Stories. Rosenfeld Media.
  61. 61. Cognitive Bias: Causes and Effects Causes •  Inattention •  Limited processing capability •  Habit Effects •  Short cuts •  Poor decision making •  Logical lapses Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  62. 62. Watch for these Cognitive Biases in Users Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Users can’t find what they aren’t looking for. How we present information on web pages and user interfaces can affect how likely users are to find it. Focusing Effect: People pay attention to or exaggerate the importance of things in their mental model. Be sure to research the user’s needs and vocabulary and structure the website information accordingly. (Related to Availability Heuristic) Confirmation Bias: The tendency to pay attention to information that aligns with your belief. Designers must plan for users who approach your gateway from other disciplines. (Related to Dunning–Kruger Effect) Source: Kahneman & Tversky. (2013). Thinking Fast and Slow, New York: Farrar, Straus and Giroux.
  63. 63. Watch for these Cognitive Biases when Designing Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Prospect theory and loss aversion: How bad we feel after losing time or money is greater than how good we feel after gaining. A poorly structured website may cause users to abandon it, if they feel they are wasting their time. Negativity Bias: A negative experience will be remembered more. Be sure to test your interfaces and IA and include helpful error messages and visual cues so users can recover. Source: Kahneman & Tversky. (2013). Thinking Fast and Slow, New York: Farrar, Straus and Giroux.
  64. 64. Watch for these Cognitive Biases when Designing Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Designers must also look out for their own biases when researching prospective users of the information environment you are creating. Framing: How a problem is presented. Framing may prime a designer to give more weight to research results that are worded in the a negative way (“4 out of ten users found a problem” vs “6 out of ten users reported no problems”) or ignore real issues because of positive framing. (Related to Selection Bias) Outcome Bias: The ends justify the means. Focusing too much on the outcome of one decision to determine the next decision. Be sure to evaluate the context for each design decision to ensure it is appropriate. (Related to Focusing Effect) Source: Kahneman & Tversky. (2013). Thinking Fast and Slow, New York: Farrar, Straus and Giroux.
  65. 65. More Cognitive Biases in User Experience Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation •  Anchoring Bias •  Bandwagon Effect •  Information Bias •  Distinction Bias •  Ambiguity Effect •  IKEA Effect •  Attentional Bias •  Observer-Expectancy Effect •  Sunk Cost Bias •  Clustering Illusion •  False Consensus Effect Krisztina Szerovay, UX Knowledge Base Sketch http://www.uxknowledgebase.com
  66. 66. IA: Key Takeaways Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  67. 67. •  Where they are •  What’s available •  How to get there Support Your Users with Cues Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation IA TIP #4: Wayfinding: Seeing a clear navigation tree and specific terms helps our visitor decide if they are on the right site and where to go next. Source: O’Brien, David. (May 19, 2016). Good IA Starts with an Effective Site Tree. Web. Atlassian. https:// treetesting.atlassian.net/wiki/spaces/TTFW/pages/163881/Good+IA+starts+with+an+effective+site+tree
  68. 68. Affordances and Analogous Experience Tips for mapping your experience to a user’s mental model: •  Leverage affordances •  Leverage existing patterns, user journeys and expectations •  For truly novel interactions, leverage Onboarding structures to explain Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  69. 69. You Are Not Your User Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation •  When designing science gateways we like to leverage our ability to see patterns and make predictions. •  But we also must remember that in order to have a mental model of something you must first have had an analogous experience. Not all of your gateway users do or will. •  You also need to be aware of Cognitive Biases, both yours and the users you are designing for.
  70. 70. Thank you! Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Noreen Whysel COO, Decision Fish Adjunct Lecturer, New York City College of Technology, CUNY Co-Founder, Information Architecture Gateway @nwhysel https://www.linkedin.com/in/nwhysel nwhysel@gmail.com
  71. 71. PART 2: NAVIGATION SYSTEMS How to Create Information Architecture & Navigation Systems Copyright ©2014-2019. All rights reserved.
  72. 72. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. sthurow@search-usability.com About me •  SEO professional since 1995, pioneering search-engine friendly website design. •  Web designer/developer since 1995. •  Website usability & UX professional since 2002. •  Information architect since 1990. @sharithurow
  73. 73. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. •  ASLIB Journal of Information Management Editorial Advisory Board •  User Experience Professionals Association (UXPA) Board Member Formerly the Usability Professionals Association •  Information Architecture Institute (IAI) Board Member & Advisor •  Information Architecture Gateway Co-Founder Information Architect & Search Director
  74. 74. Tutorial agenda – Part 2 •  5 types of web navigation •  Purpose of navigation •  Dos & Don’ts •  Navigation tests & metrics •  Tools & Resources •  Questions & Answers Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  75. 75. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. This is a good idea, or this website implemented an information architecture best practice. This is a bad idea; don’t do this; or this website did not implement an information architecture best practice well.
  76. 76. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Usability / UX tests that can help you monitor & increase user engagement & conversions on your website. Tools that can help you increase the findability of your website.
  77. 77. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. If you check out some of the sample pages shown in this tutorial, they might look different, or they may no longer exist. The principles & guidelines that these examples illustrate are relevant long after a they have changed.
  78. 78. Copyright ©2014-2019. All rights reserved. Types of Web Navigation Information Architecture & Navigation
  79. 79. Navigation types •  Global •  Local •  Utilities •  Supplemental •  Contextual Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  80. 80. Jargon you might hear Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Internal links = Site navigation
  81. 81. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Global Utilities Contextual Local Supplemental Where am I? Need help? What’s related to this content? What’s nearby? Site map From Information Architecture for the Web and Beyond. Used with permission.
  82. 82. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Utilities Contextual Supplemental MENU SEARCH LOGO
  83. 83. Global navigation •  Global navigation refers to the set of navigational elements that: –  Offer access to all top-level areas of your site –  Are on every page –  Remain consistent in: »  Look/format »  Location/placement Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  84. 84. Elements that should be a part of the global navigation scheme on all websites are… •  Primary navigation (categories) •  Utilities navigation •  Footer •  Location-based breadcrumb links •  Site search (if applicable) Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  85. 85. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  86. 86. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  87. 87. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  88. 88. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  89. 89. Global navigation – fat footers •  If your website largely consists of pages with short content, then a fat footer is not necessary. •  If your website largely consists of pages with long content, then a fat footer is highly recommended. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  90. 90. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #1: Don’t use a wayfinder site map as a fat footer.
  91. 91. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  92. 92. Better Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  93. 93. Primary navigation •  Primary navigation consists of elements that represent all or most of the top-level major groups of information on your site. •  Serves two functions: 1.  Allows users to switch between top-level categories easily, no matter their current location. 2.  Ensures that users, who don't enter through the home page, can quickly get a sense of what is available on the website. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  94. 94. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  95. 95. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  96. 96. Secondary navigation •  2nd-level or secondary navigation are navigational elements that offer access to related information within a specific primary category. •  Also known as local navigation. •  2nd-level navigation can also be part of global navigation. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  97. 97. Part of global navigation Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  98. 98. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  99. 99. On-page links •  On- or in-page links are links that lead users to content on the same web page rather than to content on a different page of the website. •  Also known as anchor links or jump links. •  Effective form of on-page navigation because: –  Act as a table of contents, helping users form a mental model of page content –  Provide direct access to desired content –  Increase discoverability of & engagement with content that requires a long scroll to discover Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  100. 100. - Amy Schade, Director, Nielsen Norman Group https://www.nngroup.com/articles/in-page-links/ …the benefit of using jump links increases as screen size decreases. “ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  101. 101. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  102. 102. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  103. 103. Utilities navigation •  A utilities menu contains a set of helpful links that provides access to subsidiary tools to help users, but it is not the core reason for the website. •  Usually located at the top right of every page. •  Typically, the set contains links such as Home, Locations, Contact, Register, My Account, Shopping Cart, & Help. These navigation labels often differ by site type. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  104. 104. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  105. 105. Mobile example Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  106. 106. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #2: If you are using icons on your website, use icons with text labels.
  107. 107. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  108. 108. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  109. 109. Footers •  Footer links are a series of clickable/tappable text links located at the very bottom of every page. •  Part of global navigation. •  They can communicate to both site visitors & technology (search engines) the content that you feel is most important on your site. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  110. 110. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  111. 111. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #3: Make sure navigation is legible & readable from a users’ point of view. Poor legibility decreases user confidence.
  112. 112. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  113. 113. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  114. 114. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  115. 115. Legibility tools •  WebAIM Color Contrast Checker https://webaim.org/resources/contrastchecker/ •  WebAIM Link Contrast Checker https://webaim.org/resources/linkcontrastchecker/ •  ColorCube Brand Palette Color Accessibility Checker https://oomphinc.github.io/colorcube/#results-content •  Acart Communications Contrast Checker https://contrastchecker.com Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  116. 116. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Supplemental navigation •  Site map •  Site index •  Guides •  Site search From Information Architecture for the Web and Beyond. Used with permission.
  117. 117. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  118. 118. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  119. 119. Wayfinder site map Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  120. 120. Contextual navigation •  Navigation links which are specific to particular content or sets of content. •  Allows you to create connections that benefit location & discovery of content. •  Very important to SEO (site & web search). •  Many types, including but not limited to: –  Embedded or inline text links –  Alternatives –  People also read…. –  Highest rated Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  121. 121. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Inline or embedded text links provide context & scent Spool, J. (2006). “Why Good Content Must Suck: Designing for the Scent of Information.”
  122. 122. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  123. 123. News release – before Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  124. 124. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. News release – after
  125. 125. On mobile Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  126. 126. News release – after Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  127. 127. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  128. 128. Copyright ©2014-2019. All rights reserved. Purpose of Navigation Information Architecture & Navigation
  129. 129. Purpose of site navigation •  The main purpose of site navigation is to enable efficient task completion for both human users & technology. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  130. 130. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. According to usability guru Jakob Nielsen & Nielsen Norman Group, 77% of task failure is due to information architecture (IA) issues. According to Human Factors International, over 80% of task failure is due to navigation & IA issues.
  131. 131. Purpose of site navigation (cont’d) •  An effective navigation system can also increase a website’s search engine visibility: –  Web search engines follow links from one web document to another. –  How your web documents link to each other communicates (to both human users & technology) how important you believe your content is. –  In other words, site navigation matters for findability (location & discovery), user engagement, & conversions. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  132. 132. Brown, D. (2010). Eight Principles of Information Architecture. Bulletin of the American Society for Information Sciences and Technology 35:6, p. 30. Principle of Front Doors – Assume that at least half of the website’s visitors will come through some page other than the home page. “ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  133. 133. Inceptor’s Pyramid Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. When people arrive on a website from a commercial web search engine, such as Google, or from a link on another website, they usually land on a page in the middle of the site, not the home page.
  134. 134. Answer users’ questions about… •  Orientation: Where am I am right now? •  Route: Can I find the way(s) to where I want to go? •  Value: Should I click (or tap) on this link? •  Arrival: Can I recognize that I have arrived in the right place? •  Mental mapping: Do I know where I’ve been? Am I able to predict where I should go next? Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  135. 135. - Luke Wroblewski Product Director, Google Adapted from Site-Seeing: A Visual Approach to Web Usability The navigation elements of your website provide [both humans & technology] an understanding of your organization & give them a sense of where they are within the site structure. “ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  136. 136. 2 tests that measure orientation & arrival •  Expectancy test •  Location signal test Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  137. 137. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. USABILITY TEST NAME MEASURES FORMATIVE OR SUMMATIVE NOTES Expectancy test Users’ initial mental model Formative Early prototype test that evaluates users’ initial mental models of an interface. The facilitator instructs test participants, “Without using the mouse, keyboard, or hand, please tell us what you think [this] does.” The facilitator can also ask, “What would you expect to see when you click this link?” Accept all test participants answers without indicating whether or not the answer is “correct”.
  138. 138. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  139. 139. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  140. 140. Give users well-marked roads and landmarks, then let them shift into four-wheel drive. “ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation - Bruce Tognazzini, Principal Nielsen Norman Group https://asktog.com/atc/principles-of-interaction-design/
  141. 141. Location signal test 1.  Show pages. Show users various pages at different levels of your website, one at a time, without navigating to them. 2.  Orientation. Say: “Pretend you just arrived at this web page. Where are you on the website?” 3.  Indicators. If they give an answer (right or wrong), ask: “How can you tell?” 4.  User expectations. If they say they aren’t sure, ask: “What would you expect to see here to help you know where you are?” Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  142. 142. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Location signal test (cont’d) 5.  Information scent. If they are still not sure where they are, ask: “What would you normally do in order to find out?” Farrell, S. (2015, October 25). Navigation: You Are Here. Retrieved from: https://www.nngroup.com/articles/navigation-you-are-here/
  143. 143. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  144. 144. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #4: Link labels should resemble destination- page names. It’s an effective way to communicate information scent to both human users & technology.
  145. 145. Some characteristics of effective navigation •  Tappable/clickable •  Distinguishable •  Scannable •  Predictable •  Consistent & clear Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  146. 146. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #5: ALWAYS communicate visited, unvisited, & hover link status, particularly in a site map or a site index. Do not force users to minesweep.
  147. 147. Tests that measure route, value, & mental mapping •  Click/tap signifier test •  First-click test •  Treejack or tree test Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  148. 148. Click / tap signifier test 1.  First paper prototype. Begin the test by giving test participants a paper prototype, graphic prototype, or screen shot of an actual web page. 2.  Circle clickable/tappable elements. Ask users to circle everything on the page they believe is clickable. 3.  Second paper prototype. Give test participants the same prototype or screen shot. 4.  Circle unclickable/untappable elements. Ask users to circle everything on the page they do NOT believe is clickable/tappable. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  149. 149. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Location-based breadcrumb links If you choose to display location-based breadcrumb links on a mobile phone, make sure: •  Text is legible (not too small, good color contrast etc.) •  Visited / unvisited link status is shown •  Links are not too close together Thurow, S. (2014, August 29). Think Breadcrumb Links Aren’t Good For User Experience? Yes, They Are! Retrieved from: https://marketingland.com/breadcrumb-links-good-user-experience-yes-97848
  150. 150. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  151. 151. Wayfinder site map Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  152. 152. Purpose of site navigation (cont’d) •  Effective site navigation supports a positive user experience (UX). Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  153. 153. UX honeycomb Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. desirable useful valuable accessible credible usable findable
  154. 154. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. User Experience Design Peter Morville http://semanticstudios.com/user_experience_design/ The 7 Factors That Affect User Experience https://www.interaction-design.org/literature/article/ the-7-factors-that-influence-user-experience
  155. 155. Accessible Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. !  Human users !  Technology desirable useful valuable accessible credible usable findable
  156. 156. Accessibility •  Human users, as well as technology, should have user-friendly access to your website’s content. –  URL structure –  Website navigation •  Websites should be accessible to people with disabilities (more than 10% of the population). Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  157. 157. Findability Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. desirable useful valuable accessible credible usable findable !  Browsing !  Searching !  Asking
  158. 158. Navigation usage is higher on mobile devices Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Baidu, R. and Pernice, K. (2016, July 24). Mobile First Is NOT Mobile Only. Retrieved from: https://www.nngroup.com/articles/mobile- first-not-mobile-only/
  159. 159. Browse/navigate Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  160. 160. Search/retrieval Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Search Keyword(s) Results (SERP)
  161. 161. Ask Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. ?
  162. 162. - Peter Morville, Information Architect Author of Search Patterns & Co-Author of Information Architecture for the Web and Beyond Findability precedes usability. In the alphabet & on the Web. You can’t use what you can't find. “ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  163. 163. Usable Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. desirable useful valuable accessible credible usable findable !  Effectiveness !  Efficiency !  Learnability !  Memorability !  Error prevention & handling !  User satisfaction
  164. 164. - James Kalbach From Designing Web Navigation: Optimizing the User Experience …one thing holds true: well-designed, easy-to-use navigation is important in establishing credibility, authority, & trust. “ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  165. 165. Credible Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. desirable useful valuable accessible credible usable findable !  Elements that influence what users trust & believe what a mobile website or application communicates: -  Clarity (labels) -  Consistency -  Functionality
  166. 166. 16 trust markers in PET Design™ Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. •  Credible organization •  Domain name •  Design quality •  Match existing knowledge •  FAQs / Support •  Citations •  Current content •  Extensive content •  Archives •  Links •  Physical address •  Policies that show trust •  Certifications & awards •  Testimonials •  Famous & common people •  Peer advice & service comments Gubaidulin, I. (2016, November 7). Designing for Persuasion, Emotion and Trust. Retrieved from: https://uxdesign.cc/designing-for-persuasion-emotion-and-trust-cdac44c61d53 T R U S T
  167. 167. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #6: Learn & validate user mental models for labeling, placement, you-are-here cues, & format.
  168. 168. Match existing knowledge = validate user mental models •  A mental model is an explanation of a person’s thought process about how something works, faithfully representing that person’s root motivations and their matching behaviors. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  169. 169. How would you turn on this light? Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  170. 170. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #7: Place formal navigational elements where users expect to see them.
  171. 171. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Global Utilities Contextual Local Supplemental Where am I? Need help? What’s related to this content? What’s nearby? Site map From Information Architecture for the Web and Beyond. Used with permission.
  172. 172. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Utilities Contextual Supplemental MENU SEARCH LOGO
  173. 173. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Utilities Contextual Supplemental MENU SEARCH LOGO
  174. 174. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  175. 175. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #8: Use the users’ language. Don’t put vague or confusing labels within navigation & main content.
  176. 176. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. ???
  177. 177. Confusing labels Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. ???
  178. 178. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Abandonment
  179. 179. Better Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  180. 180. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  181. 181. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  182. 182. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Research has shown that when users’ first click is down the right path, 87% eventually succeed. When users’ first click is down an incorrect path, only 46% eventually succeed.
  183. 183. First-click usability test 1.  First-click data: Which tier-1 categories did users click first? First clicks are a good indicator of the strength of category labels. 2.  User confidence: On a 5- or 7-point scale. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  184. 184. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  185. 185. First-click usability test (cont’d) 3.  Difficulty. On a 5- or 7-point scale. If users rate anything less than a 3 or 5, respectively, ask users to elaborate on why they chose the rating. The open ended comments usually provide insight into mental models & ideas for improvements. 4.  Navigation problems: Long task times & high task variability (retracing, multiple places, site map, etc.) indicate navigation issues. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Sauro, S. (2011, October 19). Getting the First Click Right. Retrieved from: https://measuringu.com/first-click/
  186. 186. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  187. 187. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Present the task & scenario https://www.optimalworkshop.com/101/first-click-testing https://www.optimalworkshop.com/chalkmark
  188. 188. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Only upload section of page relevant to task
  189. 189. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Get specific results browsed searched
  190. 190. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Treejack or tree test •  A tree test does not display the user interface to test participants; they navigate the test using only link names. •  Menu labels & category names: –  Identify overlapping, similar, & competing labels –  Identify names that don’t adequately describe the content within them •  Helps to determine: –  Strong or weak information scent –  Unclear or misleading labels
  191. 191. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  192. 192. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Treejack or tree test (cont’d) •  Metrics include: –  Success rate: Success & failure percentages for task completion. –  Directness: Whether or not users struggled to get to the right answer. –  Time spent: Issues exist if users if users retrace their steps & try multiple places before finding the right destination. –  First click: If first clicks are distributed across multiple categories, you may have too many overlapping categories. –  Destination: If first clicks are correct but success rates are low, data suggests that lower- level categories overlap too much. Make labels more distinct.
  193. 193. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  194. 194. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. •  Rename labels. •  Combine or move content. •  Identify shortcuts for advanced visitors. •  Implement cross referencing where necessary. •  Improve error prevention & handling.
  195. 195. Navigation metrics •  Findability Rate/Completion Rate: Every test of navigation should include a something like (1 = found & 0 = not found) of whether or not test participants found an item or piece of information. •  Time to Find: Anything over 1 minute is usually too long when testing navigation. •  Initial Click: The first instinct as to which main category test participants believe an item will be found. This metric is particularly helpful when findability rates are low. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  196. 196. Navigation metrics (cont’d) •  Success Path: –  Determine whether test participants select the most efficient path or a secondary path when they successfully locate an item –  Where users are going when they fail to locate an item •  Confidence: Look for test participants that are extremely confident that they found an item but actually didn't. Determine the reasons why. •  First Path Success vs. Second Path Success: If test participants go down one path & then back out (pogo-sticking), it can be an indication that something might be wrong. •  Full list at: http://www.measuringu.com/blog/10-navigation-metrics.php Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  197. 197. Pogo-sticking: Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. Pogo-sticking is a browsing behavior in which users jump up & down the hierarchy of a website to find their desired content. This behavior can be an indication of a lost information scent. Thurow, S., Musica, N. (2009). When Search Meets Web Usability. New Riders.
  198. 198. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. NAVIGATION TIP #9: Minimize or eliminate orphaned & siloed content on your website.
  199. 199. What we want to avoid or minimize: •  Orphaned or nearly orphaned pages •  Content silos Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation On a website, a silo is a repository of content that remains under one specific category & is isolated from the rest of the website. A silo is NOT a category..
  200. 200. Orphans & silos communicate: Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. IMPORTANT
  201. 201. One point of contextual linking is to avoid orphans & silos: Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. X Alignment One of the principles of design, alignment refers to lining up the top, bottom, sides, or middle of text or graphic elements on a page. Horizontal alignment includes: • flush-left (also called left-justified or ragged right), • flush-right (also called right-justified or ragged left), • centered, and • fully justified.
  202. 202. To identify orphans or near orphans: Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  203. 203. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  204. 204. - Kara Pernice, SVP at Nielsen Norman Group https://www.nngroup.com/articles/top-intranet-design-mistakes/ Content in a silo (or walled-off content) is content that’s difficult to discover and find. The content may be walled off in multiple ways: – not accessible via the search function – absent from the global navigation and subnavigation – hidden based on user’s role, due to personalization – protected by a login wall “ Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation
  205. 205. Content silos: Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. In this hierarchical website structure, content silos are created in three categories. Users cannot get to their desired content without navigating within a specific top-level category. https://searchengineland.com/stop- the-silo-madness-effective-site- architecture-for-seo-and- findability-313018
  206. 206. Typically siloed content: Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  207. 207. Strike a balance between: Information Architecture & Navigation Copyright ©2014-2019. All rights reserved. User Expectations Business Goals
  208. 208. Key takeaways: •  A fat footer is not a site map. Don’t use a wayfinder site map as a fat footer. •  Use text labels with icons. If you are using icons on your website, use icons with text labels. •  Format for legibility/readability. Make sure navigation is legible & readable from a users’ point of view. Poor legibility decreases user confidence. •  Link labels should resemble destination-page names. Maintain information scent. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  209. 209. Key takeaways (cont’d): •  Let users know what pages they’ve already visited visually. ALWAYS communicate visited, unvisited, & hover link status, particularly in a site map or a site index. •  Validate user/searcher mental models. Learn & validate user mental models for labeling, placement, you-are-here cues, & format. •  Navigation status. Place formal navigational elements where users expect to see them. •  Use the users’ language. Don’t put vague or confusing labels within navigation & main content. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  210. 210. Key takeaways (cont’d): •  Eliminate orphans & silos. Minimize or eliminate orphaned & siloed content on your website with contextual & supplemental navigation. Information Architecture & Navigation Copyright ©2014-2019. All rights reserved.
  211. 211. Thank you! Copyright ©2014-2019. All rights reserved. Information Architecture & Navigation Shari Thurow Founder & SEO Director, Omni Marketing Interactive Co-Founder, Information Architecture Gateway @sharithurow https://www.linkedin.com/in/shari-thurow sthurow@search-usability.com

×