Adobe - Accessibility Components
Accessibility issue & Inline animation UX/UI
Context
Add Replay/ Pause capability to in-line animations. This will give users more control over the video/inline animation content on the site and reduce accessible issues such as disorientation and keyboard focus traps, hence enhancing the overall user experience.
-
The current UI control over inline animation content poses significant usability challenges and lacks accessibility, resulting in a suboptimal user experience. Further UX research is needed to establish best practices for UI controls for inline animation content, with a particular focus on enhancing accessibility and user experience.
-
Regular users and Accessible users
-
Project Lead, UX Researcher, UX/UI Designer
-
Stakeholders: Creative Director, Senior Product Manager, Wrecking Ball Development team,
Associate: Creative Director for UX Design, Web Producer and Myself
-
3 Months, Q4 - Q1
-
The design team found it intuitive and useful, moving on to MVP production, and will conduct extensive user and A/B testing to gather feedback and comments on the prototype.
Research
I conducted primary research on developing optimal accessibility controls for user interfaces (UI), specifically focusing on the pause and play functionality for on-site videos or animations. My objective was to establish a set of best practices for such controls. To achieve this goal, I consulted several reputable sources, including Material.io, Nielsen Norman Group, and UX Planet. These sources offered valuable insights into the design of accessible UI controls, which informed the development of effective controls that enhance accessibility and improve the user experience.
One particularly notable insight from my research is the importance of complying with accessibility guidelines that state that "motion that starts automatically must last ≤ 5 seconds, OR have a mechanism to pause it." This finding highlights the need for designing UI controls that give users the ability to pause and resume video or animation content, which can significantly improve accessibility for users with disabilities such as ADHD or motion sensitivity. By incorporating this guideline into the design of UI controls, we can create more accessible and user-friendly interfaces that meet the needs of a diverse range of users. Source below:
Material.io
Nielsen Norman Group
UX plane
Heuristic analysis & Discover site audit
In addition to the primary research, I also led and conducted a Heuristic Analysis. This involved a comparative evaluation of our current Adobe Discover site against other leading industry best practice sites. Heuristic Analysis is an approach to problem-solving that utilizes rules, estimates, and informed judgments to identify effective solutions for a specific issue. The focus of this analysis was on the user interface controls for inline animation and video, as well as the keyboard focus state. By conducting this analysis, I was able to identify areas for improvement and suggest solutions to enhance the user experience.
Findings from the Heuristic Analysis:
Lack of User Control: The interface does not effectively convey to users that they have control over the interface and can exert appropriate control.
Human Limitations: The interface imposes cognitive and visual overload on users, exceeding their limitations.
Lack of Linguistic Clarity: The interface does not communicate as clearly and effectively as possible, leading to potential confusion and frustration.
Lack of Consistent Aesthetic Integrity: The interface lacks a cohesive and visually appealing design.
Lack of Forgiveness: The interface does not allow for recoverable actions, potentially leading to user errors and frustration.
Lack of Responsiveness: The interface does not provide users with adequate feedback on the result of their actions and the status of the interface.
Based on the results of the heuristic analysis, it is evident that the interface being evaluated suffers from significant usability issues, including a lack of cohesive and visually appealing design. However, two critical areas requiring particular attention are the keyboard focus state and UI control over inline animation content, both of which can significantly enhance accessibility for users. To improve the UI control over inline animation content, a design solution was created.
Design
Circular UI control design to distinguish from regular video lightbox MPC(Media player Control).
The transparent design can help reduce blockage on the inline animation/video content.
The UI location is in the least obstructed view area within the content box.
UI sizes can vary depending on video content size.
Users (aka Customers)can access the UI control by hovering over the banner. (Desktop)
Users can click any area within the banner to “Pause” or “Play” the content.
UI will appear for 3 sec before disappearing. This reveal can help users to locate the UI easily.
Accessible users can access the UI using keyboard focus.
Scroll behavior video loading: Loading when users are close to the content. This strategy identifies resources as non-blocking (non-critical) and loads these only when needed. The video (inline animation) content won’t load until it is in the focus area.
Moving Forward
Though implementing the new UI control feature for inline animation content proved challenging, as it required convincing and presenting the idea to the developers, who were already working with a tight roadmap. Managing up as well as down, I made a compelling case for the importance of this feature, highlighting the benefits to the user experience and accessibility. After some convincing and a bit of extra effort, we were able to create a stage page for design team to review. We tested the new UI control, and it worked like a charm! Our design team found it intuitive and useful, which is exciting because it has the potential to enhance the user experience significantly. On a personal level, despite the initial challenges, I'm proud of the result and glad that I was able to manage up effectively to ensure the success of this project.
We're now planning to show it to the stakeholders for a final preview before moving on to MVP production. During this phase, we'll conduct extensive user and A/B testing to gather feedback and comments on the prototype. We want to make sure that the design solution is perfect, so we'll be open to any necessary edits to achieve the desired outcome.