Designing a kiosk interface. Here’s how we did it.
Designing a good kiosk interface minimizes friction, time, and workload. Making a kiosk UI easy and convenient to use in the short time it engages a user is very important and that makes it a very challenging UX to tackle.
Here we’ll take you through one of our projects and how we approached it.
Familiar Design
Going through the basics of kiosk design and kiosk user behaviour, let’s understand that it is much easier for users to see something they recognize and take action, rather than having to remember what to do. By using familiar icons and actions, we are essentially reducing the workload of the user.
The welcome video can be played automatically and stopped when the user decides to interact with the kiosk
Showing instructional videos on the touchscreen when a kiosk is not in use is an effective way to provide simple training. The most basic execution of this rule is to have a video — or even just a screensaver — that instructs passersby to “touch screen to begin.” It’s a simple, effective way to encourage engagement with the device.
Request information sequentially
In the world of interactive kiosks, try to request information sequentially, not simultaneously. Only asking for one thing at a time keeps the user from feeling overwhelmed. Break a task down into its discrete parts,
Reveal all the needed steps from the start so the user knows how long the process will take. If the process takes too long or they don’t have the necessary information they can just leave the kiosk.
In this way, they will not be stuck between inserting sensitive information into the public kiosks.
Confirm button between steps of interaction
What if you designed your kiosk user interface to only enable the “submit” button after all information has been entered? Users can’t proceed until it’s safe to do so. By preventing errors before they happen, you reduce your customers’ stress, build their confidence, and make them feel comfortable using self-service kiosks.
What happens if the customer walks away in the middle of their transaction?
Another important, but often overlooked aspect of our kiosk workflow is what happens if the customer walks away in the middle of their transaction. There’s not one simple answer here, because how this should be handled depends on the context. The obvious answer is simply to restart the kiosk workflow from the beginning if the kiosk is idle for an extended period of time.
But what happens if the customer is inserting cash and they’re digging around in their wallet for another bill? If the customer is not in the middle of making a payment, we should display an overlay screen asking if they’re still there.
Split the screen into different panel areas
To give the user a sense of consistency and control, a good approach is to split the screen up into a number of fixed panel areas containing different types of information e.g. a ‘control panel’ containing the main control buttons, a ‘menu panel’ to display choices, and an ‘information panel’ to display information from the system.
The user should be provided with some basic controls for navigating through the system
Examples of useful controls that may be considered are:
• Start, Finish, Restart — (Start or finish interacting or exit and start again.)
• Step back or Go back — (Go back to the previous screen or step in the interaction. )
• Next page, Previous page — (Step through information screens. )
• Enter or OK — (Complete keyboard input, select menu option or acknowledge
system message. )
• Cancel or Exit — (Cancel or exit from the current part of the system.)
Implementing everything we learned
The project we were tasked with is to design a kiosk that enables users to send and receive money internationally.
Currency exchanges are usually done through banks and other service providers. The main advantage of kiosks in these environments is to save time. Repetitive office tasks can be semi-automated by using Touch screen kiosks and therefore avoid long queues.
You can view our design below and the figma prototype here.
