To Make Apps Accessible, Make Them Compatible with Different Devices
How to design with old operating systems, varying contrast, low battery life, and damaged screens in mind.
I wrote this story with Ramprakash Ravichandran, an interaction designer on the Next Billion Users team.
For several years, Google product teams have been researching how best to design for new internet users in India, Southeast Asia, Africa, Latin America, and beyond. Through that work we’ve discovered several important compatibility design patterns that allow our products to perform well for people using low cost phones with old operating systems, varying contrast, various screen sizes, low battery life, and damaged screens. To help other designers build apps that can work—and work well—across all types of devices, we’re sharing out those compatibility design patterns.
Operating systems
Software updates can consume a lot of device storage space and costly mobile data, meaning many users will not always choose not to update to the latest Android operating system—after all, one update could take up all of their prepaid data credit. Users may be running older versions of the Android operating system, such as Ice Cream Sandwich, KitKat, or Lollipop.
Strategy:
- Find out which versions of the Android operating system and which devices your users have.
- Test your apps on old versions of Android.
- Let users know that the app will work on old Android OS.
Resource:
Provide backward compatibility.
Account for varying contrast
Lower-contrast and lower-resolution screens are common. When using low-contrast and low-resolution screens in bright sunlight and humid climates, it can be difficult to clearly see the text and images on the screen. Low-contrast displays on some phones are often kept at low brightness to preserve battery. Some new internet users are older, and may have low vision or are in bright sunlight conditions and are need of high contrast interfaces. Apps need to be functional and easy-to-read in both low light and bright light conditions.
Strategy:
- To improve usability, create a high contrast interface with accessible color contrast and font sizes.
Resource:
Multiple screen sizes
Think small. Some phones have small screens or low to medium density screens. Reduce UI for navigation and actions and emphasize content. Devices screens range widely in size. Some devices are as small as 3.5 inches and 320dp x 480dp.
Strategies:
- For low and medium density screens, make the text and images sharp and easy to read.
- Avoid thin edged or lightly colored iconography as it might be hard to see them clearly on low and medium density screens.
- For devices with small screens, design your interface to fit on screens as small 3.5 inches and 320dp x 480dp.
- Avoid making the UI appear congested or unreadable.
Examples:
Make the best use of small screen space by maintaining an optimal (or appropriate) level of padding.
Understand how elements on the screen scale and appear in different layouts. Test how the image changes its proportion if the text sizes increase. In this example, the image scales down proportionally in size if the text below it gets larger.
Localization versatility on small screens
Consider cases for both wrapping strings and modifying layouts for UI components and their sequence or order for different languages. Some languages require more words compared to English and impact the layout for both small and large screens. Calculate if the affordance needs to wrap to two lines or be extra long to accommodate the text.
Resources:
- Android Emulator: Test your app on various small and medium size screens. Make rapid changes in the layout editor and then re-test your app using the emulator.
- Android Developer Building for Billions Device Capability: Guidelines on supporting various screen sizes, backward compatibility, and efficient memory usage
- Device metrics: A comprehensive resource for sizing, resolution, and more across multiple devices
- Bidirectionality: UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored to ensure content is easy to understand
Low battery
Some batteries deplete quickly. Small, inexpensive, and old batteries often leave people reducing brightness, enabling airplane mode, and minimizing device usage. Consider designing experiences that are aware of battery state and provide control and transparency to the user.
To conserve battery power, users may reduce screen brightness. Users may also turn off features like Bluetooth or Wi-Fi to prevent running out of battery charge, especially if they aren’t currently using them.
Strategy:
To compensate for reduced brightness, consider increasing the color contrast and size in typography and icons for critical tasks.
Examples:
Resource:
Android Developer Building for Billions Battery Consumption: Reduce battery consumption
Damaged devices and screen cracks
Since devices are expensive to purchase and repair, users may continue using damaged devices with non-functioning buttons, cracked screens, and other problems. Users may gift damaged devices to family and friends. Some devices may have batteries held in place with elastic bands. If the user can’t interact with an item on the screen due to a screen crack, they may have to change the orientation of the phone from portrait to landscape mode or vice versa to access the item.
Strategy:
Make sure your app works in both landscape and portrait modes.
Example:
Resources:
Ensuring your designs are compatible for various operating systems, varying color contrast, different screen sizes, low battery life, and damaged screens may help a wide range of users be able to use your products.
Screenshots courtesy of Android, Datally, Dialer, Files, Google Pay, and YouTube teams.
