Redd’s UX Design Patterns #1: Input Helpers
Welcome to the first of a series of videos where we’ll be covering topics related to UX design. We’ll be presenting problems that we ran into while working on clients’ projects and we’ll also present the solutions that we developed in order to solve them. Hopefully you’ll find this useful in your own work or at the very least, interesting.
So letʼs get started! Today, weʼre going to be discussing a design pattern that we came up with while working on a mobile application for a banking client. But we found the solution universally applicable across verticals and have used it multiple times, including what weʼve designed for birthing hospitals and even organic vegetable sales. So we gave this design pattern a name and called it “Input Helpers”.
Let me set the stage. There are times within apps where a whole lot of information needs to be gathered from the user and this information you collect is mission critical where, if the inputs provided are incorrect, it could have disastrous consequences.
So three things are critical in this situation:
- The userʼs attention is required on every question being asked.
- The user must always be aware of how they answered a question.
- The user needs the ability to go back and change the answer to a previously answered question if they learn something else down the line.
For example, in sending a payment to someone from oneʼs bank account, a user needs to know what amount theyʼve chosen to send if the mode of money transfer needs to be chosen in a subsequent step (as some modes of payment may be charged) and is dependent on the amount being transferred.
So, this is what we did:
First, we create a slide-up window asking the specific question. The user can be provided the usual mechanism to provide the answer, including free text-input fields, radio buttons, checkboxes, etc.
Then, once the user has input something and hits “Proceed”, the answer is shown in the background.
The user also sees an option to edit things that have already been input or reference them to answer a question.
With this simple mechanism, all three goals of keeping the userʼs attention on one task at a time, showing the previously answered questions for reference and affording them a simple way to edit are achieved.
This is a design pattern we came up with while working on a mobile application for a banking client. But we found the solution universally applicable across verticals and have used it multiple times, so we gave this design pattern a name and called it “Input Helpers”.
While this is a great solution in certain circumstances, there are a few limitations to keep in mind when using input helpers:
- Donʼt use it in scenarios where the information you need from users is not critical, like market surveys or for personal information filling. This pattern will not take advantage of auto-filling mechanisms that browsers are capable of.
- Consider what needs to happen in case a previously answered question gets edited. If thereʼs a different sequence of questions that need to be asked if a user answers differently, you may want to indicate the same to the user.
- This is a suitable solution for screens with little real-estate, but it doesn't carry over to tablets, desktops or larger screens.
So thatʼs it for now. I hope you found this video useful. If you did, stay tuned for more like this in the future. If you have anything youʼd like to share on the subject, let us know in the comments below or by writing to us at firstname.lastname@example.org
— Sharan Grandigae, Founder and CEO of Redd Experience Design