3 UI Design Features for User-Friendly Data Entry
Before I was a software developer, I worked in hospitality sales and marketing. One of the most time-consuming (and seemingly never-ending) tasks I had early on in my career was loading hotel inventory and rates onto online travel agency websites like Expedia and Booking.com. And back in the day before channel managers let you update the sites all at once, I had to enter this site by site, room type by room type, day by day for four properties and over 800 rooms. To say that I have some strong opinions about data entry UI design is an understatement.
This was why when I was recently invited to collaborate on a management system that assists with tracking inventory and sales, I jumped at the chance. Here was my opportunity to pay forward all that I had learned about data entry!
3 Design Features We Used to Make Data Entry a Breeze
You can check out a video walkthrough of what we built here, and I will take a moment to outline three of my favorite features that allowed us to streamline the data entry process for a user-friendly application:
1. Create a Wizard-Like Stepper to Walk Through Multipart Data Entry
Our client owns a jewelry company, and one of her needs was to have a way to track their products, including the product number, materials and labor needed to make each item, inventory, retail and wholesale rate. Plus, the wholesale price needed to be calculated during this data entry process based on a preset formula, which factored in materials, labor, utilities, and other business costs.
We used a filterable table for displaying a list of her products. And while this table did allow for in-line editing, including adding products, we needed a more robust input to enable our client to associate a list of materials with each product and calculate the wholesale cost during the entry.
To allow for this, we used a wizard-like stepper. Wizards are a fantastic tool designed to walk a user through the data entry process.
We modified this stepper component from Material UI, which allowed us to create three distinct steps for creating a product listing:
- Entering the product details, such as the name, product number, category, and labor needs.
- Entering the materials associated with creating the product.
- Reviewing the product details, including the wholesale price calculated based on materials, labor, and additional costs, and setting the retail rate and inventory.
This allowed us to break down the required inputs into smaller segments, making the task at hand less tedious, reducing errors, and allowing us to seamlessly calculate the wholesale price prior to the review on step three.
2. Provide Users with Predefined Selections
The DRY principle extends beyond software development, as there is nothing worse in data entry than entering a page worth’s of information and then having to enter it again. The system already has it; use it!
To keep repetition down and the information going into the database clean, predefined input options can be pulled and added to a searchable selection text box for the user to choose from.
Our client was already tracking all the materials they used to create their jewelry on a different table in the system, including the vendor, product number, and price per unit. So when this information needed to be added to the product listing, we provided a list of the pre-entered materials to choose from rather than have our client enter the information again.
Since the materials associated with the products are linked to the original material listing, updating wholesale prices is a breeze. The user can simply change the price on the materials listing, and the system can automatically update all the linked information in the database. This saves the user from searching through products and manually adjusting each one to update the wholesale rates.
3. Offer A Duplicate Button to Save the User Time
Our client has several jewelry items that are identical except for the stone used to embellish them. So, to save even more time, we created a duplicate button that allows the user to duplicate an existing item and update just a few details rather than reenter all the information.
Building Your Own User-Friendly Data Entry Applications
When designing applications that require data entry, consider how you can streamline these inputs for your user.
In addition to preventing redundant work and breaking down the process into smaller steps, several other tips can help create a more user-friendly design, including:
- Avoid scrolling as much as possible, use type to search when using pre-populated text boxes, and keep forms short.
- Create groupings of related fields to improve the flow.
- Ensure everything works the same way, so the user doesn’t have to slow down and change their approach while entering data.
- Use contrasting colors so the user can quickly scan and find needed fields.
- Validate as you go to keep the user from needing to backtrack later in the entry process
Keeping the user in mind always helps create a better product, and there are certainly plenty more tips for creating a user-friendly UI out there. Share yours in the comments below!
