The ultimate goal of a website or a mobile application is conversion, and online forms play a vital role in doing that. Therefore, getting a form’s UX right is critical for business and it becomes a topmost task of a product designer to design a form. Before we jump into examples lets look at some vital points.
What Makes any Form Effective
-
Perception of complexity: The first thing users do when they see a new form is estimate how much time is required to complete it. Users do this by scanning the form. Perception plays a crucial role in the process of estimation. The more complex a form looks, the more likely users will abandon the process.
-
Cost of Interaction: The more effort users have to make to complete a form, the less usable the form is. A high interaction cost could be the result of data that is difficult to input, an inability to understand the meaning of some questions, or confusion about error messages.
5 Tips that Will Improve Any Online Form
1. Ask as less as possible; always.
Always ask the most relevant info only on one particular step. By asking only the relevant information, and minimizing the number of objects on the screen you can decrease the cognitive load on them and boost up the completion time.
as a result:
- Boost up the completion time.
- Dramatically decrease the cognitive load on a user by decreasing the amount of objects on the screen.
2. Use a single column design.
Eye-tracking studies have shown that simple one-column layouts are better than multi-column layouts with questions positioned side-by-side. The only exception to this rule is when asking for dates (day, month, year) or time (hours and minutes), where multiple fields are expected to be on one line.
However, there are exceptions. For instance, the short and logical related fields like City, State, and Zip could be presented on the same row. For mobile devices, you can consider separate rows.
3. Use smart defaults & Explain any input or formatting requirements
If you’re asking questions like phone number or country, you should suggest a default phone extension or country based on the user’s IP address.
For example.
- Most of the times you can easily detect a user’s country and the city by IP or geolocation.
- If a user came to checkout process from your newsletter/marketing campaign, you definitely know his email. Hence, pre-fill the Email field.
To significantly decrease the amount of bounce, mistakes, wrong data, etc. you should always use the constraints on what can be inputted into the field:
- min and max length (num. of characters)
- format;
- numeric, alphabetic, alphanumeric, all symbols;
- dependencies, etc.
HTML input types
Set HTML input types to show the correct keypad. Seven input types are relevant to form design:
- input
type="text"displays the mobile device’s normal keyboard. - input
type="email"displays the normal keyboard and ‘@’ and ‘.com’. - input
type="tel"displays the numeric 0 to 9 keypad. - input
type="number"displays a keyboard with numbers and symbols. - input
type="date"displays the mobile device’s date selector. - input
type="datetime"displays the mobile device’s date and time selector. - input
type="month"displays the mobile device’s month and year selector.
4. Clearly explain why you’re asking for sensitive information
People are increasingly concerned over privacy and information security. If you must ask for sensitive information, make sure you explain why it is needed using support text below the field. With no explanation, they are likely to abandon the form.
5. Prominent Feedback
- Inline Error Message: Always display error messages inline. The message could be displayed just below or beside the input fields. Also, highlight the input fields with a contrast color.
- Don’t blame users: You should avoid negative language and refrain from blaming your user for the error in the form. A message like “You did not enter your name” could be replaced with “Please enter your name”.
- Error Message Copy: Be concise and specific about the Error Message. A message like “Something went wrong” is vague and users will be confused about their next action. The error message should be clear and direct to make users understand, what caused the error and how should they correct it.
Bonus: Accessibility & Ease of Use
- Avoid using Captchas. A study by Stanford University found that Captchas will cost you a drop in subscribers / leads of up to 30%. When Animoto removed captchas from their sign-up form, they received 33.3% more signups.
- Follow web accessibility guidelines When displaying validation errors or success messages, be sure to not rely on making the field green or red. Wherever colour is used, try to also display text and/or icons to communicate a message to the user.
Examples
