What is the best way to provide many multi-select actions on mobile?

Question

My users need to be able to take many actions on multiple list items.

At the minute the design only supports three text-based actions at the bottom of the screen. The actions are too difficult to communicate effectively as icons. However, using text limits us to three actions due to horizontal real estate.

Are there any solutions out there for handling lots of multi-select actions on mobile?

Answer 1

Adding an extra step to present the options in a dialog is also an option (if this task is not used often and is not tied to efficiency, so the extra step won't hurt a lot):

Similar to this choice dialog in the Material Guidelines (but without the extra confirmation step):

Answer 2

Here is an example of multiselect and multiactions.

Answer 3

Too many options might confuse users. Remember to keep it simple and easy as mobile screen is small and preferably one-handed use.

You can fit most common actions and add kebab icon for more actions

or separate them into smaller groups which will expands when user selected one. E.g. user select Group 1, then the app prompt actions under that group.

Alternatively, you can fit those actions into a single-long dropdown with 'execute action' button or redirect to single page with actions.

If the selected items is able to take multiple actions at the same time, creating new page/dialog might be better.

Answer 4

If we look for angular material, there is in fact more than one way to handle it :

• modal like already suggested by Big_Chair
• Expansion panel like suggested by selharxets
• Stepper
• Forms with tabs

However it all depends on your very exact needs : for instance Do you really need all those information to be entered in the same form for an unique action ?

If not if would suggest you to split your form an access to each of them by an independant action button.

If yes my choice would vary, but the more things to do the more I would go for a stepper as this can be eventually implemented with less clicks to do than the others.

You could even have a mix : a simple vertical form and for the multiple choices stuff, only the selected information visible in the form. Then with those information you add an"Edit" button that open a modal with a stepper to set all those information.

Answer 5

I don't know if this helps, but you can try these ways below, where you either use the more menu (maybe a bit too hidden away?), or when the user selects an option, there are some action buttons coming below that option, that way the actions can vary from selection to selection and you can have many actions.

If you would rather keep the action menu in the bottom, I'd suggest using a horizontal scroll :)