|Java TM 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.
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
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 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.
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
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.
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 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.