UI Component: Wizard Flow

[mairin]

Note: This has a lot in it; if it would be helpful to break down into separate issues, happy to do so, just let me know.

Preview

Link to Penpot file with inspectable fonts/colors/css/etc:

https://design.penpot.app/#/view/d5fc0283-ef1c-80fa-8002-3243c19ca388?page-id=414d6442-638d-804b-8001-c2fc0bc56c9e&section=interactions&index=0&share-id=7bde5548-9bcb-8041-8002-ab24a3db3400

[Note: You don't need a Penpot username to view the mockups if you don't have one, you can log in using your GitHub account. It should then show you a code inspector for the mockup.]

Changelog

• 15 June 2023 - updating Penpot link as the previous one was broken

Specification

There are three main areas to a wizard flow.

Header

The header can contain these four elements:

• Wizard Flow title: [required] In the upper left we have "Get started with Podman Desktop" - the title should be short, and basically let the user know what they will accomplish by completing the wizard.
• Wizard Flow progress indicator: prequired] In the upper right we have circular indicators with labels to indicate where in the total flow the user is currently located. [There can be more than one screen associated with a circular indicator - the indicators should be thematic and outline the major steps the wizard will move the user through.] Empty circles indicate a step that has not yet been completed. Purple circles indicate the current, active step. Steps that have been completed should have a white checkmark inside a filled purple circle [not shown in mockup.] Steps that have been skipped should have a -- mark inside an unfilled circle [not shown in mockup.] If a user wants to revisit a past area, they should be able to click it and review, and any input done ahead of where they're moving back to should be saved.
• Wizard Flow progress indicator skip button: [required*] The current active step should have a "Skip >>" link underneath. This enables the user to skip to the next step of the wizards if the step is skippable. * If the step is not skippable, the "Skip >>" link should be replaced with "(Required)".
• Background image: [optional] Here we have a gradient arrangement of the Podman Desktop color swatches as a backgroud image to help with branding. NOTE: Ideally graphics will have an alpha background and will be able to function in both light and dark modes. [The graphic in the mockup should 🤞]

Content Area

The content area has a few elements. Generally the content area is a blank canvas, but to maintain a consistent aesthetic ideally it would be center-aligned by default. I suggest here elements I think that should be required.

• Content Icon: [Optional] Single-color, adaptable to light and dark modes, large, nice-looking, related to the task.
• Content Headline: [Required] This should be a short slug to indicate what sub-step of the broader current step of the process the user is in will complete by reading & following the on-screen instructions. In the example here, we see the headline suggests that we don't have Podman and will start installing it.
• Content: [Required] Really, this is a blank canvas :) Center-aligned, use what elements you need to have to allow the user to complete the headline task.

Footer

The footer has a few elements:

• Full wizard skip: [Required*] *If this wizard is something that pops up automatically, this is required. If the wizard is something the user triggered of their own opt-in, it's not required. It should be placed slightly above the darker background of the footer bar, on the right side just above the footer bar navigation buttons.
• Navigation buttons: [Required] This is the first screen, so we have an underline Cancel link, and Next button. The Cancel link allows the user to exit the entire wizard. If this were the second screen, we'd have an underline Cancel link, and a back button, and a next button, in that order. [Now that I'm speccing this out, we might want to put a back button sized space between Cancel and Next so that if someone hits back one time too many, they don't lose their input.] These navigate screen-by-screen. To jump between major sections, you use the progress indicator in the header.

[github-actions]

This issue has been automatically marked as stale because it has not had activity in the last 6 months. It will be closed in 30 days if no further activity occurs. Please feel free to leave a comment if you believe the issue is still relevant. Thank you for your contributions!

[github-actions]

This issue has been automatically closed because it has not had any further activity in the last 30 days. Thank you for your contributions!