Hacker News new | past | comments | ask | show | jobs | submit login

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 interface/page icons to be animated constantly, because it's always distracting and never good.

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.

So I just don't see any use case at all.

(Extra note #1: motion itself can be helpful in UX -- e.g. an icon expanding in size to a card, a card sliding off, etc. -- but none of that involves animated icons.)

(Extra note #2: except for gaming interfaces which are all about sensory excess -- shadows! sounds! animated icons! pop-out effects! -- but those tend to be based on other technology workflows anyways.)




Please keep the animated SVG's away!

Yes. Now, from the people who brought you the <blink> 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 be useful to have an animation which shows money flying out of your wallet and disappearing. (But Marketing will never go for that.) It would be good to have feedback like that for buttons which do nothing to the display and keep you on the same page, but have some external effect.

(Remember "material design?" Whatever happened to that?)


> (Remember "material design?" Whatever happened to that?)

The new hotness is "neumorphism": https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf...


Not sure I need blurry glow everywhere, but anything that re-convinces designers that interactive things should be distinguishable from non-interactive things would be a step up.


Damn, I like the way that looks. I get why it's catching on! I think this could quickly go from "really awesome" to "super awful" pretty quickly if you didn't have a professional designer working on it, though. Overcrowding seems like it would be worse in this style than in others we've seen get popular over the years.


It seems to look a lot like win 95 to me, but rounded and blurred edges! (NW is lighter add SE is darker, & inverted logic when it's depressed)

I recall a comment in some other HN thread the other day about how win 95 was the pinnacle of ux progression and how nothing seems to have really progressed since.

I totally agree that it looks good, & could go crazy wrong, very easily.


> & could go crazy wrong, very easily

The introductory post itself shows how easy it is to still mix up cards and buttons in this new style.


Windows 95 had hard bevelled edges. Neumorphism has the opposite.


Reminds me of the emboss layer effects in really old (and probably new) versions of Photoshop



I'm not looking forward to this excessive padded future.


Finally, a step away from flat design. At this rate, maybe in ten years we'll move on to a normal healthy relationship with skeumorpic inspired interface elements again.


> Remember "material design?" Whatever happened to that?

You're going to love this.

https://material.io/design/iconography/animated-icons.html


I don't know, this is providing a visual feedback that an action was completed, which is much better than the previous material-favorite of expanding circles of slightly-darkened color. I know in my password manager app the button is so small and the animation so fast that by the time my finger is up off the copy password button I'm not sure if anything has happened (thankfully they recently added a toast to prevent this issue).


By and large this seems absolutely useless to me. Sure it looks nice and more "polished" but it doesn't serve any purpose. There plenty of better ways to signal transitions and clicks rather than flaky button animations.


Ugh. These do not "delight" me whatsoever.


> Now, from the people who brought you the <blink> tag,

1,000% agree.

I remember a co-worker who worked tirelessly for about 14 months on a freelance site for a local public school. I got a text from her shortly after they had released the site, it was a simple one line text:

"14 back breaking months of work and compromising to get a good design, and they destroyed it all within an hour of releasing the site." with a link to the site; which had a huge blinking text at the bottom of the site pointing users to their new interactive calendar.


> In fact I can't think of a single good design reason to ever animate an icon

I can think of a few cases where animated icons make sense.

1. Control feedback. If your icon deforms slightly under your mouse when you click, it provides extra feedback indicating that your action was registered.

2. Notifications. As you, yourself said, motion catches attention. So animated icons would serve well for any kind of event notification. New message or event, action completion etc.

3. Progress indication. An icon for something that takes a long time, like a file download, could be animated to indicate that the process is still ongoing.

I am sure there are other examples.


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.

* Where the animation is useful in explaining something, for example, an explanation of balancing trees.

We shouldn't use them on:

* Static "non-app" information pages / landing pages etc.

* As a button icon pre-action. E.g. the word SUBMIT sliding from side to side would be annoying!


> * Confirmation of a user action

Also making the UI more live by doing a small animation on hover (or focus change) for those of us who still use mice and keyboards.

This helps distinguish clickable/interactive elements from static ones, and helps with discoverability.

Highlighting a row/column heading in a table under the cursor, or a border around a clickable element, etc goes a mile towards making the UI snappy, responsive, and human.


For that, you shouldn't disguise interactive elements as static ones. To begin with ;)


https://stripe.com has a lot of animations in their landing page, just fyi


I like them. They are quite subtle.


agree, i think as long as not everything in the page is moving like crazy, these little animations still looks good


I agree, although otoh we’ve seen a ton of gratuitous motion all over mobile/desktop/web UIs which is totally irrelevant.

Hopefully this trend will pass much like the Photoshop layer effects (bevel emboss, drop shadow, etc) which were everywhere in the late 90s early 00s.


> We shouldn't use them on:

I’m thinking back to my school days, where my fellow students had non-tiling animated gifs as the background image of their Geocities accounts.


Yes I should have said: art, generative art and retro-nostalgia sites are excepted.


My most hated example of gratuitously distracting page decoration is the wriggling jizz scribbles on https://theoutline.com

The worst part is that you can’t get rid the incontinent piss dribbles by whacking the reader mode icon, because the shithead web developers load the whole magazine into one page so reader mode only shows the first article.

The developers of that site deserve to have their faces rubbed in my analogies, assuming that isn’t the kind of thing that gets them off.


> The worst part is that you can’t get rid the incontinent piss dribbles by whacking the reader mode icon

Eh, they don't animate in Firefox, so, a simple solution presents itself. :)


They certainly do, for me anyway. In my cranky old Firefox.


Oh cool, a faux-Flash site


> 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 that this is something you want to click. I think some people take animations too far but when used properly, they can be very effective.

I think we should encourage the right kind of animations more than discouraging animating at all. Especially with SVGs, they are more optimized and that's the right way to go about animating something on the web (not a gif that is like 1.5MB).


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.


There are whole worlds of use-cases outside the very restricted design paradigm you're describing.


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.


I can think of a small set of cases where animations are useful. Icons, not directly being acted on are NOT those. Wholehearted agreement with you.

Among the exceptions:

- Sensory feedback. A hue/shade change on hover, and on click, can be useful. For action commands (as @Animats describes) some indication of the action performed can be useful.

- Pending / in-process actions. If you've kicked off something that takes more than a second or so to complete, then a subtle animation indicating activity can be useful. "Loading" animations fall under this. Though a first consideration should be to not require pending actions.

- Highlighting associated context, especially in help / support scenarios. If you're describing an icon, then, yes, go ahead and have it animate then and only then as a finding aid.

- Data visualisations. No, not icons, but presentations showing some level of change that can be represented as in time. Here, SVGs can be useful (though also abused). Interactive charts, animations, etc., when directly engaged with (animate-on-hover is a CSS hack I've long applied to GIFs, though that's achieved by rendering all GIFs tansparent unless hovered).

But the whole notion that icons should sit spinning on your page when you're doing nothing with them? Nope nope nope nope NOPE!!!

If sites start doing that routinely, I'll simply block SVGs on them. Breakage be damned.

(TFA itself was virtually unreadable for me for just this reason.)


> Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal.

In the attention economy, that is almost always the goal.


A use case I can think of is weather icons. Carefully designed icons on maps can help convey the difference between a shower and a heavy rain for instance.


How about dynamic timeseries graphs, like grafana?


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'm cautious, and animation will almost certainly make icons worse before it makes them better, but I can see potential improvement, and I'll always err on the side of expanding toolsets.


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


Sure, and colour television made TV worse for the colourblind.

The mere fact that something is worse for some people isn't a sufficient argument. The fact that they haven't removed it entirely suggests that it nevertheless creates a net improvement in customer opinion.

Also I reject your swipe - aesthetics is a valid goal. Functionality is not the only measure of a system.


Regarding your extra note #1: even here, I think animation should be avoided like the plague. Animation to indicate the connection between UI elements is a design crutch which adds latency and makes for a sluggish experience for experienced users.


Counterexample: games. From slowly brewing health indicator in Diablo to shiny coin icons, animations are another one of told that can drive immersion.

But I completely agree with you in regards with websites and productivity apps, of course.


Can't you control how many times something animates for with CSS? I don't think I've come across a site where there's infinitely looped animated SVGs or been heavily distracted by them.


Was going to argue your points but saw your extra note #2.

This could be very useful for game development especially with the popularity of PWA.


[flagged]


Great to see ageism is alive and well in our industry. You'll get old some day too.


I see a use case: ads.

I develop ads for a living. A tool like motion is a GODSEND in this industry.


People who work on making ads more attention-grabbing are actively working on making the world worse.


Problem is, the more intrusive an ad, the more likely it is to get blocked. Google is a pretty big player in the ad industry, and their ads are far from distracting.

"animated SVG blocker" seems like a very easy plugin to develop.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: