Javascript required
Skip to content Skip to sidebar Skip to footer

Ux Design How to Make Long Forms Better

Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form. Forms remain one of the most important types of interactions for users on the web and in apps. Forms are often considered the final step in the journey of completing their goals. Forms are just a means to an end. Users should be able to complete them quickly and without confusion.

In this article, you'll find best practices for form design that have been gleaned from usability testing, field testing, eye-tracking studies and actual complaints from disgruntled users. These techniques — when used correctly — enable designers to produce faster, easier and more productive form experiences.

The components of forms

The typical form has the following five components:

  • Structure: This includes the order of fields, the form's appearance on the page and the logical connections between multiple fields.
  • Input fields: These include text fields, password fields, checkboxes, radio buttons, sliders and any other fields designed for user input.
  • Field labels: These tell users what the corresponding input fields mean.
  • Action button: When the user presses this button, an action is performed (such as submission of the data).
  • Feedback: The user is made to understand the result of their input through feedback. Most apps and websites use plain text as a form of feedback. A message will notify the user about the result and can be positive (indicating that the form was submitted successfully) or negative ("The number you've provided is incorrect").

Forms may also have the following components:

  • Assistance: This is any explanation of how to fill out the form.
  • Validation: This automatic check ensures that the user's data is valid.

This article covers many aspects related to structure, input fields, labels, action buttons, and validation.

Form structure

A form is a type of conversation. And like any conversation, it should consist of logical communication between two parties: the user and the app. The form structure defines a skeleton for your form and that is the reason why we explore form best practices in the context of form structure.

Ask only what's required

Make sure to ask only what you really need. Every extra field you add to a form will affect its conversion rate. Always consider why you are requesting certain information from the user and how you will use it.

Order the form logically

Ask details logically from the user's perspective, not from the application or database's perspective. Typically, asking for someone's address before their name would be unusual.

Group related information

Group related information into logical blocks or sets. The flow from one set of questions to the next will better resemble a conversation. Grouping together related fields will also help users make sense of the information they must fill in. Compare how it works in the contact information form below.

One column vs. multiple columns

When it comes to web design, designers often experiment with website layouts to convey visual interest for the site's visitors. However, when it comes to form design, it's better to resist the temptation to have any layouts that have more than one column.

One of the problems with arranging form fields into multiple columns is that users will likely interpret the fields inconsistently. If a form has horizontally adjacent fields, then the user must scan in a Z pattern, slowing the speed of comprehension and muddying the path to completion. But if a form is in a single column, the path to completion is a straight line down the page.

Visual detailing the difference between a two-column form layout vs a straight line form layout
Standard two-column layout, versus a straight line down the page.

On the left, one of many ways to interpret how the form fields relate when they are arranged in a standard two-column layout, versus on the right, a straight line down the page.

Input fields

Input fields are what enable users to fill in a form. Various types of fields exist for the information you need: text fields, password fields, dropdowns, checkboxes, radio buttons, date-pickers and more.

Number of fields

When it comes to designing forms, a rule of thumb is that shorter is better. And this certainly seems intuitive: less effort on the part of the user will lead to higher conversion. Thus, minimize the number of fields as much as possible. This will make your form feel less bloated, especially when you're requesting a lot of information. Displaying only five to seven input fields at a given time is a common practice.

Reducing user effort by simplifying forms can lead to better user experience
Best practices for form design are focussed on reducing user effort. Combine multiple fields in one easy-to-fill field. Image credit Luke Wroblewski.

Mandatory vs. optional

Try to avoid optional fields in forms. But if you use them, at least clearly distinguish which input fields may not be left blank. The convention is to use an asterisk (*) for required fields or the word "optional" for non-required fields (which is preferable in long forms with multiple required fields). If you decide to use an asterisk for mandatory fields, show a hint at the bottom of the form explaining what the asterisk is for.

Visual of a required form field to show the difference between mandatory and optional
MailChimp's mailing-list subscription form.

Setting default values

Many best practices for form design stress the risk of using static defaults (predefined values in input fields). It's better to avoid setting default values unless you believe a large portion of your users (say, 95% of them) will select the same values. People scan online forms quickly, and they don't spend much time parsing through all of the choices. As a result, they can easily skip something that already has a value.

