Content Selection Pattern

Design pattern used in GNOME 3 applications for selecting and performing actions on content.

Participants

WilliamJonMcCann, JakubSteiner, AllanDay, psychoslave

Goals

• Allow multiple items to be selected simultaneously, in order to perform actions on them
• Intended for cases where default action on a single item is to open/play it
• Compatible with touch devices
• No double-click

Relevant Art

Chrome OS File Browser

Windows

Pocket on Android

• Short press - opens the item.
• Long press - reveals actions (shown as a row of buttons beneath that row) for a single item.
• "Bulk edit" mode can be accessed via the overflow menu. When this mode is engaged, pressing an item selects it. A bar is displayed at the bottom of the screen, with actions that can be performed on selected items.

Gmail on Android

• Short press on email body opens that item.
• Short press on an email "thumbnail" selects that item.
• When there are selected items, the "header bar" updates to display actions.
• This is not a mode. Mails can still be opened while there are selected items - selections are remembered if you navigate away and back again. Unselecting all items returns the "header bar" to its normal state.

Google Drive (web)

• Each item has a check box, which is permanently displayed.
• List view:
  • Clicking the checkbox or the row area selects the item
  • Clicking on an item name opens it.
• Grid view:
  • Clicking the checkbox or thumbnail border selects the item.
  • Clicking the thumbnail or item name opens it.
• The "toolbar" updates to display actions that can be taken on selected items.
• Context menu:
  • Right click on a single item selects it and opens a context menu.
  • When multiple items are selected, right click on a selected item shows the context menu - for taking actions on the set of selected items.

Google Play Music (Web & Android)

• Press/click on an item - opens it.
• Each item contains a disclosure point (indicated by a "view more" icon), which opens a menu with actions for that item.

Discussion

Tentative Design

The following describes a series of updates to existing implementations of the content selection pattern. Changes from the existing selection mode pattern include:

• Use a standard toolbar at the bottom rather than an overlaid toolbar
• Label action items with strings rather than icons
• Use a "Cancel" button in the toolbar rather than "Done"
• Close selection mode once an action is performed (rather than leaving it open)
• Additional ways to activate selection mode (ctrl+click, long press, rubberband selection, etc)

Selection mode can be activated by:

• Pressing the selection button (this has a check mark icon) in the toolbar.
• Ctrl+click or shift+click on a content item (shift+click allows ranges of items to be selected)
• Drag to select an area (pointer only - not touch), aka rubberband selection

Right-click/long-press on a content item shows a context menu:

When selection mode is activated:

• The primary toolbar changes color.
• The content of the primary toolbar updates:
  • Controls that aren't relevant to selection mode are removed, including the selection button.
  • A cancel button is added.
• The toolbar header updates to reflect the number of selected items and to provide a select all/none menu; when no items are selected, it gives a hint such as "Click on items to select them".
• A secondary selection toolbar slides up from the bottom of the window. This contains controls for all the possible actions that can be taken on selected content; controls remain insensitive until content items have been selected.

Selection mode should preserve the existing context. This applies to:

• The scrolled position within a grid or list.
• Viewing a folder/collection/album.
• Search - the current search should remain in effect and the search toolbar should remain visible.

Selection mode can be exited by:

• Pressing the cancel button.
• Pressing the escape key.
• Selecting content and performing an action on it (see below).

Once in selection mode, content can be selected by:

• Clicking on content items individually (in grid view, the whole cell responds to clicks; in list view, the row responds).
• Holding shift to select ranges of content.
• Using the select all/none dropdown.
• Ctrl+A - select all.
• Ctrl+Shift+A - select none.
• Dragging the pointer to select an area of content (aka rubberband selction; this should be pointer only, not touch).
• Rubberband selection with shift held down - to deselect ranges of content.

Once content has been selected, action controls become sensitive. Some action items may require more than one content item to be selected.

Activating an action from the bottom toolbar exits selection mode and performs the action on the selected content.

Alternative tentative Design

This one try to completely drop the "selection mode", that is, let the user directly select items, as well as perform other different actions.

The idea is to add action icon associated with each item, even in grid mode. In list mode, this is already a widespread design in web and mobile interface. The mock-up is awful (sorry), but ideas are presented :

• no more "selection mode" in the top bar icon
• miscellaneous action icons associated to each item, which may vary with the type of file
  • selection check-box
  • delete item (though having it accessible in a less prone to "mistakenly erased" manner would be fine)
  • open in the read only favorite application
  • open in the edit favorite application
  • enter directory
  • run an executable
  • more action for this item

The bottom bar give information on selected items and enable to access batch actions. Also note that this design doesn't require any alternative form of input (ie. long push, second button, and so on).

Regarding keyboard usage, a shortcut would be required to navigate this button once on a icon. Those said:

• space could be a direct access key to switch the check-box state when an item is focused (pressing space to switch is usual one a check-box is focused)
• enter could be a direct access key to launch whatever the default action is for the current focused item (as usual)
• delete key to delete function (as usual)
• menu key, that usually is binded to pop up contextual menu, could be used to turn focus on acton icons. Certainly unusual but it kind of makes sense. Othewise a function key could be attributed.

Development Tracking

Bugs:

• Documents

• Boxes (initial), Boxes (update)

• Clocks

• Photos

• Weather

• Disks

• Contacts

Comments

I don't really like this selection system, because it requires many clicks and is time consuming. One issue is the implementation of the selection system - it isn't always necessary to use (for example, in Clocks it would be easier to put a small trash can, delete button, or an x next to each clock only visible on mouseover, that would be more intuitive). Another issue is the selection system itself: is it really necessary to have a selection "mode" that you enter? I like how Chrome OS handles this - the check boxes are always there, but it is also possible to select files the "Windows" way (by simply clicking the file or shift/ctrl clicking multiple files). An even easier way might be having a check box appear when mousing over a file, but otherwise hidden. I really think this is something that should be discussed in more detail on IRC.

• --UnsolvedCypher

When it comes to selection, you have several complementary patterns users may want to use:

• selecting one item at a time (no matter how items are displayed)
• selecting several item at a time
  • using geometrical properties of the way you display information
    • selecting "one line/column" when items are displayed in grid
    • drawing a geometrical shape around the desired selection
      • things more complex than drawing a square around the intended items are irrevelant here
    • specifying a string pattern on file name/content/properties

For the last one, it may be interesting to provide users a way to chain different selection patterns, something like unix pipes, but with a more user friendly convenient interface. For example you may have two main horizontal frames, one for "pattern selection pipes", and one for results. So user may just chose "critera boxes" with or without parmeters, like "recent files", "containing in title", "with size larger than", "image types", "grey level images", and so on. -- psychoslave 2013-08-04 09:01:11

Boxes does a transition when changing the color of the topbar, many other apps don't do that (transition looks way better in Boxes). Since I think this transition is very nice and smoothes the workflow I'd include a notice that this transition would be nice to have in this case. (Or discuss wether we want this or not but nobody complained that Boxes had it.) -- sils (LasseSchuirmann)

The checkbox could actually be droped and keep single click on the main element area used to select it, while adding the checkbox size icon to launch main action. The bottom toolbar still providing further options. This way you may even have already several selected item and launch only the main action on a single one. For example you selected several text files but would like to check the content of a single one without losing your selection: you just click the "launch" button of the relevant item. --~~~~