by anthony on 07/11/11 at 12:33 pm
Tables are great for displaying information. But making them user-friendly is a challenge. One reason it’s challenging is because the table grid limits the amount of information you can display in a table cell. This means you have to figure out how to display the information the user needs without displaying too much of it. Also, when users read tables, they need to move their eyes vertically and horizontally to scan information. If your table isn’t easy to scan, users can easily lose their place as they move their eyes down columns and across rows.
The following techniques solve these design challenges so that users can read and process your tables with ease.
1. Data Abbreviations
A table will have multiple columns, so you can’t make your columns too wide. If you do, you’ll have too wide of a table that users will have to horizontally scroll to read. The column width limits the amount of information you can display in a table cell. This is where data abbreviations work brilliantly.
It’s unnecessary to display every digit of a number. You can abbreviate large numbers, such as $104,000 to $104k. You can also round large numbers off, such as 45.139% to 45%. Look to abbreviate words too, such as pounds to lbs, hours to hrs or feet to ft. This conserves cell space so that you can make your columns thinner and table easier to read.
2. Tool Tips for Exact Values
Data abbreviations help condense information. But sometimes users will need to see the exact value of a number, or the rest of a truncated word. This is where tool tips are useful. As users hover over a cell, tool tips can display the exact value of a rounded number without taking up space. They can also display the full text for cells with truncated words.
3. Disclosure Arrows for Rows
It’s important to make your columns thin, but it also important to make your rows short. Cramming too much information in your table rows can make your table long and overwhelming to read. Use disclosure arrows to shorten the height of your rows and the amount of information displayed. Users will first see the top level information in a row. More information will display when the user asks for it by clicking the disclosure arrow for that row.
4. Persistent Column Headers
The bad thing about a long table is that you lose the column headers when you scroll down deep. It’s hard for users to know what the information they’re looking at is without seeing the column header. Persistent column headers solve this problem for long tables. As users scroll down the table, the persistent column headers stay with the user so that they can refer to it without having to scroll all the way back to the top.
5. Zebra Stripes
When users scan a row, their eyes can easily trail off and accidentally fall into an adjacent row. The user needs a visual guide to help them stay on their row as they scan. Zebra strips help guide users as they move their eyes across each row. Each alternating row is a different shade so that users won’t mistake the row they’re looking at for an adjacent row.
6. Number Each Row
You can make your table easy to read by numbering each row. This allows users to refer to a row by its number. It also helps users scan the rows without losing their place as they progress. Row numbers tell users how many rows are in a table so that they can get a feel for the information density.
7. Group Rows into Categories
The more information you have on your table, the more rows you’ll have. You can make your table easy to read by grouping rows into categories. Your categories can even have disclosure arrows so that users can show and hide rows on command to save space.
8. Invert Arrows for Columns
Disclosure arrows allow users to control how much information the table displays. But invert arrows allow users to control how the table orders the information. Use invert arrows on your column headers so that users can sort each column by ascending or descending order. This allows users to see number data from greatest to least, or text data by alphabetical order. The invert arrows should reorder a column when the user clicks the column header.
9. Screen Reader Accessibility
Most tables are difficult for users to read. But they’re even more difficult for disabled users to read if they’re not screen reader accessible. When you make your tables accessible, disabled users will get the table information read to them in a proper, understandable order.
Start your tables off with the summary attribute and <caption> tag. These elements give users an overview of the table contents. The summary attribute gives users a broad description of the table, and the caption tag gives users the title of the table. They’re the first thing that comes after the table tag.
Designate your row and column headers using tags and data cells using tags. After that, you’ll need to associate the cells with the right headers. Use the scope attribute for this. The scope attribute tells the screen reader that everything under a column relates to the header at the top, and everything to the right of a row header relates to that header.
See the links below for more information on table accessibility.
There are many challenges to designing tables. These techniques are everything you need to make your tables user-friendly and easy to read. When users are able to use your table and get the information they need without a hassle, it makes them more productive and efficient. And that’s exactly what good design should do.