Tue, 14 Jan 2003
The Radio Button vs. Checkbox Design Dilemma
While considering some UI design issues this morning, and in the midst of arguing with people about the design, I decided to document my beliefs about user interface design with regard to radio buttons and checkboxes. I use the word beliefs because 1) while garnered from years of experience, that's all they are, and 2) they contradict typical advice with regard to UI design. In short, it's an oft overlooked and undertreated area of design. A cursory google search yielded nothing particularly useful, so here's an exercise to demonstrate what I'm talking about.
An Exercise
You are given the following paper form and told to replicate the form in a web browser.
-------------------------------------------
Schedule A Attached Yes _____ No _____
Schedule B Attached Yes _____ No _____
Schedule C Attached Yes _____ No _____
Schedule D Attached Yes _____ No _____
-------------------------------------------
One school of thought is to replicate the form exactly with absolutely no changes whatsoever. I reject this approach for a number of reasons not the least of which is that it doesn't optimize the experience based on the advantages that the human computer interface offers. Instead, my approach is to try and find the optimal solution while balancing the competing design goals of correctness, clarity, usability, etc.
If we go through the typical analysis, we pause at the schedule attachments section and ponder whether it can be improved in the web design. The answer is yes, it can.
So we introduce a simple hierarchy based on the common word attachments. That is...
Attachments
Schedule A
Schedule B
Schedule C
Schedule D
This is where the problems begin.
Typical web design would just convert the yes/no choices into yes/no radio buttons but I reject that design for a number of reasons. One major reason is the resulting increase in clutter. This is a simple example but imagine a form that has 20 yes/no choices. 20 choices means 40 GUI widgets with a radio button design. That's a lot of visual clutter.
A better approach is to realize that within this hierarchy of attachments, each schedule is not mutually exclusive. If it were, you'd have one radio button per schedule. Instead what you have is a single checkbox per schedule, indicating that 0-4 schedule attachments may be chosen.
If more designers would think about the radio button vs. checkbox dilemma in such detail, the result would be more usable web forms. And that would be a good thing.
Posted at: 10:22 | permalink
