5 ms·

I, for one, don't want this. At all. Taking a look at my screen right now, there are probably close to a hundred or so icons in various applications visible on

by carlg 7y ago

I, for one, don't want this. At all. Taking a look at my screen right now, there are probably close to a hundred or so icons in various applications visible on my desktop. If all these icons were wiggling and dancing, distracting me in my peripheral vision, it would be infuriating. I already had to disable animation in Slack due to the constant barrage of animated emojis. Let's not just do this because we can.

munk-a 7y ago
Even within the article there's already one that's questionable from an accessibility standpoint - the speeding train makes me a bit nauseous to look at and might present difficulties to users with balance or ocular disorders. Also, I can't agree with "Let's not just do this because we can." enough.
- nonbirithm 7y ago
  It's the same kind of distraction as autoplaying videos or picture-in-picture annoyances like YouTube's auto-minimizing window. The mechanism is the same. It's a thing moving in some part of the screen and being distracting, only in this case they provide even less value since they're nothing more than decorative doodads. There isn't even an argument that doodads like these can placed on websites in an attempt to monetize users, like ads, where all the debate about sustainable sources of revenue and the ethics of adblocking come into play. They serve no material purpose at all except to be distracting. Animations of any kind, even the ones that are finite in lifespan or simple page transitions, already annoy me greatly. If we lose this front, where random businesses start adding things like this only because the web platform has sufficiently advanced technologically to allow it, and a majority of users become desensitized into believing it is "cool" and shifting the the baseline of the web such that this majority now expects and might even want this kind of behavior, it would surely become another unnecessary annoyance. I feel like this has already happened with Metro/Flat design and the death of skeuomorphism (more or less), and also the overuse of animated GIFs in blogs. But there's nothing making it outright illegal, so I'm not sure what would stop them from doing so at this point. We can't exactly go back to Web 1.0 (nor should we) - that kind of design is opt-in now.
kevin_thibedeau 7y ago
You can do nice things with hover events without creating a distracting mess.
- jkoberg 7y ago
  Why? To tell the user where there mouse pointer is? Is that a problem? Or are you forcing people to scrub over every element on the screen to "discover" instead of it being visible to begin with? That's annoying as hell and people are probably missing things because you chose to hide them by default.
_JC_Denton 7y ago
Totally agreed. The author isn’t wrong about the workflow issues around svgs, but icons are not usually animated for good reason. The human eye is very sensitive to motion. It can be a fun thing to add to loading screens (the gusto pig, for example), but icons are designed to live on a page for a long time and only take our attention when we are actively looking for them. Motion is not good for this purpose.
- vbezhenar 7y ago
  What about progress overlay icon? It should be animated. Or something like downloading a file. If icon represents a work in progress, it's a good idea to make it animated. Of course animation must not distract too much.
mcv 7y ago
I'd like to think we learned from all the horrible animated gifs in the past.
downerending 7y ago
We could compromise and just allow blinking text. /s
- pbhjpbhj 7y ago
  [marquee] only allowing blink would supress my creativity [/marquee]!
Latty 7y ago
I agree there is a need to sell the need, and this page doesn't do a good job of doing that because while a looping animation is good for showing the animation, as you say, it isn't a good idea. I can see animations like these working for when a user interacts with something, as an alternative to just highlighting or doing a material style ripple. The problem is that most of the time I'd want that, I'd also want to transition between two states, which—unless I'm missing it—isn't something this offers.
throw0101a 7y ago
> I, for one, don't want this. At all. After all, we only got rid of animated GIFs not too long ago. [under-construction.gif]
willis936 7y ago
The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.
- Mirioron 7y ago
  And "low resolution" SVGs will look bad in the future too. It won't be as graphically apparent, but they will look barren and odd, because there's no detail as they were designed with a lower resolution in mind.
  - willis936 7y ago
    The detail level is a design choice. Even though you could have immensely intricate SVGs, you expect some graphics to take up a small portion of your view. Unfortunately the screens are the only things getting better over time, not the eyes.
  - chrisweekly 7y ago
    Could you clarify what you mean by "low resolution" SVG?
    - frosted-flakes 7y ago
      Icons designed to be small have less detail and often rely more on the general shape, sometimes exaggerating certain features of the icon to make them stand out. Large icons or images can be filled with lots of rich detail. Scaling up a small icon often makes it look barren and generally out of proportion, and scaling down large, highly detailed icons/images makes the icon "noisy" and loses the essence of the icon. This does not only apply to vector icons, by the way. Most highly polished icon sets will have an icon for different sizes. For example, in Windows, zoom the desktop icons in/out and compare.
outworlder 7y ago
They don't have to be animating all the time. However, animations can convey events better than alternatives (popups and the like).
jeroenhd 7y ago
I think they can add value as a response to user action. No a repeating animations, but a short animation upon validating data or handling interaction. I would be the first to find a way to disable these if they'd start autoplaying on every website I visit though. An animated green check mark when showing a popup confirming that an action has succeeded, an animated red cross when showing an error, wheels of a car icon rolling when hovering over the car option in the menu, those kinds of animations can all aid design by showing the user that the site or application is responding to user feedback. It makes the user flow just a tiny bit more interactive and polished without being too distracted. After all, if there's a popup, the intention is to direct the attention of the viewer to that spot already. Same with a menu icon. That said, the animations shouldn't be too fast. Some examples, like the moving train, are way too fast to be comfortable to use in my opinion. Proper pacing is important.
b0rsuk 7y ago
Wouldn't you love icons that animate on hover? That's when your attention is turned to the icon anyway, often waiting for the tooltip to pop up.

