So, I'm trying to use an optimal UX design for three choices that are responses to questions. The three choices are choice 1, choice 2 and "I don't know." Currently, I've been considering using radio buttons with text next to them, but I'm wondering if there is a better option. I've considered making the item choices into button graphics and having them change color when the user clicks, but that process is very time-consuming and inflexible if you wish to change the text. I'm really open to listening for ideas here.


In what context does this option appear? Is it the only thing on the page or is the UI cluttered with other elements? Or is it somewhere in between?

If the screen is pretty barren, I would use radio buttons. That doesn't prevent you from having a button-like background surround them after you select them. Something like this:

enter image description here

But using buttons as radio buttons can be a little bit confusing.

  • I think radio buttons are better for busy screens with other form elements. Otherwise it is just an extra step. (1. select the radio button, 2. click submit)
    – jonshariat
    May 3 '11 at 18:42
  • Thanks jonshariat, I was not very clear. I meant that I would use "fancy" radio buttons like the above image when there is not much else on the screen (as opposed to using a dropdown or regular radio buttons). Regular radio buttons would probably suffice at other times.
    – Lens
    May 3 '11 at 19:13
  • Lens, thanks so much for that advice. I'll be going with a radio button with a background to contrast, exactly as you said. I also really love the visual appeal of it, which is why I was hesitant on radio buttons to begin with. The only small thing I will add is that clicking anywhere on the image can make the radio button turn on (but not off), since a sizeable part of my target audience may not be technology proficient. No point in penalizing them for a slight misclick since we know their intentions. May 4 '11 at 23:46

You can do something interesting things with labels and radio buttons; making them stylistically like buttons or image buttons.

I've had good results by using radio buttons in situations like these and styling the parent label to look somewhat like the tags used on this site - except there would be a radio button before the text.

Play around with it, I think you'll find what you're looking for.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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