Best way to combine filtering and selecting items in a list

Question

I'm building a web page to display a list of items. The list has three purposes:

1. Display some very basic details about each item
2. Provide a way of getting to more details, to view or edit them
3. Provide a way of selecting multiple items to enable bulk operations

The list has several filters to limit the items displayed in the list. Multiple filters can be combined, and multiple values can be selected for each filter.

The list items can be selected, so that operations can be performed on multiple items. This works in a very similar way to gmail's functionality to select multiple emails to move or delete: there's a checkbox on each item, and another at the top to select/unselect all.

So far, the page looks like this:

In my head, there are two alternative ways the filtering/selecting could work:

1. In the simpler version, if the user selects a few items, then changes the filters so that 2 of the selected items are no-longer visible, those 2 items are no-longer selected. Only items shown in the filtered list can be selected.

2. The "power-user" version maintains the selection regardless of the filters, so the user can filter items, select a few, change the filters, and select more, building up the list of selected items, even if they're no-longer visible in the list.

Which of these would be a better design? Or is there another way? I suspect the simpler version is probably the behaviour users would expect, but is the power-user version a bad idea?

Answer 1

If you break the users mental model of a filter, they will lose trust in the ability to search and find items as needed. You can try to separate searching (and gathering) from a collection you can perform operations on.

It sounds like the issue is:

• I have a large amount of data that cannot be shown in a reasonable view for selection without extensive pagination or work.
• How do I collect items that meet different filtering conditions to form a collection that I can perform operations on?
• Can I save this collection for future views / operations?

What you could do is create some kind of collection, similar to a photo album. With an album, I could group items based on a date range, but I can also create a freeform album with many items that may just share a single attribute (such as 'people' and 'horses', but taken anywhere in the world with any camera or any other attribute).

If you need to manage or compare or add to the collection, you can go back to it at any time.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You can find a model like this in a lot of software.

For example the font manager Suitcase Fusion has a sidebar, in which you can search and scroll through the entire library, and either add a folder than you can manually update at any time (I make collections for each design client as i'm searching and gathering the appropriate typefaces for their brand), or smart searches, which are collection that meet a certain criteria (e.g. 'Sans Serif') and update automatically.

Keep trust in the application

By separating search / filtering from collecting, you ensure that the model of a filter remains consistent with expectations.

Relieve the user of having to remember or repeat common workflow processes (search in filtering) and items that have relevance as a group

By allowing collections, you free the user of having to remember data sets that belong together. It's offloading the users memory and preferences onto the application.