Adobe - Accessibility Components
Accessibility issue & Inline animation UX/UI
Context
Inline animations were increasingly used across Adobe web experiences to support instructional content and visual storytelling. As usage expanded across teams, the lack of a standardized, accessible control pattern created inconsistency, accessibility risk, and long-term scalability concerns—particularly for users sensitive to motion.
Outcome
Defined and validated an accessible interaction pattern that gives users control over inline animations and supports consistent, scalable use across Adobe web experiences. The pattern was reviewed with design and accessibility teams and later incorporated into Adobe Spectrum, reducing accessibility risk and making it easier for product and marketing teams to adopt inline motion consistently.
Users lacked clear controls to pause or disable inline animation, leading to usability friction and accessibility gaps in core web interactions.
Problem StatementProject Lead
UX Researcher
UX/UI Designer
Led the project end-to-end, from problem framing and research through interaction design and validation.
RoleCross-functional stakeholders including Creative Direction, Product Management, and Development partners, collaborating closely with UX leadership and web production.
TeamProject Duration~3 months (concept to validation)
Research
I researched accessibility standards and industry patterns for motion control in user interfaces, with a focus on pause and play interactions for inline animations and on-site video. The goal was to define clear, reusable principles that could scale across Adobe web experiences while meeting accessibility requirements.
Across platform guidelines and usability research (Material Design, Nielsen Norman Group, UX Planet), a consistent requirement emerged: motion that starts automatically must either stop within five seconds or provide users with a clear mechanism to pause it. This principle became a key constraint for the interaction model.
The research highlighted the need for controls that are:
discoverable without disrupting content
usable via keyboard and assistive technologies
consistent across different page contexts
These insights informed the definition of an accessible, system-level control pattern rather than a one-off UI solution.
Heuristic Analysis & Adobe Discover Site Audit
In parallel with primary research, I conducted a comparative heuristic audit of the Adobe Discover site against industry best-practice examples. The focus was on how inline animation and video controls were implemented, with particular attention to keyboard focus, motion behavior, and control discoverability.
The audit revealed inconsistent motion control patterns across pages, limited user control over animation states, and gaps in keyboard accessibility. These findings reinforced the need for a standardized interaction model that could scale across content types while meeting accessibility expectations.
This analysis directly informed the definition of a reusable, accessible control pattern rather than isolated page-level fixes.
Comparative audit of motion controls, focus states, and interaction patterns across Adobe Discover and industry reference sites.
Lack of User Control: The interface does not clearly convey to users that they have control over inline motion, limiting their ability to pause or manage animated content.
Human Limitations: Inline motion and visual density introduce cognitive and visual overload, exceeding user tolerance—particularly for motion-sensitive users.
Lack of Linguistic Clarity: UI labels and affordances do not communicate intent or system state clearly, leading to potential confusion.
Lack of Consistent Aesthetic Integrity: Interaction patterns and visual treatments lack cohesion, reducing predictability across experiences.
Lack of Forgiveness: Users are not given clear, recoverable actions when interacting with motion-driven content.
Lack of Responsiveness: The interface provides insufficient feedback on interaction state changes and system status.
Based on the heuristic analysis, the most critical issues centered on insufficient user control over inline motion and inconsistent keyboard focus states. Together, these gaps introduced accessibility risk and scalability concerns as motion usage increased across the site. These findings directly informed the design of a standardized, accessible control pattern to improve usability, consistency, and long-term adoption.
Design
A circular control was intentionally chosen to visually distinguish inline motion controls from standard video media players, reinforcing that this interaction behaves differently from traditional lightbox or MPC-based playback.
The control uses a transparent treatment and is positioned in the least visually dense area of the content container to minimize obstruction and preserve focus on instructional or storytelling elements.
Control sizing is responsive and adapts to content scale, ensuring consistency across layouts and breakpoints without introducing visual dominance.
On desktop, controls are revealed on hover and remain visible for ~3 seconds before fading—supporting discoverability without persistent visual noise. The banner remains clickable to pause or resume motion, reducing precision requirements and enabling quick interaction.
All controls are accessible via keyboard focus states, ensuring full operability without reliance on pointer interaction.
Inline motion assets are lazy-loaded based on scroll proximity, treating animation as non-blocking content to improve performance and reduce unnecessary resource usage.
This work informed and was implemented on Adobe’s animation software page. The live experience has since evolved through subsequent iterations and updates:
Reflection
This project strengthened my ability to translate accessibility research into scalable interaction patterns and informed standards later referenced in Adobe Spectrum. It demonstrated my capacity to advocate for UX priorities alongside engineering constraints.