1 of 23

Banded navigation pattern

�Digital Transformation Office

Treasury Board of Canada Secretariat

Government of Canada�March 3, 2021

2 of 23

What we’ll cover

What is it? Why did we start using it?
Where is the pattern being used?
Testing the pattern - what we’ve done so far
Implementation - what to avoid
Where does this pattern work best?

3 of 23

What the banded navigation pattern looks like…

4 of 23

One year ago… early March 2020

COVID-19 landing page was no longer capable of supporting surge of new content coming from across the GC�
Tile design made it difficult for mobile visitors to find right link-70% were mobile

As the outbreak progressed to a pandemic, an all-of-government response was required. In those early days, our coworker Lisa, who had been monitoring the situation since January / February anticipated this would be a much bigger issue and started prototyping a pattern.

As we saw in March, the first landing page that went live for COVID-19 using a tiled approach quickly started to break down.

The page was no longer capable of supporting all of the new content that was coming rapidly.

The tile design had become limiting, particularly for mobile users.

Original design had only 6 links & over 60% of visitors were on phones.

Our testing showed that Canadians on phones were able to find symptoms, but weren’t successful at finding answers to travel questions about returning to Canada (half succeeded) and leaving on a trip (0 succeeded).

Too few links, phone users had to dig too deep to find the right answer.

More government groups wanted to ’seize a tile’ for their particular needs.

5 of 23

Prototyping the new pattern

Grouping links together into bands
Easy to add bars and links as content grew and topics expanded
Designed to support mobile navigation

6 of 23

First tested this pattern on March 17, 2020

Evidence-based design:

Tested with Canadians on phones
90% success.

Video example: https://validately.com/tracker_shares/de76ca86-dbad-455a-a400-409eea282284

Full research report:�https://docs.google.com/presentation/d/1a-qiEhpZi-1g29-nNPo9QDAOazS2p5XRt758RDhq5Uo/edit?usp=sharing

Early March - tiles

Late March - bars

Making sure that the pattern was evidence-based was important.

The pattern matches web conventions, and was tested with small group of Canadian participants.

First tested the pattern on March 17-18 with a study of 8 Canadians on phones across doing 4 tasks. - 32 trials in total.

Overall success across 32 trials at using correct group: 90%
We also ran a Comparison study of the live and prototype landing page where we asked people to find information on flight exposures.

Total of 1550 people (500 on live / 550 on prototype) - march 25

Based on this evidence, and previous research studies of grouped links and phone users performing health-related tasks, we were confident that the pattern would help people succeed at finding the right answers from the COVID-19 landing page.

Health Canada launched the new design and we retested the travel task again with 6 participants.

All 6 succeeded at finding the correct answer about returning to Canada.

7 of 23

Testing banded navigation for the Economic Response Plan

Original ERP page had lists of links to financial supports

Revised design used expand/collapse - really helped with identifying multiple options that could be relevant and overall scannability of the page

Website: ERP

We worked with Finance Canada to prototype & test the pattern on the Economic Response page before it launched.
Like the COVID landing page, the Economic Response Plan page functions as a navigation page to link people to financial supports offered by various departments.

When testing the banded approach for this page, we noted a weakness in the original approach.

When the site first went live, it included a list of links to the program pages.

When tested with 4 participants on the live site, we found participants would go to the first relevant link and then leave the ERP pages. So they may have missed out on relevant financial support.

We then prototyped a version using expand/collapse that included a brief description of the program and a link to apply.

After testing this approach with 25 participants total. More participants scrolled up and down the sections, even after they opened one of the relevant sections, rather than just leaving the page.

Participants found it clear that they had various options and voiced aloud that they appreciated the scannability.

8 of 23

Testing banded navigation for Managing your business

We also tested a version of bands where the links included descriptions.

Page: �Managing your business

Adding descriptions for the financial support programs helped describe who the program was for - since it wasn’t always clear from the program name alone.

9 of 23

Accessibility testing - works with assistive technologies

COVID landing page and ERP page included in accessibility testing in May
6 people using: 2x -NVDA, Jaws 2000, Jaws braille display, Magnified text, Jaws

Participant with screen reader easily tabbing through links: �https://youtu.be/prdg9zTo5sg?t=185

10 of 23

Why use it for vaccines?

“Here we can see the categorization are separated from each other and that’s pretty nice”

Unstable / Evolving content
Many top tasks
High mobile use
Lesson learned from COVID landing page, ERP, travel, managing your business
Comparison tested with standard topic page

11 of 23

What to avoid: Too many links that aren’t top tasks

Bands need to focus on top tasks

Crowded - too many links that aren’t top tasks
Being used as a promotion band - not intended purpose

12 of 23

What to avoid: Too many links that aren’t top tasks

Bands need to focus on top tasks

Crowded - too many links that aren’t top tasks
Being used as a promotion band - not intended purpose

13 of 23

What to avoid: Links that aren’t top tasks

13

Participant scrolling down the landing page on mobile:

https://drive.google.com/open?id=1sj3sUyz0Uls1Oo48M8DlkFqyDwy-t_Wx

At launch

Mid-April

“Too many things on this page… �It’s CRAZY to find anything here…!”

14 of 23

What to avoid: Ambiguous link labels

With no descriptive text to assist with comprehension, labels need to be clear. �Use research to get the words right.

First click testing, Usability testing
User feedback can help identify common vocabulary
Analytics, Google Trends

Before

After

15 of 23

Information architecture can’t be ignored

Flexibility of "groups" makes it easy to ignore underlying IA issues.
Banded navigation can "hide" some of the issues
As content grows, address content governance, duplication early on
Make an IA plan when a group’s content covers more than what is directly linked from the bands

16 of 23

Where and when does the pattern work best?

A more forgiving solution to navigation when:

content and priorities are changing quickly
there are multiple top tasks within different topics of content
content comes from across different sections of site or departments
mobile use is > 50%

17 of 23

Banded navigation pattern in the design system

18 of 23

First 2 levels of the topic tree

Canada.ca

Theme

Level 1 topic

Level 2 topic

Level 3 topic

Level 4 topic

Task

19 of 23

First 2 levels of the topic tree

The Theme and topic template is a mandatory template.

�But it’s only mandatory for the first 2 levels of the Canada.ca topic tree.

The goal is to:

provide a consistent top-level theme-based navigation
surface top tasks (through the most requested band)
give access to ALL services and information from the GC

20 of 23

Below level 2 topics

Canada.ca

Theme

Level 1 topic

Level 2 topic

Level 3 topic

Level 4 topic

Task

21 of 23

Level 3 and down and other topic-like pages

The Theme and topic template is optional for anything that is not the first 2 levels of the official topic tree.

This means you can use all or part of the theme and topic template on these pages, but you don’t have to.

Use the patterns that help people find or complete their tasks, based on what people are looking for on that page

Possible patterns:

Doormats
Most requested
Lists
Filterable tables
Buttons
Subway pattern
Multi-page navigation
Tabs
etc...

22 of 23

Banded navigation: a new possible pattern

We are not planning on replacing the theme and topic template with the banded navigation pattern at the moment.

We’ll start by adding it in the design system as a new navigation pattern available, with specific guidance on when to use and what to avoid.

23 of 23

Not sure if you should use it? Reach out! (or test!)

If you are unsure whether the banded navigation pattern could be useful for a specific page: �

Reach out to the DTO: we can help you determine if it seems to match what we’ve seen so far
Test the pattern: the only to know if the pattern works well for your needs is to test it - no matter how good the guidance is, it’ll depend on the content. Even just a few participants in unmoderated testing can help you determine if it works