Open SusannaCh opened 5 years ago
I heard that a wizard is developed in Angular.
After discussion with Jessi we have tried a new degsign for the help-section. See below.
2 new discussion points:
Ä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.
@JessiNygrenWalhed sa att hon hade lite kvar.
Komponenten ska testas på 2-3 olika verklighetsbaserade exempel för att se att designen håller. Därefter komponentifiera komponenten.
@hjalmers is building this, will show us when ready. Someone needs to then add it to Sketch (and then Ulrika adds it to DL).
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
Design decision 2021-05-05
Changes
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