Accessibility in AOS
About the Project
Accessibility is a long-term issue for nearly all web applications. In the meantime, lots of users with disabilities have a strong need for adaptation to a specially designed user experience. In early 2021, AOS product strategy team decided to put accessibility as one of the most focused directions of the next-generation product. Considering some clients might have AOS users with disabilities, it is our responsibility to improve our user experience with accessibility design and update the current system with accessibility standpoints. This research project was initiated by the fact I mentioned above.
Team
Individual Project
Design Practices
Design Researches
Design Analysis
User Testing
Research Presentation
Research Project
Design Duration
February 2021
Resources
WHY IMPORTANT?
This topic was primarily raised by a design conference named after DesignOps in early 2021, and followed by the off-meeting discussion, I was quite inspired by the number of web users with disabilities across the world. Being a person without disabilities is a kind of fortune, but in return, we must think of those who cannot fully take advantage of their body in daily actions.
Basically, the term "accessibility" is a core issue for nearly all web applications. From daily experience, almost all B2C products or devices have special settings or features for accessibilities, but I rarely tested any of them. In the meantime, lots of users with disabilities have a strong need for adaptation to a specially designed user experience. In early 2021, AOS product strategy team made a decision to put accessibility as one of the most focused directions of the next-generation product. Considering some clients might have AOS users with disabilities or weaknesses in normal interaction, it is our responsibility to improve our user experience with accessibility design and update the current system with accessibility standpoints.
This topic was primarily raised by a design conference named after DesignOps in early 2021, and followed by the off-meeting discussion, I was quite inspired by the number of web users with disabilities across the world. Being a person without disabilities is a kind of fortune, but in return, we must think of those who cannot fully take advantage of their body in daily actions.
Basically, the term "accessibility" is a core issue for nearly all web applications. From daily experience, almost all B2C products or devices have special settings or features for accessibilities, but I rarely tested any of them. In the meantime, lots of users with disabilities have a strong need for adaptation to a specially designed user experience. In early 2021, AOS product strategy team made a decision to put accessibility as one of the most focused directions of the next-generation product. Considering some clients might have AOS users with disabilities or weaknesses in normal interaction, it is our responsibility to improve our user experience with accessibility design and update the current system with accessibility standpoints.
Note: On-purposely designed, hover to read clear full text, click the play button below to listen voice assistance
DESIGN QUESTIONS
What is missing in the current AOS system regarding accessibility?
Can we satisfy the major needs of users with disabilities in the current AOS system?
What type of accessibility issue needs to be addressed in future design?
In what ways can we improve the current AOS accessibility design? Any timeline?
RESEARCH PROCESS
I spent several days' spare time reading through the entire accessibility intro on W3C, which is the most professional and authentic accessibility design guidebook. Also, the Inclusive Design Guide from Microsoft provided me with a great example of how mature products handle their design with accessibility considerations.
RAPID USER TEST
During a JAD meeting, I was told by one of the product managers that he is color blind which made him unable to tell the accurate difference between light colors, especially those light colors mixed with grey scales. After learning this, I reached out to him right after the meeting and asked if he would like to take a quick test for some UI component color accessibility updates. He kindly agreed and took my test.
Subject 1 Colorblind / color recognition weakness
My name is Johnathan, I am a product manager from the product strategy team. I create design tickets for designers and actively communicate with them upon UX updates of AOS products. I trust our designers a lot and I believe they are professionals in colors, fonts, and layouts. So I do not really give suggestions to the UI of their deliverables - even sometimes it is a bit hard for me to tell the color differences
In the first scenario, I provided 2 screens with the same light blue background color for the hover state but different ways of presenting the selected state - one is using yellow background color, and the other is using a dark-colored bold outline.
Hover State 1
Hover State 2
Questions I asked:
1. Without any interaction, can you tell the differences between those table lines with background colors?
2. At the first glance of both screens, what component catches your attention the most?
3. Comparing background color and outlines. which one stands out better as a line selection indicator?
Feedback:
1. "Not that clear, they seemed blurred and did not stand out that much. What do those colors mean? I remember... one is a hover state? But I can't remember which exact color it is. It's hard to tell from this screen."
2. "The header, and that bold dark outline in the second table. Even though I have difficulty recognizing some colors, I can tell they are different... yes, different information, maybe highlighted or more focused..."
3. "Obviously, the 2nd one. I know the 1st one is what AOS currently has but to be honest I really like how you proposed the 2nd option with outline indicators. Since as a user I would assume hover and select as totally different interactions, so they should, yes, be differentiated in visual representation. And remember my difficulty recognizing light colors, I like this outline idea better because I have no struggle figuring out the shape, but sometimes the color challenges me."
In the second scenario, I provided 2 screens with different ways to display several statuses. One is using different colored texts, and another is using colored dots and icons but with the same colored texts.
Questions I asked:
1. In the job status column, tell me the number of completed jobs in the shortest time (with time count).
2. What do you rely on most when looking for "completed jobs"?
3. At the first glance of both screens, what component catches your attention the most?
4. Comparing colored text and dots, which one better represents the differences?
Feedback:
1. Both numbers are correct, the first list took 2'38", and the second took 2"97"
2. "The color differences are less clear than the text themselves, but I would say the text lengths help in some ways. If you asked me to look for completed with errors I would definitely rely on text lengths"
3. "I would say... the in progress icon is different from any other components in shapes? That's weird but surely it made that status stand out. Honestly, I don't think the color helped me a lot unless I am not color-blinded, but I have to say if they can somehow get differentiated by the icons, that will be much more convenient."
4. "I think I answered your question, right? But if I really need to pick one from these two, I would rather use the one with dots, since differentiating statuses only with colors makes less sense to me, and likewise to color-blinded groups"
After the user test, I drafted another version with icons differentiation only. This might not be the best visual solution, but it minimized the difficulties for color-blinded users to figure out status differences, which could be considered the direction of "Accessibility mode".
Nevertheless, there are still user groups other than color-blinded users. Al kinds of approaches should be taken but from the design perspective, a more considerate visual accessibility should be prioritized.
ANALYSIS AND SUMMARIES
Relating with the released production of AOS system, I created a list of potential improvement for AOS accessibility design, ranking them with different urgencies as well as consideration of challenges in design and development.
From this table, it is easy to find out that the most critical and urgent, but simultaneously easy-to-achieve improvements are related to colors. Considering the result from the rapid user test, we can also get the conclusion that color is one of the most important influencers of AOS accessibility design. So I put this as part of the research report, which turned out to be the basis for the followed generation of UI improvement.
RESEARCH PRESENTATION
© 2022 Franky Wang All Rights Reserved