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

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

PART 1: INFORMATION ARCHITECTURE (IA)
How to Create Information Architecture & Navigation Systems

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.

About me:
•  Research professional since 1991.
•  Web designer/developer since 1996.
•  Information architect & UX professional since 2002.
•  MSLIS Pratt Institute, BA Columbia University.
@nwhysel
nwhysel@gmail.com

•  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

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

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.

What is Information Architecture (IA)?

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)

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)

IA is Ubiquitous

Peter Morville’s UX Honeycomb
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.

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

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.

How We Make Things Make Sense

Benefit of a Mental Model
IA TIP #2: Understanding your users’ mental model helps you
design a digital experience that makes sense, minimizes errors
and improves user satisfaction.

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

How We Understand Information: Pattern
Image: Kucsma, J. Twitter post. (With permission). https://t.co/O1xyKTOc84

How We Understand Information: Pattern
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

How We Understand Information: Affordances
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/

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)

How We Understand Information: Mental Model
Source: Whysel, N. (2012). “Information Architecture of Emergency Management Systems.”
The Information Architecture Summit. Presentation. New Orleans: Association for Information
Science and Technology.

How We Understand Information: Mental Model
Source: Whysel, N. (2012). “Information Architecture of Emergency Management Systems.” The Information
Architecture Summit. Presentation. New Orleans: Association for Information Science and Technology.

A Mental Model of a Website Includes:
•  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

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
Wurman, R.S. & Bradford, P. (1996). Information Architects. Zurich : Graphis Press Corporation.

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

Labeling
Categorizing
Linking
Arranging
Relating
Equating

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.

Bad CRAP: WWHGD
Source: World-Wide Human Geography Data Working Group. Web. http://www.wwhgd.com

Better CRAP: WWPDB
Source: Worldwide Protein Data Bank. Web. http://www.wwpdb.com

IA Tools

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

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
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/

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/

Peter Morville’s UX Honeycomb
Source: Morville, P. (June 21, 2004). User Experience Design. Semantic Studios. Web. https://semanticstudios.com/
user_experience_design/

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.

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/

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/

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

Speak Your Users’ Language
•  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)

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

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.

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

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.

Concept Mapping and Affinity Diagrams
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.

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.

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.

Source: Whitenton, K. (May 7, 2017). Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories. Web https://
www.nngroup.com/articles/tree-testing/

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.

Task Flows and User Journeys
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/

Task Flows and User Journey
Source: Worldwide Protein Data Bank. (N.d.). Web. http://www.wwpdb.com

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


Wireframes and Site Maps
Source: Blitzer, J. (n.d.). TASC Pathfinder. Web. Retrieved on September 20, 2019 from
https://julieblitzer.com/TASC-Pathfinder

Activity: Card Sort

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/

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/
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

Client: Virginia Dept of Motor Vehicles
PROJECT: Redesign vehicle registration website

USER TASK: Register a new vehicle

METHOD OF INQUIRY: Open card sort


Source: Vehicle Registration Information. Virginia Department of Motor Vehicles. Web.
https://www.dmv.virginia.gov/vehicles/#vehiclereg.asp

Avoiding Cognitive Bias

Cognitive Bias, or How Our Brains Trick Us
“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.

Cognitive Bias: Causes and Effects
Causes
•  Inattention
•  Limited processing capability
•  Habit
Effects
•  Short cuts
•  Poor decision making
•  Logical lapses

Watch for these Cognitive Biases in Users
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.

Watch for these Cognitive Biases when Designing
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.


Watch for these Cognitive Biases when Designing
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)

More Cognitive Biases in User Experience
•  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

IA: Key Takeaways

•  Where they are
•  What’s available
•  How to get there

Support Your Users with Cues
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

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

You Are Not Your User
•  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.

Thank you!
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

PART 2: NAVIGATION SYSTEMS
How to Create Information Architecture & Navigation Systems

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

•  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

Tutorial agenda – Part 2
•  5 types of web navigation
•  Purpose of navigation
•  Dos & Don’ts
•  Navigation tests & metrics
•  Tools & Resources
•  Questions & Answers

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.

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.

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.

Types of Web Navigation
Information Architecture & Navigation

Navigation types
•  Global
•  Local
•  Utilities
•  Supplemental
•  Contextual

Jargon you might hear
Internal links = Site navigation

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.

Utilities
Contextual
Supplemental
MENU SEARCH
LOGO

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

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)


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.

