Why inclusive design and accessibility

Inclusive design is about creating solutions that serve any possible needs of people.

Inclusivity —and accessibility— is not only about disabilities. Is about creating solutions accessible to everybody, either are disable or not. Is about caring for the usability in any circumstances people are facing. And to care about people’s environments, such as the devices that are using.

Accessibility symbol Symbol of a blue circle and a white human figure standing with arms positioned horizontal. Flying person symbol Symbol of a blue circle and a white human figure with a cape, flying like a superhero. Inclusive design is about building and cultivate empathy for people. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

How to create inclusive experiences

There are are plenty of design and development tools that we should always consider to use. Tools for the design stages, such as color contrast validators. And even more tools for the development stages.

In this article I will highlight some unexpected tips, that we can use in any stage. From early stages of UX design, to late stages of QA validations.

Test while riding the train

Using mobile while commuting with train Animated pictogram of a person holding a mobile, while commuting with a train. Disturbed by the sudden movements of the car. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

Our daily work at office is in an (almost) perfect environment. We need to consider that people most likely will be on the move when are using our apps or websites.

Since most of us also need to commute daily to work, we should take advantage of this time to test our works.

Even with only low‐fidelity prototypes, we can load them in our mobiles and test them in the train. I often use the POP app to load photos of prototypes and test them even for Apple watch!

Why train

People in a train are facing more distributions than most other use cases.

We need to consider if a journey that a user abandons, can be later recovered. People often need to pause a journey to check in which station they are, get off the car, and try to recover it much later. Meanwhile other distributions can occur on their mobiles, such as notifications.

We should always simulate these types of disruptions. And by commuting by train, we have plenty of chances to experience them.

On the development stage, to test on the move can provide us even more insights of an experience. Since we can test not only interactions, but also how an unstable network can affect the usage. When riding the subway, the network connection can often be very unstable. Such as, to dropped while on move and recover only when approaching a station.

What to investigate

There are plenty of areas that we can test in train. Some of them are:

One‐hand mobile usage

Portrait vs. landscape usage

Clarity of information in wonky moments

Missing action buttons, again while in wonky moments

Motion sickness due to parallax effects or animated UIs

Sight related sensory overload

Ask people when are in a hurry

Asking while in a hurry Animated pictograms of a person that is hurrying to go to WC, while another person is calling. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

People are switching to mobiles as their primary device. Because of that, they are more often disturbed, than when are using laptops or PCs.

Meanwhile —as designer or developers— we spent most of our time in front of a laptop. Often forgetting that the actual users of our products, are not able to focus for such long periods of time.

Mobile users are making decisions and taking actions in very short amounts of time.

From our side, we need to always simulate this way of decision making. A way to do that, is to ask people to check a prototype and make an action, when they don’t have time.

For example, 1 minute before an important meeting starts. Or even better, ask them in front of the WC entrance, when they rush to go inside!

On usability research and testing, is fundamental to set short periods of accomplishments. In fact, is the primary approach to gain valuable and accurate results.

What to investigate

This type of testing requires to analyze cognitive processes and biases, like:

Assimilation of new information

Rumination of causes and consequences

Availability heuristic

Functional fixedness

ADHD (Attention Deficit Hyperactivity Disorder)

Hold your mobile with straight arms

Use a mobile holding it with straight arms Animated pictograms of a person holding a mobile. First holding the mobile with normal bending arms, while tapping on it. Second with straight arm, continuing to tap on it. Third with straight arms, tired from the posture. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

For that one, let’s have some physical exercise!

Sometimes you might witness, people to hold their mobiles in awkward positions.

This might happened for variety of reasons. Such as for privacy, to avoid others taking a look at their screens. But also happens because of physical or motor abilities.

Arthritis, a disorder of joints, is the leading disability among adults in US. Accounting for more than 22% of the population.

By holding a mobile with straight arms, we can test variety of motor disabilities. And you will find that some tasks can become incredible difficult to accomplished. Such as, to succeed a CAPTCHA.

Hold your mobile as far as possible from your eyes. Where targeting action areas starts to become very challenging. Also you will discover that animation and motions starts to become annoying.

Tiredness because of the posture, can also provide us with very valuable outcomes.

What to investigate

Except the motor disabilities, we can also simulate mental symptoms, such as:

Headaches

Dizziness

Nausea

Vertigo

Review UIs with a projector

Person using a projector Animated pictogram of a person sitting next to a projector. With the projector’s flares to shine around. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

We often use MacBooks with monitors that are able to reproduce colors very accurate. When we also own iPhones, we see UIs through only high fidelity screens.

But people out there, might own devices with very low‐spec screen technologies.

Except the device specs, environment can play a critical role of how UIs are viewed.

In a very bright day, with the sunlight reflecting on the screen, colors can look very different. Even if people using the latest and greatest iPhones, they might cannot see what we designed for them.

To simulate and test UIs for these cases, try to see how UIs looks with a projector. Especially on low‐cost business projectors, where contrast ratios are low.

Make the room as bright as possible. And if you want to further challenge yourself, try to create UIs using only a projector!

What to investigate

Confirm the color hierarchies and possible informations that you communicate to people. With color contrast an obvious challenge.

