The ultimate guide for form design: the perfect form

Whether it is a signup flow or a tedious data interface, forms are crucial for business success and one of the most important components of digital product design. This article provides general guidelines to design a better form.

A typical form has 5 main components:

  • Structure: The form’s appearance on the page.
  • Input fields: Contains any fields designed for user input.
  • Field labels: Tell users what the corresponding input fields mean.
  • Action button: When the user presses this button, an action is performed.
  • Feedback: Helps the user understand the result of their input through feedback.

STRUCTURE

Order the form logically

Keep questions in an intuitive sequence — they should be asked logically from a user’s perspective, not from the application or database’s perspective. Usually, asking for a users address before their name would be unexpected.

Group related information

A form is a conversation, and like any conversation, it should be represented by a logical communication. Group related information into logical blocks or sets. The flow from one set or block help better resemble a conversation and will help users make sense of the information they must fill in.

J-Crew does a good job grouping shipping information together.

Avoid multi-column layouts

One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently. When you use a two-column layout, you introduce the possibility of different interpretations. The most common among users is to scan in Z patterns, slowing the speed of comprehension and obscuring the path to completion. However, if a form is in a single column, the path to completion is a straight line down the page.

Below you’ll find 5 different ways to interpret how the form fields relate when they are arranged in a standard two column layout.

Make input field keyboard-friendly- accessibility requirement (Desktop)

Your form should be able to be only accessed and edited with the tab button on the keyboard. You can find detailed requirements for keyboard interaction pattern in W3C’s Authoring Practices for Design Patterns.

Keyboard should match the required text inputs (Mobile & Tablet)

You should provide the appropriate keyboard for text entry, this allows users to fill out forms faster, because they are not required to tap on other keyboards to access text or numbers keyboard.

Revolve Clothing uses the correct keyboard for the zip code field.

Input Fields

Match fields to the fixed input length

To achieve good usability you should adjust the width of your form fields so it matches the length of the expected input. Baymard Institute usability study showed that if a field is too long or too short, users start to wonder if they had misunderstood the label. For form fields with a variable input (name or email) length but within a standard average, you should find a suitable width based on the average length of possible inputs. Studies show that those input fields typically range from 18 to 33 characters.

Incorrect input length:

The zip code field and phone number on West-Elm checkout process is way too long.

Correct input length:

The zip code and phone number field on J-Crew checkout process matches input length.

Provide fields with borders

Input fields with defined boundaries are important for users with mobility impairments and those with cognitive disabilities. The input field can be filled with color, but does not have to be filled.

Focus on input field

You should provide a clear visual notification on the input field when a user clicks/taps on it — change color, fade in a box, highlight field, zoom-in etc etc.

REI highlights the field when the user clicks on it.

Format your fields with input masks

When users type their input into a field that isn’t formatted, they will wonder whether they should type the symbols in or not. This uncertainty can cause distress among users and lead them to abandon the form. The best way to fix this user experience problem is to use input masks within form fields. Input masks will auto insert the correct format in the field as the user types their input. Users no longer have to worry about which format to use or leaving it out.

Input Mask

Provide easily tappable areas

Nowadays, the majority of forms are filled out on a touch device. Apple has always recommended 44px by 44px space for buttons as this corresponds roughly to a finger size. However, for longer forms I recommend sizing input fields between 32px and 40px in height.

Hide what’s not needed until it is needed

Often there are parts of the form that are contingent on other parts of the form. On e-commerce sites your billing address might be the same as your shipping address. In this example, it’s best to hide the delivery address field unless the user specifies that the address is different.

J-Crew has the billing address already preselected.

Distinguish between optional vs required fields

You should always try and avoid optional fields in forms. In the case you use optional fields clearly distinguish which input fields are required. Standard UX design, is to use an asterisk (*) for required fields and the word “optional” for non-required fields. Limit the form to only 1 or 2 optional fields.

West-Elm informs the user that the field is required by text and an asterisk.

Use forgiving formatting

Forgiving format allows user to enter data that may have a variety of valid formats and syntax. On e-commerce sites, be flexible, and design screens that can interpret multiple input formats. This should be applied to credit card information, telephone numbers and zip/postal codes. Allow users to enter them with mixed case, with/with-out spaces, etc. You should also consider forgiving format for telephone numbers if you sell internationally through one site as numbers vary across countries .

Smart defaults

Try to anticipate frequently selected items and make data entry easier for the user by providing fields with pre-populated smart default values — state, country based on the users zip-code or phone country code based on the users IP address.

Autocomplete suggestions

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 this possible by presenting real-time suggestions or completions to help the user finish the form faster and more accurately. Below are 5 design patterns for autocomplete suggestions:

  1. Style Auxiliary Data Differently- the category or number of matches should be styled differently from the suggested search terms
  2. Avoid Scrollbars & Keep the List Manageable- Inline scroll areas often cause a number of interaction issues and generally should be avoided. Furthermore, keep the list to a maximum of 10 items to avoid inducing choice paralysis.
  3. Highlight the Differences- Style the terms the user has entered differently from the suggested terms.
  4. Support Keyboard Navigation- Keyboard users should be able to navigate and select autocomplete suggestions by using the up and down arrows to select and the return key to submit.
  5. Support Mouse Interactions- The hovered autocomplete suggestion should highlight and invoke the “hand” cursor, to make it clear to the user that the suggestions are clickable links and to emphasize which suggestion is about to be submitted.

Field Labels

Don’t use placeholder text

