Checkboxes in Web Design
Check boxes are one of the most ubiquitous elements on the web. Present in almost every contact form, they are often the most ignored items in web design. And often, its these small, seemingly unimportant items that can really finish off any design.
The web has come a long way from its beginnings and the check box has basically never changed since those days, and most designers leave it alone and let the browser or operating system look after the styling of it. Most of the time this will work perfectly, but sometimes an extra bit of styling can add hugely to the design of a form, and thus make it fit in better with the rest of the web design.
Do we need radio and check boxes to look different?
This section was prompted while visiting the very excellent http://www.51bits.com, as recommended by Elliot Jay Stocks. The contact page on this site, uses the same excellent designed check box for both radio and check box form elements. At first, I was a bit put out by this. I wondered about the decision and whether it was the right one. I expected the behavior to be different when I saw the check appear.
I wanted to ask Chris Sealey (designer,developer of 51bits) about this, but I’m a wuss – and someone else got there first. Eric Eggert (http://twitter.com/yatil) pointed out the same thing:
Chris (http://twitter.com/51bits) replied back,
And after thinking about it for a while, I have to say I agree. Does the user care what it appears like? I’d almost go as far as to say that if you need to differentiate with UI elements then your options aren’t clear enough for the user to interpret correctly. As long as the options are intuitive the user will know how many or how few options the user has to click on.
The check boxes in question…
from 51bits.com/Contact
You can clearly tell from the options whether you should be clicking more than one option at a time. Plus the design is perfect, I really like those check boxes.
Conclusion
There’s two issues here I feel. As a designer, you owe it to your client to make their design be… well… beautiful. Even better if you are your own client as in this case. So in this case, the options are pretty fixed, Chris knows what the options are going to be and is smart enough to put them together in such a way that there is no confusion.
But then, if you hand your design to someone else (i.e. the client) and they have the ability to change things like this, then they might not be as aware of the issues that could arise if they make the options more ambiguous. We’ve all seen terrible polls and option lists so this isn’t as unlikely as we might hope.
Are there any other great examples of modified check boxes? What are other peoples feelings on the matter?
Join the Conversation!