Posted by & filed under Content Views.

 

Overview & Usage

A table organizes data into rows (of items) and columns (of item attributes). Tables make structured data easy to scan, compare, sort, and analyze. Tables can be embedded into other design patterns. Tables are familiar to users and often the correct choice for structured data, but be careful not to overuse tables. Here are some examples of when not to use a table:

The table pattern should NOT be used when:

  • Do users need to find patterns within a data set? Consider a line chart or a bar chart.
  • Are users going to browse the data set without knowing exactly what to look for? Consider using a Data List.

 

Conceptual Design + Description


Empty State

  1.  Empty State:  If no items exist in the table, display the empty state pattern.   All features within the data toolbar will be disabled in this state. Table View - 2
  2. Data Toolbar Pattern:   includes a number of components that work in conjunction: simple filter and simple actions (table actions)
  3. Sorting:  Organize data by sorting  one or more columns. All columns are sortable, simply click on the column header to sort via info found in that column.
    • Active column will be highlighted with a blue line above the column and blue text.  The carat indicates the direction of the sort, in this case from ascending order alphabetically.
  4. Select Row(s): Checkboxes allow the user to select multiple rows in order to perform bulk actions on those rows simultaneously.
    • Selecting row(s) activates the checkbox and highlights the row. This highlight is more prominent than the highlight for hovering over a row.
  5. Hover State:  When the user hovers over a row, that row will be lightly highlighted and outlined. This helps the user to isolate the row, especially when clicking on items in the row.
  6. Inline Actions:  Inline actions can be performed within a single row to manipulate the data. The most common 1-2 (max) actions are shown as a button with additional actions, if any, available via a dropdown menu. These actions should use words rather than icons for clarity.Table
  7. Bulk Item Actions:  Bulk item actions buttons are activated when row(s) are selected.  Some actions are available as both a table action and a bulk item action.   The number of rows selected is shown near the table action buttons
  8. Filtering:  User can see results of simple filters here. Results include the item and results count, list of active filters (with ability to remove individual filters), and button to clear all filters.
  9. Select All Rows:  Selecting the checkbox in the header row selects all rows on the page.  The total number of rows selected is shown near the table action buttons
  10. Row Highlight (Recommended but optional to turn off):  If the table uses alternating row shading, the hover state should be distinguishable from the shading colors used.

 

What’s not covered in the current design:

  1. Pagination
  2. Column customization
  3. Simple Sort
  4. Ability to expand and collapse rows to give user the option to view more details on each item

Please let us know if we are missing any other features in this particular pattern.

 

Next steps

  1. The visual design will be created and examples in context will be provided.
  2. Additional stories have been added to the backlog for more features, such as pagination, expand/collapse rows, simple sort,  customizable columns.

Feel free tell us what you like and what you think we could improve upon.   Any and all feedback will be helpful with helping us to refine the design in the next iteration. Thank you!

 

 

Reference Documents

Older wiki proposal for Table including jquery example:

Basic bootstrap current example:

Usability Testing results done on old proposal:

Current Simple Filter Design:

Current Simple Sort Design:

Current Simple Actions Design:

Blank Slate Design:

6 Responses to “Table View: Organize your Data”

  1. Matt Carrano

    This looks really good. Just a couple of questions/comments:
    – Is there a use case for single-select in tables? I think there is, but inline actions can also cover this case. If we do support single-select, are the checkboxes still exposed? Does clicking within a row select it or do I need to check the select box?

    – More and more, people are wanting to use data lists where they formerly would use a table. Can we have more explicit guidelines about when to use one or the other? Right now it appear to be mostly a stylistic choice.

    Reply
    • Matt, thanks for your feedback! This is very helpful :]

      – I think there is a use case for single-select. And to keep the table consistent, perhaps keep the checkboxes exposed, but I’m open to suggestions. As for the behavior of row selection, clicking anywhere on the row (except on live links or buttons) would select the row.

      – This is a good idea. I think there should be a discussion on the the use cases of Data List vs. Tables and then they should be documented within both patterns. One difference I see is that Tables gives you the ability to quickly sort via column headers while Data List only has the simple sort functionality.

      Reply
  2. I have a thought about buttons. I am personally a big fan of how some apps like gmail display actions contextually, dependent on selection. This pattern has pros and cons, but it is very useful when there are a lot of potential actions on a list. I wanted to see if this behavior could be considered for the pattern. Example: http://goo.gl/EzcIDJ

    Reply
    • Jeremy, thank you so much for this suggestion. I agree with you, contextual actions are extremely powerful when a lot of actions are available. This is definitely something we could capture and potentially put into the backlog. Thanks!

      Reply
  3. One addition I would like to see is the ability to select everything in the entire list, beyond the current visible page. In cases where pagination does not allow a way to see all at once, this is very useful. This is again something Gmail has done. We could add a link, maybe next to the selection counter e.g: “20 of 186 selected – Select all 186 Items”

    Reply
    • Jeremy, I completely agree with you. That feature is something that would need to be addressed whenever pagination is added to that table. And you’re right, gmail’s approach is straightforward, but I like your idea of adding a link to select all items next to the selection counter. That way the user always knows where to look. Thanks for your feedback!

      Reply

Leave a Reply

(will not be published)