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


 

Designing the Right Pane

The heart of a wizard page is its right pane, which can contain different kinds of information, depending on the type of the page. For example, on user-input pages, the right pane contains user-input areas and instructions for using them. On other pages, the right pane can display information such as an overview, operational feedback, or a summary of the wizard's results. Designing the right pane involves creating appropriate information and then laying it out correctly.

The guidelines in this section are mainly for user-input pages--the most important pages of a wizard. However, the topic Subtitles applies to all wizard pages. For information about the right pane in progress pages, see Providing Operational Feedback in Wizards.

As shown in Figure 78, the right pane of user-input pages can contain the following parts:

  • Subtitle
  • Main instructions
  • User-input area
  • Additional instructions
  • Navigation instructions
Figure 78   Right Pane of a Typical User-Input Page

 

The rest of this section introduces each of these parts and describes how to design them.

Subtitles

In wizard pages, the right pane must have a subtitle that uniquely identifies the page and its purpose. Figure 78 shows the subtitle in a typical page.

 Ensure that the subtitle in a wizard's right pane identifies only the page displayed, not the entire wizard.

 Make the subtitle of each wizard page identical to the name of the wizard step to which the page belongs. (Typically, that name is listed in the left pane.) If the step has two or more pages, make each page's subtitle distinct by adding a page count--for example, (1 of 3)--or the suffix (Continued). Add a page count if you know the number of pages in the step.

 Place the subtitle of a wizard page at the top of the page's right pane. Use headline capitalization and left justification. (For a description of headline capitalization, see Chapter 4 of Java Look and Feel Design Guidelines , 2d ed.)

 Underline the subtitle of a wizard page with a rule whose width is one pixel and whose length equals that of the right pane, minus 12 pixels on the left and 6 pixels on the right. Display the rule in the color Secondary 2, as described in Chapter 4 of Java Look and Feel Design Guidelines , 2d ed.

 In a wizard's right pane, place a step number before the subtitle if the left pane contains no list of steps. Do not place a step number before the subtitle if the left pane contains a list of steps.

Main Instructions

Each user-input page displays main instructions that help users understand which information the page is requesting. Figure 78 shows a user-input page with main instructions.

On pages having only one user-input field, the main instructions can also serve as the label of that input field. On pages having two or more user-input fields, the main instructions must relate to all the fields. Each field must have its own label.

When writing the main instructions of a page, use imperative sentences--for example, "Enter your password." By using imperative sentences, which tell users what to do, you ensure that your wizard's requests for input are clear and concise.

 Place the main instructions of a wizard page directly below the underlined subtitle in the page's right pane, as shown in Figure 78.

 Write wizard instructions as imperative sentences.

 In wizard instructions, minimize the use of terms used solely for politeness--for example, "please" and "thank you."

User-Input Areas

Each user-input page has one or more user-input areas, as shown in Figure 78. Each user-input area consists of a label and a control (such as a text box) that enables users to enter an input item (such as a user name).

Display a page's user-input areas directly below its main instructions. If a page has two or more user-input areas, they should request closely related input items--for example, a user's name and address.

If possible, provide a default value for each requested input item, such as a text entry or a radio-button setting. Verify that this value is valid and consistent with the user's choices so far. Ideally, the default value is the one that a typical user would choose.

Provide no default value for a requested input item if either:

  • That item is optional.
  • No reasonable default value exists.

A data item is optional if a user can omit it without the wizard's supplying a default value.

No reasonable default exists if providing a default would confuse users. A user name field, for example, has no reasonable default value, because each user name must be unique. Instead of a default user name, you could provide additional instructions explaining the required format for the user name.

 In a wizard's user-input pages, place the user-input areas directly below the main instructions.

 In wizards, place the word "Optional" to the right of each user-input item that has no default value and that requires no input value from users.

 In wizards, provide a default value for each user-input value, unless no reasonable default value exists. If you cannot supply a reasonable default value for an item, ensure that the page's additional instructions explain the valid formats for that item. In addition, request that input item early in the wizard. (Thus, you enable users to complete the wizard faster by skipping pages that have default values for all user-input fields. For more information about enabling users to skip pages, see the description of the Last button in Designing the Bottom Pane.)

 In wizard pages, ensure that the Next button is available only after users enter all the data required on that page.

 Enable users to cut, copy, and paste between the wizard and text files, and between the wizard and other opened applications. Use the keyboard shortcuts specified in Appendix A of Java Look and Feel Design Guidelines , 2d ed.

 In wizard pages, ensure that a user's choices and changes remain visible and in effect until the user cancels them. Users can cancel choices and changes explicitly or by making subsequent conflicting choices on pages visited later. Ensure that navigating back and forth through the wizard does not cancel the user's choices and changes.

Additional Instructions

Optionally, the right pane of a page can have additional instructions below its user-input areas. These additional instructions can serve one or more of following purposes:

  • To describe the correct format for entering input items
  • To explain the meaning or consequences of choices that users make in the user-input area
  • To explain command buttons or other controls displayed in the right pane

Figure 79 shows a page whose right pane contains additional instructions.

Figure 79   Additional Instructions in Wizard Page

 

When laying out additional instructions, place them below the user-input area, so that experienced users can skip them.

In the additional instructions, you can use boldface type for text that you want to emphasize, but do not overuse it. If you need to provide additional text about an object displayed in the right pane, you can provide that text as help in your page's left pane.

 If a wizard page needs additional instructions, place them below the user-input area of the right pane.

 When describing how to perform an action in a wizard, state the outcome before stating the means to achieve it--for example, "To stop the print job, click Stop."

 If a wizard's additional instructions describe command buttons, use the following wording: "To perform-this-action , click button-name ." For example, the instructions might be "To display more names, click More." Do not enclose the button name in quotation marks.

 In the additional instructions of a wizard page, warn users if completing the page will start actions that the wizard cannot completely undo.

Navigation Instructions

The bottom pane of a wizard contains navigation buttons for moving between pages and performing other general actions. If your wizard's users are unfamiliar with such buttons, you can place navigation instructions in the right pane of your wizard, as shown in Figure 78. Do not provide navigation instructions if your wizard is intended only for experienced computer users.

 If a wizard will be used mainly by computer novices, provide instructions explaining each of the wizard's navigation buttons. Place these instructions only on the first page where each navigation button is displayed and available.

 When providing navigation instructions for a wizard, place them at the bottom of the right pane, directly above the wizard's navigation buttons, as shown in Figure 78.

 Use the following wording for instructions about navigation buttons: To perform-this-action , click button-name . Do not enclose the button name in quotation marks.


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)