search

grommet / hpe-design-system

HPE Design System
48 stars 24 forks source link

Wizard - Enhance with a visual progress indicator #1440

Open MikeWalrath opened 3 years ago

MikeWalrath commented 3 years ago

Interesting concept from the Financial Services designer to visually show progress through the Wizard across the header image

https://www.figma.com/file/hOsnKkKQI84kvk9b3bNqbP/UI-Update?node-id=645%3A56

eddieshowcase commented 2 years ago

Here is a use case we have... (note we use steppers, would be good to see steppers as an optional component for wizards)

Screen Shot 2022-02-09 at 11 49 08 AM
bahriaditi commented 2 years ago

Another use case from Amanda Vogel:

Hey team! Two questions regarding wizard: Any wizard research that includes progress tracking/indication as an overview in a vertical format? The goal would be that the user could view all of the steps at once sequentially, enhancing guidance (more context than just "Step 1 of 5"), for processes that are lengthier and more complex. A few examples of what I am attempting to describe. What is considered too many steps in a wizard?

Slack thread

vavalos5 commented 1 year ago

This request has been one that we've been getting for some time.

I came across this example from Developer Intergalactic design system: https://developer.semrush.com/intergalactic/components/wizard/

While we don't do sidebars and instead we try to keep everything horizontal, we could invert this horizontally and meet this use case. This is also a need within the ASP team.