Sortable Table
From Windows Explorer |
|
What: |
Show the data in a table, and let the user sort the table rows according to the column values. |
|
The interface shows multivariate information that the user may want to explore, reorder, customize, search through for a single item, or simply understand on the basis of those different variables. |
Why: |
Giving the user the ability to change the sorting order of a table
has powerful effects. First, it facilitates exploration. A user
can now learn things from the data that he may never have seen
otherwise -- how many of this kind? what proportion of
this to that? is there only one of these? what's first or last?
Suddenly finding specific items becomes easier,
too; a user need only remember one attribute of the item in
question (e.g. its last-edited date), sort on that attribute, and
look up the value he remembers.
Furthermore, if the sort order is retained from one invocation of the software to another, the user now can effectively customize the UI for his preferred usage patterns. Some users want the table sorted first to last; some last to first; and some by a variable no one else thinks is interesting. It's good to give users that kind of control. Finally, the clickable-header idiom is familiar to many users now, and they may expect it even if you don't provide it. |
How: |
Choose the columns (i.e., the variables) carefully.
What would a user want to sort by or search for? Conversely,
what doesn't need to be shown in this table? What can
be hidden until the user asks for more detail about a
specific item?
The table headers should have some visual affordance that can be clicked on. Most have beveled, button-like borders, or blue underlined text. You should use Up-or-down arrows to show whether the sort is in ascending or descending order. (The presence of an arrow shows which column was last sorted on -- a fortuitous side effect!) Consider using rollover effects, like highlighting or cursor changes, on the headers to reinforce the impression of clickability. Use a stable sort algorithm. What this means is that if a user sorts first by name, and then by date, the resulting list will show ordered groups of same-date items, each sorted by name within the group. In other words, the table retains the current sort order in the next sort, to the extent possible. Subtle, but very useful. If your UI technology permits, users can reorder the columns by dragging and dropping. Java Swing has this feature. |
Examples: |
|
Inxight's Table Lens Inxight's Table Lens is a table whose rows compress down into tiny bars, the length of which represent the values of the table cells. (Users can click on specific rows th see ordinary-looking table rows, but that's not what I want to talk about here.) One of the wonderful things about this visualization is its ability to sort on any column -- when the data is highly correlated, as in this example, the user can see that correlation easily. The dataset shown here is houses for sale in Santa Clara County, California. In this screenshot, the user has clicked on the Bedroom column header, thus sorting on that variable: the more bedrooms, the longer the blue bar. Previously, the stable-sorted table was sorted on Square Foot (representing the size of the house), so you see a secondary "sawtooth" pattern there; it sorts all houses with four bedrooms, for instance, by size. The Baths variable almost mirrors the Square Foot attribute, and so does Price, which indicates a rough correlation. It makes intuitive sense -- the more bedrooms a house has, the more bathrooms it's likely to have, and the bigger it's likely to be. You can imagine other questions you can answer by this kind of interactive graphic. Does ZIP code correlate to price? How strong is the correlation between price and square footage? Do certain realtors work only in certain cities? How many realtors are there? |
|