Inclusive Design & Accessibility: UX Webinar at Wizeline Academy

Livinda Christy
Chatbots Life
Published in
9 min readMay 25, 2020

--

AI Chatbot offers a seamless experience to users and helps people with disabilities.
AI Chatbot offers a seamless experience to users and helps people with disabilities.

The digital era has been part of our lives and we are given access to an abundance of information. It also offers the potential to improve the lives of disabled people. Yet, many websites and applications still fail to provide accessibility for people with disabilities.

As a designer, we should have more awareness regarding accessibility because the term user experience puts special emphasis on the human side. According to Nielsen Norman Group, the user experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products. Keep in mind that when we talk about user we also involve diversity and inclusion.

I had another chance to attend a webinar about Inclusive Design and Accessibility on May 14th, 2020 at Wizeline Academy. Previously, I also tended a similar seminar hosted by UXiD Community. It was great, too!

The impressive thing from the Inclusive Design and Accessibility webinar was the comprehensive presentation given by two keynote speakers: Cristina Vázquez and Andrea Cuella, Senior UX Designers at Wizeline Academy. It was such a pleasure to attend this webinar and discuss the topic with them! 😊

Trending Bot Articles:

1. Knowledge graphs and Chatbots — An analytical approach.

2. Blender Vs Rasa open source chatbots

3. Picture my voice

4. Chat bots — A Conversational AI

I write this summary to remind myself and other designers of the importance of inclusive design and accessibility in user experience ✨

What is Inclusive Design & Accessibility?

Microsoft states that Inclusive Design is a methodology, born out of digital environments, that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives.

Accessibility, on the other hand, is fundamentally designed to work for all people. Therefore, everyone should be able to access and enjoy the web [1].

Based on Cristina’s slide, the terms are illustrated as a subset.

The subset diagram of Inclusive Design and Accessibility.
The subset diagram of Inclusive Design and Accessibility.

Why should we consider it?

Let’s take a look at the quote from Andrea Fercia before we jump into why should we consider the Inclusive Design and Accessibility.

“Would you build a bridge that only a specific type of car can use?” — Andrea Fercia.

Keep this question in mind and do a reflection.

Microsoft has a good statement in addressing that question: “Solve for one, extend to many.”
They say everyone has abilities, and limits to those abilities. Designing for people with permanent disabilities actually results in designs that benefit people universally. Constraints are a beautiful thing.

Now, let’s see the reasons why should we consider it. Cristina mentions the five reasons on her slide:

Drive innovation

It forces designers and engineers to take a step back and build useful platforms that attract and support many other demographics to cover a large range of variations and constraints.

Enhance your brand

What we design is a product of our mindset, methods, and behaviors.
If the offered experience is useful, usable by everybody and memorable our brand image will not only improve but also more people will join us.

Increase the market reach

As our experience doesn’t exclude anybody, our target spectrum expands.

Reduce business risk

A rigorous inclusive design process mitigates the risk of costly and unwanted problems as excessive customer service costs, lawsuits, costly rectification work after launch, customer dissatisfaction, and brand degradation.

A shift in our culture and ourselves

Most of the time, we address business targets or persona who have a specific gender, age, tech literacy, educational context, social network, or purchasing power. Yet, in fact, there are people who get excluded from our product; disabled people. While we have a huge number of the disabled population, about 15% of the world’s population lives with some form of disability, of whom 2–4% experience significant difficulties in functioning [2].

Besides, as we all age, at any point in our lives, we may experience some slight deteriorations in vision, or of hearing, or of dexterity, so these concepts are really, really critical to be building in, in general [3].

Inclusive Design Principles

Cristina states the four inclusive design principles on her slide.

Recognize exclusion

Exclusion happens when we solve problems from our own biases. Understanding exactly how and why people are excluded can help us establish concrete steps towards being more inclusive.

  • Identify your assumptions
    Challenge your own bias, make questioning a core part of your workflow.
  • Ask: “Who are we missing?”
    Search for exclusion points and use them to generate new ideas and highlight opportunities.
  • Understand the organization
    Review the inclusion policies of the organization to be better prepared to model requirements.

Learn from diversity

Design to embrace things that make us humans. Include and learn from people with a large range of perspectives by covering variations in capabilities, needs, and aspirations.

  • Seek out awareness
    Take time to learn how people are adapting to the world around them from their perspective.
  • Stop reinforcing stereotypes
    Resolve the tension between current conventions.
  • Seek diverse thinking
    You can’t be inclusive if you don’t have a diverse team.
  • Create space for conversation
    As a team, define a principle that can guide the decisions and align on a clear vision of success.

Solve for one, extend to many

Connect people in similar circumstances. A solution that works well for someone with limitations, disabilities, or constraints may also benefit another, even if the scenario is different.

  • Find edge-cases
    Embrace the edge-cases of your product experience, they represent the unmet needs of your users.
  • Define constraints
    By understanding the limits people may experience.
  • Consider the persona spectrum
    To understand related mismatches and motivations across a spectrum of scenarios.
  • Make a case
    Align user’s needs to core business decisions.

