2

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?

enter image description here

  • How many could a user need to select? Could you give us examples of the actions. – DarrylGodden Jul 10 at 10:03
  • Considering the current answers, you might want to be a bit more accurate. An answer suggest a list of icons, however this works only if your multiple choice can eventually be displayed as icons while still being easily understable. – Walfrat Jul 19 at 8:44
4
+50

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):

Image shows transition from OP's screenshot to a dialog with multiple options

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

  • 1
    This is definitely my choice. Nice and simple and infinitely extensible. Simply titling the button 'Actions' would probably suffice too, perhaps with a little dropdown arrow like this [i.imgur.com/TarTrAB.png] to communicate that there's a list of options behind here. The button can be in a disabled state when no list items are selected to further establish the causal relationship. – Andrew Harvey Jul 23 at 11:10
2

Here is an example of multiselect and multiactions.

enter image description here

1

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.

  • I thought the question is about how to show so many actions (which should be more than 3 as aforementioned and all of them are texts) – selharxets Jul 11 at 2:19
  • 1
    never mind, I completely misread the question yesterday. I should have more coffee before coming here :D – Luciano Jul 11 at 8:02
0

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.

0

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 :)

[1]: https://i.stack.imgur.com/kOG9O.png

  • The problem with this approach is that the actions here would be focused on the one selected item, while in OP's question it is about selecting multiple items and then performing an action that applies to all of them – Big_Chair Jul 23 at 17:46
  • @Big_Chair you're right, didn't notice it was for a possible 'select all' function ;) – Amanda R. Jul 24 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.