Wizard

Purpose

A wizard is used to assist the user in a complex task, by breaking it into several successive steps.

When to use

• When the task is too complex to be contained in one window.

• When the task involves several steps, which need to be performed in a specific order. • When the task is infrequent, therefore users may find it hard to learn.

• Wizards are slower to operate, therefore do not use them for frequent tasks. • Not suited for teaching a user how to do something.

• It is recommended that a Wizard will not be the only way to perform a task. A regular form should be implemented as well).

Screen Layout

Usage Example: Sales – A/R > Dunning Wizard

Screen Size

• Minimal screen size is: 508*390

• In cases that the information exceeds this screen size, resizing is possible only upwards. In that case, the image graphics on left and right sides of screen will be stretched vertically only. The header and footer should remain constant.

Window Title Bar

• Use a standard Window Title Bar with the name of the Wizard (Specific Name). • Align the title to the left

• Locate close button (x) on the right of the title bar

Header

• Background Color: blue (RGB = 132, 173, 198)

• Border Line: dark yellow (RGB = 255, 156, 0), 1-pixel wide • Header Dimensions (including border line):

The header contains: • Wizard icon

• Explanation text for the current step.

Data Area

• Background Color: beige (RGB = 239,235,222)

• The data area contains text, fields, controls, tables, etc, relevant to the current step.

• The data area may contain Action Buttons which are relevant to the current stage. Note that these buttons are separate from the Navigation buttons in the Wizard footer.

Footer

• Background Color: gray (RGB = 156,156,156)

• Border Line: dark yellow (RGB = 255, 156, 0), 1-pixel wide • Footer Height (including border line): 39 pixels

• The Footer contains:

ƒ Step indication on the left side: Step <step num> of <number of steps> ƒ Text color: white, Font: Arial size 10

ƒ Location: Horizontal: 28 pixels from left edge, Vertical: center of footer. ƒ Navigation Buttons on the right side:

• Buttons include: Cancel, Back, Next, Finish

• The "Back“ button does not appear on the first page. • The "Next“ button does not appear on the last page.

• The "Finish“ button starting a certain page, when it is OK for the user to finish the process.

• The navigation buttons are only active when navigation is possible, according to the data entry and business case.

Fonts

• For the welcome and name of step, in each screen use Arial, size 12, Color: white-bold • For the explanation text for the step, use Tahoma, size 10, black

Wizard Icons

• Use a graphical symbol that is related to the idea of the wizard.

• Use different icon for each wizard in the system so the user can identify in which wizard he is working right now.

• On the first page, the wizard icon width is: 100 pixels

• On successive pages the icon size is 65x50 pixels, located 25x12 pixels from the left upper corner.

Screen Types

There are two types of screens: 1. Entry/Exit screen 2. Subsequent screen Entry/Exit screen

Include on the first page:

• Wizard Icon: Makes a visual context for the content/subject of the wizard • A welcoming paragraph on the right side explains what the wizard does.

Successive screen

Include on subsequent pages:

• Same graphic for consistency. • Instructional text.

• Controls for user input.

• Make it visually clear that the graphic is not interactive. • All wizard screens must be of the same size and position.

General Guidelines

• Whenever possible, give an indication to the user regarding the step in which he is in.

• Provide a greater number of simple pages with fewer choices, rather than a smaller number of more complex pages with too many options or too much text.

• Do not require the user to leave a wizard to complete a task.

• Include a Finish button at the point where the task can be completed.

• The Next and Back buttons should be enabled only when the user is allowed to advance forward/backward. They should be disabled otherwise.

• Make certain it is obvious how to proceed when the wizard has completed its process. • Present a single window at one time.

• Do not advance pages automatically. • Keep the same order of buttons all over.

Terminology

The following are general recommendations in choosing terminology in wizards: • Do not use technical terms or system-oriented information.

• Write simply, concisely, and clearly, following all previously presented guidelines. • Don't overdo the explanations, each explanation should not exceed three rows. • Don't overdo instructions. Wizards are not suited to teach users how to do something. • Clearly identify the wizard's purpose in title bar.

• Use a conversational, rather than instructional style. • Use words like "you" and your.

• Start most questions with phrases like "Which option do you want. . ." or "Would you like . . ."

• Make certain it is obvious how to begin and complete the process by including proper entering/closing text on the first/ last page.