Also, with a projector we can simulate symptoms or use cases, such as:

Color blindness

Low vision

Cataract

Devices with low contrast ratio screens

Take off your glasses

Person taking off glasses Animated pictograms of a person sitting in from of a MacBook laptop with a cup on the desk. First, is drinking from the cup. Second, is taking off glasses and lay them on the desk. Then, a doctor with a “Landolt ring” eye chart slides in the scene. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

For us that we wear glasses, the oldest and most popular visual aid devices, there is a simple and easy tip.

Remove your glasses, take a extra distance from the screen, and enjoy! Try to scan the content, checking the information hierarchy, iconography, and so on.

Depending on what type of eye disorder we have, the outcomes —in some cases— might be very different. For that, it becomes more valuable to ask others to take the same challenge.

Are you wearing contact lenses, or you are “unlucky” to have perfect eyesight? No problem, there are ways to simulate this experience. Open your Sketch file, add blur on the UIs, and you are ready to go!

What to investigate

For this case, we check based on our personal eye disorder. But also we can check some types of mental disorders, such as:

Dyslexia

Anxiety

Wear gloves when using a mouse

Person using a mouse while wearing glove Animated pictogram of a person laying down, relaxing. First, is using a mouse with bare hand. Second, is using the same mouse wearing a thick glove. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

I discover this tip by accident, some years ago, and became one of my favorite.

By wearing especially thick gloves, we can test in a short time various conditions; covering both usability and accessibility issues.

Movements can become difficult, simulating various motor and physical abilities. Pointing an action element, also becomes challenging. Even click or right‐click actions are not that easy as you might think.

For touch devices, the same tip works fine too. Thick, winter gloves that are working with touchscreens, are easy to find these days. It is also possible to make any type of gloves, touchscreen friendly.

What to investigate

We can simulate some environmental use cases, like: desks with narrow space. But primary we can simulate the following motor disabilities:

Arthritis

Parkinson’s disease

Essential tremor

Cerebral palsy

Multiple sclerosis

Use only the keyboard

Person with a keyboard Animated pictogram of a person in front of a desk, with only a keyboard. Moving hands and and changing postures to express thinking and excitement. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

Moving to the next input device, the keyboard.

As developers we are working primary on our favorite text editor and terminal. Memorizing a large amount of key combinations, that enabling us to work faster.

When switching to a webpage, we should continue to avoid touching the mouse or trackpad. There are plenty of reasons that can create a usability disaster!

The most common issue that I am facing, is to remove with CSS the focus ring. The result is that we have no clue where we are, when navigating through keyboard only.

There are various ways to improve the keyboard experience through CSS. The easiest one is to assign always some styles both for :hover and :focus .

For designers, even if you might feel not comfortable with keyboard only navigation. I strongly recommend to try.

The order of elements and information structure, is primary an experience decision. By navigating through important user stories, we can gain very valuable outcomes.

What to investigate

As described above, the testing can focus on:

Visibility of focus elements

Navigation order

Operation of interactive sections, such as carousels

Test on low‐spec device

Person switching mobiles Animated pictogram of a person sitting on the floor, holding a modern mobile with edge‐to‐edge screen. Next is throwing the device and a legacy mobile drops in the hands. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

As described above, people often are using devices that does not have cutting‐edge specs.

That is true especially for most developing countries. Where low‐cost, with outdated specs devices are often the majority. Through analytics it can become clear the percentage of the legacy devices.

More important is to understand how people are using these devices.

If you own a low‐spec device, use it as much as possible. If not, try to borrow or buy one. The cost is very affordable.

What to investigate

Depends if you are testing a web app or a native mobile app, some areas to focus on are:

Performance Loading speed Rendering speed Smooth animations or motion transitions

Interactions

Progressive enhancement structure, both for CSS and JS

Features support, for native apps

Disable on browser rendering of JS, CSS, and images

Person using a laptop with prohibitory signs Person sitting on a desk with a laptop. Appearing 4 different prohibitory signs of: No image, No JS, No CSS, and finally, No hamburger. With the last sign disappointing the fatty person. Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.

Finally, a test for web development, that both designers and developers should try.

Any modern browser supports to disable rendering JS, CSS, and images. Resulting to render a page with only HTML markup.

Even in that case, people should be able to achieve —at least— primary interactions. Through progressive enhancement, should be able to walk through all major journeys.

Why to test this case?

― People does not turn off JS, CSS, or image rendering…

True, but that is not the case.

As described above too, there are cases that mobile networks are not always stable.

Such a case can be riding the subway. Where cellular connection can be “on” and “off” within seconds.

In some developing countries, or in rural areas, cellular connection can be very weak. Resulting often the timing‐out of loading external files.

For both cases, is not so rare as you may think, for large files to never load. If that happen for images, an alt description becomes a useful alternative. When happens for JS or CSS, we must consider not to block the usage of our web app.

Also, reviewing through HTML only, we focus on the bare information structure. Helping us to further optimize the IA and legibility of our apps.

Conclusion

Empathy is about understanding people, not only based on personas or other hypothesis. Is about trying to experience and understand their needs, situation, and environment.

To achieve that, we need sometimes to think out of the box. In the case of inclusive design and accessibility, we need to try some unexpected ways of using a product.