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.

Illustration by Taylor Herr, Next Billion Users visual designer

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

Illustration by Taylor Herr

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:

Color and contrast

Multiple screen sizes

Illustration by Taylor Herr

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.

Do (green): On this small screen, the left padding is 16dp and there is more room for the text. Caution (orange): On this small screen, the left padding is 72dp and the text appears contracted.

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.

1: The illustration image is scaled up to fit a large screen. 2: The same illustration image is scaled down to fit a small screen when the text size increases.

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.

1: In English, the text “Confirm and free up 2.43 MB” fits the button width and doesn’t need to wrap. 2: In Malayalam, the translated string is long and wraps to multiple lines. 3: In Arabic, interface elements are laid out from right to left, influencing their order and position in the layout.

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:

1: This video call app’s connected status shows that the device’s battery is strong enough to sustain a video call. 2: In Google Pay, the color contrast of blue to white is distinct, and the font size and icons are large enough to see when the screen is not bright.

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:

1: YouTube portrait mode 2: YouTube landscape mode

Resources:

Android Studio Layout Editor

Material Design Tools

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.