51

I've been tasked with designing a simple questionnaire design with a lot of different types of questions. I've been taking a lot of web-based surveys myself as well as testing some with users. The biggest issue has been that it is difficult to click on standard-sized radio buttons and checkboxes, especially after the user gets tired due to too many questions in the survey. One remedy is to make sure the checkbox/radio button label is clickable as well, but quite few users actually understand this.

So, my solution is to create some sort of buttons/containers that can be selected, but how would you discern between single-select (radio button) and multi-select (checkbox) alternatives? Or would you solve it some other way? My halting solution, Balsamiq-style:

The same goes for when displaying matrix questions. In that case it is even harder to hit the alternative you want, so my solution is based on a grid with a much larger area to click and also easier to hit the alternative you want with multiple questions. My halting solution to this one:

Any suggestions would be much appreciated!

Improve this question
1
  • Mostly it's enough to also make the text belonging to the checkbox part of the select/deselect process.
    – Pieter B
    Commented Jul 5, 2012 at 13:00

10 Answers 10

Reset to default
29

Martin, take a look at what jQuery Mobile has done with radio buttons and checkboxes. Here is a demo page:

jQuery Mobile Docs: Gallery of Form Controls

They give you two viable options that I think you'll enjoy.

  1. Keep checkboxes and radio buttons looking the same but making them have a surface area that is larger and more clickable.

  2. The new Apple iOS inspired UISegmentedControl. This is a new UI that has a similar purpose to radio buttons. It is a compact horizontal style control that is easy to press and read.

Here's a screenshot:

Another good Web framework is Jo, but they don't have a demo that you can link to directly. Just download their framework and open up the examples. It's equally impressive.

I've read the replies of many others here that say why it breaks with what Apple stated in their UI guidelines in the early 1980s. Still, even Apple broke from the mold when they made the iOS by creating the UISegmentedControl. I believe Martin has a good reason to ask his question, and I do believe there are very compelling alternatives that work in the real world.

Improve this answer
1
  • Aaron, that is really nice. Our solution was very close to that one, but not as good. Thank you.
    – Martin Christensen
    Commented Jun 3, 2011 at 20:15
42

Maybe you can try a mix of usual buttons (to have a big area to click on) and the usual radio/checkbox controls. I wouldn't totally remove those controls because then you'd have to add text descriptions like "Select only one." or "Select multiple."

You could also grey out the radios/checkboxes that they are just a subtle hint.

enter image description here

Improve this answer
5
  • 4
    I like this. You wouldn't even need to make them look like buttons by default, but simply have the shaded area appear on hover of either the checkbox or the label, helping the user 'tie them together' and understand that the entire area is clickable (be sure to change the cursor as well)
    – DA01
    Commented Apr 29, 2011 at 18:05
  • Nice idea. Like a smooth blending in.
    – erikrojo
    Commented Apr 29, 2011 at 18:13
  • The combination of your ideas gets my vote. I will try that on Monday. :) It is simple and thus smart. Thanks!
    – Martin Christensen
    Commented Apr 29, 2011 at 21:55
  • +1 (more if it were allowed) I really like this. It is simple and effective, especially if just shaded and bordered instead of "buttony".
    – Marjan Venema
    Commented Apr 30, 2011 at 7:22
  • +1 here, good idea to keep radio buttons & check boxes, even better idea to extend clickable area and emphasize current state by color
    – ezmilhouse
    Commented May 9, 2011 at 7:37
10

The problems I see with your solution:

  • Buttons aren't usually selected but they perform an action of some kind (unexpected behavior)
  • You can't distinguish between single and multi select options
  • Users are used to radio buttons and checkboxes, they know how they work and what to expect
  • Grid solution: Here you don't see what's clickable at all

One easy solution: Make buttons that look and behave like radio buttons and checkboxes but make them bigger so it's easier to click them.

Hope that helps, Phil

