3

I'm currently designing a wizard dialog for saving a search. There are three steps of which the first one is required (provide a name) and the subsequent two are optional. I would like the user to be able to save (and close) the wizard at any point, as long as a name is given but it's important that the other steps don't go unnoticed. The other steps should be able to be skipped. Now I'm wondering how to get this right...

  1. ...so that the user does not overlook the optional steps (by just clicking 'Save' right after naming the search)
  2. ...without having too many buttons and preferably not requiring the user to click through all of the steps
  3. ...without having buttons change positions throughout the flow (to prevent mis-clicks when users assume buttons )
  4. ...without having the user click wrong buttons (e.g. 'skip' that turns into 'next' when an optional step is used - users often don't read label)

I'm wondering how you would deal with this. So far I couldn't really come up with a solution that ticks all boxes - mostly struggling with which buttons. This is what I currently have:

  • All steps have a 'Cancel' button at the bottom-left of the dialog
  • Step 1 has buttons 'Save' and 'Continue' at the bottom-right (in that sequence)
  • Step 2 and 3 have 'Back', 'Next' (disabled if no information given) and 'Skip' (always enabled)
  • Step 4 provides a summary of all the given information with buttons 'Back' and 'Save'.

i.e. there are quite a lot of possibilities to click on, and the 'Save' button on step 4 is ordered differently from step 1. Any better ideas?

  • Users do missclick but I don't think that Users are stupid to the point to not read the text of the buttons. If you're so afraid of missclicks don't use a "skip button", disable the "Next" button until there is some data or a checkbox with "skip this step" is checked. Another way would to open a confirmation modal when skipping an optional step. – Walfrat Oct 12 '17 at 11:29
1

If you can ignore the idea of a wizard for a while, I will suggest you another approach. Have a look at the image:

enter image description here

The idea is to show one query field and a save button. There will be a link just below the query field. On click of that link, a new section will be shown/hidden which contains the optional fields. enter image description here

In this way, you can avoid all the buttons, steps and present all your options in a more conventional way. You can check the demo here: http://jsfiddle.net/lotusgodkk/GCu2D/2168/

  • Thanks, that might actually make more sense indeed. The two optional steps are rather extensive (not just a input field) so I'm not yet sure if it will all fit in one view, but I will consider this approach – carlo Oct 13 '17 at 8:11
  • @carlo You may add that section as well alongwith the inputs. You can try this layout. – K K Oct 14 '17 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.