Many forms replace field labels with in-field placeholder text to reduce clutter on the page, but studies have shown that this has many negative implications, such as the ones listed below:

  • Disappearing placeholder text strains users’ short term memory, this is especially true for mobile forms, since users are more frequently distracted and interrupted while using their devices.
  • Without labels, users cannot check their work before submitting a form, and for browsers that autocomplete form fields, may fill in information incorrectly and without clear labels a user must delete the text in each field to reveal the placeholder text.
  • Placeholder text that disappears when the cursor is placed in a form field can frustrate users navigating with the tab key on a keyboard
  • Users may confuse the placeholder text for data that was automatically filled in.

A solution for placeholder text within a form is too provide adaptive placeholders. In this pattern, labels are placed within the form field as placeholders but when a user clicks or taps on the input field, the placeholder label moves to the top of the field.

Adidas provides adaptive placeholders during the checkout process.

Place labels above input field

Labels are central to good form design but there are many views on where to position them. Studies show that forms are scanned faster if the labels are on top of the fields. Another advantage of placing the label above the field — it doesn’t take too much horizontal space, which allows the label and the users input field to extend the full width of display especially on mobile phones that have a limited estate. However, when the phone is in landscape mode, you should consider repositioning field labels to be left-aligned due to the extreme loss of page content cause the large keyboard when the phone is in landscape mode.

Image Credit: baymard.com/blog/mobile-form-usability-label-position

Use a big enough font size

Fonts need to be legible. You should use at least 14 pixels for body copy, 16 pixels is safe for most fonts. On iOS devices if you use a font size of 16 pixels for input fields, iOS will not zoom in further when you tap a field, because it is not necessary.

Label color

The label color should meet appropriate contrast ratios. According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. This is an important usability requirement that helps users with low vision, color blindness, or worsening vision see and read the text on your screen.

Google Material design suggests to limit your selection of colors to three hues from the primary palette and one accent color from the secondary palette.

But if you have your colors chosen you can use WebAIM’s Color Contrast Checker, to test colors you have already chosen and see if they meet color contrast guidelines.

Avoid all cap labels

You should never use all caps, or else the labels would be difficult to read and much harder to quickly scan. UPPERCASE text is harder to read because the outline shapes of all the uppercase letters are rectangular, making them indistinguishable at a glance.

Sentence case vs. title case

In todays digital world, 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.”

Evidence shows that sentence case is a better user experience because its slightly easier to scan and is less likely to be used inconsistently as oppose to title case. There is also a trend towards minimal capitalization for publishing on government and university sites.

Auto capitalization

Automatically capitalize the first letter in certain input fields such as user’s name, you don’t want users doing extra work.


Action button

Primary vs secondary button

Provide a visual difference between primary and secondary buttons to help minimize the risk for potential errors and help direct users toward a successful outcome.

Button color

Color is very important in buttons, it help users navigate and understand the action more clearly. For users suffering from colorblindness you should never use red and green together, choose either green OR red for a call to action — but never both.

Source: http://uxmovement.com/content/never-pair-green-and-red-together-on-the-web/

Button shape

Buttons should be rectangular with rounded corners. Studies show that these buttons perform best because the rounded corners draw attention to the inside of the button as they point inwards. While from a psychology standpoint we’ve evolved to stay away from anything with sharp corners as they represent a threat of injury.

Gap’s rectangular with rounded corners checkout button.

Button size

Based on MIT Touch Lab Study, the averages finger pads are between 10–14mm and fingertips are 10mm x10mm, making it a good minimum touch target size.

Button location

You should place your button in the users path, the buttons need logical placement as to where the user is going to next and how people actually read the page.

Some forms have back buttons so placing a submit button right below the form can cause user to click on it by accident thinking they would go back. Back buttons should be out of sight while submit buttons should be placed on the right side of the page below the form.

Button labels

Labels indicate the function of each button, add a clear message of what happens after the user clicks on the button. Avoid generic labels like “Submit” for actions, because they give the impression that the form itself is generic.

The North Face lets users know exactly what clicking on the button will do.

Avoid the reset button

Don’t use a reset button because if the user clicks on it on accident and the entire form is erased they will abandon the form from frustration.

Clickable button

Make sure the buttons look clickable or tappable, shading indicates that it is possible to click. Design the button to clearly indicate the form is being processed after the user’s action, this helps prevent double submission.

If a button casts a subtle shadow, users think that the button is clickable

Feedback

Validate a field upon completion

In form entry validation, there are three main trends:

  • Validate after each character entry- Real-time feedback
  • Validate after each input field (once you leave the field) — Delayed feedback
  • Validate on submission — Delayed, user initiated, feedback.
Google provides instant validation for the password field.
Twitter validates after each input field and provides instant validation for the password field.

The last method is used less since its not a good user experience and the most preferred is real-time inline validation, because it can help users complete forms more quickly and with less effort, and fewer errors. Inline validation forms provide real-time feedback as people fill in the fields, using lightweight and direct success messages (green checkmarks) and error messages (red triangles and text) next to the form input fields. Inline validation also makes it easier to pick unique usernames and other such inputs.

Provide both an error message and a field specific one

It is a good practice to provide both a general error message, and a field specific one. One of the 10 Usability Heuristics states that it’s important to provide both an error that’s in viewport as well as field specific explanations about what‘s wrong with the inputted data. Error messaging should have the following:

  • Informing the user at the right time about the success or failure of provided data, this can be inline validation, but can also be a pop-up or layer screen.
  • Error messages must be noticeable — use color, icons and text to highlight the problem area. Error messages below the input field lead to better performance than error messages at the top and the bottom of the form.
  • If certain answers are required in an input field, address this in advance.
  • If an error occurred, never clear the already completed fields.
Google informs user right away if the skip a field.

Don’t rely on color alone

Colorblindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. Your form should not only rely on color to indicate fields with (red) and without (green) an error. Instead use color in combination with visual cues or inline messages which helps indicate fields with error.

Image Credit: cruxcollaborative.com/

Validation

Like inline validation is helpful for users, provide validation that the form has been submitted successfully.