6 ms·

Most animation is visual spam. The proper way to use animation is to NOT use it except when there is absolutely no other way to communicate something.[1] Materi

Most animation is visual spam. The proper way to use animation is to NOT use it except when there is absolutely no other way to communicate something.[1] Material Design is fundamentally broken, because it tries to simulate physical motion, which is terrible for accessibility, so I don't think it's a good source to cite. Browsing the Web over the past few years has become an often-nauseating experience. Edit: here is some reading for the downvoters: https://usability.yale.edu/web-accessibility/articles/animated-moving-scrolling-flashing-or-changing-content https://usability.yale.edu/web-accessibility/articles/animat... https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity https://alistapart.com/article/designing-safer-web-animation... https://simplyaccessible.com/article/animations/ https://simplyaccessible.com/article/animations/ http://accessibility.psu.edu/animations/ http://accessibility.psu.edu/animations/ https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-animation-effects https://www.smashingmagazine.com/2018/04/designing-accessibi... [1] except in gaming, where animation is expected and reasonable

codetrotter 8y ago
> The proper way to use animation is to NOT use it except when there is absolutely no other way to communicate something. While it is true that some animations are excessive, I find that a certain amount of animation makes it less taxing to follow what is happening on screen. If big changes happen suddenly and without animation then I have to spend a little bit of extra time to figure out what moved where relative to where it was before and what was added, removed or changed. Mainly I mean when changes happen automatically, like if something was dynamically added, removed or changed by the system. Not, say, if I initiated a page-down with my keyboard in mutt etc.
- JoshMnem 8y ago
  I'm referring to accessibility, not just aesthetics. +1 for mutt. Text-first is the way to go.
- mrob 8y ago
  There's no need for animation to highlight changes. E.g. if a new item appears suddenly in a list, it can use bold text so it stands out. It can then immediately change to non-bold when you interact with it. This has the additional advantage that the change is obvious even if you were looking away when the item appeared. I've never seen a UI animation that was better than no animation.
  - pryce 8y ago
    The problem with your proposal is that the meaning of the "bolded" item is not immediately -or perhaps even with careful thought- obvious to anyone except the person proposing the idea, or the people who have already encountered the same idea beforehand. We don't have a widely-understood cross-cultural shorthand for annotating an item's 'newness'. By contrast, we are all familiar with objects retaining their identity while they move. When I minimize my window in macOS, it physically transforms and is sent to its new location. I know where the window I was working on went, and I as a person would have a good reason to be able to somewhat or even mostly comprehend this even if I hadn't ever seen macOS before. With no animation, the large and prominent window I have been using would immediately disappear with no indication where it went, and the minimized icon in the dock would be highly likely to be overlooked. It would also look almost exactly like "closing" the window, and it would be easy for an inexperienced user to think minimizing a window and closing it are the same thing. I can assure you, this blurred conceptual distinction is not an imaginary problem. Sure, I don't personally need this animation because I'm an experienced user already. However, in almost all cases it is fundamentally flawed to approach interface design by considering only the needs and preferences of experienced users.
    - mrob 8y ago
      Why does the meaning have to be obvious to inexperienced users, at the cost of making things worse for everybody else? We don't let untrained users drive cars unsupervised, and cars are much simpler than computers. I say that considering only the needs of inexperienced users is a fundamentally flawed approach.
      - 8y ago
