5 ms·

I have no horse in the SVG vs. CSS race, but: Web designers, please, do not think that all the super-annoying gimmicky animations (rippling text inputs, wiggly

by tbabb 10y ago

I have no horse in the SVG vs. CSS race, but: Web designers, please, do not think that all the super-annoying gimmicky animations (rippling text inputs, wiggly text, excessively stretch-and-squashing motion) are a positive for user experience. It might be fine for showing technical flexibility, but they do not add to interaction; they are distracting, slow down responsiveness, and worse, are non-standard and unexpected. I hope this kind of stuff doesn't catch on.

kirse 10y ago
all the super-annoying gimmicky animations (rippling text inputs, wiggly text, excessively stretch-and-squashing motion) I like to call this trend "Flanders Computing" -- where developers and designers increasingly create obnoxiously friendly websites and apps that treat you as if they're your diddly-doodly buddy-ol-pal. A recent Windows 10 install told me "We're happy you're here!" Who exactly is "we" and why are they trying to be all buddy-buddy so soon? I assume the market research told them that this was the best start screen, but good grief is all the wiggly-wobbly buddy-ol-pal stuff so friggin annoying. It's like forced intimacy that can't be reciprocated, which feels weird.
- hroi 10y ago
  AKA Genuine People Personalities as predicted in Hitchhiker's Guide.
- andai 10y ago
  http://webcomicname.tumblr.com/post/154211839894 http://webcomicname.tumblr.com/post/154211839894
- cha-cho 10y ago
  This needs to develop into a grading system. A "Flanders Threshold" or something.
  - Silhouette 10y ago
    Hey cha-cho, thanks for reaching out. Love your idea for the Flanders Threshold. Hit me up any time at john@cheesierthanaripecamembert.com and tell me what you need. I'll be more than happy to help. Looking forward to making magic with you on the Flanders Threshold, cha-cho! Best, John CEO/Sales/Customer Support* Cheesier Than A Ripe Camembert, Inc. (Every time I get a mail like this from some trendy tech firm, I die a little inside, but somewhere in the past year or two I think they all read the same book and now they're all doing it.)
- endgame 10y ago
  Similarly, when I sign into slack at work, I am presented with silly little messages from my "friends at slack". Why is the empty set writing me messages? The people who work on slack are probably nice, but I don't use the "friend" label on people who I've never met.
  - 91bananas 10y ago
    You can configure those messages. We've set them to be hilarious things our team has said over our time together. I rather enjoy it.
- endless1234 10y ago
  Re: Windows 10, it scared me so much the first time after a bigger update with the "Hi / We've updated your computer" type splash screen. "FUCK did it just reformat everything??"
  - SwellJoe 10y ago
    "Hi, we've updated your computer. Pray we do not update it any further." I also experienced that moment of "oh shit!". I've rarely used Windows in my life, but when I have, when Windows blanks the display and pops up something like that and isn't booting, it's historically something scary.
  - aninhumer 10y ago
    Not to mention "Don't worry, everything is where you left it" which I've had a few times when booting up. And the slow fade in makes it even creepier.
    - jandrese 10y ago
      Yeah, that message made me nervous. "We didn't touch your stuff...this time."
alexbecker 10y ago
Please this. Between JS/image/font bloat and CSS animations/transitions, the web keeps feeling slower every year.
prawn 10y ago
I have clients who demand things like this and can't be talked out of it. It is quite depressing how often a half-decent site gets wrecked by a stubborn client.
seanwilson 10y ago
I'm not a fan of the ripple animation in Material Design when you click...it's way too distracting for such a common interaction in my opinion.
- alexbecker 10y ago
  Not to mention it's incredibly expensive, since it's neither SVG nor CSS. On Firefox in a large webapp it will peg a core at 100% for several hundred ms, because it modifies the DOM to add "waves" and then resizes them on every animation frame.
