In digital product design, forms are a necessary evil. Whether you’re designing a registration flow, checkout experience or settings page, forms allow you to collect data from the end-user. There are fundamental best-practices you can use when putting forms together, which will help users process requests more quickly, increase data entry accuracy and increase your completion rates.
When designing for the responsive web, it’s good to consider mobile first. Many of the principals below make data entry easier on a mobile device, however, these practices also help desktop users.
Use Good Form Structure and Organization
- Place form labels over fields
When viewing content on mobile, if form labels are placed to the left of the field, the label will be obscured when the user is interacting with the field. Placing labels over the fields ensures that they will remain in view.
- Do not use “helper” text to replace form labels
While using helper text to replace form labels may seem like a good idea visually, it is troublesome for user experience. When the user is interacting with the field the label is no longer visible, and it is easy to forget what information is being requested.
- One field per row
When laying out text fields, it can be tempting to place more than one field per row to condense the height of the page. However, this forces the user to read from left to right and then up and down. The encumbers easy scanning of the form and slows down data entry. Sticking with one field per row ensures users can quickly parse information being requested.
- Stack radio buttons and checkboxes
Stack Radio Buttons and Checkboxes on top of one another for easy scanning. This translates well to mobile and desktop.
- Group Fields
When organizing form fields it is helpful if the user can tackle the information in bite-size chunks. Grouping fields into a logical order allow users to anticipate future requests within the category and complete data more quickly.
Let the User Know What You Expect and Make It Easy
- Mark Optional Instead of Required Fields
Form fields followed by an “*” can be distracting. Instead of labeling required fields, mark optional fields, which will be fewer. This makes forms easier to scan, and clearly communicates requirements.
- Include Data Entry Requirements Upfront
Tell users what you’re looking for upfront when it comes to passwords, usernames etc. Displaying this text right under the field label, and not hidden under a help icon is a good approach. It can be frustrating when no password requirements are displayed and users are forced to rely on error messages for instructions.
- Make Fields Accept All Reasonable Values
Instead of accepting only one format for dates, or telephone numbers, accept any reasonable value the user enters. For example, phone number fields should accept (503) 709-3410, 503-709-3410, 503.709.3410 or 5037093410, not only one variation. Accepting one locked in format may be less effort on the developer site, but it can lead to user frustration and abandonment.
If Things Go Wrong, Let Users Know In Context and Quickly
- Use Inline Validation After the User Fills Out the Field
Inline validation is a great way to make sure data entry is handled correctly as the form is filled out. But if it is applied too early, it can make users feel they have done something wrong.
- Show Error Messages Inline
On long, mobile forms, showing error messages at the top of the page can have the effect of pulling the user out of context, making re-locating the field difficult to find. Showing error messages in-line prevents this issue from occurring.
Success!
Let users know when they have completed the process with a positive success message. Here are a few creative examples.
Conclusion
This may sound like a lot to keep track of, but it will pay off. More successful users mean higher completion rates, more signups, more purchases, and a more active online community.
Until next time.
PS. If you have questions about user experience, web design or development post your question to our Ask a Question section and one of our contributors may answer in a post. Thanks!