Design Apps That Do Not SUX. Accessibility on Mobile.

Apps that do not SUX

When your app’s UX does not consider all users, it simply SUX.

Some User Experience (SUX) is the concept introduced by Billy Gregory, Accessibility Expert from The Paciello Group. During the inspiring Mobile Central Europe Conference. I had a pleasure to listen to Billy’s talk. Now, I would like to introduce you a bit more about the UX and accessibility.

What does it mean that app SUX?

“SUX” term is about delivering the product that is not accessible for all people. The opposite of SUX is AUX (All User Experience). We should strive to achieve it in our solutions.

The matter of accessibility is getting more and more important. We now live in the age of technological ubiquity. This is why we, designers, have huge responsibility to create solutions for all.

Let’s reveal the possibilities of making mobile apps more accessible.

How to make apps for all?

People are very different. When you design for all it is very important to consider people with all sort of disabilities.
Think of blind people, they also use technology. There are plenty of color-vision deficiencies. Some of your users may have hearing or speaking problems. We may also find ones without some fingers or even hands.

However, “all” does not mean only design for disabilities. It includes also children and older people. You have to consider also the ones speaking in different languages. Designing for touch screens requires thinking about the users with big or small fingers.

When you will realize the huge diversity of people. You will be ready to search for techniques of making your app accessible for them.

Here is the list of the most common techniques that will turn your UX design into AUX:

Ensure the right contrast
Modern digital devices are used in various environment and during the day and night. What is more, there are also people with bad vision. Ensure the proper contrast of UI elements to make your solution readable.

Avoiding small font sizes
In the age of high-density retina displays putting small text into the app seems to be tempting. However, this may be the nightmare for the ones with vision disabilities. Do not make fonts smaller than 12 points to ensure its readability. The font for common elements or bigger parts of text should have about 14-16 points.

Use appropriate touch targets
You use lots of apps everyday. I am sure that you were in a situation when you pressed some element accidentally or could not perform action because a button was to small to touch it precisely. Remember to design interactive UI elements that have at least 9mm x 9mm.

Test GUI for color blindness
The amazing colors we use in our UI designs, may be perceived in a much different way by some people. When you prepare you color palette you should test how tones interact with each other for people with color-vision deficiencies.

Use audio and video appropriately
People with hearing issues or the ones using your app in noisy environments should be able to understand all audio signals from the solution. If information from an audio stream is important in your product, consider some facilities like the realtime transcript of the voice.

Avoid custom components and complex gestures
There is always a temptation of creating some new innovative UI elements. Fresh ideas in UX seems to be catchy and may make your solution popular. However, there is a large amount of people that will find it hard to use because of this elements.

If you use custom components, describe how they works
Sometimes it may be necessary to design the fresh and an unique component. When this moment will come, remember to prepare the appropriate help. Guide users through custom interaction of you UI element.

Consider users with hardware keyboards
Even if you create mobile app, there are some users that attach physical keyboard to it. Remember to prepare navigation and interaction to be ready for this sort of situation.

Translate content into many languages
Apps released in the App Store or Google Play Store are available for many countries. Prepare text resources for different languages to make app more accessible.

Make UI easy to understand
Accessibility is not only about creating for disabilities. To make solution intuitive for everyone remember about consistency and clarity. Place buttons in an area that is easy to access. Group elements that has a similar meaning or perform the same action.
Remember about aligning your app to platform guidelines.

If you would like to read more about making your app or website more accessible here is the article that develops this topic further – link.

Standard View compared to Protanopia

Mobile platforms possibilities

There is an amount of work that we have to do by ourself to ensure AUX in our solutions. However, companies delivering us platforms for the apps also take care about it.

iOS
Apple was always really serious about accessibility. iOS includes amazing VoiceOver functionality. It is a great built-in screen reader. There is of course possibility to customize system UI for people with vision disabilities. The full list of accessibility features from Apple’s mobile OS is here

Android
The mobile OS from Google also have lots of facilities to customize it for better accessibility. There is a TalkBack functionality (Google’s equivalent of VoiceOver), user may also make fonts bigger (that is why it is important to set fonts in sp not in dp). Recently Android introduced an option to scale whole UI of the apps.
More about accessibility of this mobile platform here

Tools for designers

We are not alone in a struggle for creating great UI. There are lots of tools and plugins to support designing for accessibility.

Photoshop has some build-in features. If you would like use Adobe software to design for color blindness you will find additional information here

Sim Daltonism is and open source project that also helps to see the UI in a way people with color-vision deficiencies.
Get more information here

Finally, useful plugins for Sketch app users. Tools analyze the contrast of the solution we create. One of them may be downloaded from the following source – link. Recently released Stark plugin is also very useful for checking contrast of your design – link

There are off course lots of other great tools to support design process.

Sketch & Figma


PRIME 3.0 - UI DESIGN STARTER KIT
Design Faster in Figma and Sketch

Never start Your work from scratch. Use the Kit that already have 1500+ components with well structured styles, variants & auto layout.

Use Prime Design System Kit to boost your workflow. Create for Web, Mobile, and Desktop. You may use it as the entire UI Library for Design System or just create Landing Page for your next Client. Perfect for those who want to save time while creating UI designs and learn best practices of Figma and Sketch at the same time.

See How to Design Faster

The ultimate responsibility of every designer

“With great power comes great responsibility.” The famous quote from Marvel comics is surprisingly relevant in this case. We, designers, have the power to shape things people use everyday.

The mission of UXMisfit.com is to help more and more people to make their life easier. I hope that thoughts and techniques included in the article will help you to accomplish the goal of delivering positive UX for all.

We should not only complete our daily duty to create beautiful and usable apps. We are responsible for making them accessible for all the people.

By joining to the UX Misfits Community you may also fulfill this mission. Join us on here.