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.
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.
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.
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.’
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.
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.
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.
Explore using floating labels, placeholder text can adapt its position once a user has activated the field. However, browser compatibility issues may restrict this.
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.
Giving this option to the user is very good at UX. The user makes fewer mistakes while they can see what are they typing.
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.
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 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.
This ensures that form fields are tall enough to be tapped or clicked on accurately on smartphones.
Please consider sharing