fc

Grids

In this section we focus on Grids (otherwise known as tables), the various formats they take, the reasons for using those formats, and Guidelines for using Grids effectively.

What is a Grid?

Grids are tables consisting of rows and columns, with headers and/or tabs. Grids can take on a number of different formats. For instance, they can be scrollable or non-scrollable, and editable or read-only. Grids allow for the selection of single or multiple rows. A radio button is used for selecting a single row, and checkboxes are used for selecting multiple rows in grids.

back to top

Benefits of Using a Grid

  • Enables users to see multiple rows of data at once.
  • Allows users to compare values across rows and columns.
  • Displays essential information and enables users to view details when necessary.
  • Grids can be customized. For example, columns can be rearranged, hidden, or frozen.

back to top

Scrollable Versus Non-scrollable Grids

In simple terms, scrollable grids allow for viewing multiple rows beyond the size of the visible grid boundaries. Scrollable grids are the default and used in all products. A scrollbar appears on the right hand side of the grid, but developers can disable the scrollbar to make the grid non-scrollable. A scrollable grid has scrollbars to allow the user to scroll vertically and horizontally, although horizontal scrolling should be used sparingly. A non-scrollable grid does not have scrollbars.

The following figure shows the use of a scrollbar on the right-hand side of the grid boundaries:

Non-Scrollable Grids are used when the information presented fits easily into the grid boundaries without appearing crowded or otherwise cramped. Instead of a scrollbar, non-scrollable grids use First and Last and/or Previous and Next scroll buttons as shown in Figure 2.

NOTE: Horizontal scrolling in a grid should be avoided whenever possible. This is discussed in more detail in the Grid Tabs section of this document.

The following figure shows a non-scrollable grid which uses scroll buttons.

Figure 3 and Figure 4 show the Grid Properties.

back to top

Read-Only Grids

The purpose of read-only grids is to display a list of objects for users to view or to drill down to detail pages. Read-only grids may also allow actions on data using functional icons. Read-only grids display read-only data that cannot be changed in the grid.

A read-only grid may support actions on the grid data in two ways. The first is through row selection and use of push buttons as shown in Figure 7.

The other way that a read-only grid can support actions on the grid is by placing functional icons in one or more columns as shown in Figure 8.

A read-only grid allows users to manipulate the display of the grid contents, for example with Sort or Reorder actions to drill down to details, or to perform actions on drilldown pages. Sorting is available in all types of grids as long as values can be sorted. However, it is not possible to sort by icons within the grids. This is shown in Figure 9.

a) Grid prior to clicking on the column header to sort

b) Grid after clicking on the Applicant ID column header to sort

back to top

Editable Grids

The purpose of an editable grid is to display a list of objects for users to modify directly within grid cells, without requiring the user to navigate away from the page.

  • Editable grids display editable widgets and other input fields directly in grid cells.
  • Editable grids follow the same informational design as read-only grids.
  • Editable grids may include menus, links, functional icons, and buttons that can be used to perform actions on data, such as Create and Delete.
  • A page may contain multiple editable grids or a mix of editable and read-only grids.

back to top

Grid Tabs

Grid Tabs are used to logically separate groupings of grid columns. When creating grid tabs, use the following guidelines:

  • Grid tabs should be avoided in self-service tasks because of the associated performance issue. Every click on a grid tab causes a trip to the application server.
  • Include a grid tab label that accurately describes the contents of the grid tab.
  • Use grid tabs to control the width of grids.
  • Avoid using grid tabs on Input/Update grids. Tabbed grids are difficult for users to traverse. If you must use a tabbed grid, place all critical information on the first tab and supplemental information (for example information modified 10% of the time) on a secondary tab. This will minimize the number of times that users must navigate to other tabs.
  • Grid tabs may be used for inquiry or read-only grids. Always ensure there are not too many tabs that wrap or force the grid to expand at runtime.
  • As an alternative to using grid tabs, add hyperlinks to the grid to traverse to a detail page (secondary page).
  • Use meaningful labels on grid tabs. Do not use vague labels such as Miscellaneous or Other.

Horizontal Scrolling

As mentioned earlier in this document, horizontal scrolling in grids should be avoided whenever possible. Below are two methods for avoiding horizontal scrolling.

Method 1: Limit Number of Grid Columns. Instead, use a secondary page to display row details. When using this method, use the following guidelines:

  • Include as many helpful columns in a grid that can fit on the page without causing horizontal scrolling.
  • When the number of helpful columns has to be limited, keep the columns that are most important and most frequently used.
  • Provide additional information for each row on a secondary page. On this secondary page, repeat any information that was included on the grid.
  • To access the details on a row, include a key value in the first column that is intuitive to users and unique to the row. The value in this column should be a link that takes users to the second page containing the detail information for that row.

Method 2: Use Grid Tabs

  • Use grid tabs to logically separate groupings of grid columns.
  • Include a grid tab label that accurately describes the contents of the grid tab.
  • Use grid tabs to control the width of grids.
  • Avoid using grid tabs on Input/Update grids. Tabbed grids are difficult for users to traverse. If you must use a tabbed grid, place all critical information on the first tab and supplemental information (for example information modified 10% of the time) on a secondary tab. This will minimize the number of times that users must navigate to other tabs.
  • As an alternative to using grid tabs, use hyperlinks in the grid to traverse to a detail page (secondary page).

back to top

Guidelines for Using Grids

  • Horizontal scrolling of grids should be avoided wherever possible. Instead use tabs for organizing columns into tab categories. (See the Grid Tabs section of this document.)
  • Try to minimize the number of columns in a grid by displaying only the most important columns.
  • Place the most important content in the first column.
  • If including an actions menu in the grid place the actions menu in the second column. However, if you have radio buttons or check boxes in the first column used for row selections, place the actions menu in the third column. An example of this can be seen in Figure 6.
  • Use alternate grid row highlighting when appropriate to improve the readability of grids.
  • Editable grids can contain widgets (such as text field, dropdown lists), icons, links, and buttons as well as read-only data.
  • Read-only grids can contain read-only data, icons, and links in grid cells.
  • All grids should have a title that qualifies the information displayed in the grid.

back to top