I am working on a series of complex life insurance forms and trying to optimize using standard conventions...
I have this nasty list of medical diseases and a mutually exclusive option, "None of the above".
In the case where the user does not have any conditions, the client requires users to explicitly state this for legal reasons.
Any advice?
The most important thing to tackle here is making the dichotomy between "None of the above" and any other option as visually explicit as possible.
download bmml source – Wireframes created with Balsamiq Mockups
I think in this case it will be better to set the first radio button as default, because the "explicit" action needed is the 2nd, and setting the first one as default will save 1 click and probably avoid the most of the chances of the "what if the users decides to just click the first radio button?" situation. Btw, IMO that situation would be the same as the user leaving all checkboxes empty (in a design without radio buttons), a later validation will be needed anyway. I think several answers are mainly concentrating in user behavior (based in the presented UI) and losing some attention on questioning the visual design which plays a huge role in the UX changing/inducing users' perception and behavior when using the application.
This is a simpler approach, that also makes that differentiation clear:
Recently I saw this question about accessibility which made me aware of things like contrast levels in inputs. The "simpler" approach will not support that necessity unless you start placing info messages everywhere or assuming that the users understand/is comfortable with the app behavior.
When legal/health stuff is involved, I'd prefer to play defensive, making users select options that precisely states their input, even if it envoles a bit of extra complexity.
As always, I recommend trying these designs with real users, they are the ones that will have the last word on what emerges as the better solution.
Rewobs' answer is good, but it involves two levels of complexity: first clicking one of two ratio buttons, then selecting the checkboxes. The user experience of that design can be improved by simply having a visually separated None of the above box at the bottom.
Someone suggested clearing the users' choices, but that is bad because accidentally checking the box will clear your progress. Instead, just gray out the other choices, but still make them selectable. If the user checks or unchecks one of the grayed out boxes, it should uncheck the None of the above box to make them visible again.
If the user tries submitting the form with none of the checkboxes selected, not even the None of the above checkbox, then it knows that the user forgot to select something so they may return to it and fix the issue.
Check boxes are not ideal in your case since they are used for multi-selection (in theory, one can choose none of the above and another option - while Javascript can 'fix' this, it's not exactly obvious to users).
I may not be answering your question directly, but consider this format instead:
download bmml source – Wireframes created with Balsamiq Mockups
I think it'll serve your client better because it requires users to explicitly say no to each item (if your wish to have this done in a single click, add the tick all button).
The controls are radio buttons and per line only one can be selected. You can start with neither ticked to force user action, saying no.
Keep the UI you have, but add a bit of JS that makes the "None of the above" (NoTA) checkbox also clear any other already-checked boxes
If the user clicks just clicks on NoTA, the form behaves exactly as expected. If they click a few other options first, and then click 'NoTA,' they'll either notice you've foolproofed the form or not : )
I can't think of an example right now, but the experience of clicking an option in a group that affects other parts because of differing logic is hardly unconventional. You're essentially building in a type of validation. So don't worry about the UI police pulling you up for non-conventionalism.
Adding a clearing function to a checkbox is hardly so disruptive to the user's mental model and expectations to cause them to come crumbling down. From what we are seeing here, the alternatives seem to involve adding more UI and instructions, decreasing clarity, and adding complexity.
This strikes me as putting the cart of theory before the horse of practicality.
tl;dr Make the form behave as if the user is filling a paper sheet while someone stands beside them to nag them when they make mistakes.
I'd keep your design adding real-time validation:
download bmml source – Wireframes created with Balsamiq Mockups
If something is not right, change the last line:
If the user gets it right, the last line can simply disappear (user would think "okay, it stopped complaining"):
Of course, the same validation should occur when the form is submitted. If something isn't right stop right there, popup an error (the exact same message shown in real time is best, for consistency) and auto-scroll back to the question(s) which need to be fixed.
Don't use checkboxes.
I would try to split it into two questions:
In the last 3 years, have you had any nasty illnesses?
○ yes
○ no
Which ones?
○ headaches
○ colds
○ flu
○ arthritis
etc.
Only show question 2 once they answer "yes" to question 1.
The drawback is that the user might have had a disease which isn't on your list, so they would choose "yes", and then ... be flummoxed as to what to answer for question 2.
In which case, perhaps you could add a final (catch-all) "other" option to question 2. Maybe your business logic doesn't allow for that, I don't know.
TL;DR Based on an informal usability study conducted on a similar need (but in a different problem domain):
We faced a similar problem with a long list of facility condition problems (mold, broken windows, chipped paint: you wouldn't believe the minutiae of categorical problems a room could have). When a person performs a room condition walk through, they must explicitly check something to assert they've actually reviewed the room's condition.
The reported usability problem: while all rooms can have lots of problems, more than 95% of rooms have zero, one, or two problems. By far, the most common option is "none", the second most common options are "one" and "two" with about equal probability. Rooms with three or more negative conditions almost never exist.
I ran an informal usability study with four different scenarios:
The control, and original implementation, was #1. All scenarios were presented with similar formatting: same font, same line spacing, etc. If the "none" option was selected, there was no "graying of the list". (If you care, the population stats: 62 users, avg. age 37, 59% reported as female, 5% reported experiencing a form of color blindness.)
My theory was that #4 would receive the highest usability because the "none" option was both visually offset and a visually distinct element.
In ASCII art, these scenarios looked like:
#1
[ ] Mold, walls
[ ] Paint, chipped
[ ] Paint, faded
[ ] Window, glass, cracked
[ ] Window, frame, broken
...
[ ] No negative conditions
#2
[ ] Mold, walls
[ ] Paint, chipped
[ ] Paint, faded
[ ] Window, glass, cracked
[ ] Window, frame, broken
...
+----------------------+
| No negative conditions |
+----------------------+
#3
[ ] Mold, walls |
[ ] Paint, chipped |
[ ] Paint, faded | [ ] No negative conditions
[ ] Window, glass, cracked |
[ ] Window, frame, broken |
#4
[ ] Mold, walls |
[ ] Paint, chipped | +----------------------+
[ ] Paint, faded | | No negative conditions |
[ ] Window, glass, cracked | +----------------------+
[ ] Window, frame, broken |
To my surprise, users preferred #3. The use of a button beside the list was "non-intuitive", "confusing", and "disruptive". Further feedback suggested creating three side-by-side lists: one with zero options, one with the most common, and one with the less common (and interestingly more urgent issues). Like so:
NO PROBLEMS IN ROOM COMMON DEFICIENCIES URGENT NEEDS
---------------------------- ------------------------ --------------------------
[ ] No negative conditions | [ ] Paint, chipped | [ ] Uncommon problem 1
| [ ] Paint, faded | [ ] Uncommon problem 2
| | [ ] Uncommon problem 3
| | [ ] Uncommon problem 4
Subsequent trials indicated the two state error condition (no negative and another choice both selected) occurred only during edits. The feedback led us to implement a highlighting scheme:
You likely can't weight your options along most common/less common lines, so that would limit you to two lists. Depending upon the length of this list, you might need to investigate forms of in situ ordering. Alphabetic might suffice, but it may be better to categorize by functional system (diseases of the heart, diseases of the liver, diseases of weight, etc.) using headers.
I'm a big fan of both coordinated usability tests and A/B testing. If you have the time and budget, go for one of those. If not, go with what your gut says!
An option I encountered today is to make the "none of the above" option a radio button, like so:
download bmml source – Wireframes created with Balsamiq Mockups
When the radio button is selected, the checkboxes become deselected, and when the checkboxes are selected, the radio becomes deselected.
Separate the 'None of the above' checkbox from the list of checkboxes with a horizontal rule or some other separation aid.
This will help the user understand that this option is a different one from the normal options present in the list.
Also, I would suggest that checking this option will disable or remove all checked items from the list above.
If you feel this is intruding on the user's choice, you can provide a message to the user saying "It looks like you select xxx from the list. Do you want to go ahead with this choice or select 'None of the above' ?"
