Participant became disoriented when links led to a page in a different topic category

[hillaryl]

Note: this issue goes deeper than the expectation mismatch the participant experienced on this particular task. Simply adjusting the breadcrumb behaviour to fit the task would likely cause issues on other tasks given how the website is structured. This card will probably need to be adapted to capture a more foundational decision on the structure of the website going forward.

📆 Study info
Information architecture usability testing - October 2022 - Facilitator: @ClementineHahn

🚦 Issue severity

🟡 Minor - Yes, after overcoming minor difficulty and/or confusion.

📝 What happened?

The task was to navigate from the "Activités prévues pour les des développeur·se·s de logiciels" page to the agile topic page without using the back button. The goal of the task was to see if the participant had a clear enough understanding of where they were in the website's hierarchy to easily navigate to a different page.

The participant initially clicked the next level up in the breadcrumbs (Embauche), but were surprised as they were previously on a page where the breadcrumbs read "Accuiel > Agile > Activité tout au long du cycle de vie". They expected the next level up to still be "Agile." The participant said that they expected the breadcrumbs to reflect the path they had taken so far to reach the current page. Instead they had to click the first level link in the breadcrumb (Accuiel) and then click into Agile.

💬 In the participant's own words

”Le breadcrumb est statique et non généré par mon chemin à moi. Moi je trouve que ca c’est un default”

📗 User story

As a person navigating a website, I need to be aware of where I am in a consistent hierarchy as I move from one page to another, so that I can find my way back to other pages.

-or-

As a person navigating a website, I need a flexible navigation model with features that allow me to both discover new related information, and relocate information that I've seen before, so that I don't need to learn a complex hierarchy order to find out what's available and locate what I need.

📜 Recommendations

• Long term solution: Make a clear decision on the primary structure type of the site (hierarchical or matrixed) and choose navigation elements to appropriate to the primary navigation behaviour that structure enables. Breadcrumbs enable hierarchical and sequential navigation whereas tags, search, and related links enable matrixed navigation.
• So long as the primary site structure type is hierarchical, breadcrumbs should continue to reflect the canonical IA, not the users' dynamic path. As this is a common design pattern, deviating from the standard breadcrumb logic could confuse users using the hierarchical aspects of the site https://www.nngroup.com/articles/breadcrumbs/ https://ux.stackexchange.com/questions/115994/breadcrumbs-what-should-they-display/115999#115999
• Short term solution: On collections and related links, indicate which topic section the user will land in before they click the link

ℹ️ More info

Links with different approaches/systems for understanding and managing this problem:
https://derivadow.com/2010/02/18/the-problem-with-breadcrumb-trails/
https://xd.adobe.com/ideas/process/information-architecture/different-types-of-website-structures/
https://www.ooux.com/resources/ooux-a-foundation-for-interaction-design

Inversely related to this enabler:
#347

[realdylanzheng]

@hillaryl @anikbrazeau @janicelagiorgia Resources that link to different topics (ultimately resulting in varying breadcrumb trails than the previous page) is a common pattern found in current information architecture and evident on large reputable websites including but not limited to: canada.ca, gov.uk, atlassian.com, and other large e-commerce websites.

Therefore a potential solution could be: an additional piece of content (e.g. description) under related resources that "tells" the user that related topics may be from other topics . If this approach is taken the work would require new fields to be added to the content model, descriptions to be written, and website code to pull and render the new fields.

[anikbrazeau]

Food for thought:

I wonder if part of this might also involve the mental model of 1:1 or 1-to-many ratio (if we're thinking about the resource:topic relationship). Right now a resource may only belong to one single topic, but the reality is resource content might overlap in terms of relevance to more than one topic at once. This is further complicated by the relationship with collections which may belong to a topic, or not.

For example:

1. The activities of a product manager (broken down by phase) might be relevant to the Agile Topic, while also being relevant to Product Manager SubTopic which lives within the Hiring Topic (as it stands now). It also belongs to the Activities Collection, which lives within the Agile Topic.
2. Similarly, the responsibilities of a designer might fit within a Design Topic while also having relevance for a Hiring Topic or a future Product Team Topic.

Perhaps we might explore making categories/topics more parallel and mutually exclusive if the hierarchical nature only allows resources to belong to a single parent topic OR we might find a way to port in modular resource content in multiple places without creating duplication, allowing users to navigate information in a way that matches their own mental model. There is some further thought/refinement needed to clarify resource:topic / resource:collection / collection:topic relationships, as well as how we choose topics/categories, and how we group resources into a collection, as well as how we decide on related resources in order to clarify structure.

Perhaps we might also consider starting to experiment with the integration of keywords/tags to enable a possible database/matrixed approach in future?

Explorations around site structure, started here:

• https://miro.com/app/board/uXjVP3j5_C4=/
• https://www.figma.com/file/AVmCvoB3Xg7tX5iRDdPNC2/Site-content-and-structure-audit?t=if4cVnDQOSRGgKVG-0