Ultimate guide to table UI patterns

Check out this excellent article by Janko: Ultimate guide to table UI patterns. It is full of great examples and suggestions.

After reading it, I just had to add three more scenarios:

1. Inline Editing


Quicken Online allows simple editing with a pull down for more advanced editing.



Mint.com does the same.

The Ajax framework Ext JS and Ext for GWT offers a pre-built Grid row editor component. Try out the demo. This would work well for tables that are primarily read-only but might need to be edited. This design is not for heavy data entry.


For heavy data entry, use a design like Harvest. They offer a simple grid layout that keeps a live total and provides a Save button for saving all the entries once the person is done (it also auto saves periodically).


Google Docs is an online spreadsheet application with inline editing. It also has a Save button for the whole spreadsheet, as opposed to per row updates.

Inline Editing Best Practices

  • Implement tab navigation when you create a table with inline editing.
  • Consider how to handle errors, such as highlighting rows or cells with errors in a way that is easy for a person to correct the issues. Don’t break the person’s data entry flow by locking them in a cell with an error, simply highlight the cell with the problem and provide a way for them to return to it later to fix it.
  • Offer undo and redo functionality.


Swivel is an app that acts a lot like Excel and provides cell specific error messages.

2. Super Wide Tables

I received an email last week asking me about super wide tables. The email said “I’ve come to the conclusion that breaking them up into smaller chunks is maybe the best way to go, rather than going with a horizontal scroll-bar that goes on for days.”

Based on a lot of design work Bill Scott and I did for the airline industry, I would instead propose instead applying these principles:

  • Organize the most important columns to the left.
  • Experiment with frozen/fixed columns, so if the person does need to horizontally scroll, they can keep context.
  • Only show a set number of columns in the default view (so there is no horizontal scrolling in the default view) and offer a Customize option so the person can choose to hide or show more columns. ExtJs has this built into the column dropdown; I usually add a customize button to the table toolbar with Hide/Show column functionality.
  • Offer resizing of columns.
  • Offer rearranging of columns.
  • If you have a table with some columns editable and other read-only, group editable with editable, read-only with read only.
  • Don’t abbreviate column titles, reduce spacing or padding, or drop to a smaller font to fit your table on the screen. That won’t help anyone use your app.
  • Try out fat rows like this example from Survs. Instead of having a column for title, created by, created on, last updated on, all of that information is in the second column. Good visual design can help organize the information in a more meaningful way which makes your data easier to scan.
  • Use a summary row to chunk the data if appropriate. I know this won’t make your table any narrower, but it might make it more readable.
  • Consider putting a visual summary, or roll-up, above the table so the person can make sense of the data visually before diving into a huge table of numbers.

  • Discover Spend Analyzer offer a dual purpose summary and filter above the rows of transaions. Play with the demo to try it out.

    Swivel example

3. In-column Filtering

The example included in Janko’s article has dynamic filters above the table (dynamic meaning, when you make a selection, it dynamically updates the table content- without an extra submit action).

In some web applications, like heavy productivity applications or enterprise apps, in-column filtering is a powerful option to offer. It is pretty easy to implement with Flex or Ajax. Just validate the need for this type of functionality with your customers; it could be overkill for people who just need simple filtering.

Example from Zenoss Open Source Server and Network Monitoring

Try this at Telerik RadControls. This example requires a click on the filter button in the column, and has the option for selecting a specific way to apply the filter.

Play with SmartClientRIA, where the implementation ( they blank out the whole content area while filtering) makes it seem slow.

And a Flex example, where clicking on the filter icon lets you search in that specific column, and then you can further refine by filtering other columns.

Make sure you take a look at Janko’s original article : Ultimate guide to table UI patterns.

