I don't think the author was saying this should be a replacement for radio buttons. It's more of an informative exercise in visual design, analyzing the problems of one style and how it could be improved.

The entertaining bit (similar to the standard floppy-disk "Save" icon), is that most people who have grown up with the web always present... have never seen a radio with true "radio buttons".

Oh sh*t. It all makes sense now.

I'm kind of ashamed to write this, but I had never realized what "radio button" actually means.

I grew up knowing what they were (I was born in the 80s), but English not being my primary language, I never considered that "radio button" might mean "the kind of button you have in a radio". And I never felt the need to look for a definition :)

(are you done laughing?)

To be fair, English is my primary language and I've been doing web development for 10 years and I didn't know why they were called radio buttons until very recently!

I also grew up knowing what they were, and even as a native English speaker, I didn't make the connection to old car radios until I was an adult. I always figured it had something to do with "radius", since they have always (inexplicably, come to think of it) been presented as little circles.

I really think this idea that people haven't seen old technology is somewhat over-sold. I mean, I know about the Beatles, and I wasn't alive in the sixties, I know a good bit about classical antiquity which was thousands of years before my birth, I'm aware of room-sized computers from the '50s, and mechanical computers before that, and yes, I've played with old radios that have radio buttons in my dad's old cars, at thrift stores, and in my dad's 8-track player.

Don't car radios still have station preset buttons, e.g. labelled 1 through 5, with one (and only one) being lit when you press it?

They still have preset buttons, but many that I've encountered have no visual indication that one is selected.

Ah, true, mine don't light up.

I find it quite funny. The author started by demonstrating that sliders are inappropriate when representing 1-of-N choices. I agree. Then he proposed a visual change that makes things better. This change makes the GUI element look like and work like radio buttons. The only step remaining is to stop calling this GUI element sliders and start calling it (fancy) radio buttons.

I see a significant difference between radio buttons and the proposed solution. The change of state with radio buttons require a simple pointing and click. While with the sliding frame, a pointing and a constrained sliding operation is required.

When using a mouse the radio button is the most simple and efficient widget. But when using touch screens, the sliding frame seems a better solution because it avoids accidental state change, while still being a natural and intuitive operation to do with the finger.

So I would say that for touch screen devices (especially phones) the proposed solution is excellent and better than radio buttons.

That's totally a good point. Following this idea, in touchscreen devices there should be only one widget for both radio-button and checkboxes (which can be represented as boolean sliders)

I think the big difference between a slider and radio buttons is how much screen space is taken up. For radio buttons, you have the text description ("ON", "OFF") along with an indicator / selector to the side. Whereas the slider combines these two elements. This is more important on smaller screens, where the text / selection area would have to be enlarged to accommodate finger input.

"fancy radio buttons" doesn't slide off the tongue quite as well though.

I thought the same thing. Radiobuttons convey much better that there is a single choice to be made among a list of options. Especially if you have a list of multi-word options, you really really should not be using those radio buttons.

For his example of the different game flavors, it does not make sense at all to have a slider, simply have users click on the option they want to have, and jump to a next page to ask for details and confirm everything. You need to have a confirmation page anyway.

Really? I think your above-average knowledge of the intricacies of web design may actually be misleading you here. My guess is that normal people can't actually tell radiobuttons from checkboxes until they click around and find they can't select two options at once.

I think these look incredible and I can't wait for a usable version.

[Edited for clarity]

> normal people can't actually tell a checkbox from a radiobutton until they click around and find they can't select two options at once

this may be true for a certain definition of normal, but the point for this game example is that you don't need EITHER: just have the user click on the desired option and let them be lead to the next/confirmation page... drop dead simple 'cause, as wise men have said before: "no UI" > "less UI" > "your UI" (where ">" = "is better than")

Hmmm, I think you and jvdh are right. Simple selection is better than a slider in that case. In general though, I still don't like radiobuttons:)

Thanks for sharing the UI quote. I hadn't heard it before and I immediately see the, ah, practical application it has to my own work.

Well, there's no indication the usable click area is limited to the slider. In the games setup, it would make sense that clicking anywhere in the option might trigger the appropriate slider change event.

It adds a single "continue" click from what you seem to propose, but if the rest of the checkout process is streamlined, that may be acceptable.

Every slider implementation I've seen on the web has been inspired by sliders in iOS, where they provide a bigger touch target. iOS sliders also give considerable information about their current state: the word "OFF" is in grey text on white, and "ON" is in white text on a vivid blue background.

I agree that they're not really appropriate on desktop browsers, and I haven't really seen an implementation of them that impresses me or gets it completely "right."

The iOS slider is so good, that one site I use literally just screenshotted its on and off positions... and used them as a checkbox.

While they provide a bigger touch target, I don't think they are intuitive.

Edited: I distinctly remember being confused about what kind of control they were the first time I saw them.

What did you try? There's only really two verbs in iOS (tap and drag), and they both work.

I still find them confusing.

Perhaps (as pure speculation) it's cognitively less taxing for average users to interact with an element that reminds them of a physical switch.

I'm imagining a voting paper made out of cardboard, where you slid a piece into place before stuffing into a ballot box.

In the digitl world? A well thought out and presented slider might actually encourage engagement with a feature, overrelying on abstract radio buttons.

give me a touch screen and i will prefer the slider

And your mobile browser could (if it agreed with you of course) actually render that checkbox as a slider. Semantics!