Thoughts on checkbox controls in iOS7 Apps

31 Mar 2014 - 9:51am
13 weeks ago
7 replies
4040 reads
tdellaringa
2006

As there is no checkbox control in iOS, it always become a bit of an issue on how to mimic that functionality in an app or in a mobile site. The Apple HIG is strangely silent on the issue, other than offering up a segmented control that will only accept a single choice. That's fine for a radio group, but doesn't work for something where you want someone to check a box before continuing, like accepting terms and conditions. 

One might consider using the on/off slider control, but that's not really its intended use. I know there are ways to use an image and set an on/off state - just have a big checkbox that fits thumb/finger interaction.

Just wondering what people thought about this, and what solutions they have used. 

Comments

31 Mar 2014 - 11:43am
Nils-Erik Gustafsson
2009

In the case of accepting terms etc, how about two ordinary, easy to hit buttons labelled "Accept" and "Decline" (or "Don't accept")?

if you are setting options, the IOS settings use the on/off slider, and I think it makes sense and is easy to hit.

Good luck!

31 Mar 2014 - 2:56pm
DrWex
2006

Without a checkbox how are users to indicate "M of N" selections?  The example I always give my students is "select toppings for a pizza". The presumed correct solution is a set of checkboxes for extra cheese, pepperoni, mushrooms, etc. How would you implement this pizza-ordering app with no checkboxes?

31 Mar 2014 - 5:36pm
Nils-Erik Gustafsson
2009

Methinks you should allow yourself to think outside the tick-box, DrWex:

Extra:

cheese               (I     )

mushrooms        (I     )

pepperoni           (    O)

Trying to mimic the IOS on/off buttons with labels turned on. Imagine the green colour and the round control.


31 Mar 2014 - 5:59pm
DrWex
2006

It's hard to tell from your representation, but I have the sense that this solution uses about three times as much space as a checkbox.  Rather than one "unit" of space for a checkbox you'd need about two "units" of space - one for each of the 1 and 0 controls, and some additional space to separate them. That seems highly inefficient.

1 Apr 2014 - 12:23am
Nils-Erik Gustafsson
2009

Look at the IOS settings to see what the on/off slider really looks like.

Yes, the on/off slider takes up more space than the traditional checkbox, but keep in mind that users are pointing with their finger and not with a cursor. The control must be bigger. Remember Fitt's law?

1 Apr 2014 - 6:17am
DrWex
2006

I'm well aware of Fitt's Law; however, I think my argument still applies since you'd have to scale up either the checkbox or the 0/1 control proportionally.  You still pay 3x the real estate and that seems unfortunate on a mobile device where screen real estate is at a premium.

1 Apr 2014 - 7:46am
tdellaringa
2006

Ah, I wasn't looking for a radio group solution, I must not have explained it as well as I should have. 

I was in need of just one checkbox, where a user would accept terms. I could use an on/off control there, and I've seen it done before. It doesn't quite feel right, it's not a setting. Many apps just create their own checkbox, big enough for finger targets. 

What I ended up doing was moving the acceptance to the next page. So the call to action page (it's something to enroll in) has the enroll CTA button. When you tap enroll, you get a page with the terms at the top, and an "I accept" button at the bottom (with a secondary "no thanks" link below). They can scroll through and read the terms if they want, the buttons hold their position. We'll need to test it, but I think it will work out fine. 

In regard to Nils suggestion - I don't see how it's any different than using 3 larger checkboxes. You still have a label and a control. Seems to me they would both use the same amount of space. If you are thinking otherwise, maybe you could show an example. 

Syndicate content Get the feed