I need to create a wizard which has numerous sections, each with multiple questions. How can I improve the experience for the end-user?
16How about making it short and with less steps :)– SrulyAug 9, 2010 at 19:55
3@Sruly clever, but not always possible.– Ryan ShripatAug 9, 2010 at 20:11
Do you need to collect all the information at the same time? Or could it for example be collected at different points of the users journey through the application?– ArchieVersaceAug 9, 2010 at 23:04
1You may also want to think about whether the user needs to complete the wizard in one go or whether they can save it and then come back to it at a later date.– ArchieVersaceAug 9, 2010 at 23:04
@ArchieVersace: I like the idea about saving it and allowing the user to come back to it. You should submit that as an answer..– Ryan ShripatAug 10, 2010 at 14:23
My first suggestion would be to try to eliminate as many steps as possible. Really think about the flow, what's required, etc.
Some tips to make a long process more friendly:
- Show a progress meter of completed steps
- If possible, allow users to jump back and forth to go back and correct a previous entry
- Give real-time feedback when an entry doesn't conform to expected input values, instead of notifying the user that something didn't work at the end of the process.
A side note (hopefully not stirring up the flames): Apple hardly ever uses Wizards for set-up processes, and when they do, the Apple set-up assistants are (in my opinion) always easier to figure out than the Microsoft equivalents. I'd suggest looking at the differences and try to identify the tricks employed by Apple.
This are the most important I can think of:
- Break up the operations constituting the task into a series of chunks.
- Previous and Next buttons.
- Sequence Map that shows where you are in the steps at all times
Read more on this topic at the Designing Interfaces Wizard page.
If you have considered all the alternatives mentioned in other answers and have decided that the wizard has to be big then you should consider the following:
- Split the information up into logical sections that are not too long
- Title each section clearly but try and keep it short. If you need it add an additional description below the title to explain further
- Show a progress indicator i.e. step 3 of 10
- Provide next and back buttons for navigation. It is sometimes appropriate to allow the user to progress without having completed each section however in many cases it is not as it adds extra complexity to the wizard that the user may not fully understand. I tend to not let the user proceed until they have completed the section (the next button in these cases acts as submit).
- Really think about each form control and whether it is appropriate for the data that you are trying to collect. If you want the user to select from a short list then use a drop down however if the list is really long then a drop down is not really suitable. Use a search control or something.
- Lists in drop down controls should be ordered alphabetically
- Make the form control labels as short as possible but they must be clear and easy to understand what information you want to collect. If you need to add a description don't instead of making the title really long
- Use descriptive water marks on all input controls and default items on drop downs. e.g. "Enter a title" or "Select a country"
- Provide detailed and useful failed validation messages in line with the control, I tend to show a simple message first but if the user rolls over it they get much more information about the field and what values are accepted etc. I also include a master validation fail message that appears next to the proceed button. You can also make this functionality real time so when the user is typing and they get it wrong you can highlight it then and there.
- If the wizard is really long and you think it would help, allow the user to save their progress so that they do not have to fill it out in one session and can pick up later where they left off
I would put each step into a tab, in such a way that the tabs that are accessible at any point are enabled, the others disabled.
In this way, the user can move freely around a correct mistakes without having to go several steps back etc. The enabling of the tabs still stops the user to go to steps that cannot be modified yet, because there is still information missing.
1I think the way you describe the workflow is intuitive, but using the tab metaphor might be problematic. I don't think that tabs have an intuitive natural ordering; they're all sort of at the same level of importance. Aug 9, 2010 at 20:10
The order of tabs is not so much importance but sequence of the steps taken. Things that can be done at the same time can be in the same tab. Aug 9, 2010 at 20:19
Adding tabs is bad. Most user interface guidelines say that tabs should represent related data, but it shouldn't influence each other. This is clearly not the case with a wizard. Aug 19, 2010 at 14:20
Do you have any references for this? I would be interested to read more about this. Aug 19, 2010 at 17:21
In addition to other tips mentioned, use smart defaults for everything you possibly can. If you already have their email address, you can probably take a stab at their name, potential user name, possibly workplace, country of residence (or get that from their IP address or system settings). Here's a small example.
Which brings up another source of information: if you are making an app, then there will aready be vast amounts of information available to you from the system. Use it.
Thinking about this may also alter the order in which you ask your questions. You can get an awful lot of stuff from just country and zip/postal code, for example.
Speaking of addresses, postal addressing systems make use of vast databases of addresses to allow easy error checking of address entries: given the zip/postal code, you may be able to guess after a single keystroke of the street name that the intended address is "Quixotic street", and save many mistyping and spelling errors. You may also know the range of known addresses, and even if certain numbers require additional things like apartment number, for example. Not that you would disallow the user from entering a street name or house number you don't know, but you might warn them with a non-modal 'did you mean...?" type message.
To sumamrise: even if it seems like a lot of work on your part which may well be overridden by the user in the end, making life easy for your (hopefully millions of) users is worth it.
If the process/wizard itself can't be simplified or in some other way reduced, I'd suggest at a minimum indicating exactly where in that process the user currently is.
You can do this with something as simple as "Step 6 of 10", or more elaborately by showing a flowchart with the current step highlighted etc.
There are always ways to minimize the size of a wizard, like separating tasks or making some of the steps optional.
- Title your Sections
- Back and Next Buttons
- Allow the user to navigate throught the steps, and if they are dependant on the previous steps then only the ones that are completed.
- Provide good default values for your inputs.
In addition to these great tactical tips everyone has suggested, I'd also recommend you'd do some discount usability testing with people who would be working with the wizard.
By walking through the current wizard's pages with users, you can get useful feedback about which sets of fields can be grouped together to make the process more natural for them.
In some circumstances you'll find that your users have a greater tolerance for longer forms when they're organized in a way that matches their expectations.
Perhaps a wizard is not the ideal solution here.
Does the user really need to choose from a huge list of different options in sequence?
Could you default most of the options? If the user needs to change from the defaults they can click a change button to change that particular option.
If they can't be defaulted from the start, can you save their previous choice and default those?
Consider the alternatives to Wizards: Progressive enabling and disclosure.
Have all questions on one page, but only show the first chunk of them. Then when user has finished the first chunk you show the second chunk on the same page. Continue like this. That way it is:
- Easy to go back and forth
- Get an overview over all choices
- Only have to deal with a subset of questions at a time
With progressive enabling, you have disabled the next chunk of questions until the user has finished the first chunk.