jordache 10y ago
As a front end developer with practical sentiments when approaching a solution, this was the first thing that came to mind. This presentation was entirely unconvincing in the useless examples that do not highlight practical benefits of svg over css. It does nothing to dispel the obscure nature of svg relative to css.
yoz-y 10y ago
Many of animations are superfluous, but those that indicate state changes and especially spatial changes are useful. I think that some of the stretching-squashing motions can be pretty good. Especially on mobile, animation can give answers to two questions: how did I get here, and, how do I get back again
- majewsky 10y ago
  I don't know. All these examples from the OP with bouncy animations are much too busy for me, and make the application/website feel childish. I think Google's Material Design strikes a good balance regarding use of animations. They sometimes have very elaborate animations, but usually in very small areas where the animation becomes an easteregg rather than an annoyance. (For example, how the hamburger menu icon transforms into the back-arrow and vice versa. Or, on the Android notification panel, how the cogwheel rolls away as it fades out. That's cute.)

by tbabb 10y ago

kirse 10y ago

all the super-annoying gimmicky animations (rippling text inputs, wiggly text, excessively stretch-and-squashing motion) I like to call this trend "Flanders Computing" -- where developers and designers increasingly create obnoxiously friendly websites and apps that treat you as if they're your diddly-doodly buddy-ol-pal. A recent Windows 10 install told me "We're happy you're here!" Who exactly is "we" and why are they trying to be all buddy-buddy so soon? I assume the market research told them that this was the best start screen, but good grief is all the wiggly-wobbly buddy-ol-pal stuff so friggin annoying. It's like forced intimacy that can't be reciprocated, which feels weird.

hroi 10y ago
AKA Genuine People Personalities as predicted in Hitchhiker's Guide.
andai 10y ago
http://webcomicname.tumblr.com/post/154211839894 http://webcomicname.tumblr.com/post/154211839894
cha-cho 10y ago
This needs to develop into a grading system. A "Flanders Threshold" or something.
- Silhouette 10y ago
  Hey cha-cho, thanks for reaching out. Love your idea for the Flanders Threshold. Hit me up any time at john@cheesierthanaripecamembert.com and tell me what you need. I'll be more than happy to help. Looking forward to making magic with you on the Flanders Threshold, cha-cho! Best, John CEO/Sales/Customer Support* Cheesier Than A Ripe Camembert, Inc. (Every time I get a mail like this from some trendy tech firm, I die a little inside, but somewhere in the past year or two I think they all read the same book and now they're all doing it.)
endgame 10y ago
Similarly, when I sign into slack at work, I am presented with silly little messages from my "friends at slack". Why is the empty set writing me messages? The people who work on slack are probably nice, but I don't use the "friend" label on people who I've never met.
- 91bananas 10y ago
  You can configure those messages. We've set them to be hilarious things our team has said over our time together. I rather enjoy it.
endless1234 10y ago
Re: Windows 10, it scared me so much the first time after a bigger update with the "Hi / We've updated your computer" type splash screen. "FUCK did it just reformat everything??"
- SwellJoe 10y ago
  "Hi, we've updated your computer. Pray we do not update it any further." I also experienced that moment of "oh shit!". I've rarely used Windows in my life, but when I have, when Windows blanks the display and pops up something like that and isn't booting, it's historically something scary.
- aninhumer 10y ago
  Not to mention "Don't worry, everything is where you left it" which I've had a few times when booting up. And the slow fade in makes it even creepier.
  - jandrese 10y ago
    Yeah, that message made me nervous. "We didn't touch your stuff...this time."

alexbecker 10y ago

Please this. Between JS/image/font bloat and CSS animations/transitions, the web keeps feeling slower every year.

prawn 10y ago

I have clients who demand things like this and can't be talked out of it. It is quite depressing how often a half-decent site gets wrecked by a stubborn client.

seanwilson 10y ago

I'm not a fan of the ripple animation in Material Design when you click...it's way too distracting for such a common interaction in my opinion.

alexbecker 10y ago
Not to mention it's incredibly expensive, since it's neither SVG nor CSS. On Firefox in a large webapp it will peg a core at 100% for several hundred ms, because it modifies the DOM to add "waves" and then resizes them on every animation frame.

jordache 10y ago

As a front end developer with practical sentiments when approaching a solution, this was the first thing that came to mind. This presentation was entirely unconvincing in the useless examples that do not highlight practical benefits of svg over css. It does nothing to dispel the obscure nature of svg relative to css.

yoz-y 10y ago

Many of animations are superfluous, but those that indicate state changes and especially spatial changes are useful. I think that some of the stretching-squashing motions can be pretty good. Especially on mobile, animation can give answers to two questions: how did I get here, and, how do I get back again

majewsky 10y ago
I don't know. All these examples from the OP with bouncy animations are much too busy for me, and make the application/website feel childish. I think Google's Material Design strikes a good balance regarding use of animations. They sometimes have very elaborate animations, but usually in very small areas where the animation becomes an easteregg rather than an annoyance. (For example, how the hamburger menu icon transforms into the back-arrow and vice versa. Or, on the Android notification panel, how the cogwheel rolls away as it fades out. That's cute.)