Greg's Head

Interfaces design is all about managing data input and output. Input is done through various forms. Output is done most often through tables of data. There are a number of basic things that can be done with a simple HTML or application data table to make the data easier to read and understand.

Table Basics

• The table should have a title telling users what the table is about. Don’t forget about this and don’t label the table with the non descriptive noun such as: “users” or “groups” try to use a label that tells users what they should do with the table of data… “Edit user permissions and create new accounts” or “Add and remove people from groups.” Whatever the table of data try to construct a simple title to explain the purpose of the table.
• Use clear and descriptive column headers, avoid acronyms. If you can’t avoid acronyms provide tooltips.
• Make the column headers sortable, on all tables and on all columns.
• When sorting by a column show an indication of what column is sorted. Use a triangle icon and point it in the direction of the sort. Make sure that users can visually tell the column can be sorted either by using a standard column look or by using a hover effect.
• Use horizontal lines or subtle alternating colors if you want to help people read across, use vertical lines or alternating colors if you want people to read down. Border=1 is almost always the wrong answer.
• If you have a detail page the hyperlink goes in the first column with the name of the item. Underline the hyperlink. Avoid hyperlinks in other columns as this can be confusing. Alternatively make the entire row one big hyperlink if appropriate.
• If the row can be deleted use a delete icon in the last column. Consider confirming the deletion if the deletion is hard or impossible to recover.
• Align the header and the text of a column to the left if it’s normal text. Align to the right if it’s a number. Use a fixed number of decimal places so your numbers line up vertically.
• If you’re displaying a date use the right date format based on the data you are using. Use as short a form as possible but no shorter. You don’t need to use UNIX timestamps for everything.
• Avoid scrolling the table along the horizontal.

Table Paging

• If your table has 100′s of results or more add the ability to page your results. (50-100 per page seems to work well)
• Consider virtualized scrolling if this is available. This is the ability to make the scrollbar larger and dynamically fetch items as they are scrolled into view.
• It’s usually not necessary to give users the option of how many results they should see per page. If you need to provide this option you should keep it within an options page and not directly under every table cluttering your main interface.
• Paging elements should be at the bottom of the table. You can optionally place paging controls at the top of the table if users are likely to jump around.
• The following should be present in the paging area: Current Page, Next Page, Previous Page, Total Page Count.
• Users may not go past the the first couple pages of results, if your users need to flip through more than this make sure you have alternatives for finding data such as filters or search.

Table Filtering (optional but necessary for long lists)

• Design your filters to narrow long lists down quickly and eliminate large portions of the data. Filtering is not the same as searching you’re trying to get the list down to be a smaller list it’s not trying to find a specific item.
• Consider filters that match the logical roles that people perform on the data, filter by User, Region, Job-Title, Permissions, Sevarity, Priority, etc.
• Usually people want to filter by the data columns that you present. If you want to filter by a column that isn’t shown consider showing the column so users can sort by it.
• It should be obvious when the list is filtered and when it isn’t. Make it easy to clear any filters. If a filter is a narrowing choice make it easy for users to change their mind and pick another choice without needing to use the back button.
• Filters can be placed under the columns (as in Excel) or in a module to the left, right or above the table. Avoid putting filters bellow a table as it may not be seen.
• When possible consider in-place typing filters that filter the data as you type.

Selection

• If you need to provide selection within a list consider either the shopping list metaphor where you add list items to a growing collection or a checkbox selection where you can check off multiple items and perform an action.
• If using check box selection avoid having hyper links in the list as users may inadvertently click the link trying to click the check box.
• Provide simple command buttons or checkboxes to select all or clear the selection.
• If you provide keyboard access try to address traditional keyboard selection shortcuts (CTRL/Shift/Arrow/Spacebar selection).

Creating great tables in your application will make the data easier access. Many people forget that a very large percentage of peoples time is spent trying to view analyse and manipulate data within the interface. Having great tables across your appication is a good start.