Self-Service Kiosk User Interface (UI) Design tips and implementation for accessibility to ya!
I have a very thrilling opportunity to design a kiosk interface and its experience with my beverage industry client. Here’s what I found during the research phase. While trying to keep my notes very simple and sweet, I’m very excited to share all my dig-outs with y’all 😃
Things to Keep in Mind
- The role touchscreens play, which are intuitive and low-friction in their own right. — News from Acante
- Prompts to touch (words on the screen and other visual cues) will also help users determine that signage is interactive. — Article from Kioware
- Attract screens (when the device is not being used) can also serve as prompts that the device is interactive. — Article from Kioware
As the W3C defines the minimum touch target size and Summary of Research on Touch/Pointer Target Size as its back, I got the result and narrowed the research to its suggested size for better accessibility:
- Button Size (minimum touch target size): 20 mm (minimum) or more
- Distance between Buttons: 5mm (minimum) or more
Our kiosk device is 1080 x 1920 px with a 21" touch screen, with the calculation by the tools, we got the result:
- PPI: 104.9
- Minimum button size: 82 px
- Minimum distance between buttons: 21 px
Font Size:
For a 19-inch use case, we calculated a minimum font size 3.5mm on screen. To be on the safe side under any circumstances, we set the minimum font size for important texts (such as headlines, instructions and button texts) to 4mm.
H1 headline (used for main instructions on every screen): 38px in Sketch (8mm on screen)
H2 subheadlines (used for additional instructions): 23px in Sketch (5mm on screen)
Main function button labels: 23px in Sketch (5mm on screen)
Primary button labels: 18px in Sketch (4,4mm on screen)
Quote from: https://construkt.eu/accessible-kiosk-design/
For our 21'’ touch screen, the standard for better accessibility and readability
- H1 headline (used for main instructions on every screen): 42px in Sketch (8mm on screen)
- H2 subheadlines (used for additional instructions): 25.5px in Sketch (5.6mm on screen)
- Main function button labels: 25.5px in Sketch (5.6mm on screen)
- Primary button labels: 20px in Sketch (4.9mm on screen)
Related Tools for Calculation:
- Pixel to mm converter: https://pixelsconverter.com/pixels-to-millimeters
- Screen Display size to PPI (ppi and px to mm): https://www.calculatorsoup.com/calculators/technology/ppi-calculator.php
What’s Next?
Because this is an ongoing project and I’ve signed the NDA with my client, I will update an in-depth case study and design process here or in another article. So stay tuned! ✨ 😄
Reference
Kiosk Design Case study
Font size calculator
Want to Learn More?
Visit My Website or Donate here 🙌
