It is likely that at some point in any designer/developer’s career, they have come across the great and powerful ‘form’ monster and its minions of multi-headed inputs. This is especially true if you live and breathe in the land of UXD.
Forms are the universal tool for requesting and obtaining user information or feedback. It’s a touchpoint between the application – the code – and the person in front of the screen – the user.
The key to creating a better form and deciding which inputs are appropriate is to ask yourself: why am I creating this form in the first place? What is the end goal for my application?
Eleonora Ibragimova said it best, “Before you even get into the details of (creating) your forms, ask yourself: “Is this form really necessary?” If you hesitated while answering, re-think the purpose of the form.”
After you’ve answered the question of exactly why the form is needed, the next step is to ask yourself these questions: Do you want to find out who your users are? Are you interested in their preferences? Is your form specifically geared towards required questions and answers that dramatically affect your application?
After this decision is made, the next step is identifying the information you want to obtain from your audience. What do you need to know? Please note: I did not ask you what you want to know, but instead what you need to know.
You may want to know the age of your audience or where they live, purely so you can have a direct insight into who your audience is. Seems harmless enough, right? Refrain from doing this. Although an organization may find this information useful, it – in most cases – does not have a direct impact on the user’s experience.
A general rule of thumb is to never request information from your user that is not used to directly enhance their overall journey through your application. Not only is it more impactful to ask for only the information you need, but this study found that by decreasing the number of input fields used in a form from eleven inputs all the way down to four inputs increased form completion by 120%.
ConversionXL also offers deeper insight into better form design here. When it comes to forms in general, what input types are the best fit for what data points?
The reason input types matter so much is that a user’s most valuable asset is time. The longer it takes for a user to fill out a form, the less likely they are to provide accurate information — or worse, they may not even fill out the form at all.
The decision process for what particular inputs to use, and for which data points, should take only a few seconds as long as you stick to these guidelines.
Text Field and Text Areas
Text fields are a staple of HTML, and probably the easiest input type to decide on. They should be used for open-ended data points like name, address, brief descriptions, etc. They should also be used if the data point is not a binary decision (yes or no, on or off, etc.), if the only relevant answers aren’t from a static or unchanging list of options, or when the answer required is more free-form and will more than likely fill up an entire screen width worth of space.
Radio buttons come in handy when you’re trying to have the user make a single selection from a group of choices. The idea here is that there can be only one possible choice – like when choosing the color of a car that you’re going to purchase. There can only be one outcome from that decision, so I recommend limiting the options to under a handful of choices to make the decision easier on the user.
Checkboxes and Checkbox Groups
Checkboxes are fairly versatile. A single checkbox can be used whenever a data point is a binary or Boolean decision (yes or no, on or off, etc.). However, a group of checkboxes can be useful when the user is able to select multiple values for a single data point. An example of a request would be asking which type of food a user prefers: spicy, sweet, crunchy, salty, etc.
Toggles originated on mobile devices and due to the adoption of this digital medium continuing to grow, this familiar input type is growing in use not only on mobile or tablet but desktop as well. These should be used whenever a data point is a binary or Boolean decision (yes or no, on or off, etc.).
Dropdowns become useful when a data point has only one possible value and the potential values to fill in that data point are specific and limited. The most common example of this would be picking a state, province or country. Dropdowns should be used instead of radio buttons specifically when the options number more than a handful and the values or details of each option are succinct.
Ranges or sliders should be used when the value of a data point is numerical and set to a limited range or when there are under a handful of choices that require limited detail to explain the difference between one option as compared to another. Their tactile design offers a great user experience on mobile devices and can speed up the form completion process dramatically when implemented properly.
There are a few other input types out there in the wilds of the internet, but we kept the list whittled down to the main contenders. Each one of these input types offers a unique set of benefit from one type to another. Hopefully, the above notes for each type of input will make the decision process easier next time you go to create a form for your projects.
What is the purpose of this form? What information is critical for this form to obtain? What inputs do I need to use to get the most information quickly from my user?
Here, you’ve been given the tools to become a form ninja. Use these guidelines before you begin any form in your application and you’ll cut down on the time used to design and implement your next form. If you have some secrets that help you speed up your form design process, share them in the comments below!
Thanks for reading.