Designing a Manual Entry Experience for Nordstrom Fulfillers (Part 2)
Nordstrom fulfillers use Nordstrom OneFill — an iOS fulfillment app — to pick, pack, and consolidate items that are ordered from Nordstrom.com.
This is part 2 of my process and feature solutions for designing the fulfillment experience, and focuses on the manual entry workflow.
If you’re interested in learning about my work on the scanning feature, see Part 1: “Designing a Scanning Experience for Nordstrom Fulfillers”.
Key takeaways and tips for manual entry (hand-key)
The OneFill product team observed that there are times when item tags or barcodes cannot be scanned, for example when an item tag or barcode is torn. To accommodate for these situations, I designed a manual entry flow.
Display the right keyboard for the task
Make sure to only show the type of keyboard that the user needs access to in order to prevent unnecessary errors.
Design solution
For example, if your barcodes are all numbers, make sure to display a numeric keyboard. If you have no need for numbers with decimals, consider hiding and disabling the decimal key. If the keyboard contains letters, then show the alphanumeric device keyboard.
Present users with what they need in context of the task they are doing.
Easily activate the manual entry action
Users should be able to activate the manual entry action by tapping the form field.
Design solution
As the user taps the form field, a cursor should appear, the keyboard should slide up, and the camera scanning area should no longer be displayed. One way to indicate an active form field is to add a color border around the field with a blinking cursor.
Use appropriately sized touch targets
Ensure that you have an appropriately sized touch target for your users, the form field, and the Clear icon.
Design solution
For example, I used a slightly larger touch target of 50px by 50px because Nordstrom supports a multi-generational user base. There must be a Clear icon in the form field so that the user can easily delete all content. The Clear icon should not appear until the first letter or number is typed.
Make switching from scanning to manual entry easy
The user should be able to move seamlessly back and forth from scan to manual entry. Once a user taps the form field and is in a manual entry experience, they need to be able to exit that experience. I added a Scan button that takes the user from a manual entry experience to the start of the scanning experience.
Design solution
You might also consider where you add the button. To keep the user in context, you might add a Scan button above the keyboard.
Display user errors in context of the issue
When a user error is displayed during manual entry, it should be displayed inline in context of the issue.
Design solution
I positioned the error message as close to the form field as possible to enable the user to make the connection that the error applies to what they entered for a manual entry-related error.
In the case of a barcode, if the system supports validation while the user enters the information, then the message should be displayed as soon as the user enters the wrong character or digit. An example error message for this scenario might be: “Something’s not quite right. Check the characters.”
Design for context
With manual entry, there are two ways to submit information to the server.
Design solution
If the number of characters is fixed, the app might advance the user without any user interaction after the user enters the last digit. If there are no fixed character counts, then a Submit button might be used to advance the user through the flow.
If there is a backend call that might take some time, make sure to display a loading indicator.
I hope you found some of these tips helpful. If you have other design tips for manual entry, feel free to leave a comment so we can learn from each other. By sharing knowledge on specific enterprise design tips, I’m hoping we can all do our part to build better apps for employees to increase their productivity and happiness at work.
Sabrina Weschler is a user experience designer at Nordstrom. She designs apps that support Nordstrom employees and customers. She started at Nordstrom as a software engineer, and then transitioned into UX design. She is passionate about designing functional and user-friendly apps that empower users and increase their daily productivity and happiness. You can tweet Sabrina at @weschlersabrina.
Shout out to Karen Scipi (@karenscipi), our lead UX Writer/Content Strategist, for helping shape the words on this blog!
Views and opinions expressed in this blog post are those of the author and do not necessarily reflect the views of Nordstrom.
