Improving the training progress bar component

The problem

Initial user feedback and research demonstrated that users wanted a clearer understanding of their progress when using the training. The team designed and built a new progress bar component that would provide a way for users to monitor their progress through a module. This was detailed in a previous post that can be read here.

The initial progress bar tested well and was launched successfully within the website.

Some future iterations planned at the time included:

• Showing incremental progress within a sub-topic
• A clearer relationship between the page number and the progress bar

Example showing first version of the progress bar

Although the new progress bar improved the user experience it had been designed with a more basic module structure in mind and had not catered for the more complex and lengthier section titles that were being proposed for future module releases.

This caused a particular issue on mobile devices where the text was becoming crowded and unreadable as more sub-sections were added to the module. This is demonstrated by the test image below.

A new improved version of the progress bar was required that would address the above issues but also add the incremental progress and give greater clarity around page numbers.

Our approach

Before ideating on possible solutions, the team identified the key issues and the required changes they wished to address as follows:

• the current design does not cater for a more complex module structure
• the current design does not cater for the typical length of section titles when viewed on smaller screens
• users do not need to know what the future sections are of the module. These are stated to them on the module summary screen and not relevant to the content they are currently viewing
• users need to recognise both what page they are currently viewing and which section it belongs to
• users need to recognise how many sections there are in total
• users should be able to easily see incremental progress being made
• the colours used for any graphical elements must be accessible when used in the new DfE (Department for Education) hero area
• users should be able to visually recognise that they were starting a new section within the module by a distinguishing content pattern
• users should be easily able to gauge how long a module is before starting it

Our solution

To address the first five points identified regarding module structure, title length, visibility of future modules, how a page relates to a section, and the total number of sections - it was proposed that the information on the screen be simplified to:

• a text-based section reference i.e. section 1 of 3
• the title of the current section
• a page reference relevant to the section i.e. page 10 of 20

That way, the user could quickly ascertain that they were, for example, doing the first section of three, what it was called, and what page they were on within it. They could do this without the cognitive load of also seeing future section titles and by removing uncertainty as to whether the page’s number related to the whole module or the specific section that they were currently completing.

Because incremental progress was difficult to graphically represent across a whole module due to the number of pages making any percentage change in the bar status difficult to detect, it was decided that the visual element of the progress bar should mirror the text element and only mark progress happening within a section. Therefore, a status of “page 10 of 20” would be represented by a progress bar with 50% width. This allowed greater visual clarity as sections were typically, by design, no longer than 30 pages and therefore easier to track on screen.

For the colours of the new progress bar, the team ensured that they worked with the existing GDS (Government Design System) palette. The colour choices required some additional considerations. The new progress bar was proposed to sit within the new DfE hero area, the colour of which was not white. Therefore, the two selected colours needed to pass an accessibility contrast ratio with this background colour and with each other.

The team tried multiple colour combinations and narrowed this down to the colours that generated the best contrast ratio with the background colour.

Example contrast ratio test results

However, it was not possible to find two colours that suitably contrasted with each other and the background. Therefore, the design was altered to include a white dividing line between the two bar colours so that users with issues detecting the contrast between the two bars would still have a visual indicator of progress. The impact of this contrast issue is lessened by the presence of the text reference regarding the user's progress.

The final colours were also selected to use the GDS Green as this is also the colour used by buttons and reflects an action associated with progressing to the next screen.

To improve the user experience further within the training and as part of the changes to the progress bar, a new design was proposed to the section start pages. This was because it was felt that it was difficult for the user to realise that they had finished one section and started another and a different design pattern for that page would support the changes to the progress bar (in tracking section progress rather than total progress across the module).

The new designed leveraged:

• A contained area of text within a grey box to distinguish it from a standard content page
• The use of an image using different dimensions and in an alternative position on the page to the typical use of an image within the core module content
• The use of typesetting to highlight what topics will be covered in the section
• A change in colour to the previous button to compensate for being on the grey background
• A change to the wording on the green button to “Start section” to make the text associated with the specific action

Example of a new section start page design

The final design change that was proposed as part of the progress bar changes was to the module summary page. The design changes were partly in response to the introduction of the new DfE front-end elements including the new “hero” section, but also to the need for a user to be able to better gauge the number of pages within a module. Three changes were made as follows:

1. the hero area was used to reduce cognitive load by separating the module introduction and the main areas covered by the content
2. the number of pages within each section was appended to the section titles (which also mirrored the behaviour of the progress bar)
3. the button to start or resume a module was moved to the bottom of the page following the GDS guidance for the main call to action to be the last element on the page below the main content

The final designs were refined within the UCD team and then prepared for development handover.

User research

For the new progress bar improvements, it was decided that due to two defining factors, there was no immediate need for pre-build user research to be carried out. The first factor was down to the prioritisation of other research and the potential knock-on delay that may cause on the release of the improved functionality ahead of the new module content. The second factor was that the original concept of a progress bar had already been through user research. The initial research had shown the validity of the overall concept and had raised points about the need for future iterations.

The new progress bar design was subsequently included in separate user research that was testing other specific areas of work whilst still allowing for any users to indirectly comment on the new design.

These sessions raised no concerns about the new design and reinforced that the improvements were appreciated and made sense to the users.

Next steps

• The performance of the new progress bar will be monitored via user feedback and observations when it is included as part of unrelated future UR sessions
• Ongoing feedback will be monitored from the site feedback forms
• An additional user research session is planned to look at site wide accessibility that will include the new progress bar as part of the discussion guide.