UX/UI Form theory I try to use

Written by

July 12th, 2019


Common Inputs

Auto-focus the first input field

Autofocusing guides users to the starting point of the form. We recommend emphasizing the first field with an accent border color, background color or both.

Not everyone uses a mouse. Make sure your form can be navigated with a keyboard.

Auto-focusing the selected form field is also really important for keyboard (or mouse) navigation, so users can clearly see which field they are on. If you really want to encourage people to start your form, add a default setting that auto-focuses your first input field.

Ensure a form can be navigated with the tab and enter keys

For users who are unable to use a mouse or other pointing device, the ability to move between form fields using the tab key, and then submit the form using the enter key, is the difference between a form being usable and useless. Many users also prefer navigating a form in this way.

Never use all caps

Labels written in capitalized letters, especially in forms that include three to four fields. All-capitalized letters are hard to read. Also, they give the appearance of shouting.

Align labels top-left

Google’s UX researchers found that aligning labels above fields on the left-hand side increased form completion time because it requires less ‘visual fixations.’

Avoid placing questions side-by-side.

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.

Don’t rely on color alone

1 in 12 men has some degree of color blindness.
When displaying validation errors or success messages, don’t rely on using green or red text, (as red-green color blindness is relatively common). Use texts, icons or something else.

Form validation is crucial.

Distinguish those fields where errors are found and explain why the field didn’t validate.
Also, explain all of the requirements for the data and its format. If a user’s password has to include six symbols, mention this. Don’t make users guess. Make the process handy and understandable.

Avoid using placeholder text in forms

Explore using floating labels, placeholder text can adapt its position once a user has activated the field. However, browser compatibility issues may restrict this.

  1. You’re relying on users’ short-term memory
  2. You’re burdening the user
  3. You’re making the form less scannable
  4. You’re compromising accessibility


Don’t ask for password confirmation

Password confirmation—whereby users have to enter their chosen password twice—generally serves no purpose and adds an unnecessary step. Even if the user makes a mistake when typing their chosen password, you can allow them to reset it using your service’s standard “Forgotten password” link.

Add the option to show/hide password

Giving this option to the user is very good at UX. The user makes fewer mistakes while they can see what are they typing.

Add a Password Strength Meter

Today there are many simple JS scripts that can be easily added to your website and that can improve the UX of the password field.

Show password constraints upfront and update it in real time

Dropdowns/Radio Buttons

Avoid Dropdowns with less than four options

Instead of dropdowns, use radio buttons to get your message across quickly and not slow down the user. Everything has to be clear without extra clicks.


Don’t make the button active until all form fields are completed. This can be a great solution to help the user visually check their data before sending.

Mobile Items

Provide matching Keyboard

Mobile users appreciate apps and websites that provide an appropriate keyboard for the field. This feature prevents them from doing additional actions. For example, when users need to enter a credit card number, your app should only display the dial pad. It’s essential to implement keyboard matching consistently throughout the app (all forms in your app should have this feature).

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.

On mobile, make inputs at least 48px tall

This ensures that form fields are tall enough to be tapped or clicked on accurately on smartphones.

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2019 | Kevin Pichette | Privacy Policy