But this rule doesn't apply to smart defaults, which are pre-set values based on available information about the user.  Smart defaults can make form completion faster and more accurate. For example, preselect the user's country based on geo-location data. Still, use these with caution, because users tend to leave preselected fields as they are.

Creating predetermined aspects of a form field can help streamline the user experience and process.
An intelligently preselected country in the checkout form.

Input masks

Field masking is a technique that helps users format inputted text. A mask appears once a user focuses on a field, and it formats the text automatically as the field is being filled out, helping users to focus on the required data and to more easily notice errors. In the example below, the parentheses, spaces, and dashes are applied automatically as the phone and credit card numbers are entered. This simple technique saves time and effort with phone numbers, credit cards, currencies and more.

Designing forms for desktop: make form keyboard-friendly

Users should be able to focus on and edit every field using only the keyboard. Power users, who tend to use the keyboard heavily, should be able to easily tab through and edit fields, all without lifting their fingers off the keyboard. You can find detailed requirements for keyboard interaction in the W3C's guidelines on design patterns.

Smart data pickers, like a date selection tool, in your form field can help improve the user experience.
Even a simple date-picker should adhere to the W3C's guidelines. Image credit Salesforce.

Designing forms for desktop: autofocus for input field

Autofocusing a field gives the user an indication and a starting point to quickly begin filling out a form. Provide a clear visual signal that focus has moved there, whether by changing color, fading in a box, flashing an arrow, whatever. Amazon's registration form has both autofocus and visual indicators.

Amazon form fields are a good example of autofocus input fields to help users understand their starting point.
Amazon's registration form.

Designing forms for mobile: match keyboard to input

Phone users appreciate apps that provide the appropriate keyboard for the text being requested. Implement this consistently throughout the app, rather than merely for certain tasks but not others.

Form fields can allow the systems to understand how to match the keyboard with the required input of the web page.
Form best practices are all about minimizing user effort. Match keyboard to user input. Image credit Google.

Limit typing (autocompletion)

