I have a need to allow a user to select x of n from a list of elements. The specific example is 9 elements out of perhaps 20.

This would be in the context of a settings context (rather than a form one would be filling out).

What I've come up with thus far. Option #1:

List screen:

item 1 >
item 2 >
item 3 >
item n >

That screen would have the already selected items highlighted. Clicking on an item would take you to that item's screen where you'd see the traditional on/off slider control as part of the details for that item:

< back
on [ off ]

That seems to adhere to touch UI principles, but seems clumsy. You have to flip between screens and if you try to select #10 when you can only have 9 selected, then we have to notify you to go back, pick another, unselect, return, then pick this one again. Tedious.

Option #2:

This would be more of a traditional check list:

[ 1 ] item 1 >
[   ] item 2 >
[ 2 ] item 3 >
[   ] item n >

tapping the widget will select it by giving it a number.

The main advantage is that you don't have to flip between pages to select the items.

Drawbacks would be that the check boxes could interfere with the scrolling. The other issue is the numbering. If I unselect #2, then the other selected ones should renumber (3 becomes 2, 4 becomes 3, etc.). Certainly easy to do, but not sure if that would be a bad UX.

Is there a preferred way to handle this on a touch device? Any other suggestions or examples seen in the wild?


Probably you should go with simple checkboxes and have a counter on top/bottom of the screen (near the submit button will be the best).

[ ] item 1
[ ] item 2
[x] item 3
[x] item 4

2 of 9 selected

Another solution could be a kind of a basket of limited size where you put selected items by dragging & dropping them here. It could be hard to use on smartphones, but on a bigger devices such an iPad it should work fine. Basket is better because you always see what you’ve selected (in a long checkboxes list you will always see only a part of the selection).

  • Ya know, I've implemented that before on the desktop and don't know why that didn't occur to me as being usable on mobile. It's certainly work. Good suggestion! – DA01 Apr 18 '11 at 13:58

How about simply tapping the item in the list itself to toggle its selection state? :-)

  • That could work. The original intent was that you'd be doing more with this screen, meaning you could tap an item to get to the item's details where there are more properties to edit. But that doesn't mean I couldn't just have that be a different screen. So, good suggestion. – DA01 Apr 18 '11 at 14:00
  • ‘More properties to edit’ seem like a classic case for a Detail Disclosure Button (developer.apple.com/library/ios/#documentation/userexperience/…) – Sascha Brossmann Apr 21 '11 at 0:47

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.