Wizard: Difference between revisions

Revision as of 16:13, 6 August 2009

Moodle User Interface Guidelines > Wizard

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

This is a guideline for a Moodle Interface Guideline. Comments: developer forum thread

Problem

Users need to perform a complex task, which which they are not familiar or lack needed domain knowledge
The task users need to perform naturally divides into subtasks, and the nature or number of subtasks depends on what is selected in some other (preceding) tasks

Context

You are designing an UI for users who are not experts at a given task that involves entering a lot of information or making intricate selections that depend on each other.

Forces: factors that affect selection

Unexperienced users may get frustrated
- if too many choices, dependent on each other, are presented to them at once
- if they do not have all the background information related to a task
Experienced users easily get frustrated
- if a task they know is split into too many phases
- if the order they enter data into the application is controlled

Solution

A Wizard, sometimes called an Assistant, is an interface that guides users through a predefined sequence of steps.

Elements of a wizard

Status display

Displays the steps required to complete the wizard, and indicates the step the user is in currently

Navigation buttons

Previous: Whereever it is possible to allow the user to change the selections they have already made, a button labeled 'Previous' should be provided.
- Obviously, the first page of the wizard does not include a previous button, nor do pages which are a result of actions that can not be undone.
- Unlike one might assume, the Previous button acts as a submit button for the current page, just like the Next button. If the user has made changes on the current page when they decide to return to a previous step, those changes are saved.
- Provide a Previous button whenever possible to maximize user control.
Next: Used for moving to the next step
- When the next step is to actually start an operation (usually the last step of the wizard), the button is in the same position, but the label is an action verb such as "Start Backup". This is to let users know that they are doing something that actually has consequences and not just continuing to enter data. If the operation that the user is about to start cannot be undone or is in some other way potentially dangerous, consider adding a javascript warning dialog confirming the user wants to continue.
Cancel: If there is a specific page from which the user can be assumed to have arrived to the wizard from, clicking Cancel will return them to this page. If you can not be sure, determine a reasonable default.
- The Cancel button should in most cases (except in very simple Wizards) have a javascript confirmation dialog associated with it, noting them that all the information they have entered will be lost, and asking them if they really want to continue.

Notes

The user should be capable of using the browser's back button normally in a wizard.

After pressing the Next button, the user should end up in the step that was before the page
After pressing the Previous button, the user should end up in the step that is after the current step in the wizard's sequence
If the user cannot return to the previous step anymore, the user should be returned to the earliest possible screen, or alternatively the wizard should be reinitialized and the user sent to the first page of the wizard

If there is a danger that experienced users want to use the functionality provided by the wizard and that they want more control than what the wizard provides, provide an alternate user interface to them.

Common mistakes

Moodle Wizards typically do not have all of the required buttons nor the status display.

Examples and implementation

Backup

Installation

Related guidelines

Another way of only showing unexperienced users what they understand is using Progressive Disclosure

Related issues in the tracker

TODO: all the issues with installation and backup

@@ Line 18: / Line 18: @@
 == Solution ==
-[[Image:progressivedisclosure.png|thumb|Image 1: Screenshot demonstrating the subject of the guideline, including the different states or the sequence included in a single image]]
 A Wizard, sometimes called an Assistant, is an interface that guides users through a predefined sequence of steps.
-The key elements of a wizard are
+=== Elements of a wizard ===
-* Status display that displays the steps required to complete the wizard, and indicates the step the user is in currently
-* Buttons for navigating within the wizard
-** '''Previous''': Whereever it is possible to allow the user to change the selections they have already made, a button labeled 'Previous' should be provided.
-*** Obviously, the first page of the wizard does not include a previous button, nor do pages which are a result of actions that can not be undone.
-*** Unlike one might assume, the Previous button acts as a submit button for the current page, just like the Next button. If the user has made changes on the current page when they decide to return to a previous step, those changes are saved.
-***Provide a Previous button whenever possible to maximize user control.
-** '''Next''': Used for moving to the next step
-*** When the next step is to actually start an operation (usually the last step of the wizard), the button is in the same position, but the label is an action verb such as "Start Backup". This is to let users know that they are doing something that actually has consequences and not just continuing to enter data. If the operation that the user is about to start cannot be undone or is in some other way potentially dangerous, consider adding a javascript warning dialog confirming the user wants to continue.
-** '''Cancel''': If there is a specific page from which the user can be assumed to have arrived to the wizard from, clicking Cancel will return them to this page. If you can not be sure, determine a reasonable default.
-*** The Cancel button should in most cases (except in very simple Wizards) have a javascript confirmation dialog associated with it, noting them that all the information they have entered will be lost, and asking them if they really want to continue.
+==== Status display ====
+Displays the steps required to complete the wizard, and indicates the step the user is in currently
+==== Navigation buttons ====
+* '''Previous''': Whereever it is possible to allow the user to change the selections they have already made, a button labeled 'Previous' should be provided.
+** Obviously, the first page of the wizard does not include a previous button, nor do pages which are a result of actions that can not be undone.
+** Unlike one might assume, the Previous button acts as a submit button for the current page, just like the Next button. If the user has made changes on the current page when they decide to return to a previous step, those changes are saved.
+**Provide a Previous button whenever possible to maximize user control.
+* '''Next''': Used for moving to the next step
+** When the next step is to actually start an operation (usually the last step of the wizard), the button is in the same position, but the label is an action verb such as "Start Backup". This is to let users know that they are doing something that actually has consequences and not just continuing to enter data. If the operation that the user is about to start cannot be undone or is in some other way potentially dangerous, consider adding a javascript warning dialog confirming the user wants to continue.
+* '''Cancel''': If there is a specific page from which the user can be assumed to have arrived to the wizard from, clicking Cancel will return them to this page. If you can not be sure, determine a reasonable default.
+** The Cancel button should in most cases (except in very simple Wizards) have a javascript confirmation dialog associated with it, noting them that all the information they have entered will be lost, and asking them if they really want to continue.
+=== Notes ===
 The user should be capable of using the browser's back button normally in a wizard.
 * After pressing the Next button, the user should end up in the step that was before the page

Documentation