Are iPhone / mobile type toggle switches actually usable on the web, to replace a yes / no radio button option?

Will the change in normal user experience make it harder for the user to decide what to do? Radio Yes No buttons are pretty straight forward and have been used for a long time, and I am seeing these iPhone type toggle switches replacing these through new UI designs and was wondering if anyone had any knowledge or links to information that may confirm that they are actually better UI design for the user, rather than just something that looks cool.

Cheers, Warwick

1 Answer 1


On balance, I'm thinking websites use them because designers think they look cool (or there's a 'cool' piece of javascript behind them). Everybody want their interface to look like an iPhone - especially the marketing guys and the boardroom boys! (Okay - that's a generalization!)

There's a very strong argument for using what people are familiar with everywhere else, even if you do jazz up the style a little bit with some css. But then we end up in dull old world don't we.

On the plus side, they have a bigger visual area to hit with the mouse. Radio buttons and checkboxes often indicate the 'active' area as the little square or circle, although the text usually is also an active area, but does not successfully indicate this. They do combine two options into one finger tip sized active area which also reduces noise/clutter, and this is precisely why they are good for mobile.

On a website, space is (usually) less of a premium - and I wonder whether toggle switches would be more beneficial if the two textual options were shown on either side of the button, rather than just one option being written inside (or as we have seen here before, both options written inside the button!)

On the downside, websites often have to design for all types of users. Users who don't have an iPhone and have never come across one of these sliding toggle switches, might not immediately see how to use it, but a quick click makes it easy for user to 'get it'.

I've seen some pretty dire web implementations that are so confusing you can sit there for ages trying to work out which state it's currently supposed to be in or wondering whether it's showing the state it would be in if you clicked it.

It has to fit in with the rest of the look and feel of the site. In my opinion they look, behave, and work together better, when you have a vertically aligned group of them (as they are designed around the appearance of an employee in/out board, where you can rapidly see all who are in). So single use scenarios and horizontal rows of toggle switches are probably out - ('So then what do you use' I hear you ask - hmmm...)

I've not actually seen it in action on websites but I think if the toggle switch looks like an in/out slider, it should also be slideable to meet new users expectations, as well as be clickable for those used to iPhones.

  • Thanks, I think the statement you make about it having to fit in is the key and at this stage I think i'm going to just implement the good old radio buttons. Jul 13, 2011 at 22:27
  • @Roger Nice point there about 'state'- an implementation should be unambiguous about the current state and also indicate what will happen on 'toggling'.
    – Kartik G
    Oct 11, 2011 at 5:18

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.