Update Wizard

[SusannaCh]

Design decision 2021-05-05

Changes

• The wizard now comes with a logotype
• The header takes up the full width and contains the wizard name
• The step navigation has been increased to 320 px (20 rem) width
• The states in the step navigation have been clarified and also communicates the states with icons
• The step buttons have arrows and are sticky in desktop
• The close-button has a circular background on hover (desktop). The same close-button is always visible in a mobile design

Page in Design Library

https://designlibrary.sebgroup.com/components/component-wizard

Change log in Github

https://github.com/sebgroup/ng-wizard/releases

Reasoning

The wizard has been built so that more teams can reuse the same code. At the same time we gave the design a face lift.

If you're using angular or if you're in need of a wizard as part of a separate flow, we suggest that you use our new wizard component for angular which makes it really easy to create wizards using standard routes in angular (one route =one step).

Follow up

• - Vanilla: Wizard (update) vanilla-pattern-library#283
• - Bootstrap: Wizard (update) bootstrap#690
• - AngularMaterial: Wizard (update) seb-angular-material#150
• - React: Wizard (update) react-components#613

[ulde01]

I heard that a wizard is developed in Angular.

[SusannaCh]

After discussion with Jessi we have tried a new degsign for the help-section. See below.

[conandx]

2 new discussion points:

1. Need of logo. Perhaps we should add the logo in a very small version in the top nav-bar, together with the name of the wizard.
2. Sticky header. At least one implementation is made with a sticky header (including the wizard-steps). This should most likely not be so, instead only the very top nav-bar should be sticky.

[conandx]

Är inte detta egentligen helt klart?
https://app.abstract.com/projects/dca578f0-0bdd-11e8-b9e1-df2b74773f3b/branches/master/files/897B83C3-65C1-467C-84EA-C7C717D6C8A8/pages/09D72A43-1169-4AED-8076-7FD0C0514747

Vi har diskuterat i CX-feedback... och klubbat igenom på design review.

[ulde01]

@JessiNygrenWalhed sa att hon hade lite kvar.

[ulde01]

Komponenten ska testas på 2-3 olika verklighetsbaserade exempel för att se att designen håller. Därefter komponentifiera komponenten.

[ulde01]

@hjalmers is building this, will show us when ready. Someone needs to then add it to Sketch (and then Ulrika adds it to DL).

[ulde01]

In connection we had an ongoing thread about the wizard template. I am moving the issue to github instead.

From original issue:
We were discussing the wizard-template and some issues came up that we should discuss.

The step indicator: Now the active step is blue and the earlier steps are green. Should it be the opposite so the earlier steps are blue since they are "clickable"
Cancel: There is a cancel button and an x-ikon. Should we have 1 or 2 ways to close and cancel the wizard? (The icon used in the azure template is wrong, it should be the light-close icon.
Accordion on "help"-part: The help-area (to the right) is possible to click to open/close. That is unneccesary and can be removed (in desktop version).

Comment from Sofia:
I think there is value in having the previous steps green. The values are
-green signals "done", as in "this page is done, all questions are answered"
-when the earlier steps are green, it is easier for the eye to see the blue step among the rest of the steps. This means less cognitive effort to see where I am in the process, which is one of the purposes of the wizard
-there is no evidence from the usability tests I performed in the blue colour having a higher affordance in clickability than green
It would in my opinion look cleaner with only the x in the top right corner, and only having back and fordard buttons in the bottom of the page
I like it that I can "close" the help box to the right. Technically it could have a lot of content, that clutters the page if visible. Many people in usability studies I performed enjoy when the elements that are not in focus, are kept to a minimum. They say thing like "I like it that it was so clean and nothing else to focus on apart from the questions. In sum, I belive the option of closing the help box helps the user to focus on the main content, especially if the box has a lot of content.

Follow up question from Susanna regarding the steps:
In our usertess using this template the customers do not "see" the stepindicators to the left. Which makes it a bit problematic if/when they want to return to an earlier step (they find the previous button) that is not the previous step. Eg from the last step to step 3.

Anyone one else with this issue and how did you solve it?

Comment from Sofia:
What I remember, we had some trouble with that aswell... maybe the steps to the left doesnt look clickable enought, or does this have to do with any general mental model people have of wizard behaviour? Or maybe it is due to the "previous/back"-button, having that makes people use it beacuse they think it is the only way to navigate, go back back back... there. Maybe they would use the wizard to go back if it were not for the back button