8

My Windows application uses Wizards for creating business objects like persons or real estates.

The Wizard is perfect, since it allows the input in the most logical order with the ability of displaying the data in clearly arranged groups of forms. It also allows processing and validiation steps in between the Wizard pages. Some input depends on other input, but that's not a problem, since the Wizard is sequential.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Now here is the problem: my users need to be able to edit all the input afterwards. Example: Input C needs to be edited afterwards.

  1. I could send them through the Wizard again. But if they can't find what they are looking for on the first page of the Wizard, they will have to search for it, without knowing where it is or if it's even to be found in the Wizard.
  2. I could offer a separete edit dialog that is not a Wizard. Basically two dialogs that handle the same data, one for adding and one for editing. That means more effort and it might be inpterpreted as inconsistent.
  3. I could ditch the Wizard. Adding and input would be done with the same dialog.

I don't really want to give up the Wizard concept since it's comfortable for data input. Can you think of a solution that makes both adding and editing as comfortable as possible?

1
  • can you direct link to the appropriate page in the Wizard?
    – Midas
    Mar 31, 2016 at 10:33

4 Answers 4

3

In my opinion, wizards are only good for on boarding process, account creation or making changes to settings. They are not so suitable for scenarios where the form has to be access frequently such as task related features (product creation, appointment scheduling). Thereore I favor the 3rd option you have presented.

Based on what was described, it sounds like your user has to use the form to perform some heavy task (object creation)related activities. The form also has to have CRUD functionality.

In my opinion what you need is a way of organising your input fields in a concise and sequential manner that brings clarity. I would say form efficiency is an important factor (CRUD) to consider too. As I have mentioned, wizard are ideal for one time process, it is less efficient if the form has to be revisited multiple times. It might even slow down sophisticated user who wants to navigate to fields of interest quickly using tab.


Accordion Approach


If breaking the form into modular steps is necessary, you could explore using accordion to section content and show them in sequential steps. You might have to disable the submission button to prevent user from submitting an empty form. You could include other interaction design for empty form submission which I won't discuss here.

When editing the form, the accordion are expanded to show all the inputs and its entries. This make searching the fields of interest to edit much easier and reduces the effort of implementing form validation too.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This approach allows the user to see the form in entirety instead of wasting the user's time stepping through the wizard and to discover fields that they are not comfortable filling (or no answer at that point).

I could offer a separete edit dialog that is not a Wizard. Basically two dialogs that handle the same data, one for adding and one for editing. That means more effort and it might be inpterpreted as inconsistent.

I believe this also address your concern of creating a separate dialog for editing. You said it, maintaining 2 separate forms that perform the same function is a red flag in terms of technical implementation and maintenance. Be kind to your developers :)

I don't really want to give up the Wizard concept since it's comfortable for data input.

One of the worst thing that could happen is when designers grown too attached to their design and fail to explore other options. This is a much bigger hurdle to overcome than the design challenges itself.

2

Combine the power of the wizard for on-boarding and then serve up the same form with all steps expanded when they want to edit. With some minor changes to styling and possibly validation / javascript, you can quite easily convert the wizard view to standard form layout.

A plugin that might help you achieve this is Accordion Wizard where you can change the 'mode' from 'wizard' to 'edit'.

1
  • This could work well on a web site where you don't have to care about vertical screen space. I was designing a Windows application and didn't want to incorporate scrolling in modal dialogs, as the underlying views already need enough scrolling. I will keep it in mind tho, thx.
    – J_rgen
    Sep 21, 2018 at 8:43
1

There is nothing stopping you from using a wizard for the initial set-up flow and another menu driven UI for ongoing editing. After all, the users needs will vary over time. For example:

When you are setting something up for the first time, wizards are great for guiding a user through a long, complicated or critical task.

When you need to make a change to something in the future, a specific menu trigger will allow you to keep the editing task small and focused on your user goal.

1
  • Apple takes this approach with the Airport setup utility (Airport is Apple's wifi brand). A wizard UI is presented with the option to switch to an expert mode that makes all settings available on demand. May 3, 2016 at 7:12
0

You can have progress bar with links to the different wizard pages (see image below). It is mandatory (in usability standpoint) if your wizard is longer than 2 pages because it gives users feedback where they are in the process and how much effort is left. This way you can have both - wizard and quick access to all fields. Read more on Steppers or Progress bars here.

Progress bar Image taken from Material design specs.

The progress bar can be horizontal too: enter image description here

2
  • Since those steps are usually not clickable, they would just give a rough hint of what the Wizard containes. Making it clickable would allow to skip steps in the initial input, and that would not be good, because all steps and fields in those steps are mandatory to continue (in my case).
    – J_rgen
    Mar 31, 2016 at 11:49
  • The point is that they are clickable. More specifically, only the steps that are completed are clickable, the unexplored steps are disabled. Mar 31, 2016 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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