Kiosk and HMI design: a checklist for screens in the field

A kiosk or a machine's screen is software with a body: a card reader, a cable, sometimes a printer, glare on the glass and a queue behind the person using it. People use it standing up, in public, often once. We've designed these screens for charging networks, Zes across Türkiye and Electrip across Europe, and a self-service banking machine for Revolut in Spain. Our note on charging-station screens follows the driver's journey; this is the wider checklist we use for any kiosk or HMI.

1. Start with the place, not the screen

Before the first layout, find out where the machine will stand:

• Light: direct sun, night, an underground car park. Daylight washes out contrast, so aim well above WCAG's 7:1 (AAA) for body text. On the Zes screens we measured 11:1 to 14:1.
• Height and angle: who looks at it, from where, and at what angle the glass reflects.
• Hands: gloves, wet fingers, a phone or a bag in the other hand. Large, well-separated targets.
• Noise and people: a busy station or a quiet lobby, someone waiting behind.
• Reach: EN 301 549, the standard behind EU accessibility law, puts controls for a forward reach between 380 mm and 1,220 mm from the floor, so a wheelchair user can reach them.

2. The hardware is part of the interface

Every device on the machine has a moment on the screen:

• Point to the hardware. "Tap your card here" works when the screen points to where the reader actually is, and the light on the reader agrees with the screen.
• One vocabulary. The words on the stickers and the words on the screen are the same.
• Every device fails differently. A card that won't read, a printer out of paper, a scanner that times out, a cable not seated: each needs its own message and next step.

3. An idle screen, a clear start and a clean end

• Idle: the screen shows that the machine is alive and what it does. It isn't a slideshow people have to wait out.
• One decision per step, with cancel and back always visible.
• Timeouts that warn first, and give more time to anyone who asks for it.
• A full reset after every session. The next person must see nothing of the last one: no name, no amount, no card digits.

4. Design for the bad connection

Machines lose their connection more often than phones do. Decide early:

• what still works offline, what waits in a queue and what must stop;
• how to make sure a payment is never taken twice;
• what the screen says while the backend is unreachable, or while a remote update runs, so it never just freezes.

5. One flow, every screen in the fleet

Fleets mix screen sizes and orientations. Zes's 400 kW station has a full screen; the 720 kW station has a 1080×459 strip under an advertising display. We designed the same flow for each size separately. Scaling one layout down doesn't work: a strip needs its own hierarchy.

6. Accessibility is built in, because it can't be added later

A kiosk is a closed system: people can't bring their own screen reader or change its settings. So:

• spoken guidance for people who can't see the screen, with a headphone socket for private listening;
• physical keys that can be told apart by touch;
• never colour alone: every state also has an icon and words;
• more than one language, switchable from every screen. The Zes screens come in 19.

The European Accessibility Act has covered self-service terminals since 28 June 2025: payment terminals, ATMs, ticketing and check-in machines, and interactive terminals that give information about a service the Act covers. Terminals already in use before that date may stay in service until the end of their economic life, for at most 20 years. Our EAA checklist covers the rest.

7. Content you can change without a release

Prices, opening hours, notices, languages and campaigns change more often than software. Run them from remote configuration or a content system, so a price change doesn't need a new build on every machine. For charging, price display has its own rules: see AFIR and EPDK on the screen.

8. Lock it down

• No way out to the operating system: no system dialogs, no browser bar, no keyboard shortcuts.
• A service mode for technicians, hidden and behind a PIN.
• After a crash, the machine restarts itself back to the idle screen.

9. Prototype in the browser, then test on the machine

A clickable prototype of the real flow, running in a browser, lets stakeholders, testers and partners try the screens long before the hardware arrives. We built one for Zes, and it now lives on our Zes HMI page.

Then take it to the real machine in its real place. For Zes we tested with 20 participants on real tasks, in different light and conditions, and simplified the flow at the step where people gave up. A desk review can't show glare, gloves or a queue.

10. Measure in the field

Log what the machine sees: where sessions are abandoned, how long each step takes, which errors appear on which device, and how often timeouts fire. Put that next to support calls. The step with the most calls is usually the next thing to redesign.

What we'd avoid

• The app, made bigger. A kiosk isn't a large phone: no scrolling feeds, no small icons, no gestures people have to discover.
• Designing only the happy path. The machine is judged on the day something goes wrong.
• Signing off in Figma. The real screen, in its real light, decides.

Where we come in

• Kiosk & Embedded: design and build of kiosk and HMI interfaces, from the first site visit to field testing and the fleet's updates.
• Accessibility and EAA: assessments against WCAG 2.1 and EN 301 549, for screens people can't adjust themselves.

We design and build the screens people use in the field. If you're planning a kiosk or reworking a fleet's HMI, we're happy to look at it with you.