How to Avoid Wide Tables
Two-line and Multiple-line Tables | Detail View | Entry on Single Screens | Single Screen Layout | Turn Index On/Off
Avoid wide tables, because horizontal scrolling is not acceptable in most tasks and for most users. Below is a list of alternatives to wide tables, which gives recommendations for their usage. However, the best solution is still to restrict the number of displayed data - in this case columns - to the really needed ones.
Two-line and Multiple-line Tables
Wide Table of Items (Many Fields) That Does not Fit the Screen or Area
Two-line tables as well as multiple-line tables are one solution to overcome the problem of wide tables. However, try to avoid them, because information is hard to find in these types of tables. Moreover, with multiple-line tables fewer "logical" lines (which often also means "items") can be displayed.
There are special cases, where multiple-line tables make sense:
- A table contains fields to be compared which can be placed below each other
- There are long text fields that can be placed below other data
- Other solutions are much slower or are not as transparent as multiple-line tables (because several items have to be looked at at once)
- There is some sort of hierarchical structure in the table that can be visualized by multiple-line tables (usually with variable number of lines)
If you use multiple-line tables, keep the following in mind:
- Try to keep flight lines by placing similar fields below each other
- Implement a striped pattern, or horizontal grid lines for separating "logical lines"; this aids horizontal orientation as well as distinguishing logical lines
Recommendation
This solution is more appropriate for professional users.
Detail View
Very Wide Table of Items (Many Fields)
Use a separate detail view (on separate page/screen, or on area on the same page/screen), if users rarely want to see more fields than are displayed in the main table. Use a hyperlink in the item number column to branch to the detail table.
Detail view: Present the detail view either as "form" (fields, preferred), or as small tables with appropriate headers. Provide navigation between items so that users need not return to the main table, if they want to look at the details of consecutive items.
Recommendation
This solution is appropriate for any users. The primary view should capture the important aspects of the table items so that users rarely need to use the detail view. This solution is not appropriate, if users often have to compare details, because these can only be inspected one after the other.
Entry on Single Screens
Very Wide Table of Items (Many Fields)
Use single screens for each item, whenever users have to enter many values per item (use forms or small tables).
There may be a table of items on an extra page that can be used to access the items. If there is space enough to place an index to the left hand side of the single screen displaying the item fields, use an index to access the items.
If there is no index, provide navigation between items so that users need not return to the main table (if there is one).
Recommendation
This solution is appropriate for any users, but proficient users might want more efficient designs.
Overview Table and Very Wide Table of Items (Many Fields)
If there is a hierarchical structure, like an overview table of requisitions, where each requisition itself is a table of items, and each item has many fields, use a hierarchical index layout, if possible.
Recommendation
This solution is more appropriate for proficient users.
Single Screen Layout
Overview Table and Wide Table of Items
If there is an overview table and item tables that do not fit the screen together, use separate screens for the overview and the item table. This is appropriate, if users remain longer on one screen for processing the data and need not scan data fast. For instance, if users rarely switch between requisitions and stay long within the table of items.
Recommendation
This solution is more appropriate for beginners, because it is simple and easy to understand.
Turn Index On/Off
Overview Table and Wide Table of Items
If there is an overview table and item tables that do not fit the screen together, you can also use an index layout where users can turn the index on or off, in order to display more table columns. This layout can be used in the same situations as the single screen layout. It introduces more complexity to users, but also provides a better overview and faster data scanning.
Recommendation
This solution is more appropriate for proficient users, because the on-off mechanism introduces more complexity into the interface.
Source: SAP Interaction Design Guide for Internet Application Components