Suggested new component - Side menu

[nickvokework]

What

Give a brief description of the style, component or pattern you want to propose.

Context:
We are in the final stages of building an e-learning service using the GDS design system. We have completed numerous rounds of user testing and already gone through one Alpha and Beta Assessment.

What:
A right-hand sidebar navigation menu which allows users to easily see their progression through a course and be able to navigate back and forth through chapters.

Current version

In-situ

Iterations from user testing

Why

Explain why you think this should be added to the GOV.UK Design System.

In our alpha assessment, we were challenged to explore if there was a user need to see their progression through the course and also to be able to navigate back and forth through the chapters. We tested various variations of a sidebar navigation similar to those found in lots of e-learning platforms. During testing, we found that some users naturally used the sidebar to return to topics earlier in the course and used it to be aware of their progression and estimate their completion time.

Design-wise, we didn’t want to reinvent the wheel so we built on existing sidebar navigation patterns from GOV.UK publishing such as the contents list on the publishing service (https://components.publishing.service.gov.uk/component-guide/contents_list) and the related content sidebar on many start pages. We iterated the design several times to make it simple and accessible. For instance, we made some headers in the sidebar visually hidden so they would give context to screen reader users whilst avoiding confusion for sighted users who had initially struggled with the previous design.

• What evidence do you have that it's needed by multiple services across government?

In the our beta assessment, we were praised on our work developing this pattern and asked to play it back into the community:
‘the team has validated the user need to track progress within training modules, has designed a pattern that is working for their beta users, and is planning to continue iterating this pattern - the panel would encourage the team to share this pattern and research findings with the design system community’

• What evidence do you have that it meets the needs of the users of those services?

We have tested and validated this component in several rounds of qual research with 5-10 people in each round, and in Private Beta testing with over 1200 people (with quant showing that people successfully use this when required, and qual feedback only positive and no negative on the latest version).

Our user testing so far has validated the need for this component and as mentioned has been praised so far by assessors. But we would love to share it with the community to get a wider perspective and possible use cases.

• Have you checked that it doesn't already exist in the GOV.UK Design System?

Yes

Anything else

Include links to any examples, research or code to support your proposal, if available.

[cjforms]

@nickvokework
Please can you explain why you decided not to try the task list pattern?

[nickvokework]

Hi Cjforms,

Thanks for the comment.

We're using the task list pattern on the course content page to give a really clear overview to users what the need to complete and any part progress. However, this sidebar is designed to make navigation and overview within a lesson equally as simple, without distracting from the questions. I've added in a new screenshot of it in situ to help clarify.

We have tested and validated this component in several rounds of qual research with 5-10 people in each round, and in Private Beta testing with over 1200 people (with quant showing that people successfully use this when required, and qual being only positive and no negative feedback on the latest version).

[vickytnz]

@nickvokework how did this test with people using zoomtext or other screen magnifiers?

[cjforms]

Thanks @nickvokework for the extra information.

My concern is that some designers may reach for the sidebar idea without considering a task list, whereas in your situation you've gone the other way round - done a task list, and then decided that the complexity of your service means that you need two levels. That seems appropriate to me.

If possible, could you include the higher-level context in the proposal, and also let us know what it looks like on a narrow screen such as a mobile? (Have also noted @vickytnz comment above, as people who use a narrow part of a wide screen, which is the case with screen magifiers, may not realise that a right-hand sidebar is there).

If this does get adopted into the design system, I'd strongly recommend that the 'task list first' approach is highlighted.

(By the way: I wasn't throwing any shade at the amount of testing. My context here is that I've seen teams test something that's really not a good solution and have iterated on that without ever asking 'what happens if we test the service completely without this component?'. Step-by-step progress indicators and float labels are both examples of difficult-to-use things that fall into this category).