Blog

User Interface Design for Kiosks

A kiosk’s user interface is the part of the kiosk people interact with. This includes everything from the screen and buttons to the icons and menus. A well-designed kiosk UI can mean the difference between a smooth, user-friendly experience and a frustrating one.

Photo: Frank Mayer and Associates, Inc.

August 21, 2024

Because they offer convenience and efficiency for users, it’s no surprise self-service kiosks have become a common sight everywhere from airports to healthcare offices.

And while design and function play a role in user adoption, much of a kiosk’s success can be attributed to a key element: the user interface (UI).

Ben Snider, Vice President of Kiosk Sales at Frank Mayer expands on this.

“The most common complaint about kiosks is they can actually complicate the end-user’s transaction,” he says. “Kiosks should enhance the user experience, making interactions simple. The end users should be able to complete their transactions without any confusion or the need for additional assistance.”

In this article, we talk with Snider as well as Design Manager Tom Satchwell from industry-leading software provider and Frank Mayer partner Acquire Digital to explore what main principles are important when designing UI for kiosks and discuss how accessibility and usability play a role in the end results.

Best practices when designing UI for kiosks

There are certain guidelines to follow when planning the user interface for a kiosk. Satchwell details the top five.

Simplicity and Clarity

Keep the interface clean and intuitive, as users should be able to understand and navigate it easily and autonomously.

“Kiosks tend to provide function services, and the UI should reflect that,” Satchwell explains. “That means interactive elements should be obvious, and it should be clear to the user that the screen is touch-enabled.”

Snider agrees. “At the beginning of each ‘kiosk page,’ the end user is asking themselves what they need to do next to proceed… so tell them!” he says. “With each next step, there should be concise instructions on how to proceed.”

Good examples of these instructions include wording like “touch screen to begin” or “please make a selection” as well as including “next” and “back” buttons.

Touch-Friendly Elements

During the design process, ensure buttons and other interactive elements are large enough for easy touch interaction. In addition, these touch-friendly elements should be accessible to all user types, including individuals of different heights and varying fine motor ability.

Visual Hierarchy

“Use size, color, and placement to guide users’ attention to important elements,” Satchwell says. “Key features should be advertised and visible from considerable distances, and accessibility options and toggles should be visible and at accessible locations within the UI.”

Feedback

Providing immediate and clear feedback when users act can confirm successful interactions or indicate errors. Because sound is frequently not an option, visual clues are important to relay whether an action was completed correctly.

“End users seek confirmation they are performing actions correctly,” Snider mentions. “This can be achieved through visual cues, such as green buttons, icons, or check marks, and supportive text like ‘Thank you for making your selection! Now, (insert next step).’”

Consistency

Often, multiple systems, including third-party ones, must be brought together on a user interface. Maintaining consistency in design elements and terminology can ensure the experience is cohesive and on-brand.

In addition to best practices for the overall user interface layout, being mindful of specific elements that make up the design is important, as well.

Colors should be used to create contrast on-screen and draw attention, while keeping accessibility like color blindness in mind. To aid in comprehension, especially in multi-language areas like airports, icons can also be helpful.

For typography, choose legible fonts and appropriate sizes that allow for readability at a distance. Acquire Digital uses the popular Lexend font in their standard UIs, which is proven to improve screen readability.

Because most modern kiosk installations are more than 60 inches in size, two-thirds of the screen is uncomfortable to use when a user is standing in front of it. Therefore, interactive elements should be kept to the middle third as much as possible.

Lastly, the overall layout to the design is critical. Satchwell states, “Optimize layout for easy navigation, with primary actions prominently placed.”

He expands, “Ninety percent of the world is right-handed, which is why [Acquire Digital’s] standard UI has the most important navigation on the right side of the screen.”

Above all, when being mindful of design elements, it’s crucial to stay consistent. Ensuring uniformity in the use of colors, fonts, and layouts will avoid any user confusion.

Continue Reading

Included In This Story

Frank Mayer and Associates

Kiosk Design | Manufacturer

Frank Mayer Kiosks and Displays specializes in large-scale rollouts of custom digital kiosks for enterprise and growth-oriented brands. With a relentless focus on premium design, customization, and end-to-end service, we manufacture self-service customer engagement solutions that expand market reach, boost sales, and enhance brand equity.

Request Info

Learn More