NAVIGATION TIP #1: Don’t use a wayfinder site map as a fat
footer.

Better

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.

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.

Part of global navigation

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

- 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.
“

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.

Mobile example

NAVIGATION TIP #2: If you are using icons on your website, use
icons with text labels.

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.

NAVIGATION TIP #3: Make sure navigation is legible & readable
from a users’ point of view. Poor legibility decreases user
confidence.

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

Supplemental navigation
•  Site map
•  Site index
•  Guides
•  Site search
From Information Architecture for the Web and Beyond. Used with permission.

Wayfinder site map

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

Inline or embedded text links provide context & scent
Spool, J. (2006). “Why Good Content Must Suck: Designing for the Scent of Information.”

News release – before

News release – after

On mobile

News release – after

Purpose of Navigation
Information Architecture & Navigation

Purpose of site navigation
•  The main purpose of site navigation is to enable efficient task completion
for both human users & technology.

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.

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.

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.
“

Inceptor’s Pyramid
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.

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?

- 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.
“

2 tests that measure orientation & arrival
•  Expectancy test
•  Location signal test

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”.

Give users well-marked roads and landmarks, then let them shift
into four-wheel drive.
“
- Bruce Tognazzini, Principal
Nielsen Norman Group
https://asktog.com/atc/principles-of-interaction-design/

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?”

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/

NAVIGATION TIP #4: Link labels should resemble destination-
page names. It’s an effective way to communicate information
scent to both human users & technology.

Some characteristics of effective navigation
•  Tappable/clickable
•  Distinguishable
•  Scannable
•  Predictable
•  Consistent & clear

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.

Tests that measure route, value, & mental mapping
•  Click/tap signifier test
•  First-click test
•  Treejack or tree test

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.

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

Purpose of site navigation (cont’d)
•  Effective site navigation supports a positive user experience (UX).

UX honeycomb
desirable
useful
valuable
accessible
credible
usable
findable

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

Accessible
!  Human users
!  Technology desirable
useful
valuable
accessible
credible
usable
findable

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).

Findability
desirable
useful
valuable
accessible
credible
usable
findable
!  Browsing
!  Searching
!  Asking

Navigation usage is higher on mobile devices
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/

Browse/navigate

Search/retrieval
Search Keyword(s)
Results
(SERP)

Ask
?

- 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.

“

Usable
desirable
useful
valuable
accessible
credible
usable
findable
!  Effectiveness
!  Efficiency
!  Learnability
!  Memorability
!  Error prevention & handling
!  User satisfaction

- 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.

“

Credible
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

16 trust markers in PET Design™
•  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

NAVIGATION TIP #6: Learn & validate user mental models for
labeling, placement, you-are-here cues, & format.

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.


How would you turn on this light?

NAVIGATION TIP #7: Place formal navigational elements where
users expect to see them.

NAVIGATION TIP #8: Use the users’ language. Don’t put vague or
confusing labels within navigation & main content.

???

Confusing labels
???


Abandonment

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.

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.

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.
Sauro, S. (2011, October 19). Getting the First Click Right. Retrieved from: https://measuringu.com/first-click/

Present the task & scenario
https://www.optimalworkshop.com/101/first-click-testing

https://www.optimalworkshop.com/chalkmark

Only upload section of page relevant to task

Get specific results
browsed
searched

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

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.

•  Rename labels.
•  Combine or move content.
•  Identify shortcuts for
advanced visitors.
•  Implement cross
referencing where
necessary.
•  Improve error prevention
& handling.

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.

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

Pogo-sticking:
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.

NAVIGATION TIP #9: Minimize or eliminate orphaned & siloed
content on your website.

What we want to avoid or minimize:
•  Orphaned or nearly orphaned pages
•  Content silos
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..

Orphans & silos communicate:
IMPORTANT

One point of contextual linking is to avoid orphans & silos:
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.

To identify orphans or near orphans:

- 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
“

Content silos:
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

Typically siloed content:

Strike a balance between:
User
Expectations

Business
Goals

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.

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.

Key takeaways (cont’d):
•  Eliminate orphans & silos. Minimize or eliminate orphaned & siloed
content on your website with contextual & supplemental navigation.

Thank you!
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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

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

Ähnlich wie How to Create and Maintain an Effective Information Architecture and Navigation System for Science Gateway Websites (20)

Mehr von Noreen Whysel

Mehr von Noreen Whysel (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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