DHTML Style Guide - proposals for Wizard.

All,

My homework for tomorrow's call (Tue Jan 22), was to propose keystrokes 
for a Wizard component.  Below are some thoughts.  For those who prefer 
the web, the same document is available on the Fluid wiki at: 
http://wiki.fluidproject.org/x/Ehca

Wizard Keystrokes

What is a "Wizard"?

A situation where a wizard is commonly used is an installer program. The 
installer leads the user through a number of steps in order that the 
software is properly installed while allowing for some configuration on 
the part of the user. Examples of some of the steps that a typical 
installer includes are:

    * A licence step where the user can accept or reject the terms of 
the licence.
    * A step where the user is offered to choose an installation 
location, or to use a default.
    * An "easy" versus "customize" step where, "customize" leads to 
additional steps.

Each step can be thought of as a "page". What wizards provide is a means 
of guiding the user sequentially through a set of pages, allowing the 
user to make choices on each page, and then proceed.

The complexity of each page can range from relatively simple to complex. 
For example, the licence page in the installer example is relatively 
simple consisting of the licence, a question as to whether the user 
accepts the terms thereof, and a pair of radio buttons labelled "agree" 
and "disagree". In contrast, the customize page(s) may list packages and 
sub-packages of optional add-on software arranged in a tree display with 
check boxes beside each package.  The user can interact with the tree, 
expanding and collapsing nodes, and checking off the packages they want.

Whatever the pages are, and however complex they are, the aspect of the 
user interface that makes it a wizard is the ability to navigate 
step-by-step through the set of pages. That is, wizards can be used to 
lead a user through any number of step-by-step contexts regardless of 
the actual content of the pages.

Thus, the wizard-qua-wizard is concerned with navigating the sequence, 
and its controls reflect that. At a minimum, the wizard controls are 
"next", "previous", and "cancel" to provide forward and backward 
navigation, respectively, and abandoning the whole process at any time. 
These are all buttons. Typically, the "next" button is re-labelled 
"finish" when the user reaches the last step.

In some cases, wizards include a "default" and/or "save-and-exit" 
buttons. "Default" is used to (re)set the choices on the current page to 
their default or factory settings. "Save-and-exit" allows the user to 
save what they have done thus far, leave, and later come back to 
continue from where they left off. Whether there are "default" or 
"save-and-exit" controls depends on the context. For example, it doesn't 
make sense to save-and-exit in the middle of installing some software -- 
there is a point of no return.
Why Have Keystrokes for Wizards?

The wizard controls are typically at the bottom of the page.  If one 
were to simply use tab key presses for navigation, then it is tiresome 
to acquire the wizard controls since they are the last user interface 
elements encountered. This is especially true if the current page is 
complex, containing many other user interface widgets.  In short, if the 
user knows that they want to proceed to the next page, it is undesirable 
to force them to tab "100 times" to get to the "next" button.

What is desired is a quick way to interact with the wizard controls 
themselves, over and above whatever user interface elements are 
displayed on the current page.
Possibility #1: Controls as Toolbar

Since the wizard controls are grouped together, they can be conceived of 
as analogous to a tool bar. The way to navigate among the wizard 
controls is similar to the proposed way of navigating a tool bar:

    * tab - moves focus to the navigation controls.
    * tabbing a second time moves focus away from the navigation 
controls to the next focussable item.
    * arrow - use arrows to move among the navigation controls to select 
among them.
    * space - activate the currently selected control.  Focus remains on 
the navigation controls, with the activated button still selected unless 
the control is one of "cancel", "finish", or "save-and-exit".  In the 
case of the latter three, the wizard is quit, and focus goes to where it 
was before the wizard was invoked.

Possibility #2: Controls as Default Actions

Conceiving of wizard navigation controls as a toolbar is a step in the 
right direction, but it does not necessarily solve the "tab 100 times" 
problem.  That is, the current page displayed in the wizard may still 
require an unacceptable number of tab keystrokes to acquire the 
navigation "toolbar".

Taking a cue from how wizards are used in installers: the "next" and 
"cancel" buttons, at least, are usually default actions.  Users can  
cancel the wizard quickly via the esc key, and can proceed to the next 
page by hitting return/enter. That is, assuming the wizard is the active 
block in the user interface (it or one of its parts has focus):

    * esc cancels the wizard.
    * return or enter invokes the "next" action; if the last page, it 
invokes "finish".

The problem here is that there is nothing to activate "previous", 
"default", nor "save-and-exit" quickly.
Possibility #3: Hot keys

Another possibility is to define a set of key combinations that activate 
the various wizard controls regardless of where keyboard focus lies. 
This is inspired by the proposed set of keystrokes for the Radio Player, 
where, for example, Control+Alt+P is used to toggle pause/play.

The suggested keystrokes for the wizard are, then:

    * Control+Alt+N = next, finish
    * Control+Alt+P = previous
    * Esc = cancel (exit, without saving)
    * Control+Alt+R = reset current page to default (factory) settings
    * Control+Alt+S = save-and-exit

Note that the letters chosen for the key combinations should be locale 
sensitive.

This is probably the best solution, but it leads to a concern that these 
key combinations may conflict with something on the currently displayed 
page.  There are no constraints on the contents of a page within the 
wizard. For example, although unlikely, a page may contain a radio 
player, and radio players define Control+Alt+S as "stop".  That would 
conflict with the save-and-exit keystroke for the wizard as outlined above.

-- 
;;;;joseph

'This is not war -- this is pest control!'
      - "Doomsday", Dalek Leader -

Received on Monday, 21 January 2008 16:33:14 UTC