Welcome to my series on hacking UX Design of Forms, and this is part 1 of many to come. Thanks to companies like Ebay and Amazon who’s contribution to user experience of forms is so fascinating that you can literally learn a ton just by looking at their interface. How both of them are unique could be another huge blog post. For now, let’s start our journey towards hacking form design by optimizing some of the most of common elements of your form.
If you Google, you will see plenty of negligence, especially in this era of startups, we observe a ton of forms that are anti-usable. Most of them won’t tell you intuitively what to do with an element, you have to put stress at some level to understand what and how exactly they are going to function. These forms are not intuitive.
Checkbox, Radio buttons and Dropdowns
With this post I will be focusing on Checkbox, Radio buttons and Dropdowns. What I love about them is the fact that there’s always strong user assumptions associated with these forms. One has to respect those association to provide ease of use to your users.
First of all, look at your form, do you think options are correlated? If the products are mutually exclusive, then there’s no point in using a checkbox for this use case. Whenever there’s a conflicting choice one should go for Radio buttons, as they emphasize mutual exclusion. In simple words, when Radio buttons are used with Option A and Option B, the forms says “Choose A or Choose B, you cannot choose both”. Using checkbox here might confuse a user for a very small time, tempting to think twice before filling the form. That’s poor user experience.
Dropdowns doesn’t fits here as well, because you don’t want user to go through extra efforts just to select one of the two options, right? Also, dropdowns badly rely on how familiar the user is with your system, and building muscle memory for something like this doesn’t helps anyone.
Using a radio button means ‘if this then that’, the strong correlation doesn’t just affects form filling, it also impacts your service. Consider yourself buying a Wacom Intuos and a creative stylus with it. Selecting both options using radio button will get user thinking that both of them are going to be delivered together in a single package (correlation!). While using checkbox you might think that well those two packages are going to be delivered in separate boxes.
You can for yourself feel the difference in expectations when you look at above image. It is okay if you can’t see any difference right now, design is the art of looking, you will get there shortly.
If possible try to provide some visual feedback in a form of summary that informs choices a user is making.
To make your form more usable, consider adding a button to the background of your radio button or checkbox. The button will look pressed when user selects an option. To further add make the form more usable you can extend the clickable area and make it the same as the button. This will make it more easier for the user to select the options. Whenever user hovers an option, the entire clickable area changes its color telling the user that one can click here for an easy selection.
Here’s how the radio button and checkboxes would look like with a button added as an affordance. As you can see, the button changes its color to provide visual feedback, telling the user more accurately on the choices that he/she made.
I will roll out other parts soon, meanwhile if you found this interesting, please share. In case, if you have anything to say, drop me a comment. I would love to hear from your side, specially about what you would like to see next in series.