Accessible Mobile App Design: 5 Best Practices
In designing IoT solutions for medical devices, it is critical to design for the usability of both physical and digital interfaces. MANTA recently worked with a client on their mobile app design. As the elderly are a significant proportion of their users, they challenged us to craft a user-friendly design system for seniors.
A 2015 Pew study showed that seniors report feeling less confident using electronic devices compared to younger users. They are also more likely to have vision, hearing and motor impairments.
As smartphone use climbs among seniors, it is more important than ever to design with their unique needs in mind. MANTA’s design process took into consideration seniors’ mental models towards mobile components and different abilities to interact with the mobile application. We adopted a more skeuomorphic approach to the UI design and incorporated key accessibility guidelines to make screen elements friendlier and more noticeable.
Here are 5 best practices from our approach that can help you design more accessible mobile user interfaces:
1. Design for assistive technology
Accessible design should always consider people with disabilities who may use assistive technology to interact with their devices. Screen readers, for example, are assistive software on desktop, tablet, and mobile devices that read text out loud or display braille. Screen readers use a top-down approach to interpret content. Organizing information in a top-to-bottom, left-to-right layout optimizes a screen reader user’s experience. Android’s TalkBack software and iOS’ VoiceOver have slightly different functionalities, so design with the operating system in mind.
2. Ensure text is readable
Adjusting text size and contrast helps clearly communicate information to your users. Text on mobile devices should be no less than 11pts so readers with low vision can perceive it. Designers and developers can mark text in scalable pixels (sp), enabling users to easily increase the text size. Ideally, users can magnify text by 200% without losing content or functionality on the screen.
The contrast of text against background also determines legibility. Contrast ratio represents the degree of contrast between one color and another. According to the Web Content Accessibility Guidelines (WCAG), text smaller than 18pts should have a 4.5 : 1 contrast ratio with the background. Since large text has wider character strokes that can be easily read at lower contrast, a minimum 3:1 contrast ratio will still ensure users see and understand important or bolded text.
3. Use multiple visual cues
Using multiple kinds of visual cues in your information ensures there are multiple ways for your intended message to reach your user. Color alone is not sufficient to distinguish interface components. This is especially important when considering users with color vision deficiency. Instead, highlight differences between components or actions by also using shape, size, and text. The benefit of designing on a highly interactive device such as a mobile phone is that you can also rely on audio or touch feedback to guide users through an action.
4. Design for user-friendly touch interaction
Speaking of touch, the sensitivity of phone displays makes it easy to make mistakes. Help reduce error within a user flow by designing touch targets, such as buttons, with finger size in mind. The average width of an index finger is 1.6-2cm for most adults, which converts to roughly 45-57px. Most phone platforms have smaller guidelines that are a good baseline: Android recommends a minimum of 48x48dp, Apple a minimum of 44x44pts, and Microsoft a minimum of 26x26px. To make sure your users don’t accidentally press the wrong button, touch targets should also be sufficiently separated; Material Design Guidelines recommend at least 8dp for Android. These sizing guidelines can be particularly beneficial to users who have difficulty with fine motor control, have impairments such as a hand tremor, or who have low vision.
5. Conduct usability testing
It’s impossible to know what to design for and how users respond without effective user research and usability testing. Good human-centered design involves conducting usability studies at different stages of product development. Formative testing at the early stages can provide insight into users wants, needs, and desires. A technique such as card sorting can surface features your users would find most valuable. You can continue usability testing throughout development by measuring how users perform on specific tasks. Finally, when recruiting, make sure to conduct studies with different types of users who can reflect the diversity of your user base. By ensuring your product is accessible to many types of users, you can improve the user experience for all.
Have more questions about designing an accessible mobile app and improving UX design? Contact MANTA to learn more about how our product team can help you.
