"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.
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2018 Dribbble. All rights reserved.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.