Using a Wizard for initial input and later edit

Question

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.

^{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?

Answer 1

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.

^{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.

Answer 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'.

Answer 3

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.

Answer 4

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.

Image taken from Material design specs.

The progress bar can be horizontal too: