java.sun.com > Guidelines Home Page > Java Look and Feel Design Guidelines > Part II: Fundamental Java Application Design > 4: Visual Design > Layout and Visual Alignment

Layout and Visual Alignment

Give careful consideration to the layout of components in your windows and dialog boxes. A clear and consistent layout streamlines the way users move through an application and helps them utilize its features efficiently. The best designs are aesthetically pleasing and easy to understand. They organize components in the direction in which people read them, and they group together logically related components. When you lay out your components, remember that users might use the mouse, keyboard, or assistive technologies to navigate through them.

The following sections specify the layout of text and components in your applications, including between-component spacing.

 Use a logical order when you lay out your components (for instance, place the most important elements within a dialog box first in reading order).

 Use layout managers to allow for internationalized titles and labels in panels that use the JFC components.

Design Grids

The most effective method for laying out user interface elements is to create a design grid that uses blank space to set apart logically related sets of components. The rows and columns in a grid divide the available space into areas that can help you to arrange and align components in a pleasing layout. Grids make it easy for users to see the logical sequence of tasks and to understand the relationships between sets of components.

You can develop your grid with a pencil and paper, with a software tool, or even with a piece of graph paper. Once you have established the basic spatial relationships of your components, implement the design with a layout manager.

Developing a grid is an ongoing process. Once you have figured out which components you need, their relationships, and the available space, work with the components to discover the most effective use of space and alignment. You might need to readjust your grid again and again, trying different arrangements until you find one that works well and has a polished appearance.

A grid can also help you to determine how much space to allocate to a given set of components, for instance, choosers and dialog boxes, across the application. If you can define a grid that will work for a number of layouts, your application will have a more consistent appearance.

 Design grids should not be confused with the AWT Grid Layout Manager.

Layout and Spacing of a Simple Dialog Box

This section illustrates how to use a grid to lay out a find dialog box.

1. Determine the functional requirements for your dialog box and the type and importance of the dialog box components.

2. Create 12-pixel margins between the border of the dialog box and its components. For example, in a find dialog box, you might need two command buttons, an editable text field and associated label, a set of checkboxes, and a set of radio buttons.

3. Arrange the command button row and separate it vertically from the rest of the components.

4. Use the number and width of the rest of the components to decide the number of columns and the column width for your design grid. (You might try several possibilities before you find the best horizontal separation.)

5. Add the components to the dialog box in logical sequence. The components that you determined were most important in Step 1 should appear first in reading order. Add rows of blank space between the component groups.

6. Align the related components using the columns as a guide.

The following illustration shows the recommended 12-pixel margins around a dialog box.

 Include 12 pixels between the top and left borders of a dialog box and its components.

The following figure shows the recommended spacing between the borders of the dialog box and the command button row in the dialog box. It also illustrates the vertical separation of the command buttons from the other components.

 Include 11 pixels between the bottom and right borders of a dialog box and its command buttons. (To the eye, the 11-pixel spacing appears to be 12 pixels because the white borders on the lower and right edges of the button components are not visually significant.)

 In dialog boxes, right-align command buttons along the bottom margin.

 In dialog boxes, place 17 pixels of vertical space between the command button row and the other components.

You can use the number and width of components and their associated labels to determine the number of columns in your grid. At the beginning of the design process, vertical divisions are more difficult to set because they depend on the depth and grouping of component sets, which are not yet determined. In the following illustration, five columns have been created in the grid to accommodate the editable text field and its label, the checkbox and radio button sets, and the command buttons. Note the 11-pixel interval between the lines that delineate the columns.

 Use the number and width of dialog box components and labels to determine the number of columns in the design grid.

In Figure 29, the most important option--the text field for the search string--has been placed first. Component groups are set off in multiples of 6 pixels minus one. For instance, a row of 11 pixels of empty space separates the editable text box and the checkbox and radio button sets. Spacing between components (and groups of components) follows the Java look and feel standards. For details, see Between-Component Spacing Guidelines.

