Sunday, October 20, 2019

workflow - How to implement a branching wizard?


I'm toying with the jQuery plugin SmartWizard to implement a branching wizard for a web application. The problem I'm struggling with right now is how to deal with user choices that affect the subsequent workflow and the content and re-ordering of the progress meter of the wizard.


As for now I can think of 3 alternatives.





  1. Static solution:
    Lay out all possible steps in advance. Though some steps will only be activated if the user makes the appropriate choice. Otherwise, the wizard continues with the next valid step. As an example: If someone doesn't need the "flight transfer option" the wizard simply leaves out all steps concerned with that choice.




  2. Fluid solution:
    Lay out only the default or required steps (happy path scenario). If for instance at some point the user chooses to branch away from the visible path (I need the transfer option) the wizard gets a visual update and also its progress meter. Now, showing all the additional steps. (I'm not sure though if this is visually appealing.)





  3. A combination of 1 and 2:
    This is meant as an extension to 1) and 2) where all the choices are made up-front like in a short enquiry (1st step). Based upon these choices the wizard gets a visual update with the corresponding workflow. If the user wants to change the choice she made she has to re-visit the first step (which creates the potential complexity of not loosing already entered data)





Answer



I believe the static solution usually works best and can usually be broken down in such a way that any branching can be done within well defined static steps.


One of the key elements in a wizard is its indication of progress and location within. If steps are added or removed based on user actions, that element of predictability and "confidence" is lost.


As an example, think of a wizard step asking the user to add a profile photo.
The step itself is just that - "Add Profile Photo", but the user can choose from different options that represent different levels of effort and time spent:




  • Use Facebook profile photo (connect with Facebook)

  • Upload an existing photo

  • Take a photo with web-cam / front camera


The user might also be offered the option to edit the photo in the same step and perhaps skip and use a default.
Nonetheless, all these choices and "inner" paths still reside in that well defined step.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...