What did we learn from designing UI for multiple kiosks?


Table of Contents

We are glad to have had many great opportunities to work with multiple clients – mainly in the industries ranging from police force, logistics to schools – on designing the UX & UI of their kiosks.

But as we’ve gotten pretty used to designing on mobile apps and websites, we sometimes face challenges when working on kiosk projects. When that happens, we go through many thoughts, testing and iterations, and managed to resolve most of them while learning something new.

With this, we would like to share some guides for when you work on your next kiosk project.

1. Cater the design for people at a sitting position

Not everyone interacting with the kiosk is at a standing position. Take into consideration that there may be people in a sitting position using it. Make sure they are considered for and catered to. Examples can be catering it to be wheelchair-accessible.

transparent 1@2xIt is crucial to check whether the kiosk need to cater for people at a sitting position. This may change the entire UI, for example, the navigational area may shift from the top to the bottom of the screen, so that it’s easily accessible from all heights and makes navigating smoother.

2. Work with an actual kiosk prototype

Today’s kiosk screen size ranges from 40 inches onwards. The ratio of the screens that we are used to designing and the actual kiosk screen size may vary and affect the interaction.

Without an actual prototype, we make assumptions that the users are able reach all the areas on the screen, and in turn affect the usability of the design. It is key that we design from an actual prototype than design from different assumptions.

Transparent 2@2x

3. Test with the users

With an actual kiosk prototype, test with definite users to gather feedback and observations from these users. For example, when designing the kiosk for schools, we faced difficulties where our users’ height varies. We did not consider that into our UI and thus, some students were not able to access certain functions.

transparent 3@2x

4. Take note on the technology limitations

The backend of kiosk technology varies. On one particular project we worked on, having pop-outs were not allowed due to the software limitation, so each page had to be linked as an individual page, similar to the web in the early 2000s. We had to work around this and design like how we would design for the web or mobile app.

transparent 4@2x

Another key issue to note is the hardware limitation. The reflection on the kiosk screen may differ a lot from the smartphones or tablets today. We had to design a loading screen that reduces the actual transition time so that users would not be frustrated to the long wait time.

5. The interaction between user and kiosk

When a user interacts with the kiosk, the user will most likely use the whole hand. So, we need to think from the perspective of the users – how they may place their hands and at which position will the interaction be most comfortable at.

transparent 5@2x

To design the most comfortable position, testing with multiple users using the actual prototype is required to better observe and understand where to place certain content and navigational elements.

Kiosk is going to be ubiquitous

Even with the latest smartphones in our hand, kiosk still play an important role in our life, allowing us to access information without downloading another app. Kiosks are continuously present in our life be it in shopping malls, restaurants, ticketing,  or even self-checkout services, etc. The relevance of kiosk is something that cannot be replaced, especially with the advancing technology. Human labours may be greatly reduced and self-ordering kiosk or automated service machines are widely employed, altering consumer behaviour.

Like the article? Share it!

JIN Design

19 Sep, 2017


Our End-To-End Web Services.

JIN Design services icon - Start

Design & Development

Web design and web development for your  custom website requirements.

JIN Design services icon - convert

WordPress & Website

WordPress, Webflow or WooCommerce design & development services for your website needs.

JIN Design services icon - optimise

Convert & Optimise

Optimise your website  performance and enhance its Google PageSpeed score. 

JIN Design services icon - maintain

Website Maintenance

Maintain your website content and ensure your website is safe and secure.

More From the Blog.

Top 20 Branding Agencies in Singapore

Top 21 Branding Agencies in Singapore

Choosing the right branding agency in Singapore can be a daunting task due to the numerous options available. With top agencies like TBWA and DDB Worldwide offering exceptional