Java TM Look and Feel Design Guidelines: Advanced Topics > Part II: Special Topics > 7: Wizards > Designing the Left Pane   Previous Next Contents/Index/Search


 

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.

Deciding What to Display in the Left Pane

A wizard's left pane can display any one of the following items:

  • A list of steps for using the wizard
  • Help text about the object that has keyboard focus in the right pane
  • Both a list of steps and help text
  • A graphic (only if more-useful information is unavailable)

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.

Left Pane With a List of Steps

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.)

Left Pane With Steps That Branch or Loop

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:

  • Display only your wizard's main steps, with each step corresponding to several pages if necessary. For example, combine several pages into a single step if you create several items of the same type.
  • When a branch of your wizard skips several steps, move to the new current step and highlight that step in the list of steps
  • Change the list of steps dynamically, so that after a user chooses a step in a particular branch, only steps of that branch are displayed.

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.

Left Pane With Help Text

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.

Left Pane With Steps and Help Text

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.

Left Pane With a Graphic

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.
Previous Next Contents/Index/Search
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner
Java 8 banner (182)