Improve this answer
3
  • 1
    Make sure you do a lot of testing if you choose to resize with CSS, as browsers are inconsistent in the way they display form elements. Old, but still relevant examples: 456bereastreet.com/lab/styling-form-controls-revisited/…
    – bendur
    Commented Apr 29, 2011 at 16:08
  • Hi Phil. The problem with your easy solution is that we've tried that and our users still aim for the actual radio button. Sure, if they miss, it will be selected anyway, but they still need to move the mouse that far.
    – Martin Christensen
    Commented Apr 29, 2011 at 16:25
  • 1
    Hi Martin - sorry I don't really get your reply. What's the problem if the user aims for the radio button if it's big enough? Also: For the grid solution there is nowhere else to click anyway. Or did I misunderstand something?
    – Phil
    Commented May 2, 2011 at 8:26
3

Options:

  1. A slider. I find the slider an interesting choice especially questions like "rate this between 1-10". With and without grooves.
  2. Select box. Sometimes every choices doesn't need to be visible. Decide how important showing all the choices are.
  3. The ones you demonstrated above.

Hmm, I think those are your choices. See Alan Cooper's book: About Face 3 for more details..

Improve this answer
2
  • The slider would not work, I'm afraid, since we would not have default values for them. Or, could that problem be solved in some smart way?
    – Martin Christensen
    Commented Apr 29, 2011 at 16:27
  • But I really do like the slider option. We would have gone for that one, if it wasn't for the (just now (thank you, mr. press-enter-to-add)) mentioned problem.
    – Martin Christensen
    Commented Apr 29, 2011 at 16:28
3

I'd generally echo what Phil says above, but I'd also suggest you really ask yourself why you're looking at changing some web form conventions that are literally as old as the modern browser. As Phil says, users know how radio buttons and checkboxes work and, even if they can't explicitly articulate their purpose, it's second nature that checkboxes allow multiple choices while radios allow only one.

Above, you say, "The biggest issue has been that it is difficult to click on standard-sized radio buttons and checkboxes, especially after the user gets tired due to too many questions in the survey." However, I'm not sure why you'd feel this way. What end-user research do you have suggesting this is true. Form/survey fatigue usually occurs when there are too many fields/questions on a page and that can be alleviated by chunking the form into logical segments and showing a progress bar.

In your proposed solution, again as Phil says, your grid doesn't make it clear what's clickable and your buttons don't provide a simple way to do multiple selections. There is the convention of a drop-down where the user can hold CTRL + click multiples, but why would you do that if you can just give them checkboxes?

As you said, you can make it so the entire form field, including the label, is clickable to increase the ease of clicking and you could also consider increasing the font size and line height to further assist users. Beyond those considerations, I'm not seeing why you'd break convention the way you're suggesting.

Improve this answer
2
  • Thanks for your input. I do have quite a lot of end-user research at hand, since I work for a company that have been working with survey tool-providers for the last ten years. We have a real problem here, a lot of our users get irritated (and our user base is around 10 million). I was trying to walk down the local maxima peak and find another one, a better solution perhaps in the long-run. So, yes, I am breaking standards, and we will perhaps revert to the basics (although with bigger text etc. as you recommend), but it would be nice if there was a better solution.
    – Martin Christensen
    Commented Apr 29, 2011 at 16:33
  • I'd say then you develop two prototypes, one based on traditional form standards and design them as clearly as possible (lots of negative space, clear labeling, good font size, entire field clickable, etc) and then build something a little more blue-sky and then do some A/B testing. When you really need to know how users will react to your concept this is a pretty good way to find out if you are on the right track or if there's a reason these options are tried and true. Survey monkey for example makes radios/checkboxes BIG AND CLEAR with nice styling, but still uses them ;-)
    – jameswanless
    Commented Apr 29, 2011 at 19:12
2

I usually find that providing users with the standard controls is more intuitive for them standard checkboxes instead of buttonslike checkboxes, and its less work from our side, we often find ourselves to make things unique, but the thing is that simple works just fine, and less is often more, on the other side the matrix question is quite a good idea just as have been suggested, be sure to make the alternatives visually clickeables, good luck!

Improve this answer
1
  • Yes, the thing that is simple usually works fine, but in this case we want to climb down from the local maxima and try to find a better solution.
    – Martin Christensen
    Commented Apr 29, 2011 at 16:26
2

I think your best solution here is to keep using standard types of input controls, but make them bigger.

This allows the types of inputs to be recognizable, but will increase their usability by making the target size bigger. This could probably be done with different images for the input control states.