23 Comments

  1. Ultimate guide to table UI patterns Said,

    March 8, 2010 @ 8:18 am

    [...] resist documenting a few more scenarios :1. Inline Editing2. Super Wide Tables3. In-column Filteringdesigningwebinterfaces.com/ultimate-guide-to-table-ui-patterns [...]

  2. Bruno Tavares Said,

    March 9, 2010 @ 3:50 am

    Hi Theresa, the post really helped me. I was looking for some resources about inline edition with Ext JS and the exemple solved my doubts.

    Just would like to ask about the lack of a search input here on your blog. It would be usefull!

    Cheers!

  3. Pablo Said,

    March 9, 2010 @ 10:43 am

    Hi Theresa

    I have developed a data grid control based on prototype library, that also provides inline editing, I think you can also include it in the list. Here is a demo:

    http://pabloaravena.info/mytablegrid/samples/sample2.php

    Have an excellent day
    Saludos

  4. Theresa Neil Said,

    March 14, 2010 @ 10:47 am

    A search feature would be great- I’ll look into it.

  5. Theresa Neil Said,

    March 14, 2010 @ 10:47 am

    Nice work.

  6. Interact Seattle » Blog Archive » User eXperience Digest No. 17 Said,

    March 26, 2010 @ 10:00 am

    [...] Ultimate guide to table UI patterns [...]

  7. Ultimate guide to table UI patterns « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit Said,

    April 1, 2010 @ 6:45 am

    [...] Ultimate guide to table UI patternsdesigningwebinterfaces.com [...]

  8. Leon Said,

    April 1, 2010 @ 6:47 am

    I really love this post! Gives me a lot of ideas how to increase usability in table usage. Thanks

  9. Table UI patterns » Web Design Said,

    April 1, 2010 @ 1:07 pm

    [...] Table UI patterns [...]

  10. 網站製作學習誌 » [Web] 連結分享 Said,

    April 1, 2010 @ 7:02 pm

    [...] Ultimate guide to table UI patterns [...]

  11. davidvoegtle.net » Blog Archive » Daily links 04/03/2010 Said,

    April 2, 2010 @ 4:32 pm

    [...] Ultimate guide to table UI patterns [...]

  12. Tweets that mention Ultimate guide to table UI patterns -- Topsy.com Said,

    April 5, 2010 @ 9:37 am

    [...] This post was mentioned on Twitter by Junior. Junior said: Ultimate guide to table UI patterns http://bit.ly/aDjjYF #design @delicious [...]

  13. nowGoogle.com adalah multiple search engine popular Said,

    April 10, 2010 @ 4:23 am

    thank that you have a great tutorial on this blog so i love it and wanna read so continously

  14. Johan Rydberg Said,

    April 13, 2010 @ 2:07 pm

    should operations on rows of data be inlined in the table?

    for example; a clickable “x” at the end of the row to delete it vs selecting the row and hitting a delete button.

    desktop applications seem to opt of the later (in combination with an “add” button it creates a nice symmetrical interface), but web interface seem to swing both ways.

    which is the best?

  15. Theresa Neil Said,

    April 15, 2010 @ 3:14 am

    It depends. Are you offering other bulk actions ( like in Gmail you can selected a bunch of messages and Delete or Label or Move or…)? In that case, we usually design the tables to have checkboxes on each row and a toolbar of actions that are available for the selected rows.

    If you don’t provide any other bulk actions AND your users are infrequently deleting multiple rows at once, then allowing delete within the row may be a good option. You could show the delete option in each row or use some of the other techniques like a hover action to expose the option.

  16. Ultimate guide to table UI patterns » blog.lanche86.com Said,

    April 15, 2010 @ 6:18 pm

    [...] to Theresa Neil, one of the authors of Designing Web Interfaces, you can read about three more patterns that she documented: Inline Editing, Super Wide Tables and In-column Filtering. [...]

  17. guia para criação de grids Said,

    July 11, 2010 @ 6:10 pm

    [...] http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns [...]

  18. 20 Counterproductive Video Game Covers (PICS) | AboutGaming.info Said,

    August 8, 2010 @ 7:36 am

    [...] Ultimate guide to table UI patterns [...]

  19. Twitter Moves to OAuth: The OAuthcalypse Is Nigh | AboutGadgets.info Said,

    August 30, 2010 @ 11:22 pm

    [...] Ultimate guide to table UI patterns [...]

  20. Ultimate guide to table UI patterns | The best Tutorials Said,

    September 2, 2010 @ 9:47 am

    [...] to Theresa Neil, one of the authors of Designing Web Interfaces, you can read about three more patterns that she documented: Inline Editing, Super Wide Tables and In-column Filtering. [...]

  21. Ultimate guide to table UI patterns | my computer geek Said,

    September 6, 2010 @ 1:23 am

    [...] to Theresa Neil, one of the authors of Designing Web Interfaces, you can read about three more patterns that she documented: Inline Editing, Super Wide Tables and In-column Filtering. This [...]

  22. links for 2010-09-21 « sonofbluerobot Said,

    September 21, 2010 @ 5:32 pm

    [...] Ultimate guide to table UI patterns (tags: <table> ui designpatterns) [...]

  23. Ultimate guide to table UI patterns | Putra Kuningan Said,

    October 18, 2010 @ 12:44 am

    [...] to Theresa Neil, one of the authors of Designing Web Interfaces, you can read about three more patterns that she documented: Inline Editing, Super Wide Tables and In-column [...]

Trackback URL