Authors: Maya Venkatraman , Dirk Ruiz , Jeff Hoffman

0. About this Document
This is a new version of the Netbeans Wizard Guidelines. Changes made to this version were (for the most part) based on comments on nbui. These chages are presented in green text.

1. What are Wizards ?
A wizard is a procedural interface that leads a user through a sequence of steps to complete a task. Typically wizards are used to perform tasks such as installation, entering large amount of interrelated data, creating complex objects and performing complex processes. 

2. When should a Wizard be used? 

• If the task is of moderate or higher level of difficulty
• If the task is performed by novices 
• If the task is performed infrequently
• If the task is made up of linear sub tasks 
• If it is not easy to design a more direct or efficient way to accomplish the task

• Left - steps and graphics
• Right - main wizard area - can contain subtitles , main instructions, user input area , additional instructions and navigational instructions.
• Bottom - navigation buttons 

Figure 1: Basic Anatomy of a Wizard (click on image to see larger clearer version)

Left Pane Guideliness:

1. The left pane displays a list of steps the user will use to complete the wizard
2. If the list of steps is longer than the list's height, use a scrolling pane with a vertical scrollbar. Highlight the current step (Using Primary Color 3 ; Ref: Netbeans User Interface Guidelines - Section 9). Ensure that the current step is visible.
3. If the wizard steps are sequential, number them. If they are not sequential - do not number them.  There is an implicit sequentially in a wizard - the order in which the screens appear as users click through it. It should be OK to list steps in this order without numbering them. Here are suggestions for dealing with complex wizards
- Show steps at high levels by combining several wizard pages into one step.
- Change the listed steps dynamically and show the steps that result from a branch selected by the user
- Replace the text in the steps panel with a meaningful graphic
- Use only the help tab - do not use the steps tab at all.
(These do not specify the solution completely - they only provide guidelines. Designers have to decide which of these is appropriate. Once that is done - in some cases creating a design from the guidelines is easy and in some cases (such as a deciding the steps of a complex wizard ) this can involve much more effort. )
4. When a wizard requires more help information than fits into the right pane, show help in the left pane. Use a tabbed folder to do this, with one tab for the steps and one for help. See Figure 2. The Help tab should appear throughout the Wizard. If the user makes the pane smaller, the text should wrap in the left pane. If the user clicks a tab in a wizards left pane, the selected tab should stay visible as the user navigates through the wizard. The tab selected on the left pane should change only when the user explicitly clicks on the other tab.
5. A graphic can be used in the left pane instead of the list of steps (suggested size for default size wizards - 198w X 333h). A conceptual illustration can be very valuable in helping the user understand what will be accomplished at that stage of the wizard. Anchor the top of the graphic to the top of the wizard page. Do not resize the graphic when the wizard size is changed. When the wizard grows vertically and you have a graphic, the space below should be filled with the background color of the graphic. The graphic can change for each page particularly if it is providing helpful information.
6. A solid background (of color Hex Code - 669966) can be used as the background for the steps. If appropriate an image can be used as the background for the steps.
7. Use default NetBeans font (Arial font - Size 10) for this pane. The title and the current step should be bold, while the remaining steps should not be bold. The font color should be black.

Figure 2: Wizard with left pane tabs (click on image to see larger clearer version)

Right Pane Guidelines: 

1. Provide a subtitle for each page to orient the user to the function of the page. The subtitle is placed at the top left corner, is left justified, in Primary Color 1 (Ref: Netbeans User Interface Guidelines - Section 9) and use headline capitalization. If there is no step list on the left hand pane, show step numbers to the left of the subtitle. Place a one pixel line underneath the subtitle, in Primary Color 1 (Ref: Netbeans User Interface Guidelines - Section 9), extending the width of the right pane minus two pixel border on either side. Add a numbering scheme (e.g. "2 of 3") if the steps are sequential. If the number of steps in a Wizard is flexible and depends on user interactions the numbering can be omitted. Add the qualifier "Continued" (if more that one wizard screen is needed to complete one step) to the subtitle. Subtitles should be identical or almost identical to the name of the wizard step to which the page belongs. If there are more than one wizard pages for any step , the subtile should include "Continued" at the end of the subtitle.  

2. Place the main instructions directly below the page subtitle. Write wizard instructions as commands. Limit the use of pleasantries (such as "Please" and "Thank you"). These are additional words that the user must read - however, they do not make the task any easier. Work with a technical writer to tighten up the text.

3. Place user input controls directly below the main instructions. Provide default values for user inputs. When defaults cannot be provided, provide an explanation of valid formats and try to ensure that the user supplies this information early in the wizard. Place the word "Optional" (in parenthesis) to the right of optional items. 

4. On each page of a wizard, the users choice and changes must remain visible and ineffect until the user cancels them explicitly r by making subsequent conflicting choices on pages visited later. Navigating back anf forth through wizard pages must not cancel user's choices and changes.

5. Place additional instructions below the user input area. 

6. Use black color and NetBeans default font (Arial font of size 10). Only the title should be bold. (NOTE - after themes are implemented - all the text shown here in purple should also be made black)

7. Place navigation instructions (if required) at the bottom of the right pane, directly above the wizard's navigation. Use the following wording for instructions about the navigation buttons: To perform-this-action, click button-name. Do not enclose button name in quotation marks.

Bottom Pane Guidelines: 

