Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I saw a similar question asked but it wasn't exactly the same. On mobile check boxes feel rather fiddly and to be fair on my search around the web I haven't seen checkboxes commonly used on mobile sites. I have filters that filter a news listing page. Currently the desktop version uses checkboxes to refine the results. What is most commonly used on mobile for multi-select options other than check boxes?

share|improve this question
    
What kind of information is there in the list? How many options will there be? –  rk. Apr 15 '13 at 15:41
    
News type (article, case study, and press release) and topic ( 9 topics to choose from) –  Reloaded Apr 15 '13 at 15:54
add comment

3 Answers

Make the entire row selectable, but also use checkboxes as an indication of the row being selected (if no checkboxes are used, selected and not selected states may be hard to differentiate).

Selected items

share|improve this answer
1  
If you want to enhance the "clickable" feeling of each row - use unfilled checkboxes on each row, wich becomes filled once the row is clicked... –  Henrik Ekblom Apr 16 '13 at 7:15
add comment

One option is to use full-width buttons combined with checkboxes or buttons that can be toggled.

You can see both styles used by jQuery Mobile:

jQuery Mobile checkboxes

jQuery Mobile toggle button set

Otherwise, make an entire table row or list item selectable as suggested by Henrik Ekblom.

And as per Android guidelines:

Typically, you should present each checkbox option in a vertical list.

share|improve this answer
add comment

The issue here is affordance. Checkboxes give a clear indication that selecting that element will simply select it and not perform some other action.

If you don't have checkboxes at all, you will be stuck with poorer affordance, and possibly confused users. Additionally, you will have to mark the selected items in some way, which would typically be a checkbox anyway - so you don't gain very much.


Alternatively, you can move the ability to select behind another action button. This is usually done in iOS apps, where select an (usually an 'edit') button, which then reveals the checkboxes to select. Only now selecting anywhere on the item checks the item.

enter image description here


The issue should be more about how you can make checkboxes less 'fiddly' and not about how you can avoid them. One of the better ways is to make the active area for the checkbox much larger than the visual area. You can then have a small, subtle, checkbox to show affordance, and have it easily selectable. This is what Gmail for Android does, and it has proven easy to use.

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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