by carlg 7y ago

munk-a 7y ago

Even within the article there's already one that's questionable from an accessibility standpoint - the speeding train makes me a bit nauseous to look at and might present difficulties to users with balance or ocular disorders. Also, I can't agree with "Let's not just do this because we can." enough.

nonbirithm 7y ago
It's the same kind of distraction as autoplaying videos or picture-in-picture annoyances like YouTube's auto-minimizing window. The mechanism is the same. It's a thing moving in some part of the screen and being distracting, only in this case they provide even less value since they're nothing more than decorative doodads. There isn't even an argument that doodads like these can placed on websites in an attempt to monetize users, like ads, where all the debate about sustainable sources of revenue and the ethics of adblocking come into play. They serve no material purpose at all except to be distracting. Animations of any kind, even the ones that are finite in lifespan or simple page transitions, already annoy me greatly. If we lose this front, where random businesses start adding things like this only because the web platform has sufficiently advanced technologically to allow it, and a majority of users become desensitized into believing it is "cool" and shifting the the baseline of the web such that this majority now expects and might even want this kind of behavior, it would surely become another unnecessary annoyance. I feel like this has already happened with Metro/Flat design and the death of skeuomorphism (more or less), and also the overuse of animated GIFs in blogs. But there's nothing making it outright illegal, so I'm not sure what would stop them from doing so at this point. We can't exactly go back to Web 1.0 (nor should we) - that kind of design is opt-in now.

kevin_thibedeau 7y ago

You can do nice things with hover events without creating a distracting mess.

jkoberg 7y ago
Why? To tell the user where there mouse pointer is? Is that a problem? Or are you forcing people to scrub over every element on the screen to "discover" instead of it being visible to begin with? That's annoying as hell and people are probably missing things because you chose to hide them by default.

_JC_Denton 7y ago

Totally agreed. The author isn’t wrong about the workflow issues around svgs, but icons are not usually animated for good reason. The human eye is very sensitive to motion. It can be a fun thing to add to loading screens (the gusto pig, for example), but icons are designed to live on a page for a long time and only take our attention when we are actively looking for them. Motion is not good for this purpose.

vbezhenar 7y ago
What about progress overlay icon? It should be animated. Or something like downloading a file. If icon represents a work in progress, it's a good idea to make it animated. Of course animation must not distract too much.

mcv 7y ago

I'd like to think we learned from all the horrible animated gifs in the past.

downerending 7y ago

We could compromise and just allow blinking text. /s

pbhjpbhj 7y ago
[marquee] only allowing blink would supress my creativity [/marquee]!

Latty 7y ago

I agree there is a need to sell the need, and this page doesn't do a good job of doing that because while a looping animation is good for showing the animation, as you say, it isn't a good idea. I can see animations like these working for when a user interacts with something, as an alternative to just highlighting or doing a material style ripple. The problem is that most of the time I'd want that, I'd also want to transition between two states, which—unless I'm missing it—isn't something this offers.

throw0101a 7y ago

> I, for one, don't want this. At all. After all, we only got rid of animated GIFs not too long ago. [under-construction.gif]

willis936 7y ago

The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.

Mirioron 7y ago
And "low resolution" SVGs will look bad in the future too. It won't be as graphically apparent, but they will look barren and odd, because there's no detail as they were designed with a lower resolution in mind.
- willis936 7y ago
  The detail level is a design choice. Even though you could have immensely intricate SVGs, you expect some graphics to take up a small portion of your view. Unfortunately the screens are the only things getting better over time, not the eyes.
- chrisweekly 7y ago
  Could you clarify what you mean by "low resolution" SVG?
  - frosted-flakes 7y ago
    Icons designed to be small have less detail and often rely more on the general shape, sometimes exaggerating certain features of the icon to make them stand out. Large icons or images can be filled with lots of rich detail. Scaling up a small icon often makes it look barren and generally out of proportion, and scaling down large, highly detailed icons/images makes the icon "noisy" and loses the essence of the icon. This does not only apply to vector icons, by the way. Most highly polished icon sets will have an icon for different sizes. For example, in Windows, zoom the desktop icons in/out and compare.

outworlder 7y ago

They don't have to be animating all the time. However, animations can convey events better than alternatives (popups and the like).

jeroenhd 7y ago

I think they can add value as a response to user action. No a repeating animations, but a short animation upon validating data or handling interaction. I would be the first to find a way to disable these if they'd start autoplaying on every website I visit though. An animated green check mark when showing a popup confirming that an action has succeeded, an animated red cross when showing an error, wheels of a car icon rolling when hovering over the car option in the menu, those kinds of animations can all aid design by showing the user that the site or application is responding to user feedback. It makes the user flow just a tiny bit more interactive and polished without being too distracted. After all, if there's a popup, the intention is to direct the attention of the viewer to that spot already. Same with a menu icon. That said, the animations shouldn't be too fast. Some examples, like the moving train, are way too fast to be comfortable to use in my opinion. Proper pacing is important.

b0rsuk 7y ago

Wouldn't you love icons that animate on hover? That's when your attention is turned to the icon anyway, often waiting for the tooltip to pop up.