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?)
The new hotness is "neumorphism": https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf...
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.
The introductory post itself shows how easy it is to still mix up cards and buttons in this new style.
You're going to love this.
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.
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.
* 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!
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.
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.
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.
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.
Eh, they don't animate in Firefox, so, a simple solution presents itself. :)
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).
And the constant flashing of colors and backgrounds all over the page as you move the mouse is extremely distracting.
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.)
In the attention economy, that is almost always the goal.
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.
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.
But I completely agree with you in regards with websites and productivity apps, of course.
This could be very useful for game development especially with the popularity of PWA.
I develop ads for a living. A tool like motion is a GODSEND in this industry.
"animated SVG blocker" seems like a very easy plugin to develop.
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.)