How to ensure accessible kiosk design
Web accessibility has become a well used and documented practice with web designers and developers – that‘s a very good thing! Not all interface projects involve websites, though. Contributing to the user interface redesign for cash machines of an Austrian bank, I had the opportunity to dive deeper into accessibility for touch screen kiosk systems.
Let me summarize what we did to provide an accessible kiosk design for everyone.
Design for all
Accessibility means to make interfaces usable for everyone, regardless of their abilities and limitations.
Digital media inherently possess the means to overcome barriers posed by physical and/or psychological disabilities. After all, digital data can be transformed into any way to meet our audience’s requirements.
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.What Tim Berners-Lee, W3C Director and inventor of the World Wide Web, says about the web, also goes for other digital channels as well.
To put it more concretely, an accessible product enables people to understand, navigate, and interact with it. Accessible kiosk design ensures that everyone can use public self service terminals.
Accessibility: A necessity, not an extra
Self service terminals have become very common for withdrawing money, buying tickets and other tasks. More and more, these digital touchpoints replace previous branch offices.
Without judging these developments, one thing is for sure: Digital touchpoints must be as accessible for all people, like physical branches and counters should be.
In Austria and the European Union, accessibility is required by law. Austria’s Anti-Discrimination law and the underlying European Parliament and Council’s Directive on the accessibility requirements for products and services describe requirements to ensure accessible websites and digital services.
So, what does it take to design accessible self service kiosks?
Recommendations for accessible kiosk design
For the redesign of the cash machine Touch-UI for an Austrian bank, we respected the following rules to achieve accessible kiosk design:
- Ensure sufficient size of touch targets and spacing between them
- Provide feedback for interactions and fast response times
- Make text big enough to guarantee readability for people with reduced vision
- Ensure sufficient color contrast ratio between foreground and background
- Keep texts short and easy to understand
- Offer obvious means of interaction, do not rely on gestures
- For people who cannot use touch screens, provide alternative means of interaction
- Provide an audio interface for people with low or no vision
- Guarantee structural accessibility of machines for wheelchair usage
Continue below for some more information on these topics. but note that this article can only provide an overview.
Size of UI elements in accessible kiosk design
Appropriately sized UI elements are the backbone of accessible design. Sufficient text size guarantees readability, while the size of touch targets like buttons or links is crucial for users to interact without tactile errors.
Provide sufficiently sized touch targets
Pressing buttons is the most obvious and common way to interact with a system for completing tasks and reaching a goal.
Buttons therefore need to be big enough, to be reached and pressed easily without being missed.
The W3C defines the minimum touch target size (a.k.a. button size) with 44 (density independent) CSS pixels for standard screen design.
We did some further research specifically for kiosk screens and found study-backed consensus on a minimum touch target size of 20mm (measured on the screen) as most suitable for accessible kiosk design.
We had to design for four different types of screens in our project. Since every screen had different pixel density (pixels per millimeter or pixels per inch), different touch target sizes applied.
Taking the pixel density of each screen into account, we calculated the minimum touch target sizes:
- 15″ screen, 800x600px @ 66.67ppi
53px minimum touch target size
- 15″ screen, 1024x768px @ 85.33ppi
67px minimum touch target size
- 17″ screen, 1024x768px @ 75.29ppi
59px minimum touch target size
- 19″ screen, 1280x1024px @ 86.27ppi
68px minimum touch target size
Between each touch target, a minimum distance of 5mm (measured on screen) is required to prevent users from accidentally pressing a neighboring button instead. Also, a minimum distance of 5mm should be respected between a touch target and the edge of the screen to prevent usage errors caused by the bevel of the screen frame.
We strived to even extend the size of touch targets, whenever possible. This helped to make the interface super obvious and error prone.
In some scenarios with very dense screens and lots of UI elements, the touch target of a button can be (invisibly) designed larger than the button itself, to ensure minimum touch target size even with seemingly smaller elements.
Which text size is big enough for good readability?
Apart from being able to properly press buttons, users need to be able to read and understand instructions on the screen.
To define optimal text sizes and ensure readability, we consulted the Austrian/German standard DIN-1450 on readability. The ideal text size on screens depends on three factors:
- Viewing distance of the user to the screen
- Text and font type used in the application
- Target group of the application and environment of usage
The viewing distance for public kiosks such as ATMs in a bank foyer differs from using your personal smartphone or your PC. Thus, different text sizes must be used to achieve readability.
While the standard viewing distance to smartphones is about 30cm, for a kiosk display we measured a viewing distance of about 50cm. Texts further away from users need to be set larger in order to offer the same readability.
Text used for headlines, titles or instruction has different priority than text only used for additional information. While the latter is usually less important and requires less attention to text size, headlines, instructions and button texts are our main concern with the application and must be prioritized in design.
As for the font type, Sans Serif typography is generally recommended, since it offers better distinguishable and readable characters on screen than Serif fonts.
Ideal text size depends on the target group’s visual acuity
Finally, it’s important to take into account individual factors such as visual acuity of the typical target group and lighting or constrast in the environment where the machine is set up. It all matters for readability.
Text size recommendations given in DIN-1450 refer to “normal” visual acuity with a minimum of 70%. This is the visual acuity prevalent in the majority of the population and served as the basis for our text size calculations. For incorporating a special high contrast mode however, we strived for supporting audiences with less visual acuity.
Given all of the above factors, optimal text size for the application can be calculated. I highly recommend the font size calculator by the German Federation of the Blind and Partially Sighted for this task (Besides, the site is very informative and beautifully designed).
Minimum size is not optimal size – so level up!
For our 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.
Using the display’s screen density numbers, we derived pixel measurments and font sizes from these values. Whenever possible, we tried to greatly enhance the font size, depending on the importance of the GUI elements.
These font sizes definitions delivered us good readability results in the user testing and rollout phase of the interface (19″ screen example sizes):
- 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)
Apart from following standards and calculating font sizes, it proved important to regularly test our design assumptions and prototypes with actual users: to leave the lab and try out the results “in the wild”.
Make foreground colors stand out
As much as font type and size matter for readability, the wrong selection of colors still can make text unreadable, especially for people with reduced vision and/or color blindness.
Sufficient contrast between text and its background are crucial to readability. Contrast is defined as the measurement of the difference in perceived luminance between the foreground and background color. It can be described as a ratio, ranging from 1:1 (e.g. white on white) to 21:1 (black on white, maximum contrast).
The more contrast, the better
The World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) contain various rules for achieving accessible digital contents. The recommendations on color contrast have become the basis for ensuring accessible colors in digital media.
It differentiates between two levels of conformity:
- Level AA requires a minimum of 3:1 (for large text above 18pt) and of 4,5:1 (for normal text)
- Level AAA is more strict: a minimum of 4,5:1 (for large text above 18pt) and of 7:1 (for normal text) is required.
WCAG’s level AAA is seen as the “gold standard” to meet color contrast requirements. But it’s not too easy to achieve, especially when dealing with delicate color palettes defined by corporate design guidelines. That’s why Level AA is usually considered ok for accessible websites and services.
We took an extra step to open up to a larger group of people.
To tackle the limitations posed by the bank’s corporate design color palettes, we introduced a high-contrast-mode, especially for people with low vision. The mode can be activated by selecting a big button on the home screen or by pressing a shortcut key on the physical keyboard.
Later, with every successive visit at one of the bank’s machines, the system would remember the settings and display the interface using the high-contrast-mode every time.
While fulfilling level AA for color contrast in the standard mode, in high-contrast-mode only black and white is used to achieve maximum contrast. Also, a different font type and larger font size are used to offer the best possible experience for those with reduced eyesight.
Keep it simple (for everyone)
Building a simple and intuitive interface helps everyone.
Each screen should clearly communicate its purpose and required actions to users. Consequently, it was one of our main tasks to introduce focus and hierarchy into the application, and break with offering too many choices at once.
We reduced the options on each screen to what matters most for users at the moment. This reduces cognitive load and helps to focus on the task at hand.
Simple and accessible language
We worked closely together with the bank’s text department to reformulate every piece of UI text in the interface. Our goal was to get away from banking jargon and put clients and their needs at the heart of the UI’s language. This involved reducing information and shortening texts, as well as turning “instructions” with jargon into friendly, natural language.
Make the interface as obvious as possible
In the beginning of a big and prestigious project like this, stakeholders were tempted to go for playful interactions and trendy gesture-based navigation. It took some time to convince everyone, that simple but obvious means of interaction are a must with a project catering to large, heterogenous groups of users.
Tapping a button is the most obvious way to interact with a touch interface. Its function is visible and known to almost everyone, whereas gestures (such as swiping screens) are invisible and must be learned first. Thus, gesture support makes sense for “power users” on their own, familiar devices but not so much on public kiosks. At least, not as primary means of interaction.
Alternative means of interaction without the screen
Our focus in the relaunch project was the application’s screen design. But there are groups of people who cannot use a touch screen:
- Short people who cannot reach up to the screen
- People in wheelchairs
- Blind people or people with very low vision
To support these people, we made every key on the screen accessible through the physical keyboard as well. Most machines just have a small numeric keypad (used for entering PIN codes), others have full sized alphanumeric keyboards. Both types of keyboards are mounted far below the touchscreen and thus are within reach for people who cannot access the screen.
Each button of the new interface includes a reference to a number key on the physical keyboard. In this way, every task can be accomplished by selecting actions via keyboard keys.
For people with very low or no vision at all, all of the banking machines offer a headphone jack. Once headphones are plugged into the device, the machine’s screen turns dark so that no bystanders can watch.
Audio instructions for every screen enable people to select their desired options by pressing keys on the physical keyboard corresponding to the read out choices. The keys also contain tactile markers, so that blind people can find their way about.
The physical setup matters, too
Finally, other factors of accessible kiosk design are centered in the field of architecture.
Accessible kiosks must be set up so that they can be reached and accessed by everyone:
- The entrance to foyers must be accessible to wheelchair users and blind people
- Machines must be set up in a way that wheel chair users can come close enough (underneath the device)
- The machine’s screen must not be mounted too high from the ground to enable access for everyone
Go out, talk to people and test!
This article is only intended as a brief summary on the topic.
Just a small hint in conclusion: Guidelines and recommendations are a good starting point, but they should never replace user research and user tests in the project. Leaving the office and talking to people about your designs and prototypes cannot be valued enough for improving it.
Testing with just a hand full of people usually helps to discover design problems early and quickly.
It’s invaluable to any project.