Design Series: How to make your app more ...

Design Series: How to make your app more accessible and readable?

Since the very beginning of the "Mobile First” era, user interfaces require UI designers to create smarter interfaces than before. Mobile screens are small and the average age of the majority users is getting higher and higher. Therefore we need to keep in mind that we are creating user interfaces for all kinds of users, where accessibility and readability take a very important place. Accessibility and readability can be optimized in various ways. Mobile operating systems provide a set of features which the user can use or adjust to make the use of the smartphone a lot easier. Below we discuss some tools for an improved accessibility and readability applied to iOS. 

Dynamic Type is a common accessibility tool for iOS, provided by system default and a must have for ‘reading’ apps. Enabling this feature in the app will let the text size adjust to the size defined in the accessibility settings in the system setting. This makes reading a lot easier for most users.

iOS_7_Font_Size_Comparison

To activate dynamic type, go to Settings > General > Accessibility > Larger Text > Activate this feature and adjust the text size.

Readability doesn’t only apply to reading text. When we want to scan a QR-code or barcode from a mobile screen, frustration can come up easily because de scanner is having a hard time reading the code from your screen. StoCard has this smart feature which increases the scannability of the code by increasing the screen brightness to 100% at the moment when you’re showing your bar code. Simple but yet effective.

stocard_01

Readability doesn't only apply to humans... 

"When smart readability and accessibility features are provided and adapted on the right moment, reading in most difficult circumstances shouldn’t be a problem."

Another approach is providing handy readability tools inside the mobile app that let the user in control of the user interface. For example, in the image below you see the NRC reader app in which you can switch to night mode and adjust the font size when reading at night.

NRC_Reader_app_ios

NRC Reader app for iOS

For some users reading might be a problem. Therefore providing a VoiceOver might be the solution. The VoiceOver tool visualized in the image below contains a handy feature jump forward/backward in the text and adjust the speed of reading the text out loud.

Design Series - readability accesibility

VoiceOver tool in Pocket app for iOS

On top of this, when designing for readability keep in mind the basic rules. The most important basics of typography (known by the UI designer) are:

  • Use a font family which is optimized for reading on screens and fits the look and feel of the product you’re designing for. Of course, alternatives can be used like the system fallback, to which users are already used. For Android: ROBOTO, and for iOS: Helvetica Neue/San Francisco font.
  • Contrast of text and background. The contrast level of most screens differ, so contrast should be tested on the screen types of your target group. 
  • Font size (follow platform guidelines which provides the recommended font size in each UI element).

However, increasing readability means much more than just increasing font sizes and choosing the right font. Combining and applying these basic fundamentals with smart readability and accessibility tools to your interface will definitely increase the user experience for your users.

In the next article in the Design Series we will dive into the details of interactions with the user interface: Micro Interactions. Stay tuned...