Design for reflection & belonging

Interventions that encourage calm and introspective thinking, and empower users. Foster empathy and reflection as the opposite of fear. Encourage mindful and self-aware online behavior by meeting their needs.

  • Burst your audience bubble
    Match users' narrative of the world we actually live in and use it as an opportunity to raise awareness.
  • Design interactions that drive empathy
    By understanding the limits people may experience.
  • Embrace friction
    Especially if it’s helping your audience adopt new experiences and generate reflection.
  • Be transparent
    Share what you’re doing with your audience: building things where we can all belong.

The Accessibility Guidelines

According to usability.gov, by making your website accessible, you are ensuring that all of your potential users, including people with disabilities, have a decent user experience and are able to easily access your information.

Let’s see the guidelines and best practices mentioned by Cristina.

1. The app or website must be perceivable

Content must be displayed in different ways (audio description, braille transcription, simple language) to be completely perceivable.

Best Practice:
Write a descriptive alternative text for the images of your website or app. These hidden texts are readable by screen readers and allow low vision users to “hear” what others see and correctly understand the sense of images.

Medium is a good example of providing alternative text.

The alternative text is provided by Medium.
The alternative text is provided by Medium.
Stradivarius provides the alternative text on color swatches.
Stradivarius provides the alternative text on color swatches.

Don’t use color alone to make critical information understandable. Every color element should be linked with a particular shape, pattern, or textual information.

2. The app or website must be operable

Operable means focus on the way the user navigates through the user interface to perceive the content.

Best practice:
Consider the label’s positions, size, color contrast, and vibrations.
Any non-label text, as placeholder text, is generally skipped over by screen readers and becomes confusing for users with cognitive disabilities.

Asos is a good example of providing the label for the registration form.

The registration form of Asos provides the label for each input field.
The registration form of Asos provides the label for each input field.

3. The app or website must be understandable

All content text on the site or app must be readable and understandable, regardless of the user’s knowledge. Additionally, the pages must appear in a predictable sequence.

Best Practice:
Headings establish the hierarchy of the content on the page.
Screen readers use heading tags to read content and allow low-vision users to get an overview of the page.

BBC has a good hierarchy of implementing heading tags.

The header tag checker result of BBC.
The header tag checker result of BBC.

4. The app or website must be robust

The site or app must be able to adapt to all browsers or OS and work with assistive technology.

Best practice:

Shopify has a good best practice of adapting their website to all devices.

Shopify website adapts to all devices (desktop, tablet, and mobile).
Shopify website adapts to all devices (desktop, tablet, and mobile).

A short exercise

Let’s say we have four personas:

The foreigner
Olz is 32 years old, non-binary, an influencer lives in Copenhagen (Denmark), uses mobile device often.
Olz is traveling in Vietnam for 1 month as a backpacker, he always carries his camera to add content to YouTube channel.

The elder
Mai is 72 years old female, retired, and lives in Ho Chi Minh.
Mai wants to celebrate her sister's birthday in Hoi An and bring her some presents.

The low vision traveler
Thi is 24 years old male, a translator lives in Ho Chi Minh.
Thi would like to spend a weekend with some of his friends in Hoi An. He always travels with his dog Paco.

The family dad
Cong is 40 years old male, has three kids, unemployed, lives in Ho Chi Minh.
Cong wants to spend a week with his family in Hoi An even if traveling with luggage and kids are quite challenging.

Based on these personas, how we can create a solution by considering the inclusive design and accessibility?

As we can combine the elder and the low vision traveler as a group of people with visual impairment, I came up with the idea of creating a chatbot app that can speak. This chatbot could assist not only the group of disabled people but also the foreigner and the family dad.

According to Snatchbot, by giving your users the option of listening to the chatbot, rather than reading, you are achieving two important goals. Firstly, making it easier for them to access the conversation and secondly, you are giving them a much more entertaining and engaging quality of experience.

I made a quick illustration of the chatbot.

The example of a chatbot app.
The example of a friendly chatbot app.

Conclusion

By implementing the Inclusive Design and Accessibility best practices, we can improve overall user experience and satisfaction for all potential users, including disabled people.

Last but not least, thank you to Cristina and Andrea who had shared the importance of implementing the Inclusive Design and Accessibility best practices! 🙌

If you have any questions, drop me a line at livinda.christy@gmail.com!
Check out my projects, maybe? Personal website | Dribbble | LinkedIn

Source:

Presentation slide — Cristina Vázquez and Andrea Cuella

Further reading:

References

Inclusive Design by Microsoft

Don’t forget to give us your 👏 !

--

--

Sr. Product Designer at Right-Hand Cybersecurity. Design, Tech, UX UI, Research. Bibliophile. INFJ. FR/DE/EN. livindachristy.com/