Last Update: August 16, 2023
Platform: (Web)
Designer: Lase Bayudan
Intro
The wizard floorplan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission. In general, you can use the wizard both in full srceen mode and in a modal dialog.
Usage
Wizard in Full Screen Mode
When to Use the Wizard Floorplan
The wizard aims to help users by dividing large or complex tasks into segments. Use the wizard if the user has to accomplish a long task (such as filling out a long questionnaire) or a task that is unfamiliar to the user. The flow should consist of a minimum of 3 and a maximum of 8 steps.
You can use the wizard for both create and edit scenarios. For edit scenarios, you can either offer a wizard or let users edit the object page directly, depending on your use case.
When Not to Use the Wizard Floorplan
If you have a task with only 2 steps or a format that the user is familiar with (for example, it is part of their daily routine), do not use the wizard as it only adds unnecessary clicks to the process. If your process needs more than 8 steps, the wizard will not support those steps, as the process is too long and can be confusing for the user. In this case, consider restructuring the task.
Consider whether the classic edit screens (edit flow or object page) are more suitable for your use case.
Types
There are two types of wizard – “standard” and “branching” – which differ in terms of the functions they offer.
Use the standard type if:
- The total number of steps is known in advance.
- The number of steps does not change during usage.
- There is linear progression from one step to the next.
Use the branching type if:
- The total number of steps is not known.
- The number of steps may change during usage.
- There is non-linear progression. In other words, the user’s choice during one step determines which step comes next.
In both types of wizard you can let users skip steps. Label these steps as “Optional”.
Structure & Components
The wizard has two screens: the walkthrough screen, where users complete a segmented task, and the summary screen, where they can check the data they are about to submit.
Walktrough Screen
Summary Screen
Behavior & Interaction
The wizard comes with two different behaviors, which have different navigation patterns. Their usage depends on the use case.
Anchor Bar / One-Page Behavior
The anchor bar consists of a series of links (steps) that are arranged horizontally at the top of the page. Clicking a link navigates to the respective step on the page. Once the user has filled out all the necessary fields, a Next Step button appears below the content, which allows the user to continue with the next section of the form. If the user needs to navigate to the previous section of the form, it is possible either to scroll up the page or to navigate back by using the progress bar. When the user has completed the last section of the wizard, the button label changes to Review, and the user is taken to the summary screen. On the summary screen, the user can use either the Edit button in the footer or the Back arrow to return to the wizard and edit any of the fields. The wizard footer is used to display the Cancel button, which exits the wizard. If the user has modified any fields, a data loss warning appears. If the form is long, and the user may have to save it before finishing, you can offer a Save as Draft option in the footer.
Tab Bar
As an alternative to the anchor bar, you can also use the tab mode. It is visualized in the same way, but shows a series of tabs (steps). These are arranged horizontally at the top of the page and each represents a subpage. Clicking a tab displays the respective subpage. Unlike the anchor bar, the tab bar comprises not only a Next Step button but also a Previous Step button. Place the Next Step button in the footer toolbar, as in the summary screen. As soon as users move to the following step, show an additional Previous Step button on the left. This follows the guidance for action placement: if the primary action (such as Next Step) is a forward path, it needs to appear to the right of the secondary action. In the case of the wizard, the secondary action is Previous Step. The negative path action Cancel remains unchanged.
Responsiveness & Adaptiveness
The wizard floorplan is available in the sizes: S, M, L and XL. This is also applicable to the wizard in a modal dialog.
As the size being used highly orientates on the content and the space that is needed for it, there aren’t any fixed sizes available. For a wizard with a lot of content, in modal dialog it is recommended to use width of 80% and height of 70%. For less content, the size of the modal dialog should match the content.
Walktrough Screen Responsive
Summary Screen Responsive
Application-specific examples
In SuccessFactors we have several examples of application specific wizard floorplans. However, the basic structure of the floorplan is consistent throughout. Only the content varies in the scenarios.
People Profile: Create Temporary Work Schedule Change: https://www.figma.com/file/yJdDtzzg6mgKEFgUybL1l1/SF-Component-Library?node-id=1411%3A147625&t=KetrXmKHgFN6f4xi-1
EC: Dependents Management (not implemented): https://www.figma.com/file/gZufEPP1jc6ZmXbl3WMoLc/DependentsManagement_Web%2FResponsive?type=design&node-id=222-6829&t=WGjpMtJAnT0Uvyzl-4
Benefits: Enrollment: https://www.figma.com/file/0Co11DSMNRR38CUaTBPox7/US_Enrollment_2311_UX?type=design&node-id=1797%3A82444&t=gtoinPAK6splqLmL-1
Accessibility
Der wizard floorplan was developed according to accessibility standards.
Resources
Link to the Fiori Design Guideline: https://experience.sap.com/internal/fiori-design-web/wizard/
Link to the Visual Core Wiki: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2697897301
Link to the UI5 Demo Kit: https://sapui5.hana.ondemand.com/#/entity/sap.m.Wizard/sample/sap.m.sample.WizardSingleStep
SF Web Stencils Horizon Template