| JavaTM Look and Feel Design Guidelines: Advanced Topics > Part II: Special Topics > 5: Idioms > Idioms for Arranging a Table | |
You can enhance the usability of application-provided tables in your application by consistently using the same idioms. This section describes table idioms for:
You can increase the visual appeal and readability of your application's tables by using appropriate text formats, background colors, and line settings. This section provides guidelines for defining the appearance of tables.
Figure 49 shows a table that follows the guidelines for appearance. Specific guidelines on table sorting, primary-sort columns, sort indicators, and row striping are provided later in this section.
Figure 49 Table Conforming to Guidelines for Appearance
Align the contents of table cells based on their information type. For
cells containing numeric values (not character strings with numerals), use
decimal alignment. For cells containing long text, use left alignment. For cells
containing graphics or short words (like keywords, such as on and off), use
center alignment.
Use headline capitalization in column headers of tables. (For a
description of headline capitalization, see Chapter 4 of Java Look and Feel
Design Guidelines, 2d ed.)
Center titles in the column headers of tables, except brief titles of wide
text columns that are mostly blank. Center or left-justify brief titles.
In column headers of tables, include the column's unit of measurement as
part of the title, and enclose the unit of measurement in parentheses--for
example, CPU Usage(%).
In tables, make each column wide enough by default to display the
column's title and the contents of typical cells without clipping. In columns
where a typical cell's contents are unusually long (for example, a file's full
pathname), make the default column width sufficient to display the column's
title and the main part of a typical cell's contents--for example, just the
file name, clipping the rest of the full pathname. Optionally, if a column header
is much longer than the typical contents of the column's cells, you can divide
the column header into two or more lines.
Place at least three pixels of blank space between a table cell's contents
and the cell's left edge. Likewise, place at least three pixels of blank space
between the cell's contents and the cell's right edge.
Your application should provide the code for inserting blank space
between a table cell's contents and the cell's edges.
You can often make tables easier to read by using grid lines or row striping. Grid lines are horizontal or vertical lines that separate a table's rows or columns. Row striping is the technique of using one background color for a table's even-numbered rows and a different background color for its odd-numbered rows.
Not all tables should have grid lines or row striping. For example, most tables with editable fields should not have row striping. Short, noneditable tables listing file names or properties rarely need grid lines or row striping.
The following guidelines help you decide whether to use grid lines, row striping, or neither.
Do not use grid lines and row striping in the same table.
Use horizontal and vertical grid lines in cell-selection tables.
Use horizontal and vertical grid lines in internally editable row-selection
tables.
Do not use grid lines in row-selection tables that are noneditable or are
externally editable. Instead, use row striping if the table has approximately six
columns or more. If the table has fewer columns, use neither grid lines nor row
striping.
If a table has grid lines, display them in the color Secondary 2, as
described in Chapter 4 of Java Look and Feel Design Guidelines, 2d ed.
In tables without grid lines, ensure that there is no space between cells
where grid lines would otherwise be.
When striping a table, use light gray (RGB 230-230-230 and
Hex #E6E6E6) as the background color of the striped rows (the rows whose
background color will not be white).
When striping a table row, stripe all its components. For example, ensure
that the row's combo boxes (if any) have the same background color as the rest
of the row.
In tables with cells that contain combo boxes, you can sometime enhance table appearance by controlling when drop-down arrows are displayed. By default, the drop-down arrow of each combo box is always displayed, as shown in Figure 49. Although this default behavior is preferred in most tables, displaying all the drop-down arrows continuously can create clutter in tables with many combo boxes. To avoid clutter, display the drop-down arrow of each combo box only while that box is selected.
For information about where to place table commands, see the next section. For more information on defining the appearance of tables, see Chapter 12 of Java Look and Feel Design Guidelines, 2d ed.
If most of a table's cells contain combo boxes, display the drop-down
arrow of each combo box only while that box is selected.
A table can have associated commands--such as New Row and Move Row Up--that enable users to manipulate the table. Typically, the correct way to represent such commands is as a command button row located either:
Figure 50 shows a table with command buttons directly below it.
Figure 50 Table With Command Buttons Below
Figure 51 shows a table with command buttons directly on the right.
Figure 51 Table With Command Buttons on the Right
Sometimes, representing table commands as buttons is not practical because either:
Under such conditions, you can represent a table's commands as menu items in the window's Edit menu, if there is one. Figure 52 shows table commands in an Edit menu.
Figure 52 Table Commands in a Window's Edit Menu
If the Edit menu is too long to include the table commands, you can place them instead in a Table menu in the window.
Figure 53 Table Commands in a Window's Table Menu
When providing commands for manipulating a table, place them in a
command button row directly below the table or directly to the right of it. If
you cannot, place the commands in the window's Edit menu or Table menu.
If you place table commands in a menu, also place appropriate
table commands in the contextual menus for the table's rows and cells. In
addition, you can place table commands in a toolbar.
Users sometimes need to reorder a table's columns (by moving them left or right) or resize a table's columns (by changing their width). The following guidelines on column reordering and column resizing supplement those in Chapter 12 of Java Look and Feel Design Guidelines, 2d ed.
Enable users to reorder table columns.
If a user reorders a table's columns, use the new column order the next
time the user opens that table.
If users can reorder a table's columns, make each column's title unique
within the table.
Enable users to change the width of table columns.
If a user changes the widths of a table's columns, use the new widths the
next time the user opens that table.
When viewing a sorted table, users need to know by which columns the table is sorted. These columns are called sort keys. To indicate each of a table's sort keys, your application can display a sort indicator--a small triangular graphic in the column header. Figure 54 shows sort indicators in the columns of an email application.
Figure 54 Sort Indicators in the Columns of a Table
A sort indicator shows that a column is sorted and in which direction--ascending (for example, from A to Z) or descending (for example, from Z to A). An upward-pointing sort indicator indicates an ascending sort. A downward-pointing sort indicator indicates a descending sort.
A bold column header indicates the table's primary key, the main column by which the table is sorted.
You can make each column header a control with the following behavior:
For more information about row sorting, see Chapter 12 of Java Look and Feel Design Guidelines, 2d ed.
Enable users to sort tables that typically contain more items than can be
displayed at one time.
If a column currently determines a table's sort order, use bold
highlighting to display that column's header text. If anything invalidates the
sort order, omit the bold highlighting from the column header text. (The
column that currently determines a table's sort order is a user's most recently
sorted column or, if rows are sorted automatically, the primary-key column).
In sorted tables, place a sort indicator in each column by which the table
is sorted.
In columns with sort indicators, place the sort indicator directly after the
column's title.
Omit sort indicators from table columns that, though previously sorted,
are no longer sorted.
When sorting a table already sorted by a different column, perform a
stable sort. In a stable sort, previously sorted rows (if any) retain their
positions relative to one another, if they have identical values in the new sort
column.
Provide explicit, keyboard-accessible commands for sorting. Ensure that
each command operates on the column containing the selection. In tables
where users can select a range of cells, make commands for sorting unavailable
when the selection includes more than one cell.
When providing sort commands, put them in places consistent with
where you put your application's other commands--for example, on buttons, in
a toolbar, in a drop-down menu, or in a contextual menu. (For more
information, see Table Command Placement.)
Your application can provide tables that are automatically sorted each time users edit a row or add one. This feature, called automatic row sorting, offers users the convenience of knowing that a table's rows are always sorted.
When providing automatic row sorting, you can enable users to control which table columns are sort keys. In each table, you can enable users to request automatic sorting on a single column (1-column sorting) or on up to n columns (n-column sorting). Your application sets the value of n.
You can enable users to specify the sort columns by, for example, clicking column headers in the table. However, you must also provide a keyboard-accessible alternative. For n-column sorting, you can enable users to specify sort columns by opening a dialog box from a menu item or a button.
Tables with automatic row sorting should conform to all guidelines for row sorting and to the following guidelines for automatic row sorting.
Provide automatic row sorting in tables unless doing so would slow your
application's response--as when tables are too large to sort quickly.
Sort a row automatically only if keyboard focus is not in that row.
In tables with automatic row sorting, enable users to choose which
columns are used as sort keys.
| Java Look and Feel Design Guidelines: Advanced Topics.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved. |
|
