Designing a charging-station screen: eight lessons from the field
A charging station has no manual, and nobody reads one standing next to a car. The screen has to explain itself to a first-time driver in the rain and to a regular in a hurry. We designed the HMI family for Zes's high-power stations, now in all 81 provinces of Türkiye, and the same work for Electrip in six European countries. These are the lessons we'd pass on to anyone designing a charging screen.
1. The first screen says one thing
The welcome screen has a single job: show that the station is alive and invite a tap. No menu, no tariff table, no news. Everything else comes one step at a time, after the driver has started.
2. Status reads from the car, not from the screen
Drivers decide before they reach the station. Each connector's status (available, charging, reserved, out of order) has to read from a distance, at a glance. A broken connector should show from the car park, so nobody pulls a cable for nothing. And a driver who has already plugged in shouldn't have to choose the connector again: the station knows.
3. Every way to pay, with equal weight
RFID card, QR code with the app, or a bank card: drivers arrive with different habits, and each of them should find their way on the first look. If one method is buried behind the others, the drivers who use it think the station doesn't support it. The new rules make this a legal point too: under the EU's AFIR and Türkiye's 2026 EPDK changes, card payment without an app or membership has to work. Our note on those rules covers what they change on the screen.
Cancel stays within reach at every step.
4. One decision per step
We cut starting a charge down to four clear stages, each with a single decision. In the field test we looked at the exact step where drivers gave up, and simplified the flow around it.
5. Design the charging screen for someone standing beside the car
While the car charges, the driver is rarely in front of the screen. The percentage sits in the centre, with power, energy, time and time left on either side, in type sized to be read standing beside the car. On a station with two connectors, each charge gets its own card, so two drivers never confuse their sessions.
6. Make stopping deliberate
Stopping a session asks for the card again or a confirmation in the app. A charge should never end because someone leaned on the screen or a child tapped it. At the end comes a summary and one next step: put the cable back. The physical and the digital are one flow.
7. Design the bad moments as carefully as the good ones
A station's interface is judged on the day something goes wrong:
- Emergency button: what happened and what to do, step by step.
- Remote update: the screen says what's happening instead of freezing.
- Reserved connector: clearly held for the driver who booked it in the app.
- Help: customer service one tap away, from every screen.
8. One flow, every screen size
Zes stations don't all have the same screen. The 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 separately for each size, so drivers follow the same path whichever station they pull up to. Shrinking one layout onto the other doesn't work: the strip needs its own hierarchy.
Accessibility that holds up outdoors
A kiosk is a closed system: users can't bring their own screen reader or change the settings, so accessibility has to be built in.
- Contrast: 11:1 to 14:1 on body text and 21:1 on alert cards, measured from the screens. WCAG's highest level (AAA) asks for 7:1. Daylight eats contrast, so we aimed well above it.
- Targets: large and well separated, so the first tap lands in the right place.
- Never colour alone: every state comes with an icon and text, so it reads for colour-blind drivers too.
- Reach: controls within reach of a wheelchair user.
- Without sight: spoken guidance through the whole flow.
- Languages: 19, for drivers crossing borders.
Test it where it lives
We assessed every screen against Nielsen's ten usability heuristics and the accessibility standards (WCAG 2.1, and EN 301 549 for kiosks), and it scored 80 or more out of 100 in every evaluation. Then we took it outside: 20 participants, real tasks, different light and conditions, different kinds of drivers. We measured how many started a charge without help and how long it took, looked at the step where people gave up, and simplified the flow with that data. We also walked through other networks' station screens, step by step.
A review at a desk can't show what the street does: light on the screen, a driver with a phone in one hand, someone waiting behind them.
Try it yourself
The real screens are on our Zes HMI page: start a charge, watch it and stop it, as drivers do.
We design charging apps, station screens and the systems behind them. If your network is working on its stations, we're happy to look at them with you.
A short call, and we'll tell you honestly where you stand and what the first step should be.