1

I'm currently working on an app that offers multi selection (see attached image). Now I am wondering how to design the multi select "circle" in the toolbar.

  • Should it be not marked while the user has not pressed it, and marked after the user pressed it? This would be similar to checkbox behavior on a computer (as on the image left and middle).

  • Should it behave like a pause/play button which shows the pause button while playing and the play button while being paused? Meaning: check icon in tool bar indicating that it will check all items when being pressed; and show unchecked when all items are checked, indicating that all items will be unchecked when pressing.

  • What about having used the "check all" button in the toolbar and deselecting one (or several) files manually again? Should this affect the visual appearance of the multi select button in the toolbar?

How to design feedback for multi selection on iOS

Improve this question
2
  • It doesn't specifically answer your question, but in Mail, that button is a simple text button labelled "Mark All"
    – Kit Grose
    Jul 14, 2014 at 23:19
  • Yes, I am aware of that. When I did some research how other apps do that, most apps avoid the issue by using text. But as we are using a toolbar with icons that would not really work here. :)
    – doris
    Jul 15, 2014 at 7:15

1 Answer 1

Reset to default
1

The use of play and pause buttons is linked to audio and video files (i.e. items having a time extension) in users minds.

Given the nature of your items, you should rather use a check-box like representation. Your first option looks very appropriate and nice with the round boxes. I will take advantage of the iOS users' habits because it builds upon Apple's design (e.g. selection of several emails to move or discard them).

Regarding the "select all" button, you have two options whether you want to give the button a contextual impact and appearance or not :

  • going the Gmail way : the button starts empty and changes to a tick as the user first clicks it, changes to a minus sign as some items are deselected and, when it is not empty changes its behaviour to "delecting all" (and the cycle starts over). enter image description here

  • keeping the tick : starting with a ticked box and keep it that way whatever happens : the button's behaviour will then be the following : selecting all if none is selected, selecting all if some are selected and some are not, deselecting all if all are selected.

Improve this answer
2
  • Thanks for your answer. You supported my gut feeling about it, but as we had some discussion in the team I wanted to have an outside perspective on the issue! This helped a lot!
    – doris
    Jul 15, 2014 at 7:16
  • You are very welcome. Glad it helped !
    – Pierre
    Jul 15, 2014 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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