Live data from Hacker News

Animated Vector Icons

livicons.com

41–50 of 58 posts

Re: Animated Vector Icons

#41

A little bit of movement can be nice, but this is really overdoing it on almost every icon. The animations here go so fast, it's only distracting you from the main message of the button/CTA/promo. Less is more.

It's a sampler site. The gratuitous emphasis is intentional.

What you take away from it is what is important. What would you improve in your design if you were able to add the perception of motion? How would engaging that human capacity make your product better?

Re: Animated Vector Icons

#42
Do they affect page performance / drain battery faster?

I'd like to see some comparison between static and animated icons, but not sure how to profile it. Measure FPS, or cpu time for rendering a page, perhaps?

Re: Animated Vector Icons

#43
post #2

I feel like some of the icons (PayPal and WordPress in particular) are animated for the sake of being animated. overall, I feel that making every little button wiggle when I mouse over it would be distracting rather than helpful. I can't see myself using these.

Might be better to just animate them on click. Hover animations/color changes had some use for links, but a button shape already conveys "clickability". On the other hand, animating on click gives a nice feedback (how many times have I clicked a slow-responding link and wondered if I really did).

Re: Animated Vector Icons

#45

I've been mulling over these kind of animated icons after seeing the little weather icons on http://forcast.io . Seems like it would be extra neat to make this a webfont somehow (swapping out 'frames' of font-data under the font name alias). However pretty unnecessary, considering the LiveIcon perks of using data attributes to specify loops, etc.

The usage of these kinds of icons on forcast.io is brilliant though. I want to see the weather, it moves a little. I mean the only problem with animated icons/buttons like this is that if they get back in style, it essentially opens pandorras box. They make good web design better if used sparingly, yes, but they'll also make bad web design worse. A lot worse. Spinning visual tumor worse.

Re: Animated Vector Icons

#46
post #11
post #9

This is the Geocities of vector art. I don't see this as a good thing, I see this as a poor compensation for bad interface design. If your icon needs animation for it to make sense to your visitor you're doing it wrong.

That seems like a generalization. Surely there are instances where animation is appropriate for an interface. What's so wrong with another tool to achieve that goal with the added benefit of being entirely scaleable?

Surely there are instances where animation is appropriate for an interface.

Not surely.

Re: Animated Vector Icons

#47
An animated icon only makes sense when it represents the progress of a 'long running' command, such as reload or send. In this case it affords recognition that something is happening. Anywhere else this is a terrible ui decision.

Re: Animated Vector Icons

#48
post #11

Earlier quoted context omitted.

That seems like a generalization. Surely there are instances where animation is appropriate for an interface. What's so wrong with another tool to achieve that goal with the added benefit of being entirely scaleable?

Surely there are instances where animation is appropriate for an interface. Not surely.

Why not? Say someone is designing a weather app where they want to show active snowfall - an animated vector icon showing falling snow communicates that perfectly.

Re: Animated Vector Icons

#49
post #11

Earlier quoted context omitted.

That seems like a generalization. Surely there are instances where animation is appropriate for an interface. What's so wrong with another tool to achieve that goal with the added benefit of being entirely scaleable?

Surely there are instances where animation is appropriate for an interface. Not surely.

Drag and drop. When I drag an icon to a location and I miss, I think it's better to see the item animate back to it's original location rather than just disappear and "pop" back.

Having it animate back is just better communication for that particular interface.

You can see this on Google Chromes new tab "Most Visited" page, drag an item and let it go on nothing, it will animate back to its position.

Then there's sorting, it's much better (to me) when the interface animates to show you what the effect of moving one item to a new location will have on the rest of the items in that list, you can see this effect on sites like Trello when you drag around cards, etc.

I'm sure there are more examples of good uses of animation in interfaces.

Post reply on HN