Progress indicators

[tjharrop]

This is an open space for collaborating on a pattern for showing users where in a process they are.

Progress indicators

Background:
Although some services already have progress indicators, a NSW gov-wide pattern hasn’t been established.

Overview

In transactional services, some designers choose to let users know how far along the process they are.

When to use progress indicators

From GOV.UK:

Start by testing your form without a progress indicator to see if it’s simple enough that users do not need one.

Try improving the order, type or number of questions before adding a progress indicator. If people still have difficulty, try adding a simple step or question indicator like this one.

Do:

• Test content without progress indicators
• Add them where there is an evidenced user need to do so
• Start with a simple “Step _ of _” approach

Do not:

• Use complex progress indicators with multiple data items
• Show exact numbers if they might change
• Use misleading stats such as a % based on number of pages, where some pages contain more work than others

Interaction Design & Usability Research
Usability testing by DWP in the UK shows many users do not see progress indicators.

Those who did often found them adding noise (see Do less - Problems as shared spaces - Design in government)

Dev tools
Proposal is to add the progress as a paragraph before the section heading:

<p class="nsw-progress-indicator">Step 1 of 5</p>
<h2 class="nsw-section-title">Your personal details</h2>

UI Design

Inclusive design considerations
[TBD]

[amy.howard]

Thanks to everyone who’s reached out to us and shared their work, we greatly appreciate it! We’re excited to share an updated Progress Indicator design which introduces a progress line to further visually communicate and reinforce a user’s position in a process.

[brett]

Hi everyone, my name is Brett Masters and I’m the design lead for Revenue ARP program. ARP is a stream of work developing a new platform for Revenue NSW customers to pay for taxes and fines. I have developed this progress bar pattern using Kiama styles that I’d like to share with you.

For context, this progress sits on pages (such as registration) that contain a next button to continue, a back link to go back a step, and a cancel button to cancel the progress.

You can see the desktop design and rules below, mobile design has yet to be finalised.

[tnafoo]

Hi Brett,

This looks great. I really like it that you have a link for each step so user can go back to whichever step without having to click back button numerous times to get to the specific page they want.

[amy.howard]

Thanks for sharing @brett! The designs look great and great to see how all user actions have been considered in such detail. Our first release of the progress indicator will be a lean approach, however we’re keen to look further into progress bars that can be used for navigation and contain that next level of functionality as yours do. Your pattern will go a long way in helping us look at that, would be great to see your mobile designs once finalised too!

[brett]

Hi guys, thanks for the replies This is what we have decided to go with for mobile, much more paired down. We still show the number of steps, progress, the step name and the ability to select the step name and see the same desktop style view of all steps where you can go backwards if you choose.

Cheers, Brett

[Tee_tee01]

Heya @amy.howard,

I noticed for DCS we also have the lean version of the progress indicator that was developed. Is there a mobile version of this component available?

[amy.howard]

Hi @Tee_tee01! Yes the lean progress indicator in the design system is responsive to small and large viewports. You can check out the code demo on our documentation site to best see how it adapts.

[Tee_tee01]

Heya @amy.howard thanks for that! i didn’t realise it was. We have a 7 step progress indicator so i’m guessing it will just show all 7 steps.

Thanks for clarifying and enjoy your break!

[amy.howard]

Hi @Tee_tee01, yep it sure will and the step numbers should update as well to be out of 7.

Thanks! Hope you have a lovely break too!

[Timaurus]

Hi Brett, what platform / tech stack is being used for this? I’m in Customer Service and we’re using PEGAsystems and the devs are having challenges with the mobile for progress.