- Too 8y ago
  Page-down should animate (quickly), it makes it much easier to understand how far the page scrolled, to follow the text and pick up reading on the next page.
  - mrob 8y ago
    When I press page-down I want to scroll a page down immediately, not wait 250ms before eventually arriving at a page down. Page-down always scrolls the same distance, so you don't need any hints about how it scrolled; you just move your eyes the same way you always do. If something is messing with the scrolling to make it act in a confusing way (I think Javascript might allow this), that doesn't mean you should use animation to help people understand the confusing behavior, it means you should fix the bug that allows the confusing behavior.
    - Too 8y ago
      1. 250ms is not quickly, on Firefox Windows a default page down animation is closer to 50-100ms (estimating), it's so fast you hardly even realize it's animating. There are websites that override this with their custom slow animations - those type of page downs suck yes, hence my inclusion of quickly in my first post. 2. Page down doesn't always scroll the same distance when you hit the end of the page, unless you have over-scrolling like some code editors do but websites and browsers don't. For media naturally represented as pages, like PDF or images, and when one whole page fits on a screen there's a different story though, there it's nice to be able to jump pages instantly without animations, because the page boundary itself can be used as reference. But for reflowing endless wall of text media like web pages and code you kindof need to follow your previous position as a reference.
    - albedoa 8y ago
      > When I press page-down I want to scroll a page down immediately You are among a tiny minority and come off as trying really hard when insisting that animations are useless. Very few people want a 0ms screen flash on page scroll.
      - 8y ago
userbinator 8y ago
Browsing the Web over the past few years has become an often-nauseating experience. I'm often amazed by "average" users who seem completely unfazed when they visit sites filled with animated ads and other visual noise; but it likely does negatively affect their understanding of the actual content, since they are being constantly distracted by everything else trying to get their attention. I was a few times forced into this situation and had to physically cover the flashing banners and other crap with my hands in order to actually read the content. Even if it's only in my peripheral vision, I found it to be sufficiently distracting that I couldn't think about the text I was reading --- it was like being half-asleep. I could read each word, but everything felt like a blur. This brings up my hypothesis that the reason a lot of users seem to not notice things in the UI or read warnings closely is that they're so used to being distracted by useless things and desensitised to it that they've accepted not being able to concentrate and think as being normal, which is quite unsettling. Many times I've had to help someone out with an unfamiliar (to both of us) UI, and the person I was helping would gaze blankly and not be able to find something that I instantly saw.
- deleted 8y ago
  [deleted]
- chiefalchemist 8y ago
  > "I'm often amazed by "average" users who seem completely unfazed" They are unfazed because it's the norm, not the exception. Humans adapt. It's what we do. They see X and presume that's the way It's supposed to be. This explains fashion. It even explains obesity. We look around and unless there's clear and obvious danger we conform, because conforming has historically been s survival instinct. That "survival skill" is coming back to haunt us. > "This brings up my hypothesis that the reason a lot of users seem to not notice things in the UI or read warnings closely is that they're so used to being distracted by useless things and desensitised to it that they've accepted not being able to concentrate and think as being normal..." To be clear, I agree.
noir_lord 8y ago
I agree, I built a small UI for work and used animations (with 200-300ms transition times) Then out of curiosity I disabled them all on a release and the feedback was pretty much the same except I got a few "it's much faster" responses. Fwiw internal business application not consumer but lesson learnt. Personally I very very rarely think animation is an improvement. Except where you are using animation to cover loading times and at the end of the animation the UI is ready perhaps.
chiefalchemist 8y ago
Yes, agreed. What I've exexperienced is that the team / client falls in love with senseless doodads and whatnots. They lack they empathy to ask: - "If I saw this for the first time, what would I think?" as well as - "If I had too keep seeing this - knowing it's not helping me - what would I think?" The user needs is a distant third to the team's wants and lack of empathy. You'd think after Adobe Flash being abused we would have learned? That doesn't seem to be the case.
jamesrcole 8y ago
You provide five links to back up your claim that > Most animation is visual spam. The proper way to use animation is to NOT use it except when there is absolutely no other way to communicate something. But they don't back up that claim. They don't come close to backing up such a sweeping statement.
- yoz-y 8y ago
  Indeed each of the linked articles ends with a paragraph more or less stating that animation is useful, but it should not be excessive and that one should give users options to opt out or tame them down if it is necessary.
