3 ms·

Sorry in advance for being negative, it's not these particular buttons that are problematic, they're technically very nice, its animated icons/buttons/logos in

Sorry in advance for being negative, it's not these particular buttons that are problematic, they're technically very nice, its animated icons/buttons/logos in general that I think we should consider visually upsetting. Here is my reasoning: The genius of gradients and shadows in design is that they allow for objects to appear 3D, that is, they can visually "pop" off the flat page and therefore draw the users' attention to them. This is good unless every element on the page has shadows and gradients, then it becomes very pretty but very distracting. When I'm on a website, I'm not appreciating a colorful Monet, I'm trying to always do essentially one of two things: Find the right thing to click so that I no longer need to be on that website, or else read text. (or look at photos, etc.) Being a pretty site is a huge plus, but not if it distracts from one of those two goals. The genius of Flat UI that has recently (re-)exploded in popularity is not to draw attention to specific elements, but to ease the experience by doing the opposite: it un-distracts by removing all this popping stuff. And I love Flat UI for this. I can see clearly now, the bevel and embossed rain is gone. Alas these icons are about as distracting as you can get. Many of them resemble a flat UI style, but they've missed the point of Flat UI entirely. It's not that I dislike gradients, its that I don't want to be distracted in my journey to find the one button I need to click and then get off the page. I understand that they're examples of what you could do, but I do hope hey're something no site author would want to do. No user ever has had the thought, "Before I click a button, I really wish it would wabble back and forth." (And if I'm there to read text, I sure don't want anything animating while I'm reading!) ~~~ I don't mean to be totally harsh on animations. They can be useful when you need to create affordances. Buttons that highlight as you mouse-over them afford clicking, just like the visual of knobs (say on a car dash board) in real life afford turning. An icon that flies away as I hover over it, or significantly changes shape as I hover over it is probably not a good choice for nearly any button.

Cyranix 14y ago
That was the word I was completely unable to recall: affordance. Yes, that's exactly where you might find these icons useful. (We can agree to disagree on whether the content of the icons is whimsical or annoying.)
rinon 14y ago
These icons are perfect for just that, making the most important thing on the page pop. The usual way we see this is a "call to action" button, but I think these sort of high-quality SVG buttons with just a bit of movement may do the same job in a more subtle manner.
shurcooL 14y ago
I like flatt-er UI in general, but I don't like it when it goes so far out of its way that it removes all affordances. For instance, a button is easily recognizable by its shape. We all know they can be clicked. Some flat designs have buttons that look absolutely no different than a label. Worse yet, sometimes they don't even have hover effects. When the only way I can find out if something is clickable is by trying to press it, something's seriously wrong. When there are clickable things in my view that I don't realize are clickable until much much later, something's wrong. Go flat, but leave the affordances alone. There's a difference between throwing everything out that's not needed and throwing everything out.

Cyranix 14y ago

That was the word I was completely unable to recall: affordance. Yes, that's exactly where you might find these icons useful. (We can agree to disagree on whether the content of the icons is whimsical or annoying.)

rinon 14y ago

These icons are perfect for just that, making the most important thing on the page pop. The usual way we see this is a "call to action" button, but I think these sort of high-quality SVG buttons with just a bit of movement may do the same job in a more subtle manner.

shurcooL 14y ago

I like flatt-er UI in general, but I don't like it when it goes so far out of its way that it removes all affordances. For instance, a button is easily recognizable by its shape. We all know they can be clicked. Some flat designs have buttons that look absolutely no different than a label. Worse yet, sometimes they don't even have hover effects. When the only way I can find out if something is clickable is by trying to press it, something's seriously wrong. When there are clickable things in my view that I don't realize are clickable until much much later, something's wrong. Go flat, but leave the affordances alone. There's a difference between throwing everything out that's not needed and throwing everything out.