1. The bottom pane contains the command buttons, which appear in the following order: Back, Next, Last, Cancel, and Help. 
2. The "Last" button is optional and should be provided only when users can skip to the final summary screen and see some meaningful information there.
3. Buttons that are not active should be disabled. 
4. Either the Next or Last button may change to Finish on the final page. 
5. The Next button must be the default button whenever it is active.  Return/Enter activates this command. 
6. Designers should try and provide help via the step list tab and/or the help tab. If these options do not work out (for some reason or the other, for instance, it may not be possible to fit all the required information into the narrow left pane). A help button should be provided - instead of the help tab. This button should bring up the standard Help system with information about the specific Wizard page.
7. An additional finish button can be used. This button should be enabled as soon as adequate information has been provided, and by using default values for remaining parameters. Enabling the Finish button will let users exit out of the wizard as soon as they feel like they would like to edit work in a less structured environment that the wizard.
8. If the Help button is used, position it to the right of the Cancel button. 

Title Guidelines:

1. Within application wizards use the same name for the title as the menu item used to invoke that wizard. The title should omit the elepsis (...) (if present) at the end of the menu.  Stand-alone wizards use the following title format: <wizardfunction> <product name> <version>.

4. Wizard Size and Spacing
The default size of the wizard windows should be 600w X 400h. Smaller size wizards (450 w X 300h) can be used for simpler netbeans wizards. 
The recommended initial size of the left pane is 1/4 to 1/3 of the width of the wizard window. 

The recommended layout and spacing is shown in Figure 3.

 Figure 3: Layout and Spacing for the a Netbeans Wizard Window  (click on image to see larger clearer version)

5. Wizard Behavior: 

Guidelines:

1. Allow users to move, minimize and resize a wizard window
2. A wizard should be modeless unless it is absolutely required that it be modal.  Oftentimes the user needs to gather information to put in the wizard and is forced to cancel because the wizard is modal.
3. Center the main display screen, however, the start location and size should change if  the wizard must leave information on other windows visible. If the user moves a wizard, it should reopen at the new location every time it is invoked, in that session. 
4. Users should be able to cut, copy and paste text among any of the controls in the wizard and between pages of the wizard using the standard accelerators (Ctrl+X, Ctrl+C, Ctrl+V)
5. When the mouse hovers over a GUI component in the wizard, a tool tip should be presented to the user (when appropriate).
6. All user choices should be persistent for a wizard instance.
7. Buttons must respond to mnemonics. Other components must follow Java Look and Feel standards for keyboard access using Tab, Tab+Shift, Enter, Return and arrow keys. When defining the focus traversal order for a wizard should not be included in the left pane steps. However, if the left pane contains Step and Help tabs, these tabs should be included in the focus traversal order.
8. When defining the keyboard traversal order of a wizard page, omit the left pane. Instead, if there is a list of steps, use the text of the steps as the value for the pages accessible-description property.Users should be able to get into the left pane using the F6 key. (Users may want to switch tabs in the left pane) -
9. When a wizard is called up by a menu item the menu item should have an ellipsis after its name.  (e.g. if the command "Mount Filesystem" brings up the Mount Filesystem Wizard", then the menu item should be "Mount Filesystems..." )
10. Dependency Checking - 

• Provide dependency checking to ensure that the wizard doesn't fail due to dependencies that could have been identified before it started. 
• Perform the dependency check as close as possible to the point where the user enters incompatible information. If the incompatible information is not dependent on user input, perform the dependency check at the start of the wizard. 
• Check all user input for syntactic and semantic errors before advancing to the next page, unless the check will take an unreasonably long time. In that case, the validity check must be performed before the Summary page is reached.

11. When a wizard performs an operation of more than 10 seconds, show progress feedback in the right pane of the wizard.  If the user can safely stop the operation, provide a Stop button. The Stop button should be aligned with the right edge of the content (same line as the progress bar).  When the user stops an operation, return the system to the state it was in when the operation started or provide an alert box that explains the state of the system when the operation stopped. The alert box must allow the user to stop or to continue the operation. Warn the user whenever he/she cannot stop an operation. The warning typically goes in the additional instructions on the wizard page preceding the action. Deactivate all command buttons except Stop when an action is in progress. If the wizard has additional pages, then reactivate Next and Cancel when the action completes. When you cannot determine the duration of an operation, but you can identify intermediate states, use a checklist that dynamically updates the progress with a check mark. Clicking this (progress bar) Cancel button should not close the Wizard window. 
12. Display status information within the wizard. Use an alert box for status information only if you cannot use the wizard to display the information. Here are two situations where the use of alert boxes is warranted:

• When the user cancels the wizard with the close control in the title bar after making significant changes
• When the system issues a warning after a user action

13. The deafult size of the the Wizard should also be its minimum size.
14. Clicking the Cancel button should cancel only the wizard, nd not the entire application.
15. Wizard actions should not be committed until the Finish button is pressed. If it is essential that the wizards actions be committed while the user is yet to complete some wizard sections, the user should be warned about th action about to be committed and given the opportunity to cancel the action before any changes are made.

6. Optional Wizard Screens:

Guidelines:

1. Create an Overview page at the beginning of a wizard when the following conditions exist: you do not show steps in the left pane, the wizard is complex, or the wizard takes actions that may significantly affect the system.
2. If the wizard requires information or preconditions that might not be available when the user starts it, provide a Requirements list at the beginning of the wizard or immediately after the Overview page.
3. Provide a Summary page for all wizards of more than three pages of user input. A Summary page shows all the data that the wizard has collected and provides information about the actions that the wizard is about to take. Summary pages are recommended in longer wizards (more than 3 - 4 steps). If the wizard allows users to skip to the Last step (via last button) the Summary Page should definitely be included. 
4. When the wizard has generated additional information that the user may want to examine once the task is completed, provide a final Post completion Summary page. Do not use a separate Last button in wizards that have a Post completion Summary. Instead, change the Next button to Finish on the Post completion page.