As I pointed out under Phil's answer, doing this with CSS only could cause problems, but I'm sure you could get around it with javascript. Of course you'll need to do lots of testing to make sure the user experience is consistent between browsers.

Improve this answer
2

I agree with erikrojo's solution for checkbox+label pairing (using some form of 'this whole thing is clickable hover affordance')

As for the matrix, a suggestion would be a form of the 'star rating' system but perhaps visualized around an axis (neutral):

bad           great
[        |        ]

On hover, you'd see where along the axis you are with a visual on the range bar as well as a tool tip showing you the current plain-language rating (rather than just a number):

bad           great
[        |---     ]
            ^good

And then a click would 'lock it in':

bad           great
[        |XXX     ] good
Improve this answer
2

Has anyone ever tested whether your average joe really does know the difference between a checkbox and a radio button? Like, asking them a question that could have one or more answers but only provides radio buttons to choose from. Then you can see if they try to select more than one or if they realise that the radios mean they can only choose one. Could even just put a checkbox and radio button in front of them and ask them to explain the difference.

I've been working on something similar and came up with a design much like yours but as people have pointed out, there was no way to determine which is a multi-select. I wasn't convinced the user would be able to determine it's a multi-select just because there's a square on the left hand side of the button rather than a circle so at the moment the question says "My question here? Please select all that apply" but I'm not sure how I feel about this.

Improve this answer
1

The challenge with your suggestion for checkbox and radio box replacements is that there is no visual distinguishing between the two types of behviours. The best UI design always sets user expectations BEFORE they have to interact with the control. I don't have enough rep yet to comment on erikrojo's response, but that certainly has the benefit of leveraging off of known idioms, while enjoying a larger hit zone.

A slider, as Glen suggests has the benefit of modeling itself on real-world tactile user interfaces that can have only a single state at a time - there's no ambiguity there, the way there is with radio buttons. The slider unfortunately also comes with its own implementation and usability challenges, and is much harder to lay out in the context of a form with a diverse control set.

A dial is a variant of a slider that integrates itself better into a layout (it's generally more compact), at a significant usability hit (the motion of the control is rotational - but user mouse input tends to be axonometric, and this can lead to confusion across different implementations)

A different approach might be to design an additional component to both the single-select and the multi-select controls that accurately informs the user of how many selections he has available to make. I'll try to explain the visual using real-world elements, and you could then abstract that into a digital representation in any way you like. Consider a bank of lightbulbs. If I have 5 possible answers, and I may select all, some or none, then I have 5 lightbulbs, all of them on. As I click my answer buttons (not the lightbulbs - they are not directly interactable) a lightbulb goes out and the button I clicked in some way becomes selected. As I continue to select additional answers, more lightbulbs extinguish.

Continuing with this concept, if I have a multiple-choice, single-answer question, then there is only one lightbulb in the bank. It's clear to me from the start that I get one answer.

Obviously using lightbulbs in your interface will look silly (or maybe not?) but you get the idea - we set the expectation right off the bat about how many selections / answers the user will be allowed to make for each question. One downside of this approach would be that the user may feel she has to "use up" all her choices before moving on. This could be easily mitigated by making it clear that after the user has made her first selection (even if multiple answers are possible), the next question becomes active or available. This could be done in a myriad of ways, from disabling / hiding the next question, to simply showing a checkmark or other indicator that the requirements for the current question have been met.

Improve this answer
3
  • Do you feel that radio buttons don't effectively communicate the fact that only one can be selected? I've never considered that as an issue amongst the general population, but it certainly could be, I suppose.
    – DA01
    Commented May 3, 2011 at 14:52
  • I think that there's since the late 70s there haven't been any physical devices that use a radio-button style interface (actually, that's not true - blenders into the 90s still used them) so they're not as physically intuitive; however they have become the de facto convention since the advent of the web form. No, I certainly feel that they are intuitive. Though your question does make me wonder - if we showed a picture of a checkbox and a radio button and surveyed 1000 users about what the difference was between the two (without leading the question) I wonder how many would know?
    – Tom Auger
    Commented May 3, 2011 at 18:58
  • ...heh sounds like a good question for Mechanical Turk. Anyone wanna help me raise the $100 to find out?
    – Tom Auger
    Commented May 3, 2011 at 18:59

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.