Related options (for instance, the Match Case and Whole Word checkboxes) are aligned along a column guide. Additional options (for instance, the Start at Top and Wrap Around radio buttons) have been aligned with a secondary column guide.

 When designing a dialog box, place the most important options, or those you expect users to complete first, prior to others (in reading order).

 For spacing between rows and columns of dialog box components, use multiples of 6 pixels minus 1, to allow for the flush 3D border.

 Align related dialog box components using a design grid column.

See Between-Component Spacing Guidelines for details.

Text Layout

Text is an important design element in your layouts. The way you align and lay out text is vital to the appearance and ease of use of your application. The most significant layout issues with respect to text are label placement and alignment.

Label Placement

You indicate a label's association with a component when you specify its relative position. In the following figure, the label appears before and at the top of the list in reading order.

 In general, place labels before the component to which they refer, in reading order for the current locale. For instance, in the U.S. locale, place labels above or to the left of the component. Positioning to the left is preferable, since it allows for separation of text and components into discrete columns. This practice helps users read and understand the options.

Label Alignment and Spacing

Between components, alignment of multiple labels becomes an issue. Aligning labels to a left margin can make them easier to scan and read. It also helps to give visual structure to a block of components, particularly if there is no immediate border (such as a window frame) surrounding them. If labels vary greatly in length, the use of right alignment can make it easier to determine the associated component; however, this practice also introduces large areas of negative space, which can be unattractive. The use of concise wording in labels can help to alleviate such difficulties.

 Insert 12 pixels between the trailing edge of a label and any associated components. Insert 12 pixels between the trailing edge of a label and the component it describes when labels are right-aligned. When labels are left-aligned, insert 12 pixels between the trailing edge of the longest label and its associated component.

 Align labels with the top of associated components.

 Since the length and height of translated text varies, use layout managers to allow for differences in labels.

The following figure shows the recommended spacing of labels in relationship to their associated components.

 The JLabel.setLabelFor() method should always be used to specify which component a label is associated with. This practice facilitates the setting of mnemonics and accessible names.

For more information on capitalization, see Text in the Interface. For more information on labels, see Labels.

Between-Component Spacing Guidelines

Use multiples of 6 pixels for perceived spacing between components. If the measurement involves a component edge with a white border, subtract 1 pixel to arrive at the actual measurement between components (because the white border on available components is less visually significant than the dark border). In these cases, you should specify the actual measurement as 1 pixel less--that is, 5 pixels between components within a group and 11 pixels between groups of components.

In the following figure, a perceived 6-pixel vertical space is actually 5 pixels between checkbox components. The figure also shows how the perceived spacing between unavailable objects is preserved. Note that the dimensions of unavailable components are the same as those of available objects, although the white border of available objects is replaced by an invisible 1-pixel border on the bottom and right side of unavailable objects.

 Insert 5 pixels (6 minus 1) between closely related items such as grouped checkboxes. Insert 11 pixels (12 minus 1) for greater separation between sets of components (such as between a group of radio buttons and a group of checkboxes). Insert 12 pixels between items that don't have the flush 3D border highlight (for instance, text labels and titled borders).

For guidelines on the spacing of specific JFC components with the Java look and feel, see the following section.

Spacing Guidelines for Specific JFC Components

This section specifies the horizontal and vertical spacing for individual instances and groups of:

• Toolbar buttons
• Command buttons
• Toggle buttons
• Checkboxes
• Radio buttons

 Struts and glue in the javax.swing.Box component can be used to adjust component spacing.

Toolbar Button Spacing

This section contains the vertical and horizontal spacing measurements for toolbar buttons. Figure 34 shows the spacing between individual toolbar buttons and groups of toolbar buttons.

 Space individual toolbar buttons 2 pixels apart. Space groups of toolbar buttons 11 pixels apart.

 Include 3 pixels of space above and below toolbar buttons. This actually means 2 pixels of space below the toolbar because of the white border on the buttons.

 When you use mouse-over feedback, space individual toolbar buttons zero pixels apart within a group. Space groups of toolbar buttons 11 pixels apart.

 The inset (that is, the padding between the button graphic and the button border) on toolbar buttons should be zero.

For details on toolbars, see Toolbars.

Toggle Button Spacing

