In order for a kiosk user interface to be "touch-friendly," it must allow the user to navigate comfortably using only their fingers without the need for a mouse and keyboard. This is a different paradigm than many web and even mobile app developers are used to.
Our company has developed touchscreen kiosk applications used nation-wide and I wanted to share a few of the lessons we've learned along the way regarding touch-friendly user interface design specifically for kiosks.
This is not intended to be a comprehensive guide on kiosk user interface design, but instead to draw attention to some of the more valuable lessons we've learned while designing kiosk user interfaces.
1. Keep it simple, stupid
I use the term dummy-proof affectionately, but you need to keep your customer demographic in mind while designing your kiosk's user interface. If the kiosk is going to be used by people with lower than average reading abilities or are likely to be under the influence of alcohol, you need to "dumb down" your kiosk UI to make sure your message comes across clearly. Users also tend to not read blocks of text very closely, so substitute large paragraphs with symbolic imagery, diagrams and animations when possible.
2. Make buttons "fat finger" friendly
In case you don't know, to "fat finger" a button means to hit multiple buttons at once which is almost certainly not the user's intent. This is easy enough to prevent by making buttons larger with sufficient spacing between. This can be a bit of a challenge when designing high information density screens or a touchscreen keyboard. Always look for ways to trim information! If users only need to enter dollar amounts then create a keyboard with only the essential digits and decimal point.
Ideally your buttons will scale dynamically based on the size of the kiosk screen and resolution. A keyboard on a 27" 1920x1080 screen may look great and then you use the same button size on a 10" tablet screen and it becomes nearly unusable. Smashing Magazine published a great article on finger-friendly design for the mobile touchscreen.
3. Screens should be clean and free from clutter
A cluttered kiosk UI can distract the user from completing their transaction and should be avoided. Clutter can include any unnecessary text, images, animations, ads, etc... which distract the user from their intended purpose.
A common cause of clutter is soliciting the user for too much information on a single screen. For example, if you're wanting to email the customer a receipt you can keep the screens cleaner by breaking this up into a of couple steps. On the first screen you might ask the user if they want to be emailed a receipt and if they select yes show them a second screen where they enter their email address.
Trying to cram both of these steps onto a single screen might be tempting to "reduce clicks" but we’ve known user experiences to be more pleasant when this information is presented piecewise in sequence.
4. Avoid confusing the user with too many options on a single screen
You should avoid presenting the user with too many options on a single screen so that you can provide sufficient explanation of each step. In other words don't make the user think any more than absolutely necessary.
The intent of a self-service kiosk is to reduce the need for human interaction and if the user if presented with a myriad of options crammed onto one screen they're more likely to get confused and require human assistance.
5. Screens should be responsive and snappy
Our kiosk developer Ryan commented:
"If I touch a button and there isn't immediate feedback then the kiosk seems unresponsive and laggy. Even if there is some working process going on causing the lag there needs to be some sort of feedback to the user that the button press was received. If there is some processing or working logic that is happening then some sort of indicator needs to be relayed to the user. What is not acceptable is a user touches a kiosk button and it takes the kiosk 4-5 seconds for any sort of indications that the kiosk registered the button click. It's all about immediate feedback. Or else the touch kiosk feels laggy and poorly designed and extremely annoying."
6. Avoid ambiguity when conveying instructions to the user
When an image or text has more than one interpretation it's easy for the customer to get confused. One way to avoid ambiguity is to put yourself in the shoes of your kiosk users.
Another useful technique is to perform usability testing by soliciting potential customers to help test your kiosk UI. This will help uncover any assumptions you've made and any ambiguity in your user interface design.
7. Be prepared for less than ideal lighting conditions
This is especially true when your kiosk is being used outdoors. We've developed many kiosks for jails and courthouses and I've been surprised how many of them have ended up outdoors in a "secure area" but where lighting was less than ideal. My assumption was that a "secure area" meant indoors, but that's not always the case.
We ran into issues where we didn't use enough contrast or the colors didn't show up well due to the lighting. The moral of the story is that you should understand the environment in which your kiosk will be deployed and design your kiosk's user interface accordingly.
Conclusion
Designing a user interface for a touchscreen kiosk can take some trial and error, but if you can benefit from some of our mistakes then it will save you a lot of headache. Mouse-based actions that are common in the desktop environment, like displaying a tooltip on hover-over, are poor conventions to rely on in a kiosk touchscreen environment.
The techniques for developing a kiosk UI is closer to that of developing for mobile phones than to desktop applications, but with some practice you can make the transition. Contact us if you'd like help designing your next kiosk application.