Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Where are all the animated SVGs?

getmotion.io

Post reply on HN
Print view View original

181–190 of 200 posts

Re: Where are all the animated SVGs?

#181

Post by jkoberg »

Igelau wrote: post #109
Animats wrote: post #64

Earlier quoted context omitted.

Please keep the animated SVG's away! Yes. Now, from the people who brought you the tag, continuous junky animations. You can also do spinning logos in WebGL, but you shouldn't. The only legit use for this is when you want clicking on a button to indicate that something happened. If you click on a "send" button, and an envelope zips across the screen and disappears, it's OK. If you click on the "Buy" button, it would…

> Remember "material design?" Whatever happened to that? You're going to love this. https://material.io/design/iconography/animated-icons.html

Ugh. These do not "delight" me whatsoever.

Re: Where are all the animated SVGs?

#182

Post by jkoberg »

mc3 wrote: post #62
crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

I agree but with the cavaet that animated SVGs can be good for some special cases: * Loading indicator - from a UX perspective we are used to this so having a non-animated loading is weird. I think gmail used to do it but that was back in the mid 2000s. * Confirmation of a user action - if I have sent an email then a sound and/or animation can feel good. It is not necessary but sort of adds a magic to the application…

> sort of adds a magic to the application.

I call that design masturbation. Where a designer goes into a room alone and "pleases themselves"

Re: Where are all the animated SVGs?

#183

Post by jkoberg »

augbog wrote: post #151
crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

> What about intermittently, like hover states? Still no, because a hover state exists to give confirmation that you've mousedowned on a clickable area -- so the hover needs to be an area-wide confirmation (like changing the button color). Animating an icon instead is too confusing, and animating it on top of a color change is too redundant and noisy. I disagree with this. It can be very effective at signaling users…

If people have to mouse over things to see what to click, you already failed. We call that "mystery meat"

And the constant flashing of colors and backgrounds all over the page as you move the mouse is extremely distracting.

Re: Where are all the animated SVGs?

#184

Post by jkoberg »

meerita wrote: post #104
crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

Animation for infographics or statistics are really useful. Not for UI, I agree on that.

I disagree. In no way does it add to the communication or understanding of the numbers. It just makes it take longer for them to appear.

Re: Where are all the animated SVGs?

#185

Post by jkoberg »

wyattpeak wrote: post #125
crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

A few years ago I would have agreed with you, but I've been very impressed with the subtly moving backgrounds on some Android phones (Samsung?), which attract little enough attention that it took me a few weeks to register it at all. I'm no longer convinced that movement is inherently distracting. I agree that I can't see a really compelling functional usecase here, but aesthetics is a worthy goal in its own right. I…

They had to add settings to turn that stuff off because it makes people woozy. "cute" design with no user goal has collateral damage.

Re: Where are all the animated SVGs?

#186

Post by jkoberg »

kevin_thibedeau wrote: post #6
carlg wrote: post #2

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.

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

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.

Re: Where are all the animated SVGs?

#187

Post by jkoberg »

sandGorgon wrote: post #147

You should try Airbnb Lottie - it converts Aftereffects graphics into formats that are extremely lightweight (some are 3-4 kb) and works on web/android/iOS. Has been used in production over hundreds of millions of devices

Have you used Airbnb's apps? They're the worst example of "design" over actual usability.

Re: Where are all the animated SVGs?

#188

Post by meerita »

jkoberg wrote: post #184
meerita wrote: post #104

Earlier quoted context omitted.

Animation for infographics or statistics are really useful. Not for UI, I agree on that.

I disagree. In no way does it add to the communication or understanding of the numbers. It just makes it take longer for them to appear.

You're not tied to appereances, you can animate transitions. Animations provide a valuable thing as feedback.

Re: Where are all the animated SVGs?

#190

Post by dekhn »

pier25 wrote: post #144
dekhn wrote: post #32

I've wanted to use the web as a replacement for PyQt (and tkinter, going all the way back to ~1995). It's really been amazing how badly the web tracks what is possible (and easy!) in a good GUI toolkit. Every 3-5 years I go back and try to find out what is the minimal way to get HTML + JS + CSS to produce something that would be easy in PyQt, while also being fairly principled, standardized, and maintainable. For exa…

Something like Pixi? https://www.pixijs.com/

yup.
Post reply on HN