Balancing Motion and Inclusion at Mercado Libre
At Mercado Libre, animation plays an essential role in guiding users through the platform, offering real-time feedback, and adding a layer of engagement to the interface. But as our team dug deeper into the topic and consulted with our Digital Accessibility team, we had to confront a critical question: are we truly designing for all of our users? For some, especially those with vestibular disorders — conditions affecting the inner ear and balance control — motion can trigger nausea, dizziness, and headaches. For others with attention disorders, excessive motion can make focusing on content genuinely difficult.
This tension between movement and user well-being prompted us to explore whether there was a middle ground: keeping animations where they genuinely help, while making sure they do not harm anyone.
Framing the Problem With Research
Our first instinct was to ask a binary question: should we keep animations or remove them entirely? The answer wasn’t obvious. Removing animations entirely could strip away critical feedback mechanisms and make complex flows harder for users to process. So, we approached the problem systematically with two tracks:
- Collaborative sessions with our Digital Accessibility team to gather internal expertise.
- External research into how other teams and organizations have solved similar challenges.
Through that process, we landed on two distinct perspectives that reshaped how we think about animation in our design system.
Animation Isn’t Always Motion
A crucial early realization was that animation and motion are not interchangeable terms. Some animations fade, scale, or change color without moving an element across the screen at all. The WCAG distinguishes between several scenarios, and these guidelines became our anchor:
- Pause, stop, or hide (Success Criterion 2.2.2): allow users to stop content that moves, scrolls, or auto-updates for more than five seconds when it appears alongside other content.
- Seizure prevention (Success Criteria 2.3.1 and 2.3.2): steer clear of flashing more than three times per second to avoid triggering seizures.
- Animation from interactions (Success Criterion 2.3.3): never rely purely on movement to convey meaning; users should be able to interact with the interface even if they stop the animation.
Honoring the User’s Motion Preference
Our Digital Accessibility team also underscored the utility of the prefers-reduced-motion media query. When users enable “Reduce Motion” in their system settings (such as in macOS) and their browser supports the query, we can scale animations accordingly.
/* Example from our work: respecting reduced motion preferences */One crucial nuance we took away: reduced motion should not automatically mean no motion. There are instances where a little movement actually helps deliver information. In those cases, it can be more effective to slow the animation than to strip it away completely.
Building on a Firm Foundation
Knowing that prefers-reduced-motion gives us a respectful exit hatch and that WCAG provides clear criteria for when motion crosses the line into problematic territory, we were ready to define what “balanced” looks like for Mercado Libre. Our goal was never to eliminate animation from our design language — it was to make it work smarter, for everyone.
Categorizing Motion: Three Groups, Three Strategies
To bring a systematic approach to reduced motion support, the team at Mercado Libre defined three buckets for the animations used across their products. The goal was to make the decision process repeatable and aligned with WCAG distinctions between animation and motion.
Animations That Need No Changes
The first group contains effects that involve no actual movement. These are safe by default and require no special handling under reduced motion preferences.
Examples include:
- Objects that appear or disappear instantly without transitions.
- Elements that shift color or opacity, such as a state change on hover.
As long as no radical motion is applied and color contrast remains sufficient for legibility, these effects do not fall under accessibility guidelines for motion sensitivity.
Non-Essential Animations to Remove
The second group covers motion that is not critical for understanding the interface. These animations can cause discomfort, and removing them does not compromise the user's ability to consume content or complete tasks.
Animations placed in this group include:
- Animated elements that occupy more than one-third of the screen or travel a significant distance.
- Content with autoplay or automatic updates.
- Parallax effects, multidirectional motion, or Z-axis movement like perspective changes.
- Flashes or infinite looping animations.
- Vortex, scaling, zooming, or blurring effects.
- Animated illustrations, such as morphing SVG shapes.
For these items, the decision was to remove the motion entirely and replace it with instant transitions. For a carousel that auto-advances, this means the user gets full control over when panels change and the sliding effect is swapped for an immediate swap, helping to meet WCAG Success Criterion 2.2.2.
The same logic applies to parallax and scaling effects — they are replaced with static state changes rather than smooth, moving transitions.
Animated illustrations are likewise rendered as a static version, preserving the image's context without the movement.
Essential Animations That Get Adapted
The final category holds animations that are indispensable to the interface's function. The challenge here is preserving the feedback or affordance the animation provides while stripping away the visual motion that could trigger discomfort.
The team found that adapting these animations into subtler versions worked best. A loading indicator is a clear case where full removal is not an option because the user needs to know the system is working.
The default indicator had three potentially problematic traits:
- Fast rotation speed.
- Constant scale changes.
- Infinite looping.
Their adapted version addresses each point:
- Slower rotation.
- No scaling effect.
- A hard cap of five seconds of runtime.
Animation can be necessary and still mindful of reduced motion preferences at the same time.
Rolling the Standard Out Across the Product Line
Once the three-part classification was finalized, the integration work began across every Mercado Libre product. A design system change of this scale can burden product teams if pushed from the top down, so the effort was largely framed around education first.
The team expanded their design system documentation into a central resource on animation accessibility. The guidance covers the motion criteria, the decision framework, and the rationale for why reduced motion preferences matter to users. The technical documentation also clarifies which scenarios the design system handles automatically and where product teams own the responsibility of adapting new animations they introduce.
This documentation effort was followed by a company-wide awareness campaign, including presentations and published articles, to build empathy for the user groups these changes serve and to encourage teams to adopt the pattern proactively rather than reactively.
A Foundation for Repeated Accessible Decisions
Treating the design system as the enforcement point enables a global feature like reduced motion support to be applied consistently with limited disruption. Now that the animation guidelines are codified, products can automatically detect device motion settings and adjust their interfaces accordingly, which is the intended end state: reduced motion preferences handled by design system defaults so teams don't have to make ad-hoc accessibility calls on each new feature.
