When developing an app, functions, colors, flowcharts and so on can be considered. But something that must always be taken into account is accessibility in UX.

User experience design is the way people interact with a system or service. In a way, we design the way the user will scroll through our app and our interface.

If you’d asked anyone how they’d like an app to be, most people would want an easy, pretty and no advertised app. But there is much more to it apart from these characteristics, like having an intuitive app or  being as accessible as possible. 

What is accessibility for mobile phones

Currently, most of the traffic generated on the Internet comes from mobile devices.  In them we have a very powerful tool to connect with the world around us and to inform ourselves. But this is often a problem for people with disabilities. 

But where is Disability found? Disability arises in the interaction with a product or person. This is the approach that society gives us about disability. In a simpler way, the interaction with the environment can develop different barriers. Let’s call disability to that barrier that occurs with the interaction and therefore depends on the context.

“Accessibility allows us to tap into the potential of everyone”. – Debra Ruh

These barriers may be permanent (paralysis or blindness) or temporary (an arm in a cast), congenital (autism) or acquired (eyestrain or deafness).

Nielsen’s 10 heuristic rules or how to test without users

A woman and a man surrounded by text

For us, Chubby Apps, as a small company, it has always been problematic for us to test with users. We program and design internally both our own apps and for third parties, but one of the biggest problems we encounter is that we analyze the usability of the app from our own perspective and that can make us not notice any problem.

That’s why we use Nielsen’s 10 heuristic rules, which despite being written in the wonderful 90’s, allow us to detect a large number of usability errors without having to test or before testing with users.

System status visibility

One of the most fundamental. And the most difficult to remember in the design process. It’s the one that reminds you that the user must receive feedback from the system when performing an action. This way he knows that he has performed the action and that the app has received it without any problem.

Cuatro formas de ver un diseño de relleno de formulario. Según si se tiene daltonismo o no. Recalcando que no se puede argumentar un error únicamente con el color. Si no que son necesarios símbolos

This also applies to errors that may be present in forms and that must be signaled.

We can show them with icons, illustrations, animations, etc.

Emergency exit, or give the user control and freedom

This rule talks about giving the user the ability to control the actions he/she wants. Even undoing actions that may have been performed by mistake. How to cancel the sending of an email, modify a journal entry or undo a written text.

Prevent mistakes

Something as simple as warning of mistakes you make as a human. Suggesting keywords in a search, if the password you are using is secure or is 123456 or warning that you have forgotten to attach a document or title to an email. This way we prevent blank entries from being generated.

Don’t take anything for granted

Sometimes we are so involved in the development of our app that we don’t take into account the flowcharts and we take for granted that the user will know the route to follow by inertia. Writing text is as inhumane as registering when the user does not even know what to do, or warning that a 404 Error has occurred and then just sitting there without the user who is reading the alert being familiar with the term.

What already works doesn’t need to be changed
Like message, love, and don't like

We are not going to reinvent the wheel. And if we already understand the heart symbol as something positive and it will not mean the opposite in our app. This way you will not confuse the user and you will meet specific expectations.

Simple aesthetics and design

The minimal trend is not just a trend. The information displayed by an app should be necessary and useful at that moment and if not it should be hidden.

Recognizable better than by memory

Sometimes when we want to design as minimally as possible we forget things along the way. And what we least want to generate in the user when using our app is mental load. The more information you give the user about where he is and where he is going, the better10

Design for those who have just arrived and those who have been here for a long time.

Your app will have both new users and users who already master the app almost better than you. And for both it must be equally attractive. Explanatory screens and welcome tours are therefore necessary, but don’t bore them with tips after this entry barrier.

No instruction manual

This is one of the heuristic rules that we like the most and that is why we include it in our business principles. Ideally, but even so, a FAQ is a good example of how to avoid support emails and avoid the barrier of the user having to contact you.

Falling down and getting up

Errors are the bread and butter of users within your applications. They cannot always be avoided with the rules given above, but you can make it easier to identify them when they happen. In this way the user will be able to solve them in a simple way.

Practices to consider for accessibility in UX

A draw about a diversity of people

The manufacturers of the different mobile platforms are aware of the importance that accessibility must have in our developments and designs and that is why they add accessibility within the predefined graphic components within the APIs of their systems.