- JoshMnem 8y ago
  Not all animation is bad. Most animation is bad. My comment is a guideline to help people figure out when something actually needs animation. If you're adding animation because you think it's "delightful", it probably is making the UI unbearable for some users. Examples: animations that simulate real physical motion or cause flashes to appear on the page (like Material Design) on sites where users are supposed to read text are nearly always a bad idea from an accessibility perspective. Subtle animation that makes a certain part of a user interface clearer when the user is not reading content is okay if a lot of moderation is used. Don't think "how can I add animation?" -- think "how can I remove animation so that this still works?" Designers should also test the interface and make sure that it still works with animation disabled.

codetrotter 8y ago

> The proper way to use animation is to NOT use it except when there is absolutely no other way to communicate something. While it is true that some animations are excessive, I find that a certain amount of animation makes it less taxing to follow what is happening on screen. If big changes happen suddenly and without animation then I have to spend a little bit of extra time to figure out what moved where relative to where it was before and what was added, removed or changed. Mainly I mean when changes happen automatically, like if something was dynamically added, removed or changed by the system. Not, say, if I initiated a page-down with my keyboard in mutt etc.

JoshMnem 8y ago
I'm referring to accessibility, not just aesthetics. +1 for mutt. Text-first is the way to go.
mrob 8y ago
There's no need for animation to highlight changes. E.g. if a new item appears suddenly in a list, it can use bold text so it stands out. It can then immediately change to non-bold when you interact with it. This has the additional advantage that the change is obvious even if you were looking away when the item appeared. I've never seen a UI animation that was better than no animation.
- pryce 8y ago
  The problem with your proposal is that the meaning of the "bolded" item is not immediately -or perhaps even with careful thought- obvious to anyone except the person proposing the idea, or the people who have already encountered the same idea beforehand. We don't have a widely-understood cross-cultural shorthand for annotating an item's 'newness'. By contrast, we are all familiar with objects retaining their identity while they move. When I minimize my window in macOS, it physically transforms and is sent to its new location. I know where the window I was working on went, and I as a person would have a good reason to be able to somewhat or even mostly comprehend this even if I hadn't ever seen macOS before. With no animation, the large and prominent window I have been using would immediately disappear with no indication where it went, and the minimized icon in the dock would be highly likely to be overlooked. It would also look almost exactly like "closing" the window, and it would be easy for an inexperienced user to think minimizing a window and closing it are the same thing. I can assure you, this blurred conceptual distinction is not an imaginary problem. Sure, I don't personally need this animation because I'm an experienced user already. However, in almost all cases it is fundamentally flawed to approach interface design by considering only the needs and preferences of experienced users.
  - mrob 8y ago
    Why does the meaning have to be obvious to inexperienced users, at the cost of making things worse for everybody else? We don't let untrained users drive cars unsupervised, and cars are much simpler than computers. I say that considering only the needs of inexperienced users is a fundamentally flawed approach.
    - 8y ago
Too 8y ago
Page-down should animate (quickly), it makes it much easier to understand how far the page scrolled, to follow the text and pick up reading on the next page.
- mrob 8y ago
  When I press page-down I want to scroll a page down immediately, not wait 250ms before eventually arriving at a page down. Page-down always scrolls the same distance, so you don't need any hints about how it scrolled; you just move your eyes the same way you always do. If something is messing with the scrolling to make it act in a confusing way (I think Javascript might allow this), that doesn't mean you should use animation to help people understand the confusing behavior, it means you should fix the bug that allows the confusing behavior.
  - Too 8y ago
    1. 250ms is not quickly, on Firefox Windows a default page down animation is closer to 50-100ms (estimating), it's so fast you hardly even realize it's animating. There are websites that override this with their custom slow animations - those type of page downs suck yes, hence my inclusion of quickly in my first post. 2. Page down doesn't always scroll the same distance when you hit the end of the page, unless you have over-scrolling like some code editors do but websites and browsers don't. For media naturally represented as pages, like PDF or images, and when one whole page fits on a screen there's a different story though, there it's nice to be able to jump pages instantly without animations, because the page boundary itself can be used as reference. But for reflowing endless wall of text media like web pages and code you kindof need to follow your previous position as a reference.
  - albedoa 8y ago
    > When I press page-down I want to scroll a page down immediately You are among a tiny minority and come off as trying really hard when insisting that animations are useless. Very few people want a 0ms screen flash on page scroll.
    - 8y ago

