| JavaTM Look and Feel Design Guidelines: Advanced Topics > Part II: Special Topics > 7: Wizards > Designing the Left Pane | |
A wizard's left pane supplements the contents of the right pane by displaying one or more kinds of information--for example, a list of the wizard's steps. Within a particular wizard, the left pane always displays the same kind of information. For example, if the left pane of one page displays a list of steps, the left pane of each page displays a list of steps. Designing a wizard's left pane involves choosing the appropriate type of information to display and then laying it out correctly.
A wizard's left pane can display any one of the following items:
If possible, display steps and help text in the left pane of your wizard. A list of steps helps orient users within the wizard. Help text enables you to coach users without opening a help system outside the wizard.
If displaying steps and help text in the left pane is not practical, display either steps or help text in that pane. Display help text if you cannot list your wizard's steps--even its main steps. Display a list of steps if all your wizard's instructions are short and simple enough to fit in the right pane.
If possible, use the left pane to list the steps that users need to follow in your wizard. Such a list helps users orient themselves within a wizard. Each step in the list can correspond to one or more wizard pages. Figure 80 shows a list of steps in the left pane of a typical page.
Figure 80 List of Steps in the Left Pane of a Wizard Page
In a wizard's left pane, display a list of steps for using the wizard.
If the list of steps in a wizard's left pane is longer than the wizard page,
display the list using a scroll pane with a vertical scrollbar. If resizing the
wizard narrows the left pane, re-wrap the text of the list items to fit the
narrowed pane. Do not provide a horizontal scrollbar.
If the left pane of a wizard page displays a list of steps in a scroll pane,
make sure that each new step is visible in that list as users proceed through the
wizard. When changing the view in the scroll pane, position the current step as
the second one in the view, while displaying as many of the later steps as
possible.
When displaying a list of steps in a wizard's left pane, highlight the
current step, as shown in Figure 80. If a user navigates to a page in a different
step, highlight the new current step and remove the highlight from the old one.
When highlighting the current step in a wizard's left pane, use the color
Primary 3, as shown in Figure 80 and described in Chapter 4 of Java Look and
Feel Design Guidelines, 2d ed. The highlight should be a rectangle as tall as
the step and as wide as the left pane, minus 10 pixels on the left and on the
right. (This highlight differs from the normal one for text in the Java look and
feel.)
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 page's accessible-description property. (For information about
accessible descriptions, see Chapter 3 of Java Look and Feel Design
Guidelines, 2d ed.)
In some wizards, the sequence of possible steps splits into two or more branches--for example, branches for typical and custom installations of software. Users of different branches need to perform different steps, which might not be consecutive in the sequence of possible steps. Displaying a list of steps in the left pane of such wizards requires careful planning.
If your wizard has branches, consider using one of the following techniques when designing the left pane:
If none of these techniques would work for your wizard, omit the list of the steps from the left pane. In its place, display help text. (For more information, see Left Pane With Help Text.)
Number the steps in the left pane of a wizard only if the steps are
consecutive.
If your wizard's instructions do not fit in the right pane, or if users might need assistance entering requested data, you can display help text in the left pane, as shown in Figure 81.
Figure 81 Left Pane With Help Text About a Field in the Right Pane
In the left pane of Figure 81, the help text describes the object that has keyboard focus in the right pane. If a user moves keyboard focus to a different object, the left pane displays help text about the object to which focus was moved.
Help text can be the sole contents of the left pane in wizards that do not list steps there.
If you provide help text for any of your application's objects, provide
help text for all the application's objects. Provide help on all your wizard's
pages or on none.
If a wizard's left pane displays help text, ensure that the help text
describes a single object--the object that has keyboard focus in the right pane.
If resizing a wizard narrows its left pane, re-wrap any help text to fit the
narrowed pane. Do not provide a horizontal scrollbar.
In wizards where the left pane displays both a list of steps and help text, you can use a pane having two tabs at the bottom, as shown in Figure 82.
Figure 82 Left Pane With Tabs for Steps and Help
When using the left pane to display both a list of steps and help text,
follow the guidelines listed in Left Pane With a List of Steps and in Left Pane
With Help Text.
To display a list of steps and help text in the left pane of a wizard, use a
pane having two tabs at the bottom. Label the tabs Steps and Help. Display the
Steps tab unless a user clicks the Help tab.
Ensure that, if a user clicks a tab in a wizard's left pane, the tab's
information is displayed until the user clicks the pane's other tab.
If a user clicks the Help tab of a wizard's left pane, display help text
about the object that has (or most recently had) keyboard focus in the right
pane.
Typically, the most useful information to display in a wizard's left pane is a list of steps or help text. Display a graphic in the left pane only if your wizard's steps are too complex to summarize in that pane and if there is no suitable help text. Figure 83 shows a graphic in the left pane of a page.
Figure 83 Graphic in Left Pane of a Wizard Page
Ideally, graphics in the left pane relate to a user's task and to the current step of that task. For example, in a wizard that creates a complex object in several steps, the left pane might reflect a user's progress with a different graphic on each page. In a wizard that creates charts, the left pane might show an example pie chart if the user chooses an option labeled Pie Chart.
Do not resize the graphic if the left pane or the wizard is resized. Instead adjust the graphic as described in the following guidelines.
Ensure that the dimensions of a graphic in a wizard's left pane are equal
to the initial dimensions of that pane. Place the top of the graphic directly next
to the wizard's title bar.
Do not resize the graphic in a wizard's left pane if a user resizes that
pane or the wizard. If the left pane becomes longer, fill its additional space
with the background color of the graphic. If the wizard becomes narrower,
reduce the width of the left and right panes proportionally, clipping the graphic
as needed. If the wizard becomes wider, allocate the additional width to the
right pane, after the left pane reaches its default size.
If the left pane of your wizard's pages displays a graphic, provide
information about the wizard's current step by changing the graphic on each
page, if possible.
| Java Look and Feel Design Guidelines: Advanced Topics.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved. |
|
