Wizards are an effective way to handle multi-step forms.
Step 1 Title
Step one description. Keep each step simple and in chunks easy enough to fit on a single page.
Use a wizard when your form involves multiple steps. This makes the experience more manageable for the user and helps to eliminate error by validating inputs as the user progresses.
A wizard should always appear as a fullscreen modal.
The Wizard header should always be sticky so that user has persistent access to previous step and cancel actions. The footer, when there is sufficient height on desktop, should be placed directly below the inputs. On mobile, or when there is not sufficient height to show all inputs, the footer should be sticky on the bottom of the window.
It is helpful to provide concise and clear descriptions for each step of the form. Keep each step simple and in chunks easy enough to fit on a single page. This helps the user have confidence in how to fill out the form correctly.
It is important to give the user an indication of where they are within the form. This should be done by indicating the total number of steps and the user's current position (i.e. "Step 1 of 3").
Validation should occur within each step of the wizard. If there are any errors with the inputs in the current step, the user should not be able to advance and errors should be displayed. Error display should follow conventions established by Form.
The final step of a wizard should summarize what has been accomplished or configured. This summary is displayed to the user prior to form submisson. In order to complete the wizard, the user will click a submit button provided on this screen. Examples of submit button labels include "Finish Setup", "Finish Configuration", etc.
It is important to provide the user with an option to "Cancel" or leave the wizard. Place this button on the upper right hand corner of the wizard. When clicked, the "Cancel" button should:
- Open a layer that allows the user to confirm they want to cancel.
- Provide two buttons: the primary button confirming cancellation (i.e. "Yes, cancel setup") and a secondary button allowing them to return back to completing the wizard (i.e. "No, continue setup").
If guidance can be provided in a short description, use a single column wizard. When additional guidance is required for the form or content of the wizard, you might consider a two-column format.
If using a single column format:
- Center the "Next" or submit button directly under the form inputs.
If using a two column format:
- Wrap guidance in a containing box with different background color than the page, so that it is visually separate from form inputs.
- Center the "Next" or submit button underneath both the form inputs and the guidance.
- On desktop, place the guidance to the right of form inputs.
- On mobile, place the guidance above form inputs.
Common wizard variants.
When additional guidance is necessary, use a two-column wizard. Click "See Fullscreen" for a more realistic experience.
Step 1 Title
Two column configuration for wizard.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.