Allow disabling of motion or animation

214 points by weba11y 2 years ago | 125 comments
  • awinter-py 2 years ago
    I have low-motion set on my android device and support for it is let's say highly variable

    I also have no idea why the system bothers with most of the animations -- the material 'hero animation' where there are two different animations with sequential curves is awful https://docs.flutter.dev/development/ui/animations/hero-anim.... The 'stretch at end of scroll' feature was making people sick if you believe reddit https://www.reddit.com/r/GooglePixel/comments/qcadhq/the_ove...

    These also take upwards of a second, which is a lot of time when I'm trying to get somewhere. I suspect they're being emulated on the CPU on older hardware, contributing to jank and battery issues

    Some apps respond to low motion mode by replacing smooth motion with high-frequency flicker, which seems like exactly the wrong thing to do. I kind of wonder if this is the OS battling some framework like Lottie

    Fancy 'different parts of the layout have different scrolling rules' in e.g. android google maps are deranged and make everything worse

    Rip it all out and focus your energy on making usable software for people maybe?

    • hjadal 2 years ago
      The over-scroll stretch animation in Android 12 makes me sick so I had to disable animations completely, as there is no option to just disable that.

      This does have the effect of making Firefox buggy and not showing the content at the top of a page before you scroll down and up again. Which only works on sites you can scroll on.

      • solarkraft 2 years ago
        I'm happy about the scroll-stretching since it's at least something that happens when scrolling reaches the end rather than just abruptly stopping. My mind head would expect the list to keep scrolling but it just wouldn't without any physical metaphor for why it wouldn't. iOS does this much more nicely.
        • userbinator 2 years ago
          My mind head would expect the list to keep scrolling but it just wouldn't without any physical metaphor for why it wouldn't.

          What? If I'm sliding physical objects around, I normally expect them to just stop abruptly if they hit something.

          ...and indeed, that's what scrolling in UIs also did for a very long time, accompanied by a very clear indication in the scrollbar that you've reached the end:

          http://www.functionx.com/vs2010/forms/scrollbar2.gif

          The "designers" happened, and all of a sudden scrollbars turned into these horribly thin and imprecise roundish blobs that are far worse for indicating where exactly you are, and in particular, whether you've reached the end.

          • hjadal 2 years ago
            I prefer the old animation with a grey curve from the button, and I dont really see why it needed to change
      • Etheryte 2 years ago
        I seriously believe this is one of those issues where the browser should enforce the user's preference over what websites want. Rather than try and get every site worldwide to implement this consistently, having the browser disable animations based on the OS-wide configuration would be an easy win for everyone.
        • tgsovlerkhgsel 2 years ago
          It's almost impossible to reliably distinguish animations required for a web site to work properly from animations and changes that can and should be disabled.

          For example, try to distinguish (from "definitely should be blocked" to "definitely can't be blocked without breaking things"):

          - An ad mascot hopping up or down telling you to click it

          - A loading spinner spinning

          - A progress bar

          - Information you're waiting for being loaded once some process completes

          You could disable all CSS animations and GIFs, but that will kill the loading spinner and risks that the next ad mascot will be written in JavaScript. And it will still not stop one of the biggest offenders in terms of blinking, ads that are being replaced by a new ad every 30 seconds.

          • Etheryte 2 years ago
            I disagree completely. When implemented by the browser itself, it's straightforward to ensure all the relevant events are still fired without presenting the actual animation to the user. As for the list you brought up, a loading spinner spinning and the like is exactly what should be disabled. These are not interactions that are necessary for the site to function and they bring harm to some users.
            • kazinator 2 years ago
              If it moves spontaneously, it's unnecessary animation.

              It is necessary for things to move only if:

              - they are objects being dragged by the mouse (or finger in the case of touch input).

              - they are the content of an animated image or video being played. (User preference needed there: auto-play or not.)

              • Dylan16807 2 years ago
                How does that address "Information you're waiting for being loaded once some process completes"?

                Do you want to delay the entire page until absolutely everything is loaded?

                Maybe you want some clever code checking that you only go from blank to filled, and you'd better have the size ready up-front?

              • Gigachad 2 years ago
                What it would likely mean is that animations would get stuck in their starting state so you'd see no content. And no one would bother fixing it for the 0.001% of users who turned this setting on so customer support would advise you to turn animations back on.
                • ohgodplsno 2 years ago
                  If web developers would use the actual browser APIs instead of hacking around everything (manually setting the position of items at every frame cool cool cool), this setting would be respected.

                  See how it works in the Android world: anything that uses Animation, AnimationSet, ObjectAnimator, Compose animations, etc, all respect the system setting of animation speed (from 0 to 3x). As a developer, as long as you use the proper API, it'll work.

                  So, no, your ad mascot should be written with those APIs, and not using them should bring a massive performance cost that makes you think for a second or two about whether you're doing it right.

                  • GoblinSlayer 2 years ago
                    Spinners are a total antipattern. If loading is interrupted by an error, the spinner just keeps spinning. And there's no need to display progress every millisecond, 0.1 Hz should be enough.
                    • tgsovlerkhgsel 2 years ago
                      > If loading is interrupted by an error, the spinner just keeps spinning.

                      Only if written incompetently.

                      • Am4TIfIsER0ppos 2 years ago
                        Or if you disable javascript the spinner remains despite the content being complete under it. Fucking web devs!
                      • witheld 2 years ago
                        How about just drop most of the frames? Let them animate and show users how it’s going every once in a while
                        • dredmorbius 2 years ago
                          My principle mobile driver is an e-ink device.

                          Whilst it's possible to support animation (and in fact does support video playback, at greatly-reduced image quality), at the higher-quality display modes most appropriate for text, all animation at < 1--2 s framerate, and virtually all animation outside actual paginated navigation (scrolling is possible, but ... unpleasant), really should die.

                          The prevalence of animations and video on the present web (the device supports web browsing, it's an Android tablet with an e-ink display) makes for an exceedingly unpleasant experience.

                          • mariusmg 2 years ago
                            >that the next ad mascot will be written in JavaScript

                            The horror....

                            • tgsovlerkhgsel 2 years ago
                              This would mean a) it will still animate regardless of setting b) there's a high chance it will spike your CPU load because your CPU cycles don't cost the authors of the ad money.
                              • dalmo3 2 years ago
                                > that the next ad mascot will be written in JavaScript

                                That's quite literally true already: https://nextjs.org/conf

                            • cwillu 2 years ago
                              s/one of those/one of the 100% of those/g #edited for clarity
                              • zagrebian 2 years ago
                                Not all animations are an issue. Disabling all animations would be too much. That’s why the website needs to decide for each animation if it should be affected by prefers-reduced-motion. The browser cannot make this decision¹.

                                1. Maybe in 100 years, when we have powerful AI that and reliably identify problematic animation.

                                • ben_w 2 years ago
                                  Counterpoint: iOS has this flag, Duolingo FAQ says this is the only way to turn off animations on iOS: https://support.duolingo.com/hc/en-us/articles/360058189572-...

                                  Unfortunately, Duolingo ignores this flag for many animations, and more than half of the screens are still animated.

                                  I find the animations Duolingo uses to be obnoxious distractions, and I want them to be actually disabled when I tell it this. I also want this kind of thing to be switchable on a per-app level, so that I have a way to override the (I assume) opinion of the art department or the marketing person that thinks these animations are engaging or fun without having to also disable the non-obnoxious animations my other apps have.

                                  (Mind you, at this point I'm thinking Duolingo has been a lost cause for the last few years; although the courses seem to still be improving, the UX has been getting worse faster).

                                  • zimpenfish 2 years ago
                                    Speaking of iOS, Arc - whilst being a handy location/places tracker - has some of the worst UX I've ever seen. Doing almost anything involves swoops and fades and shifts - and this is with "Reduce Motion" turned on. If I suffered from motion sickness, I'd delete the app because it would knock me sideways every time.

                                    (eg. to confirm an unconfirmed item, you tap on a coloured bar which then swoops a new pane from the right, shifts it up, zooms the map, and occasionally does a little blink refresh of the map. And you frequently get 4-5 of these a day, each one doing its little UI dance. God help you if you need to convert 10+ mis-identified transport segments to a single bus...)

                                    • zagrebian 2 years ago
                                      Browsers could have a separate preference for disabling animations more strongly. But that would be different from the “reduce animations” accessibility preference. Those are two different preferences with different use-cases. You can’t merge them.
                                      • wruza 2 years ago
                                        I have tried this iOS flag a few times, and every time it induced sickness instantly. It doesn’t reduce animations, it replaces them with nauseous fade in-out effect sometimes even in supported apps.

                                        Turned it on to make phone/ui fast and instant, found out it just doesn’t. Idk what people with vision problems need, but personally I need animations (either fade or motion) to not exceed ~100ms.

                                      • petee 2 years ago
                                        Developers can't make that decision either - given the ability to override animations will end up with all the things still animated because "we know best"

                                        A better option is to respect the user, and if your site really can't run without animation, then just show an error stating that...Which shouldn't be a problem considering how many websites refuse to work just because you are using a chromium alternative that is realistically supported but just isnt Chrome itself.

                                        • arcbyte 2 years ago
                                          All animations are an issue.
                                          • zagrebian 2 years ago
                                            Everything can be an issue. There is no one-size-fits-all solution.
                                      • akdor1154 2 years ago
                                        It's a bit crap that this needs conscious work by developers to implement - I feel like with just a little more thought put into the CSS spec itself, that animations could have defaulted to following the user's OS settings unless the dev explicitly marked them as necessary.

                                        Edit: not meaning to absolve developers of thinking about a11y, or to accuse css spec designers of negligence, just making the point that a system/spec that gets devs to do the right thing by default would be a great thing.

                                        • watwut 2 years ago
                                          Your point is entirely valid. It is just good design to not rely on ever expanding checklist of everything every developers should presumably know - including newbies fresh out of higschool.

                                          If it matters, it should happen by itself unless someone turns it off.

                                          • hombre_fatal 2 years ago
                                            Well, the issue is that since our tools already give us arbitrary power over what the user sees, then of course the developer has to opt-in to either using a subset of tools (e.g. some animation API that the OS can toggle) or implement the override like in TFA.

                                            I don't really think you can force people to use a restrictive animation API (and nothing else) since it would have to generalize over all animation needs. Meanwhile, on iOS, SwiftUI is very far from generalizing over all needs—as an example of what a restrictive set of tools might look like. I don't think it's even possible, and the imperative kit will always have to exist.

                                            • userbinator 2 years ago
                                              unless the dev explicitly marked them as necessary

                                              ...which basically all of them will naturally do, because their goals are almost certainly not going to be aligned with yours.

                                            • mrob 2 years ago
                                              From my chrome/userContent.css in my Firefox profile directory:

                                                @namespace url(http://www.w3.org/1999/xhtml);
                                                *, :before, :after {
                                                transition: none !important;
                                                animation-delay: 0ms !important;
                                                animation-duration: 0ms !important;
                                                }
                                              
                                              toolkit.legacyUserProfileCustomizations.stylesheets must be set to true in about:config for this to work.

                                              This gives me the best "reduced motion" of all (zero motion), with no effort required from developers, and unlike the official preference, does not leave me vulnerable to the no-Javascript fingerprinting discussed at https://news.ycombinator.com/item?id=30237846 . I haven't noticed it breaking anything important. The same can be put in chrome/userChrome.css (without the namespace header) to remove the annoying animations from Firefox itself, at the cost of occasionally breaking the tab bar (it can be fixed by dragging a tab to blank space and then immediate closing it).

                                              I've never seen a UI animation I thought was necessary.

                                              • wakeupcall 2 years ago
                                                Unfortunately it does break a surprising number of websites that just looove animations and in very annoying ways.

                                                I was using https://addons.mozilla.org/en-US/firefox/addon/no-transition... which operates on the same principle.

                                                You can try yourself it breaks the google login form. You don't need an account to try: just "login", enter a random address, and watch the password prompt not being enabled as it waits for the transition to complete.

                                                Similarly, slack breaks doing random actions that have some blur animation you often don't notice. It's usually always a consequence of transitions and animations that are chained with JS events.

                                                I tried myself to come up with some attributes that would be more robust (just as reducing the step count instead of disabling the animation completely), but nothing has worked in a reliable way.

                                                Count me in as one of the folks that hates animations in UIs, so I would really love to hear if anybody has a solution to this.

                                              • userbinator 2 years ago
                                                toolkit.legacyUserProfileCustomizations.stylesheets must be set to true in about:config for this to work

                                                ...the fact that it's called "legacy" is ominous and a sign of things to come. The fact that other browsers have been quite aggressive at slowly destroying any real form of user-controlled customisation is quite telling too. (For exmaple, did you know that IE supported user stylesheets all the way up to its last version, but Edge no longer does? And Chrome removed that functionality over half a decade ago.)

                                                • 2 years ago
                                                  • Lucent 2 years ago
                                                    This will break sites that count on "transitionend" event callbacks to determine when one part of an animation has finished to begin doing something else.
                                                    • wruza 2 years ago
                                                      Can this be fixed with 1ms timings instead of 0ms?
                                                  • rroot 2 years ago
                                                    Also on this topic, please stop letting css/viewport dictating weather I see a menu on the left or not.

                                                    I'd like to resize my browser window and put it at the side of my screen to use as a reference. Then I usually have to fight with zoom levels to get that menu to disappear!

                                                    Even Mozilla is an offender with their otherwise splendid MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...

                                                    • Wowfunhappy 2 years ago
                                                      I disagree! When my viewport is larger, I have space for niceties like always-visible menus. When my viewport is smaller, I need what little space is available to be entirely dedicated to content, even if it means open menus takes an extra click.

                                                      I want websites to manage this tradeoff for me when I zoom or resize my browser window.

                                                      • wruza 2 years ago
                                                        Both of you may be satisfied with a simple override switch-button. Yours will be always on, gp’s always off.
                                                        • Wowfunhappy 2 years ago
                                                          I was actually thinking after my comment... what if you could hold down e.g. shift while resizing the browser to resize the window without resizing the viewport reported to the website? So you could make the window narrower, then scroll horizontally so the menu is off-screen.
                                                      • aendruk 2 years ago
                                                        Some sites are comically bad, either needlessly hiding their menu or turning it into a one-column tower that looks ridiculous at full viewport width (half my laptop screen). It took me embarrassingly long to discover the cause of the problem; I’d thought it was just a horrible trend in contrived minimalist design.

                                                        I’m tempted to start a gallery a la Plain Text Offenders or js;dr.

                                                        • alvarlagerlof 2 years ago
                                                          But it doesn't fit when its small?
                                                        • greenbit 2 years ago
                                                          Why does even the thought of 'disabling' animations have to be cast in the context of an accessibility issue?

                                                          What about those of us that see no need of user interface elements that flollop about doing some kind of 'me Me ME!' dance, when we just want to get things done?

                                                          I get it, if you're building a webpage maybe that's your artistic vision, and I'm specifically railing on OS animations, but the question still stands, 'why does it have to be an accessibility thing'? How about a plain, flat, respectful 'turn it OFF bc the user just doesn't want that' kind of option?

                                                          Don't care if this shows my age, when I was getting started in this business, there was serious emphasis on giving the user what they wanted. The user was the center of the universe, not "look at my mad skills". It's just disrespectful to tell the user they have an 'accessibility' issue, just to get things the way they want them.

                                                          • makeitdouble 2 years ago
                                                            > that's your artistic vision

                                                            > “look at my mad skills”

                                                            I’m torn about this: there are enough unneeded and horrible animations that I completely understand this point of view of wanted to get rid of all of them.

                                                            I also see that as throwing the baby with the bath water. There’s also fundamentally useful and informative animations to tell you something changed, what you’re supposed to do with an element or even what type of content you’re looking at.

                                                            As an unintentional experiment, when I got my new phone a few weeks ago I checked “disable animations” first and foremost, and started using the device normally. And everytime I was doing a specific action the screen froze with a round arrow. It took me 5 min to understand that page and app transitions where, well, “animations”, and getting rid of them made for a broken experience.

                                                            Same for popups and dialogs. Did it come from the top of the screen or from somewhere else in the app ? If you saw the animation you’d understand it immediately, before even parsing the design of the popup or the content.

                                                            I think we’re far away from the time where animations where random animated gifs with no meaning, and platforms are mature enough to use them in more advanced and useful ways most of the time.

                                                            • soft_dev_person 2 years ago
                                                              I did this on my Android as well, intentionally. My Galaxy S20 defaults to an animation speed that is just so horribly slow, everything feels sluggish. It also uses more battery.

                                                              I, too, was a bit confused at the frozen arrow in the beginning, until I realized it was just the loading indicator used when animations are disabled (they could probably improve that one). It is the one place where some sort of movement might still be appropriate.

                                                              Anyway, I recently disabled this feature due to it breaking the scroll behaviour in Play Store. Ironically the only app (I've noticed) that uses animation for scrolling in a way that makes this accessibility feature break it, making it a very jarring experience.

                                                              Instead, I went into developer tools and scaled all animations down to 0.5x. This at least makes all the annoying transitions bearable. I think this setting should also be exposed under accessibility settings.

                                                              • windexh8er 2 years ago
                                                                Adjusting the animation scaling down is one of the first things I do on any Android phone I buy. I've also changed it for many friends and family who immediately ask how I've managed to make their phones "faster". Not a single person has ever asked me to turn it back. Yet this option is buried in "Developer Tools", so - yes agreed that the "Accessibility Settings" is a far better place. I do also wish it was adjustable in 10% steps all the way down to off. I think 0.3x is likely the sweet spot.
                                                              • thrown_22 2 years ago
                                                                >As an unintentional experiment, when I got my new phone a few weeks ago I checked “disable animations” first and foremost, and started using the device normally. And everytime I was doing a specific action the screen froze with a round arrow. It took me 5 min to understand that page and app transitions where, well, “animations”, and getting rid of them made for a broken experience.

                                                                I don't get it. That sounds like the OS is fundamentally broken that it assumes a hard coded timer is required before it does the next step.

                                                                • makeitdouble 2 years ago
                                                                  It isn't a hard coded timer, it's the "loading" animation you see while an app or a page bootstraps a new view. In macos it would be the equivalent of the spinning beach ball.

                                                                  In iOS I think there is just no way to disable all the animations, while android gives you that switch that is quite literal.

                                                                • userbinator 2 years ago
                                                                  And everytime I was doing a specific action the screen froze with a round arrow. It took me 5 min to understand that page and app transitions where, well, “animations”, and getting rid of them made for a broken experience.

                                                                  Now you experience the reality of just how slow and bloated a lot of software is; the animations were just an attempt at hiding that.

                                                                  IMHO there should be very, very little need for a full "loading screen" with all the ocmputing power we have these days.

                                                                  • InCityDreams 2 years ago
                                                                    >when I got my new phone a few weeks ago

                                                                    Which phone? I'd like to know what not to purchase.

                                                                    • makeitdouble 2 years ago
                                                                      Pixel 6a, highly recommend. It has its flaws (some proper to the phone some coming from android) but it is still the best value you'll get if you're not chained to iOS and want a 'small' 6"ish phone. The disable animation thing is of my own doing, and using the animation scale factors instead is the better approach.

                                                                      I researched a lot and actually tried to switch back to iOS for a day or two before buying. All phones currently come with pretty major drawbacks IMO, especially when living outside of the US. Some lack of polish was the trade-off I was willing to make.

                                                                  • tomxor 2 years ago
                                                                    I totally get where you're coming from, most employment of CSS animate and transition is excessive and reduces UX.

                                                                    The rule is that you should never have to wait for a UI animation - That said, UI animations done correctly, which are subtle and extremely short, do enhance perception of UI controls state and transitions. But I can't blame people for the broad hate towards animation on the web, so much of it is done poorly in a way that detracts from the overall experience.

                                                                    • mrob 2 years ago
                                                                      I have only once seen a UI animation that I didn't have to wait for. This was in the Metacity window manager, which had an option to animate windows minimizing/maximizing using a wireframe of their outline that could not be interacted with. The actual window moved immediately, and the wireframe did not obscure much of the screen while it moved. I would still turn them off, but if every UI animation was designed like this I would dislike them less.
                                                                      • anderspitman 2 years ago
                                                                        That is a great design. Shows you where the minimized window is (in case your brain missed it) without making you wait. I would love to see an entire UI designed around the principle of "don't make me wait. Ever."
                                                                      • mcbits 2 years ago
                                                                        I think the best rule of thumb for UI animations is to keep speeding them up until users stop praising the beautiful/elegant animations. They shouldn't notice the animations.
                                                                        • Gigachad 2 years ago
                                                                          I think iOS does an extremely good job at animations. They help convey movement/what changed/where did I just go, but they are usually so fast and subtle you don't realize there was an animation unless you try hard to spot them.
                                                                      • tgsovlerkhgsel 2 years ago
                                                                        There is a trend that when a goal can't be achieved directly, people try to push it through some other channel. In this case, accessibility can be mandatory in some cases (by law or specification) while "don't be an asshole to your users" is not.

                                                                        It's hard to tell for sure where it's just a happy coincidence and where it is a pretext to make it either more appealing or to force people to do it under some other requirement, but you see this everywhere

                                                                        - Some hostile "optimization" ideas by airlines getting nixed by safety arguments, certainly not at all influenced (/s) by the humans working at those regulators not wanting other humans to be subjected to that

                                                                        - Animal rights activists using climate change as the main argument because it's a more popular topic now

                                                                        - People trying to ban technical terms like "blacklist"/"whitelist" claiming the goal is more precise terminology

                                                                        I'm sure there are plenty more examples.

                                                                        • bee_rider 2 years ago
                                                                          Seems like a pretty damning indictment of current trends in web design.
                                                                        • eyelidlessness 2 years ago
                                                                          > Why does even the thought of 'disabling' animations have to be cast in the context of an accessibility issue?

                                                                          > What about those of us that see no need of user interface elements that flollop about doing some kind of 'me Me ME!' dance, when we just want to get things done?

                                                                          If it’s a hindrance to you getting things done—to your access—that’s an accessibility issue. Accessibility that benefits you doesn’t imply anything about you, it’s an affordance for you to get whatever you need out of that access.

                                                                          For example: video transcripts might be a benefit for people with auditory and/or visual impairments. But they also benefit me because I prefer not to consume video content the vast majority of the time. They help me access content I’d otherwise probably never consume. That’s… accessibility too!

                                                                          • rikroots 2 years ago
                                                                            I agree - prefers-reduced-motion is a user-controlled OS-level setting (like prefers-color-scheme) which apps and websites should do their best to respect.

                                                                            Sadly we live in a world where developer time is a cost, and the cost of respecting user preferences is way down the list of things to spend cash/time on ... unless, of course, an A/B test showing that common courtesy leads to better conversions gets deployed and runs to significance.

                                                                            Saying that, I don't believe we should give up on the fight to better respect our users' preferences. For my part, I've designed my JS library in a way to make it as easy as possible for developers to build interactive 2d canvas-based graphics that are as respective of user choices as possible[1][2][3]. If nothing else, it demonstrates to other developers that such things are not impossible to achieve.

                                                                            [1] - https://codepen.io/kaliedarik/project/full/AMVKPx - Accessible stacked bar, and line, charts

                                                                            [2] - https://codepen.io/kaliedarik/project/full/AzWnNa - Header text colorise and animate effects (respects prefers-color-scheme, prefers-reduced-motion, etc)

                                                                            [3] - https://scrawl-v8.rikweb.org.uk/learn/eleventh-lesson - tutorial on how to make the 2d canvas more accessible/respective of user choices

                                                                            • xigoi 2 years ago
                                                                              If you're so tight on time that you can't add a simple wrapper to your CSS rule, why bother with adding animations at all?
                                                                              • kiawe_fire 2 years ago
                                                                                It’s often not a matter of “add a wrapper to this one CSS rule” but rather, “add a wrapper to ALL of these rules and some of this inline CSS scattered everywhere”.

                                                                                This is why, as part of a baseline of proper software engineering, it’s so important to get into a configurability/feature flag mindset, right from the start.

                                                                                If every feature is treated as something toggleable - if every color and padding value is a variable, and every visible string of text is wrapped in a function call that just returns the string, right from the start, then things like turning off animation, making colors more contrasting, or translating on-screen text to another language becomes magnitudes simpler when you do need it.

                                                                                This is where I have a problem with the pervasiveness of the YAGNI mindset. So many of these things fall right onto the YAGNI sword.

                                                                                Sure, you can get carried away with premature optimization, for example, but there are so many simple habits developers can and should develop that, once established, will add virtually no time or complexity to what you’re building but will save time and complexity in spades later on.

                                                                                And if you truly “ain’t gonna need it”, then you still benefit from a more disciplined code structure.

                                                                            • foepys 2 years ago
                                                                              I always disable animations on my Android phones because everything so much snappier, even on high-end devices.

                                                                              Whenever somebody tells me they want a new phone because their old one is slow, I recommend disabling all animations. After that they usually just keep their phone because it feels like it's new again.

                                                                              • mkr-hn 2 years ago
                                                                                This is like curb cuts: essential to people who need it, merely useful to people who don't. I can't use an app that won't let me turn off animations or make them user-initiated. There was a long gap where I couldn't use Telegram because they added animated stickers without a way to turn them off for months.

                                                                                Framing it as an accessibility issue makes it harder to remove.

                                                                                • mr-wendel 2 years ago
                                                                                  I didn't realize "@media (prefers-reduced-motion)" existed, so I appreciate learning that.

                                                                                  I agree with counter points showing how animation can add useful context, particularly in response to user interactions. This fails to address the crux of the issue greenbit brings up: the 'me Me ME!' dance. Yes, there are some places animation is indispensable, but the problem is that 95% of them (and their ilk) are giving the other 5% a bad name. The best way to enjoy and maintain focus is to not have to be constantly on-guard for hijack attempts.

                                                                                  Add in the fact that so many things exhibit this behavior (animations just tend to be the worst), multiply by how many sites/apps you spend time with. Even major, paid products can be problematic. With the web, ads, newsletter/don't-go/"privacy"/etc pop-ups are bad enough already.

                                                                                  I think we can take things a step/leap further: icon/logo/front-page take-overs and how aggressively those are pushed in front of user eyeballs. I believe (citation wanted!) that publishing control over the Google doodles is subject to a very strict approval process to curate a very specific, subtle "experience". It has to be the most valuable space of virtual real estate in the world, even despite limitations. It's certainly the most obnoxious to me.

                                                                                  So if there is to be general agreement on how things improve, I'd rather it be based on something broader than accessibility, but if accessibility wins some ground I'd appreciate it nonetheless.

                                                                                  • jwr 2 years ago
                                                                                    In some places (software I write) the user does come first, especially the user that spends a lot of time with the application. That's why there are no UI animations in my app, I value my users too much. If I have data to display, I display it as fast as I possibly can.

                                                                                    But I do have to accept that this makes the app look less "polished" or "modern" at a first glance and likely makes some people look at competitors when they come to evaluate the app.

                                                                                    This is somewhat similar to gyms (bear with me here): a newbie will choose a gym based on how many machines they have. An experienced person doing strength training knows that the only thing that matters is how many racks they have. Gyms know that, hence the large numbers of largely useless machines (and a very limited number of squat racks and barbells, because strength trainers are the worst customers to have: they actually do go to the gym). The decision to subscribe is being made based on the superficial.

                                                                                    • bee_rider 2 years ago
                                                                                      Really the ideal gym client for some places seems to be somebody who signs up for a membership and then never uses it, so I guess maybe having too much of the stuff that an experienced lifter might want would be a net negative for them.
                                                                                    • Vinnl 2 years ago
                                                                                      I don't think there's a single accessibility feature that is not also useful for a subset of people without any disabilities. Accessibility is just one way to introduce something, that doesn't have to mean it's not useful in other ways too.
                                                                                      • alwillis 2 years ago
                                                                                        Everyone is going to have a disability at some point, even if only temporarily.

                                                                                        If you can’t find your glasses, being able to magnify the screen comes in handy.

                                                                                        Outside in the sun? Features for the sight-impaired like increasing the contrast helps.

                                                                                      • petee 2 years ago
                                                                                        Good example of ignoring users is the Google Photos app, which has an option to turn off motion photo playback, but turning it off just makes a shorter, even more jarring animation instead. Its actually nauseating, and impossible to disable, without reverting to static photos only (I let it record motion photos because its often helpful to catch an action frame you'd otherwise miss, but I want to choose when to playback, not google)
                                                                                        • kaba0 2 years ago
                                                                                          Well, the real world also “animates” everything, you can’t open your fridge instantly, nor can you grab your phone out of your pocket, nor are driving a car has any “instant” motions/happenings.

                                                                                          These in-between states gives us well-needed information and are not artistic at all. Sure, they can be emulated badly, but for example iphone’s app switcher is imo a very natural implementation of how it should be done. Won’t make the action take any more time, but it does instruct on what happens very accurately. Compare it to i3’s instant desktop switching, which gives us barely any info to work with.

                                                                                          • ndriscoll 2 years ago
                                                                                            With i3, I press mod+n, and desktop n appears. What information is missing that an animation would provide?

                                                                                            This feels like arguing that when we type, the computer should scribble each letter just as we would with a pen, or when a web page loads, it should slowly fill in like it did on dial-up. I want the computer to work as an extension of my brain; it should react as fast as I can think. I want it to show me something, and that thing simply appears as it would in the mind's eye.

                                                                                            • mrob 2 years ago
                                                                                              The in-between states are already provided by the finite speed of human muscles. When I press a key, it already "animates" up and down. I don't need to add any artificial latency on top of that.
                                                                                              • tetris11 2 years ago
                                                                                                If you could instantly open your fridge, chances are you would, instead of implementing a needless delay
                                                                                                • hypertele-Xii 2 years ago
                                                                                                  If you wanted to smack your co-habitators in the face with a lightspeed fridge door, sure.
                                                                                                • lapcat 2 years ago
                                                                                                  The whole point of computers and technology is to do things faster than we previously could.

                                                                                                  "Instant" is a feature, not a bug.

                                                                                                  • kaba0 2 years ago
                                                                                                    Doing work faster? Yes. Communicating with/controlling the computer though is still prone to the same psychological “limitations” humans have.
                                                                                                  • tgsovlerkhgsel 2 years ago
                                                                                                    These quick transition animations aren't the ones this spec discusses.

                                                                                                    The spec talks about "moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content"

                                                                                                    It's relatively uncommon to encouter this as part of an app or actual legitimate content, but most sites that have ads would violate this spec. And I've noticed that I found those moving elements distracting enough that I just furiously closed a site and gave up on pursuing the information on it when I had the misfortune of encountering a news site on a PC without an ad blocker.

                                                                                                    • kaba0 2 years ago
                                                                                                      I didn’t reply to the spec though :D

                                                                                                      Of course I’m all for reducing animations, and not even only for accessibility reasons, but I don’t agree with calling all of them useless, when they do in fact have a very important role.

                                                                                                    • xigoi 2 years ago
                                                                                                      If you could teleport anywhere you want, would you still drive your car instead?
                                                                                                    • Roark66 2 years ago
                                                                                                      Exactly, I've recently been trying a new version of gnome and I was really surprised how snappy and quick it felt with all animations disabled (it was running on a fast pc too). I much prefer them off ever since.
                                                                                                      • watwut 2 years ago
                                                                                                        The site is about accessibility. It does not claim no one ever turned off animations due to accessibility.

                                                                                                        Instead, it explains there is accessibility issue and teaches how to fix that.

                                                                                                        • matanshavit 2 years ago
                                                                                                          I'm not an expert, but I wonder if animations could have a detrimental effect on people with certain kind of epilepsy.
                                                                                                          • 2 years ago
                                                                                                            • Bud 2 years ago
                                                                                                              The answer, of course, is that it doesn't "have to" be cast that way, but this is an article on an accessibility site. So it's about accessibility.
                                                                                                              • 2 years ago
                                                                                                                • LunaSea 2 years ago
                                                                                                                  Just switch to a terminal.
                                                                                                                  • ben_w 2 years ago
                                                                                                                    If only websites generally, and mobile phone apps at all, worked on terminals.
                                                                                                                • Semaphor 2 years ago
                                                                                                                  What I’d like to have: A setting that says I prefer reduced motion. Not "none" motion. Reduced.

                                                                                                                  Recently, I saw some UI component framework with a sortable list. For anyone else, it moved the element from the old to the new position. For me, it just switched them out, which makes for far worse UX in that case.

                                                                                                                  If for some people any motion is bad, then give them a property, or even better, as someone else said, make the browser disable all animations (I do that for gif, webp etc. with a browser extension)

                                                                                                                  All I want is for sites to not waste my time with animations or make things harder to read with those dumb parallax effects (thankfully that fad did not last long). That’s why I have "prefers reduced motion".

                                                                                                                  I guess it’s a badly named property if everyone treats it like "prefers no motion".

                                                                                                                  • thrdbndndn 2 years ago
                                                                                                                    I don't mind animation in general, but I hate smooth scrolling (first thing I disable when installing any browser).

                                                                                                                    There is a trend of adding fake smooth scrolling using js/css, unfortunately.

                                                                                                                    • Gigachad 2 years ago
                                                                                                                      Real smooth scrolling where its actually tied to the movement of your finger is very good. Fake smooth scrolling where it's trying to interpolate between scroll events is shit.

                                                                                                                      I don't know why desktop mice are still stuck in this 80s era of jittery scrolling while trackpads and phones have been scrolling with pixel perfect accuracy for over a decade. And now every product page is tying animations to scroll position which looks great on smooth scroll devices but play as 1fps animations for mice users.

                                                                                                                      • solarkraft 2 years ago
                                                                                                                        Counter-point: Smooth scrolling is an essential feature for me. I bought a specific mouse for this because I find sudden line-jumps so disorienting.
                                                                                                                        • thrdbndndn 2 years ago
                                                                                                                          My mouse scroll wheel isn't "smooth" so it makes no sense for it to be smooth for me.

                                                                                                                          > sudden line-jumps

                                                                                                                          This is definitely something needs to get used to. But the biggest advantage of non-smooth scrolling is that it starts and stops instantly with zero overshoot, which is what I hate of smooth scrolling.

                                                                                                                          To be more clear, I actually use all three types of scrolling, for different scenarios.

                                                                                                                          I manually drag scroll bar for finer control, and it has no suden jump issue. I also use auto-scroll (middle click) for super quick scrolling (which is kinda like smooth scrolling).

                                                                                                                          • Gigachad 2 years ago
                                                                                                                            If you use a trackpad or touchscreen and keep your fingers on, there is no overshoot. This only happens if you move and lift to give it some momentum, or fake JS smooth scrolling.
                                                                                                                      • ChrisMarshallNY 2 years ago
                                                                                                                        I write native iOS apps.

                                                                                                                        Apple has a lot of accessibility stuff, built-in, and API flags exposed, all over. It has some really comprehensive user-facing accessibility controls.

                                                                                                                        I think I should probably still review the app I'm working on, just to make sure that I'm honoring the users' wishes.

                                                                                                                        • poisonborz 2 years ago
                                                                                                                          You can disable animations on Android by enabling the developer menu and setting animationScale to 0. The whole OS feels much faster and its the first setting I make on a new phone. Some apps ignore this scale, which is a good opportunity to report it as an accessibility bug.
                                                                                                                          • sys_64738 2 years ago
                                                                                                                            I hate anything that changes the appearance of a webpage. I want it to be static. No ad. No animations. No flashing. No videos. No sound. Stop with that stuff.
                                                                                                                            • solarkraft 2 years ago
                                                                                                                              I have a bit of a counter-point: I find things that just suddenly change disorienting. Line jumps, UI elements just appearing - every non-animated change. This doesn't happen in the physical world and it startles me for a moment (longer than a transition would have lasted for).
                                                                                                                              • cebert 2 years ago
                                                                                                                                I too find most web animations and motions to be an annoyance. I wonder if more sites will allow users to specify their animation preferences similar to the way many sites allow users to specify their day/night preferences.
                                                                                                                                • emptyparadise 2 years ago
                                                                                                                                  Does `@media` support negation? Could it be better to do something like this:

                                                                                                                                      @media (:not(prefers-reduced-motion)) {
                                                                                                                                        .animate-me {
                                                                                                                                          animation: pulse 400ms infinite;
                                                                                                                                        }
                                                                                                                                      }
                                                                                                                                  • LinuxBender 2 years ago
                                                                                                                                    For what it's worth there is an add-on for Firefox at least that will disable transitions. [1] I am not sure if this will address all the needs. Maybe just the excessive CSS animations.

                                                                                                                                    A simple CSS-only addon that globally disables all CSS transitions and animations. This helps websites perform better or feel more responsive when these effects are used excessively.

                                                                                                                                    [1] - https://addons.mozilla.org/en-US/firefox/addon/disable-trans...

                                                                                                                                    • hedora 2 years ago
                                                                                                                                      Maybe someday e-ink will be sufficiently popular for people to demand UIs that work well with it.

                                                                                                                                      The day that happens, I'll figure out how to trick apps into thinking they are running on such a display.

                                                                                                                                      • throwaway09223 2 years ago
                                                                                                                                        I'm continually surprised that display systems don't implement safeguards designed to minimize this sort of thing.

                                                                                                                                        It seems like it should be relatively simple to prevent repetitive flashing patterns from ever occurring by tracking the last few seconds of display state and looking for blinking regions of the screen. This would fix the problem for all applications, including blinking caused by something like scrolling too fast through a task switcher.

                                                                                                                                        If I were epileptic I would want something like this for my computer as a layer of safety.

                                                                                                                                        • 2 years ago
                                                                                                                                        • kazinator 2 years ago
                                                                                                                                          > Users that are prone to seizures or motion sickness or who are on a sluggish remote desktop connection may need to disable animation or motion. Add an option for users to disable this.

                                                                                                                                          FTFY

                                                                                                                                          • EvanAnderson 2 years ago
                                                                                                                                            I'm stuck on sluggish remote desktop connections for some fraction of my work. I despise animations. They do nothing but slow me down and waste bandwidth. I don't need cutesy animations-- I need software that allows me to work efficiently.
                                                                                                                                          • enriquto 2 years ago
                                                                                                                                            Yes, please!

                                                                                                                                            And also for the command line. Why there's no global option to switch off tqdm and all similar "modern" clutter? Like NO_COLOR but with all terminal animations and stuff.

                                                                                                                                            • freediver 2 years ago
                                                                                                                                              An example of animation that responds to prefers-reduced-motion is the subtle animation on the Kagi home page:

                                                                                                                                              https://kagi.com (you should see stars and clouds animate, same is used for logged in users on the main search landing page)

                                                                                                                                              We have a FAQ entry how to find this setting in different OS so that users can control it:

                                                                                                                                              https://kagi.com/faq#reduce-motion

                                                                                                                                              • jakzurr 2 years ago
                                                                                                                                                Anyone remember "SuperStop"? Loved that. NoScript does ok, but animated GIF's are still a pain.
                                                                                                                                                • FridayoLeary 2 years ago
                                                                                                                                                  I think websites where you actually do things, such as retail or text or video based sites should keep animations to the minimum, as a visitor wants static content to examine. In fact only promotional websites should have heavy animations IMO (if they think its nice..).
                                                                                                                                                  • rubatuga 2 years ago
                                                                                                                                                    Also, it would be great if Apple could let us disable the pull to refresh gesture in safari.
                                                                                                                                                    • eclipticplane 2 years ago
                                                                                                                                                      ... And be able to disable scroll to top!
                                                                                                                                                    • layer8 2 years ago
                                                                                                                                                      And yet Apple introduced Dynamic Island with no way to turn off the constant animations.
                                                                                                                                                      • CharlesW 2 years ago
                                                                                                                                                        Dynamic Island respects Reduce Motion. Also, you can interrupt all "big" animations.
                                                                                                                                                      • Aroga 2 years ago
                                                                                                                                                        • wweverywhere 2 years ago