[HN Gopher] Allow disabling of motion or animation
___________________________________________________________________
Allow disabling of motion or animation
Author : weba11y
Score : 181 points
Date : 2022-10-16 09:51 UTC (13 hours ago)
(HTM) web link (accessibilityfordevelopers.com)
(TXT) w3m dump (accessibilityfordevelopers.com)
| throwaway09223 wrote:
| 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.
| [deleted]
| Semaphor wrote:
| 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".
| Aroga wrote:
| Great!
| greenbit wrote:
| 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.
| kaba0 wrote:
| 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.
| xigoi wrote:
| If you could teleport anywhere you want, would you still
| drive your car instead?
| mrob wrote:
| 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.
| lapcat wrote:
| The whole point of computers and technology is to do things
| faster than we previously could.
|
| "Instant" is a feature, not a bug.
| kaba0 wrote:
| Doing work faster? Yes. Communicating with/controlling the
| computer though is still prone to the same psychological
| "limitations" humans have.
| tetris11 wrote:
| If you _could_ instantly open your fridge, chances are you
| _would_ , instead of implementing a needless delay
| hypertele-Xii wrote:
| If you wanted to smack your co-habitators in the face with
| a lightspeed fridge door, sure.
| tgsovlerkhgsel wrote:
| 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 wrote:
| 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.
| ndriscoll wrote:
| 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.
| makeitdouble wrote:
| > 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.
| InCityDreams wrote:
| >when I got my new phone a few weeks ago
|
| Which phone? I'd like to know what not to purchase.
| makeitdouble wrote:
| 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.
| soft_dev_person wrote:
| 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 wrote:
| 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.
| bombela wrote:
| On a Google phone Android, turning off all animations
| doesn't replace it with a loading icon. It just makes the
| phone faster.
|
| In Android 12 the Google Android launcher (the desktop,
| with the non removable Google assistant/search bar),
| doesn't obey turning off animation. I moved to the Nova
| launcher.
|
| Like the parent post, every friends and family member I
| showed how to turn off animations was very pleased with
| the speedup. Nobody ever asked to turn it back on.
| thrown_22 wrote:
| >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 wrote:
| 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.
| alwillis wrote:
| You might want to check the accessibility features of
| iOS: https://www.apple.com/accessibility/
| mr-wendel wrote:
| 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.
| [deleted]
| tgsovlerkhgsel wrote:
| 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 wrote:
| Seems like a pretty damning indictment of current trends in
| web design.
| Bud wrote:
| 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.
| Roark66 wrote:
| 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 wrote:
| 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.
| mkr-hn wrote:
| 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.
| rikroots wrote:
| 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 wrote:
| 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 wrote:
| 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.
| eyelidlessness wrote:
| > 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!
| Vinnl wrote:
| 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 wrote:
| 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.
| LunaSea wrote:
| Just switch to a terminal.
| ben_w wrote:
| If only websites generally, and mobile phone apps at all,
| worked on terminals.
| foepys wrote:
| 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.
| tomxor wrote:
| 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.
| mcbits wrote:
| 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.
| mrob wrote:
| 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 wrote:
| 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."
| matanshavit wrote:
| I'm not an expert, but I wonder if animations could have a
| detrimental effect on people with certain kind of epilepsy.
| [deleted]
| jwr wrote:
| 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 wrote:
| 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.
| petee wrote:
| 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)
| solarkraft wrote:
| 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).
| freediver wrote:
| 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
| rroot wrote:
| 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 wrote:
| 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 wrote:
| Both of you may be satisfied with a simple override switch-
| button. Yours will be always on, gp's always off.
| Wowfunhappy wrote:
| 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.
| wruza wrote:
| I move a window past the screen partially when needed.
| But it doesn't work well at two-display border. Another
| real option is to find a container div and pin its width
| via stylebot.
| aendruk wrote:
| 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 wrote:
| But it doesn't fit when its small?
| cebert wrote:
| 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.
| rubatuga wrote:
| Also, it would be great if Apple could let us disable the pull to
| refresh gesture in safari.
| eclipticplane wrote:
| ... And be able to disable scroll to top!
| enriquto wrote:
| 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.
| sys_64738 wrote:
| 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.
| poisonborz wrote:
| 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.
| awinter-py wrote:
| 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 wrote:
| 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 wrote:
| 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.
| jakzurr wrote:
| Anyone remember "SuperStop"? Loved that. NoScript does ok, but
| animated GIF's are still a pain.
| LinuxBender wrote:
| 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...
| mrob wrote:
| 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.
| Lucent wrote:
| 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 wrote:
| Can this be fixed with 1ms timings instead of 0ms?
| wakeupcall wrote:
| 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.
| lapcat wrote:
| > I was using https://addons.mozilla.org/en-
| US/firefox/addon/no-transition... which operates on the same
| principle.
|
| This extension doesn't seem to be available anymore.
| wakeupcall wrote:
| The github link:
|
| https://github.com/gagarine/no-transition
|
| although it's not the only one (see
| https://github.com/jnlon/disable-transitions).
| [deleted]
| kazinator wrote:
| > 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 wrote:
| 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.
| thrdbndndn wrote:
| 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.
| solarkraft wrote:
| 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.
| wweverywhere wrote:
| akdor1154 wrote:
| 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.
| hombre_fatal wrote:
| 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.
| watwut wrote:
| 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.
| ChrisMarshallNY wrote:
| 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.
| Etheryte wrote:
| 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.
| cwillu wrote:
| s/one of those/one of the 100% of those/g #edited for clarity
| zagrebian wrote:
| 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 decision1.
|
| 1. Maybe in 100 years, when we have powerful AI that and
| reliably identify problematic animation.
| petee wrote:
| 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 wrote:
| All animations are an issue.
| zagrebian wrote:
| Everything can be an issue. There is no one-size-fits-all
| solution.
| ben_w wrote:
| 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).
| zagrebian wrote:
| 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 wrote:
| 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.
| zimpenfish wrote:
| 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...)
| tgsovlerkhgsel wrote:
| 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 wrote:
| 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.
| witheld wrote:
| How about just drop most of the frames? Let them animate and
| show users how it's going every once in a while
| ohgodplsno wrote:
| 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.
| mariusmg wrote:
| >that the next ad mascot will be written in JavaScript
|
| The horror....
| tgsovlerkhgsel wrote:
| 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.
| wruza wrote:
| It has tangential costs, because a site which is slow or
| drains battery will lose at least some users or SERP
| positions and a site owner will take measures to
| rebalance that. All this already works through various
| metrics.
| dalmo3 wrote:
| > that the next ad mascot will be written in JavaScript
|
| That's quite literally true already:
| https://nextjs.org/conf
| kazinator wrote:
| 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 wrote:
| 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?
| FridayoLeary wrote:
| 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..).
| layer8 wrote:
| And yet Apple introduced Dynamic Island with no way to turn off
| the constant animations.
| CharlesW wrote:
| Dynamic Island respects Reduce Motion. Also, you can interrupt
| all "big" animations.
___________________________________________________________________
(page generated 2022-10-16 23:00 UTC)