Spacing recommendations differ for independent and exclusive toggle buttons in toolbars and outside of toolbars.

 When toggle buttons are independent (like checkboxes) and used outside a toolbar, separate them with 5 pixels. Within a toolbar, separate independent toggle buttons by 2 pixels.

 When toggle buttons are exclusive (that is, they form a radio button set), separate them with 2 pixels. This rule applies whether the toggle buttons appear in a toolbar or elsewhere in the interface.

For details on independent and exclusive toggle buttons, see Toggle Buttons.

Command Button Spacing and Padding

For a consistent appearance, follow the guidelines described in this section to create space within and between command buttons. The following figure shows button text (Help) centered in a command button.

 Space buttons in a group 5 pixels apart. (Because of the white border on the right side of a button, the apparent spacing will be 6 pixels.)

 Center the text within buttons.

 Since the length and height of translated text varies, use layout managers to allow for differences in button text.

The blank space between the button text and the button border is referred to as command button padding. Often command buttons appear in groups within a dialog box or an applet. In such a case, the button in the group with the widest text determines the inner padding, as shown in Figure 38. Here the Cancel button has the widest text. The perceived padding is 12 pixels on either side of the button text. The other buttons in the group (OK and Help) have the same width as the Cancel button. A space of 17 pixels should be left above command button rows in dialog boxes (see Figure 29).

 Determine which button has the widest button text and insert 12 pixels of padding on either side of the text. Make all the remaining buttons in the group the same size as the button with the longest text.

 Use the default height for whatever font size you select for your command buttons.

 Make all command buttons in a group (including buttons that contain graphics) the same width and height.

 Since the button with the longest text might vary from locale to locale, enable any of the command buttons to determine the width of all the other buttons.

For details on command buttons, see Command Buttons.

Checkbox and Radio Button Layout and Spacing

This section provides layout and spacing guidelines for checkbox and radio button components.

 Align the leading of edge of checkboxes with that of other components.

As shown in the following figure, the height of the checkbox square doesn't change in an unavailable checkbox even though the white highlight border is not drawn. Although the checkbox is the same size, the last row and column of pixels on the bottom and right are the same color as the background canvas. The apparent spacing is 6 pixels between components; the actual spacing is 5 pixels.

 Space checkboxes in a group 5 pixels apart.

 Use a layout manager to achieve consistent spacing in checkbox button groups.

For details on checkboxes, see Checkboxes.

The height of the radio button is 12 pixels, not counting the white highlight border. Unavailable radio buttons do not have white borders. Although the unavailable radio button is 12 pixels high, the last row and column of pixels on the bottom and right are the same color as the background canvas. As shown in the preceding figure, the apparent spacing is 6 pixels between components; the actual spacing is 5 pixels.

 Space radio buttons in a group 5 pixels apart.

 Use the appropriate layout manager to achieve consistent spacing in radio button groups.

For more on radio buttons, see Radio Buttons.

Titled Borders for Panels

Sometimes you can group components using simple spacing and alignment, as described in Layout and Spacing of a Simple Dialog Box. Other times, particularly when you want to display multiple groupings of components, you might want to place the related sets into a labeled box. The JFC enables you to specify a titled border for panels (and many other components), which serves this purpose.

 Since titled borders take up considerable space, do not use them to supply titles for individual components; use labels instead.

 Use a titled border in a panel to group two or more sets of related components, but do not draw titled borders around a single set of checkboxes or radio buttons. Use labels instead.

 Use titled borders sparingly: they are best when you must emphasize one group of components or separate one group of components from other components in the same window. Do not use multiple rows and columns of titled borders; they can be more confusing than simply grouping the elements with a design grid.

 Never nest titled borders--that is, do not insert one titled border inside another. It becomes difficult to see the organizational structure of the panel and too many lines cause distracting optical effects.

 Insert 12 pixels between the edges of the panel and the titled border. Insert 11 pixels between the top of the title and the component above the titled border. Insert 12 pixels between the bottom of the title and the top of the first label in the panel. Insert 11 pixels between component groups and between the bottom of the last component and the lower border.

Java Look and Feel Design Guidelines, second edition. Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.