The foundation of a list is the row, and all the interactions associated with it. Far from being mundane or niche, row functionality is important in a user’s process. Let’s look at some emerging patterns that work well in Enterprise applications.

List actions on individual rows
Typically list rows have actions associated with them such as edit, archive, delete, move to, etc. Balancing easy access to these options without cluttering the list can be a huge challenge.

row-dropdown
In this row, the actions are hidden inside of a dropdown

One solution is to have a dropdown link or arrow. Another solution is make links that when clicked change to in-line editable options.  Whatever the solution, it needs to be consistent across the program. Having different UIs for lists in a program will make your software more difficult to use.

Bulk edit / multi-select
Giving users access to multi-select options can be challenging, mostly because it’s rarely-used action for most users and so any pattern will need to be obvious and repeated throughout to truly stick in a user’s mind as a pattern. It’s an uncommon action, that different sites implement in different ways. Here’s how Mint.com deals with multi-select, before and after.

mint-not-selected
Mouseover state allows you to edit this list in-line. This pattern is handy for keeping clicks to a minimum
mint-multi
Multi-select / bulk edit options. This option allows you to edit all selected rows, while still maintaining the option to edit any row individually. Not the cleanest design, but a nice pattern for keeping functionality concise and keeping the information density high

Since it can save literally hundreds or thousands of clicks, it’s important to have the multi-select functionality easily discoverable. Mint.com does this by combining a edit button and select-all checkbox.

Rules for multi-select functionality on lists

  1. Don’t completely hide multi-select options / functionality. Gmail hides these options (until multiple rows are selected) and I think it makes it nearly impossible to discover.
  2. A button marked ‘multi-select’ should be greyed out until multiple items are selected.
  3. The multi-select button should be close to the ‘select-all’ checkbox (on the left side)

Here’s one solution to multi-select interactions in a list. This solve follows Gmail’s rules for multi-select interactions and dropdown menus that have inline editing capability.

 

Groups in the PM Dashboard from Jonathan Simmons on Vimeo.