Friday, March 13, 2015

forms - Alternatives to checkboxes and radio buttons in web-based surveys?


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!



Answer




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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...