With more and more people using  mobile screens, anything that can be done to prevent unnecessary typing will improve the user experience and decrease errors. Autocompletion makes it possible to eliminate a huge amount of typing. For example, filling out an address field is often the most problematic part of any registration form. A tool such as Place Autocomplete Address Form (which uses both geolocation and address prefilling to provide accurate suggestions based on the user's exact location) enables users to enter their address with fewer keystrokes than regular input fields.

Google's search form field allows for auto-completion for ease of use.
Smart autocomplete is in the list of best practices for form design.

Labels

Written labels are one of the primary ways to make a UI more accessible. A good label tells the user the purpose of the field, maintains its usefulness when the focus is on the field itself and remains visible even after the field has been filled in.

Number of words

Use succinct, short, descriptive labels (a word or two) so that users can quickly scan your form. Previous versions of Amazon's registration form contained a lot of words, which resulted in slow completion rates. The current version is much better and has short labels.

When designing forms, try and minimize the number of words associated for a clean, simple look.
Minimize the number of words in labels.

Sentence case vs. title case

In most digital products today, there are two ways to capitalize words:

  • Title case: capitalize every word. "This Is Title Case."
  • Sentence case: capitalize the first word. "This is sentence case."

Sentence case used for labels has one advantage over title case: It is slightly easier (and, thus, faster) to read. While the difference for short labels is negligible ("Full Name" and "Full name"), for longer labels, sentence case is better. Now You Know How Difficult It Is to Read Long Text in Title Case.

Avoid all caps

Never use all caps, or else the form will be difficult to read and much harder to scan because there will be no variation in character height.

Form fields can be hard to read for the user when the copy is made to be all caps.
All-caps labels are very hard to read.

Alignment of labels: left vs. right vs. top

Matteo Penzo's 2006 article on label placement suggests that forms are completed faster if labels are on top of the fields. Top-aligned labels are good if you want users to scan the form as quickly as possible.

Various alignments of the copy on a web page can determine the readability for a user.
Left-aligned, right-aligned and top-aligned labels. Image credit UX Matters.

The biggest advantage of top-aligned labels is that different-sized labels and localized versions can more easily fit the UI. (This is especially good for screens with limited space.)

A visual breakdown of the benefits of using a top-aligned label.
Benefits of top aligned labels. Image credit CSS-Tricks.

The biggest disadvantage of left-aligned labels is that it has the slowest completion times. This is likely because of the visual distance between the label and the input field. The shorter the label, the further away it will be from the input. However, a slow completion rate isn't always a bad thing, especially if the form asks for sensitive data. If you are asking for something like a driver's license number or a social security number, you might deliberately want to slow down users a bit to make sure they enter it correctly. Thus, the time spent reading labels for sensitive data is insignificant. Left-aligned labels have another disadvantage: They require more horizontal space, which might be a problem for mobile users.

A visual breakdown of the benefits of using a left-aligned label.
Benefits of left aligned labels. Image credit CSS-Tricks.

The big advantage of right-aligned labels is the strong visual connection between the label and input. Items near each other appear to be related. This principle isn't new; it derives from the law of proximity, from Gestalt psychology. For short forms, right-aligned labels can have great completion times. The disadvantage is discomfort; such forms lack that hard left edge, which makes it less comfortable to look at and harder to read.

A visual breakdown of the benefits of using a right-aligned label.
Benefits of right aligned labels. Image credit CSS-Tricks.

Takeaway: If you want users to scan a form quickly, put labels above the fields. The layout will be easier to scan because the eye will move straight down the page. However, if you want users to read carefully, put labels to the left of the fields. This layout will slow down the reader and make them scan in a Z-shaped motion.

Inline labels (placeholder text)

A label set as a placeholder in an input field will disappear once the field gains focus; the user will no longer be able to view it. While placeholder text might work for two-field forms (a simple log-in form with username and password fields), it's a poor substitute for visual labels when more information is required from the user.

Placeholders can be used in form design to help reduce the amount of work a user needs to complete.
Using placeholders in form design. Image credit snapwi.

Once the user clicks on the input field, the label will disappear, and so the user cannot double-check that they wrote what was being asked of them. This increases the chance of error. Another problem is that users could mistake placeholder text for prefilled data and, hence, ignore it (as Nielsen Norman Group's eye-tracking study confirms).

Putting floating labels in each form field will help a user understand what is required in each form.
Placeholder text as field label.

A good solution for placeholder text is a floating label. The placeholder text would be shown by default, but once an input field is tapped and text is entered, the placeholder text fades out and a top-aligned label animates in.

Floating labels being placed in a form field for a new post.
Floating labels. GIF credit MDS.

Takeaway: Don't just rely on placeholders; include a label as well, because once a field has been filled out, the placeholder will no longer be visible. Use a floating label so that users are sure they've filled out the correct field.

Action buttons

When clicked, an action button triggers some activities, such as submission of the form.

Primary vs. secondary actions

A lack of visual distinction between primary and secondary actions can easily lead to failure. Best practices for form design says that reducing the visual prominence of secondary actions minimizes the risk of error and reinforces people's path to a successful outcome.

The difference between equal visual weight and visual distinctions.
Equal visual weight versus visual distinction. Image credit Luke Wroblewski.

Button location

Complex forms usually need a back button. If such a button is located right below an input field (like in the first screenshot below), a user could accidentally click it. Because the back button is a secondary action, make it less accessible (the second form below has the right location for buttons).

CTA buttons can be located in various points in form fields.
CTA button location in forms.

Naming conventions

Avoid generic words such as "Submit" for actions, because they give the impression that the form itself is generic. Instead, state what action the button will perform when clicked, such as "Create an account" or "Subscribe to weekly offers."

CTA button forms can have various naming conventions to detail their purpose.
Naming conventions for CTA buttons.

Multiple action buttons

Avoid multiple action buttons because they might distract users from their goal of submitting the form.

The reset button is pure evil

Almost all best practices for form design stress the importance of skipping a reset button. This button rarely helps users and often hurts them. The web would be a happier place if almost all reset buttons were removed.

Having a reset CTA button in your form field can be a problem.
Do not use the 'Reset' button in your forms.

Visual appearance

Make sure action buttons look like buttons: Indicate that it is possible to click or tap them.

By having shading in your button can give the illusion that it can be clicked.
Shading indicates that it is possible to click. Image credit Vadim Gromov.

Visual feedback

Design the "Submit" button in a way that clearly indicates the form is being processed after the user's action. This provides feedback to the user while preventing double submission.

Motion feedback can let a user know that their action has taken place.
Shading indicates that it is possible to click. Image credit Vadim Gromov.

Validation

Form validation errors are inevitable and are a natural part of data entry (because users are prone to making errors). Yes, error-prone conditions should be minimized, but validation errors will never be eliminated. So, the most important question is, How do you make it easy for the user to recover from errors?

Inline validation

Users dislike having to go through the process of filling out a form, only to find out upon submission that they've made an error. Especially frustrating is completing a long form and upon pressing "Submit," you are rewarded with multiple error messages. It's even more annoying when it isn't clear what errors you've committed and where.

Validation should inform users about the correctness of the text as soon as the user has inputted the data. The primary principle of good form validation is this: Talk to the user! Tell them what is wrong using the right words and color palettes. Real-time inline validation immediately informs the user about the correctness of their data. This approach allows them to correct any errors faster, without having to wait until they press the "Submit" button to see the errors.

However, avoid validating each keystroke because, in most cases, you simply cannot verify until someone has finished typing an answer. Forms that validate during data entry punish the user as soon as they start entering data.

Google forms require a user to finish typing before it can be submitted.
Google Forms states the email address isn't valid before you've finished typing. Image credit Medium.

On the other hand, forms that validate after data entry do not inform the user soon enough that they've fixed an error.

Apple validates the information once the data is entered into the form.
Validation in the Apple Store is performed after data entry. Image credit Medium.

Mihael Konjević, in his article "Inline Validation in Forms: Designing the Experience," examines different validation strategies and proposes a hybrid strategy to satisfy both sides: Reward early, punish late.

  • If the user enters data in a field that was in a valid state (i.e. previously inputted data was valid), then validate after data entry.
  • If the user enters data in a field that was in an invalid state (i.e. previously entered data was invalid), then validate during data entry.
User registration forms sometimes take a hybrid approach.
A hybrid approach: Reward early, punish late. Image credit Medium.

Protecting data

Jef Raskin once said, "The system should treat all user input as sacred." This is true for forms. It's great when you start filling in a form and then accidentally refresh the page but the data remains in the fields. Tools like Garlic.js help you to persist a form's values locally until the form is submitted. This way, users won't lose any precious data if they accidentally close the tab or browser.

Garlic helps create form values locally until you submit the form.
Tools like Garlic.js help you to persist a form's values locally until the form is submitted.

Conversational interfaces: new ways of designing forms

Recently, we've seen a lot of excitement around conversational interfaces and chatbots. Several trends are contributing to this phenomenon, but one in particular is that people are spending more time on messaging apps than on social networks. This has led to a lot of experimentation with supporting a range of interactions, such as shopping, in threaded conversations, often in a way that mimics messaging. Evan an established element like web forms have undergone a change to adapt to this trend. Designers are looking to transform traditional web forms into interactive conversational interfaces.

Natural language interface

Every interface is a conversation. Traditional forms (the ones we design every day) are quite similar to a conversation. The only difference is the way we ask questions. But what if we designed our forms to ask questions in a format that more closely reflects real human (not machine) conversation? So, instead of communicating with a machine on its own inhuman terms, you would interact with it on yours. The form shown below creates a conversational context, facilitating understanding without relying on the traditional elements of web forms (such as labels and input fields).

Conversational form

Conversational Form is an open-source concept that easily turns any form on a web page into a conversational interface. It features conversational replacements of all input elements, reusable variables from previous questions, and complete customization and control over the styling. This project represents an interesting shift in how we think about user experiences and interactions, leaning more towards text-based conversation to help users achieve their goals.

Conversational style forms like feedback forms can help the user get their opinion across in a more human-like manner.
Conversational form.

Conclusion

When it comes to designing forms, it's vital to remember that users can be reluctant to fill out forms, so make the process as easy as possible. Minor changes — such as grouping related fields and indicating what information goes in each field — can significantly increase usability.

Keep in mind that the best practices for form design both listed in this article and available on website design blogs are only half of the battle. Usability testing is simply indispensable in form design. You also need to test your design with your users. Very often, testing with just a few people or simply asking a colleague to go through a prototype can give you a good insight into how usable a form is.

Words by
Nick Babich

Nick Babich is UX architect and writer. Nick has spent the last 10 years working in the software industry with a specialized focus on research and development. He counts advertising, psychology, and cinema among his myriad interests.

Ux Design How to Make Long Forms Better

Source: https://xd.adobe.com/ideas/principles/web-design/best-practices-form-design/