Touch Multi-selection Interaction Pattern

  • Save
Touch selection2

"Multi-selection" in touch devices remains as one of the least explored areas when it comes to the ideation of new mobile/touch interaction patterns.
Most apps still rely on single-select patterns or multi-edit modes that only allow users to affect a list of items by single-selecting those items.

In this interaction example, I present an alternative for multi-selection in mobile/touch devices.

Example and Solution
The provided example is a scenario in which a user needs to interact with an app grid (iOS) and perform a multi-selection task.

The task consists in rearranging a group of mobile apps and then deleting that same group of apps with a single touch.

The user reveals the mechanism with the same tap-and-hold interaction that he/she already uses to delete or rearrange an app. However, there are 2 major differences:

1) Unlike the current iOS pattern, the tap-and-hold interaction would only target the single selected item. This will help the user to differentiate a single-select context from a multi-select context.

2) A new UI element will show up as part of the targeted element.

A tap-and-drag interaction over this new UI element will allow the user to extend a selection box that will expand automatically (after releasing the finger) over any hovered item.

The user can now move or delete that group of items. The user can also use the UI multi-select element of the recently created group to repeat the interaction and add more elements to the multi-selected group.

This interaction pattern is also suitable for other views with multiple items like file systems or even as more reliable selection system for design tools in touch devices.

keyboard shortcuts: L or F like