The problem
From research, users were finding it frustrating that they could not see how long left they had to complete of a module. The only way they could monitor progress thus far, was by seeing how many pages they had left to view, or by going back to the module overview page; which provides a picture of how you're getting on in a module.
Additionally, using page numbers as a means of monitoring progress seemed quite daunting at times for users, as there was a large number of pages to get through. This number resets as you make your way through sub-modules, which users felt didn't give them a picture of overall progress, just progress through the sub-module. So, they sometimes assumed that when they reached 36/26 pages for example, the module was finished. However, this just meant they had finished 36/36 of the first submodule, and then had 1/32 of the next module to make their way through.
Our hypotheses
We believe that users need additional navigational elements to help them understand where they are and how long is left in the module We will add a progress bar that shows each section of the module We will know this to be true if users are more aware of where they are and how much there is left to complete in a module
Creating a new component
HMCTS had already created a progress bar component that tracks progress through stages of a case. We discussed our user's needs with designers in HMCTS and the accessibility considerations that they had made when creating the component. The HMCTS version was fully responsive and would scale down in mobile (which we also needed it to do) and each section was selectable using a keyboard.
For our design, we rarely deviated from the HMCTS design. The only key visual difference is that we made the yet-to-be-reached parts of our progress bar grey with a thin border, to indicate they'd not been reached yet, as the circles of a reached part of the service were green, filled and had thick borders. This meant that we were not relying on colour alone to indicate position. Text was also highlighted in bold to highlight where you were.
How it tested
We tested the progress bar in a round of user testing, and some participants commented about how they liked it. They commented that it was clear, and they liked that it helped them know where they were.
One participant was confused by the page numbers in conjunction with the progress bar
Generally, when analysing our feedback survey, 8 of 10 users either agreed or strongly agreed with the training being easy to navigate.
Accessibility considerations
We used bolded text and thickness of borders to ensure colour was not the only indicator on the page. We added aria hidden text to explain to screen readers how many sections there are, and whether or not it was in progress. Upon landing on the page, screen readers will read the general status. We had some feedback from the DfE internal accessibility team that we should perhaps look into making this skippable so the main content container on our page begins with the H1.
Future iterations
Based on feedback from users and from the accessibility team at DfE, there are few things we should consider iterating for the future. One being how the page numbers work with the progress bar, and if we need them. Second, is how the progress bar status is announced to screen readers. The accessibility team did say that having a quick status read out might be useful for some, but it could be frustrating also, so it is something we could consider skipping as part of the skip to main content action.
Additionally, we are looking to add some extra functionality that showed incremental progress within a sub-topic, where the green bar moves incrementally across the bar as you navigate through the pages.