Viewing some data entry screen design examples can help you design and deliver a more enjoyable, successful web form to your users. Many of the best practices for creating a good form are subtle and nuanced. It can take a practiced eye and an experienced design thinking developer to create a data entry form that maximizes your conversions.
In this post, we will shed some light on form design. It may seem like a minor aspect of app development, but any mobile design tips would be incomplete without a detailed look at data entry form design.
Let’s go over some tips you can use when designing data entry forms.
UI Design Tips for Data Entry Forms
Your app or website’s forms have a higher business impact than you might recognize. For one, data entry forms are likely one of the primary ways your business collects customer data, creates user accounts, takes customer payments for services or goods, and so much more.
If the entry screen or the design of your forms is poor, you might lose out on customers and sales. Many organizations don’t take the time to think that the UI design of their data entry forms could be the reason they are not meeting their conversion or sales goals online.
Since there are a lot of different areas we can address with form design, we will break each thought into one of four broader categories that include:
- Structure
- Text
- Technical design
- Data validation
Seamless data entry is an important component of quality app design. Let’s review some tips that will help you craft good data entry screens and forms.
Structure
The overall structure of a form is important. Here are some important tips to consider:
- Structure everything vertically
- Rely on one column
- Don’t split numbers
- Break up long forms
Structure Everything Vertically
Every element of your form should be structured vertically in a column. This includes entry field labels and input boxes. Vertical layouts are easier for users to understand, and they also ensure that nothing is missed when completing the form.
When you place entry field labels to the side of the field instead of above, a user’s eye has to track back and forth almost in a Z pattern. This slows the user down, leads to higher abandonment rates, and leads to more entry errors.
Rely on One Column
While it might be more aesthetically pleasing to have multiple columns side by side, this layout leads to user confusion and entry errors. For the same reason you don’t want to place input options in rows, you also don’t want users moving from side to side through your entry columns either.
A single column form reduces the chances a user will miss an input field. When users miss input fields, they get frustrated and are more likely to abandon the form altogether.
Don’t Split Numbers
You’ve likely experienced a form where credit card or phone numbers are split up in different boxes for each grouping of numbers. This form design is extremely frustrating to users. Often, people need to look at their credit card number in order to enter it into the form. They likely won’t be looking at the form as they type their number. Split boxes lead to more errors and more user frustration. All entry fields should be one box.
Break Up Long Forms
Your form is going to be a single column. If you have a lot of information you need to collect, be sure to break your form into multiple parts so users can easily fill out each section. For example, you could have a personal information section that collects email, phone number, etc., a payment details section, and so on and so forth.
Text
The way you present text and write copy on your forms can have a big impact on overall conversion rates. Here are some tips to follow:
- Clear and concise labels
- Use action words for buttons
- Use first-person
- Separate placeholder text and label text
Clear and Concise Labels
Brevity is important on forms because lengthy text looks more complicated to users. However, clarity is more important than brevity. If you believe any aspect of your form is ambiguous or hard to understand, clearly state what you are asking for. Remember, modern users are savvy and have likely filled out numerous forms before. For example, “Card Number” should suffice for labeling the field where a credit card number will be entered.
Use Action Words for Buttons
Typical, generic forms use button text like “Submit.” While text copy this generic might be okay in certain circumstances, if you can use better verbs, it will help increase your conversion rate. For example, instead of a button that reads, “Submit,” your button could say, “Sign-up,” “Make Payment,” “Create Account,” etc.
Use First-Person
Sticking with button text, first-person words elicit more of an emotional response from users and are likely to lead to better conversion rates as well. Let’s use the “Create Account,” button text as an example. In this case, since it makes sense, your button could say, “Create My Account.” This small change to first-person could have a big impact on the success of your forms.
Separate Placeholder and Label Text
Placeholder text is the grayed-out text that appears within the entry fields of a form. Some forms use the labels as placeholder text. For example, a placeholder text will say, “Phone Number,” instead of, “(xxx)xxx-xxxx.” You should avoid using your labels as placeholder text.
Placeholder text is supposed to help users with data entry, and it cannot do this if it is also being used as the label.
Technical Design
Some of the most important technical aspects of form design are:
- Autofill
- Keyboards
- Predictive search
Autofill
The majority of your users will be filling out your form on a mobile device. Mobile browsing has become the most prevalent way people use the Internet today. Bearing that in mind, you should use autofill where possible. If you already have a user’s information saved, like shipping address or payment information, autofill this information to save them time filling out your form.
If they are a new user, you can take advantage of the browser-autofill features present in almost all modern browsers. This will help shorten the amount of time necessary to complete your form, and it will increase the odds that users actually finish the form since they have less work to do.
Keyboards
Another mobile app development-specific form concern is keyboard use. When users are entering information on your form, they should be given the proper keyboard to enter the necessary information. For example, if you are asking for a credit card number, users should get a numeric keyboard instead of the standard QWERTY keyboard.
Predictive Search
Predictive search can be a huge time saver when there are a lot of options available. You’ve likely filled out a form that required the entry of your country, only to have to scroll all the way through hundreds of countries to reach the “United States of America” option. Predictive search allows users to begin entering their input information, such as country, city, etc., and the form provides the relevant entry. In the example above, instead of scrolling through a list, a user would simply start typing United States and choose the proper item.
Data Validation
There are two important concepts to cover with data validation. They are:
- Validate data inline
- Autocorrect format errors
Validate Data Inline
This is one of the more important aspects of form design. When a user gets to the end of a long form and then gets an error message informing them that there was an error somewhere, this causes a lot of frustration and is easily the most common reason users abandon forms before submission.
An easy way to solve this problem is to validate each entry field as a user enters their information. For example, if a user has not entered a valid email address, the form should notify them before they move on to the next entry field.
Autocorrect Format Errors
When possible, the form should autocorrect formatting issues. For example, if you don’t enter a +1 or use the parentheses around the area code of the phone number, the system should be able to autocorrect these issues, so users don’t have to go back and make fixes themselves.
Remember, frustration leads to form abandonment, which will hurt your conversion rates.
Final Thoughts
Forms are an important part of web and mobile app development. Data entry UI design should not be taken lightly. If you need help developing a custom software solution or designing a form, contact an app development partner. A partner will be able to show you data entry screen design examples and lend you technical expertise and guidance.