userbinator 8y ago

Browsing the Web over the past few years has become an often-nauseating experience. I'm often amazed by "average" users who seem completely unfazed when they visit sites filled with animated ads and other visual noise; but it likely does negatively affect their understanding of the actual content, since they are being constantly distracted by everything else trying to get their attention. I was a few times forced into this situation and had to physically cover the flashing banners and other crap with my hands in order to actually read the content. Even if it's only in my peripheral vision, I found it to be sufficiently distracting that I couldn't think about the text I was reading --- it was like being half-asleep. I could read each word, but everything felt like a blur. This brings up my hypothesis that the reason a lot of users seem to not notice things in the UI or read warnings closely is that they're so used to being distracted by useless things and desensitised to it that they've accepted not being able to concentrate and think as being normal, which is quite unsettling. Many times I've had to help someone out with an unfamiliar (to both of us) UI, and the person I was helping would gaze blankly and not be able to find something that I instantly saw.

deleted 8y ago
[deleted]
chiefalchemist 8y ago
> "I'm often amazed by "average" users who seem completely unfazed" They are unfazed because it's the norm, not the exception. Humans adapt. It's what we do. They see X and presume that's the way It's supposed to be. This explains fashion. It even explains obesity. We look around and unless there's clear and obvious danger we conform, because conforming has historically been s survival instinct. That "survival skill" is coming back to haunt us. > "This brings up my hypothesis that the reason a lot of users seem to not notice things in the UI or read warnings closely is that they're so used to being distracted by useless things and desensitised to it that they've accepted not being able to concentrate and think as being normal..." To be clear, I agree.

noir_lord 8y ago

I agree, I built a small UI for work and used animations (with 200-300ms transition times) Then out of curiosity I disabled them all on a release and the feedback was pretty much the same except I got a few "it's much faster" responses. Fwiw internal business application not consumer but lesson learnt. Personally I very very rarely think animation is an improvement. Except where you are using animation to cover loading times and at the end of the animation the UI is ready perhaps.

chiefalchemist 8y ago

Yes, agreed. What I've exexperienced is that the team / client falls in love with senseless doodads and whatnots. They lack they empathy to ask: - "If I saw this for the first time, what would I think?" as well as - "If I had too keep seeing this - knowing it's not helping me - what would I think?" The user needs is a distant third to the team's wants and lack of empathy. You'd think after Adobe Flash being abused we would have learned? That doesn't seem to be the case.

jamesrcole 8y ago

You provide five links to back up your claim that > Most animation is visual spam. The proper way to use animation is to NOT use it except when there is absolutely no other way to communicate something. But they don't back up that claim. They don't come close to backing up such a sweeping statement.

yoz-y 8y ago
Indeed each of the linked articles ends with a paragraph more or less stating that animation is useful, but it should not be excessive and that one should give users options to opt out or tame them down if it is necessary.
JoshMnem 8y ago
Not all animation is bad. Most animation is bad. My comment is a guideline to help people figure out when something actually needs animation. If you're adding animation because you think it's "delightful", it probably is making the UI unbearable for some users. Examples: animations that simulate real physical motion or cause flashes to appear on the page (like Material Design) on sites where users are supposed to read text are nearly always a bad idea from an accessibility perspective. Subtle animation that makes a certain part of a user interface clearer when the user is not reading content is okay if a lot of moderation is used. Don't think "how can I add animation?" -- think "how can I remove animation so that this still works?" Designers should also test the interface and make sure that it still works with animation disabled.