Progress Indicator Animations

[lisakaiser]

Summary

Requesting to enhance the progress indicator component with animations showing the blue line progressing as steps are completed and the icons change to help the user better understand their progress as they complete forms. Also, requesting a slight change to the "optional text" under each text to instead a show a summary of what the user selected in that step.

This would require motion design and development work.

Justification

This would reduce the cognitive load of the user and help them better make connections between the steps. The addition of the "summary text" could also provide a "summary" step for our users - allowing them to review progress made without going back and taking additional steps.

Desired UX and success metrics

When a user completes a step, the progress line would animate to show their progress. At the same time, the summary text would fade in as well as the blue step indicator would transform to the check mark. Here's a mock up of how this could work:

Success/failure could be measured through user testing the current implementation of this component with the proposed changes OR how current forms work without vs with and user's preferences.

"Must have" functionality

• Blue line/icons animating

Some additional functionality to consider:

• Creating anchor links in the indicator so users can easily revisit steps
• Showing error states in the progress indicator steps when users try to complete the form or miss a section

Specific timeline issues / requests

no specific time line

Available extra resources

What resources do you have to assist this effort?

I (@lisa-j-kaiser) am happy to help with any design/animation and @kristastarr ([email protected]) is working on development of this component to contribute back.

[lisakaiser]

Here's the mock up I shared at the design review yesterday as well exploring what might happen if a user skips a section:

[jnm2377]

@johnbister will follow up with you on this. :)

[johnbister]

@lisakaiser @kristastarr Hey! This looks like a really cool effort and I apologize I was OOO when you presented to the larger Carbon group. Let me know how I can help.

[kristastarr]

Awesome, thanks! I’m working on a modification to the existing component right now. I should have a demo app to show y’all soon- when everyone is happy with it, I could go ahead and submit a PR for review.

[laurenmrice]

Closing since we will not be maintaining the code for this according to #9340