Forms (31)

Forms allow users to stay with a single interaction method for as long as possible (i.e. users do not need to make numerous shifts from keyboard to mouse to keyboard)
There are field validations before the form is submitted
Passwords are "starred out" but there is a show password toggle option
There is a possibility to paste in password fields
  • To ensure that your form is easy to use in bright or low light conditions, use high contrast colors and make sure that the text is easy to read. Consider testing your form in different lighting conditions to ensure that it is easy to use for all users. Additionally, use clear and concise labeling and placeholder text to help users understand what information is being requested. This can also help improve the accuracy of browser auto-fill functions.
The username is auto-filled in the "Forgot Password" flow
Input errors are highlighted and show the user what needs correction
The website does not require entering the same data more than once
There is a clear distinction between required and optional information
Multi-step forms are used when multiple form (10+) fields are required
  • When using multi-step forms, it is recommended to display a progress bar to show the user their progress through the form and how many steps are left. This helps to motivate the user to complete the form and provides a sense of progression
  • A multi-step form with fewer fields on the first page can feel less intimidating to users than a long form with many fields
  • Users are more likely to fill out sensitive information, such as email and phone, on the final step of a multi-step form because they don't want to lose the progress they've made on previous steps. This is due to the cognitive bias known as the "sunk cost fallacy."
  • A progress bar on a multi-step form can motivate users to complete the form because it gives them a sense of progress. This is based on the cognitive bias known as the "endowed progress effect."
All non-essential fields are removed
Top-left aligned labels are used
  • Input fields have their labels located closely
  • Top-left aligned labels are used the most readable and lead to higher completion rates
  • Google's UX research showed that aligning labels above fields on the left side improves form completion time because it requires fewer "visual fixations," as shown in the diagram below
Positioning questions next to each other is avoided
  • Eye-tracking research has shown that one-column layouts are more effective than multi-column layouts with questions positioned next to each other. The only exception is when asking for dates or time, where multiple fields on one line are expected
Smart defaults are used
  • If you are asking for a phone number or country, consider suggesting a default phone extension or country based on the user's IP address
Radio buttons are vertically-stacked
  • Arranging radio buttons (and checkboxes) in a vertical layout allows for faster processing compared to a horizontal layout
Fields are not divided when requesting phone numbers or dates of birth
  • Separating fields into smaller parts requires additional clicks and can be confusing. It is better to have a single field with clear formatting guidelines in the placeholder. Even if the user is automatically advanced to the next field, dividing fields imposes stricter validation that may be confusing
The reason for requesting sensitive information is clearly stated and is required only in exceptional cases
  • In a study conducted by Clicktale, making the phone number field optional on a form reduced the abandonment rate from 39% to 4%
  • As concerns about privacy and information security grow, it is important to explain the need for sensitive information using support text below the field
Data input fields have placeholders with values that inform the user of the required data type or size
Field labels are always displayed
Predictive search for fields with many pre-defined options is used
  • To reduce typing and cognitive load, use a predictive search function when asking users to select their country or occupation from a long list of predefined options
Input fields are sized accordingly
  • The width of fields should be determined by the amount of text that is expected to be entered by the user. For example, fields like zip code or house number should be shorter in width compared to fields like the address line.
Captchas usage is avoided
  • Captchas can decrease the number of subscribers or leads by up to 30%, according to a study by Stanford University. When Animoto removed captchas from their sign-up form, they saw a 33.3% increase in sign-ups. Captchas shift the burden of spam management onto the user and can cause friction, ultimately leading to a decrease in leads. Instead, consider using automated spam detection services like Akismet or implementing "honeypot" hidden fields. Captchas should only be used as a last resort
Inputs and input validations are not relying on colors only
  • It is important to consider users with color blindness when designing websites, as approximately 1 in 12 men are affected by some degree of color blindness. Using color alone to communicate validation errors or success messages may not be effective for these users. Instead, it is recommended to include text or icons in addition to color in order to clearly communicate messages to all users
Forms work on every device (smartphones, tables, desktop, and etc.)
Ensure that the form is easy to use in both bright and low light conditions
Don’t make your validation too strict
  • It is important to design your form in a way that allows for flexibility in how users input their information. This can involve using rules to standardize responses and using clear placeholder text to suggest the desired format. Strict validation can be frustrating for users and may result in a decrease in conversions.
  • If there’s a lot of variation in how users answer a field (for example, responding to phone number with +12345678912, +44 12345678912, 012345678912), your programmers should use a rule that converts these to a consistent format on your end.
Usage of “clear” or “reset” form buttons is limited
Do not trick users by auto-enrolling them into your mailing list
It is clear “what’s next” upon clicking the submit button
Submit button is disabled from being pressed again
  • This helps to prevent duplicate submissions and provides confirmation to the user that their submission has been successful.
Device’s native features are used (camera, geolocation, date picker) to simplify tasks
Question fields and buttons should be at least 48 pixels high on mobile devices