0

have an app that needs to select multiple checkboxses. These checkboxes are grouped by category. Something like this:

enter image description here.

For touch devices (iPad, iPhone,etc) this is not so nice. Hard to tap on checks, while you might need tonscroll the area. The select options might be more than 80 options. You are allowed to select multiple options.

Is there a different way I can achieve this that's more touch friendly.

3
  • Why would the checkboxes be difficult to activate? If this were an HTML document, the appropriate use of the label element would nullify the "difficult to click" properties of checkboxes. Is there an equivalent to this element in whatever you're using to build your app?
    – cimmanon
    Commented Jan 24, 2014 at 19:27
  • 1
    What these check boxes are for? I think there may be a method to get rid of 80 checkboxes altogether! How many can be selected at most?
    – kBisla
    Commented Jan 25, 2014 at 1:38
  • That is the question: what ui should I use for mobile to get rid of these 80 checkboxes. I do need the the user to opt between 80 different cities of the world.
    – user41529
    Commented Jan 28, 2014 at 6:20

1 Answer 1

1

Standard checkboxes are not typical on touch devices.

If they must be used, the preferred UI implementation would be a 'selectable bar' such as this android example:

enter image description here

Or perhaps a toggle would work ala iOS:

enter image description here

In both cases, the advantage with these is you are creating a larger touch area than your typical HTML checkbox (yes, the label is and should be a trigger as well, but visually many people miss that fact).

Regardless of your particular UI control, you'll likely want to stack them vertically. It's much easier to scroll, scan and select items on a small device when it's all vertical.

That said, you mentioned

The select options might be more than 80 options

That is likely not solvable via a UI control. At the very least, you need to re-think the user flow and how they're going to read through 80 options. Can this be paginated? Tabs? Wizard? Panels? Sliders? Anything but 80 options on one screen?

Ideally, there'd be a broader rethinking of IA and business rules/requirements here. That's a daunting amount of items for a person to scan through and select on a desktop--let alone a mobile device.

Your Answer

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

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