Using native language and using the components that the operating systems make available to us, the adaptation that we will have to make to provide our application with UX accessibility will be minimal. Thus, we will only have to make the following adaptations to be fully accessible:

  • Add descriptive or alternative text to all interface controls, using the appropriate attribute in each case.
  • Describe images, icons and elements necessary for the understanding of the app in a correct and detailed way, avoiding purely decorative elements.
  • Check that all interface elements that may involve interaction with a physical directional controller (mouse, braille tablet, gesture navigation) can be reached.
  • Check that auditory messages are accompanied by a haptic or visual alternative. Allowing its use by hearing-impaired users.

In the event that we can not achieve all the functionality required by our application through system elements. And we have to generate our own elements, we will have to guarantee their accessibility by using the corresponding attributes and checking that the phone’s own UX accessibility services work correctly.

Do not write in capital letters
The difference between text in mayúscula and minuscule

Sometimes, for whatever reason, we design headlines using capital letters throughout the text. This, believe it or not, generates a lot of accessibility problems in UX:

  • Reading slows down by 10%
  • Sometimes screen readers read these texts letter by letter
  • These texts are more difficult to read due to the similarity generated between the letters. Eliminating much of the visual differentiation found in lowercase letters.
Do not use colors exclusively to provide information

Sometimes we use the traffic light system to give information quickly. Generating alerts with red, blue for information and green to indicate that something is correct.

But as we explained in the article on color theory to improve accessibility in UX, we do not all see color in the same way, and in the case of being color blind, we see both green and red as gray.

Therefore, in addition to adding chromatic differences, we must add an icon or a descriptive message.

Avoid mini-padding
The space between mini padding and padding

Many times we design buttons where the padding (the padding space required by the sides of an element) is so residual and so close to other elements of the design that it can produce complications when making Tab.

If we leave a very small space in which to make a tab, we make it difficult for people with motor disabilities who have difficulty performing certain actions.

To avoid this we have very useful plugins in sketch like Paddy or we can always resort to Apple’s UI design tips.

Include them in our design processes

Two people making an app accesible

As you include accessibility enhancements in your application, there are several tools that can help you test the experience and improve accessibility in UX.

  • Accessibility Scanner: This app developed by Google and available for Android devices suggests accessibility improvements for your applications. Helping you find application elements that could benefit from accessibility improvements.
  • Stark: Plugin for sketch that helps you to solve a lot of inconsistencies from the design process. It allows you to simulate visual problems related to color and even check contrast to pass WCAG tests.
  • Cluse: Another plugin for sketch that allows us to control the contrast but in this case for free.

“We need to make every single thing accessible to every single person with a disability.” – Stevie Wonder

But the best tool is always to include your future users in your design process. This way you’ll include them in the co-development of your app and they will help you to find new features and be more accessible. Something that we took very much into account from Cori and that’s why we launched the app directly in an open beta that is allowing us to see what our audience is concerned about. If you want to help us improve the app feel free to subscribe to the beta or send us an email.

Main differences between Android and iOS

A woman surrounded about different sistem elements

Basic UX accessibility features apply to all mobile platforms. The interface and design options should make an application accessible to everyone. However, the solutions provided by different operating systems are different. That is why I wanted to reflect the main features:

Screen readers

Both iOS and Android have screen readers within their operating systems. In order to help people with visual or literacy disabilities have access to the same information. Thanks to them, the text on the screen is transformed into voice. You can listen to the text instead of having to read it. Each platform has its own reader. Google Voice Assistant within Android and VoiceOver for iOS.

Screen readers treat the interface as components, which we must label in the correct way so that the reader can interpret them and the user can navigate between them. By default the reader will use the hierarchy of these components to start reading. Based on the position from left to right and from top to bottom. The gestures used to navigate and to proceed with reading are very similar on the two platforms.

Keyboard differences

Currently, the differences between iOS and Android have been gradually disappearing in favor of being more accessible. Both accept external keyboards to navigate through their interface as if operating a computer. Last year Apple even added support for Braille displays (something in which Android was ahead thanks to Braille Back).

Why are we accessible?

By developing mobile applications taking into account accessibility in UX we can develop a good user experience for all types of people. From digital natives to seniors with disabilities. Accessibility is not only moral but there is no reason that prevents us from ignoring accessibility. It is not just a feature. It is a necessity for the design and development of applications.

If you want to know more about us and our project, don’t forget to follow us on InstagramTwitterFacebook or LinkedIn.