A few months ago this article “7 Ways to Delight Users with Animation” must have popped up on one of my feeds, and, being the opinionated systems person I am (and one who has been enraged by obnoxious and intrusive web “design” choices), I opted to voice my objection to the over-zealous application of animation left right and centre.
This morning, a well-meaning chap responded to my comment by pointing out areas where he felt animation had been well applied.
“Engaged with” as I was, I decided I just had to post a reply.
Of course disqus, the embedded comment system, has its own design flaws – in trying to copy out the text from my original post (in-quote in the responder’s message), I found it was not possible to use a selection cursors on my text – only on the text below it – and trying to select up made completely unrelated parts of the page become selected too.
So my point firmly stands: “Stop being bloody fancy, and start being bloody useful,” should be the first and foremost concern. To adapt a key policy of Linus Torvalds’ : Don’t break the user’s interaction choice. If you are preventing the user from interacting with the content in a way they would choose to, you had better have a damn good reason.
My original comment:
You mean, how to INFURIATE users who want to find their relevant content in peace? Maybe I’m old hat, but instead of making sites surperfluously cute, why not focus on making them performant, efficient, and informative?
Allan CrunchyFlesh King wrote:
I feel like MailChimp is likely the best example of why you’re wrong. Animations are just great, done right they help user experiance what in tern helps to inform. Performance itself is not only how fast your site is but the perception that your site is fast. A great example of this is Facebook. As posts load in Facebook use a ghost UI to inform users there’s something loading and add subtle animation to indicate progress.
Animations can help to remove risk, reassure users and can provide feedback to remove uncertainty from UX. It’s unnecessary to be this cut and dry, this is a great article that clearly outlines some good use cases for animation.
My response was
I’ll agree that discreet, minor animation used for UI cues to improve readability and navigability are good yes. The careful use of fade-ins/slide-ins to indicate change are a great way to use such animation.
However. The article has nothing to do with efficiency and usability. It’s about marketing and advertising. Two areas of the web that make site a bloody mess.
The advice in this article seems to aim at creators of frontpages (“engaging with your product”), and blog/mail content; but in reality are only suited to trying to navigate the user around the place, instead of letting the user navigate to the information they were trying to attain. When they say “engage the user,” I can clearly see “pull the user to the next article, to the paid ad, to buy buy buy.” Attempts to corall and control the user through their experience (which, in essence, many of the artcles’ points are advocating) just sound like terrible, terrible advice.
Also, do you remember Clippy? Trying to read a document or type something with that smug little pixelpedant in the corner waving and bouncing and going “it looks like you are trying to type a letter can I invade your personal space and add an extra line for you??” was TERRIBLE.
Sticking to the article’s bold points:
“Engaging and entertaining.” — what about “Purposeful and unobtrusive”? Let the content be engaging, get that interface out of the way.
“Baking emotion in design” == “Distracting the user.” Do you have a good layout and good content? Good. Stop there. Keep those animations out of the way.
“1. Keep users interested during loading” , or, just load already. “The page is slow loading the advertising engines and tracker code, let’s add more JS and assets to keep the user busy.” Great idea, amirite?
“2. Make a great first impression” — animations, whizzbangs and shopfront screens make a terrible, terrible first impression. A good layout and the right image in the right place are fantastic. A virtual town-crier-cum-jester in your face is not the “engagement” experience I’d want.
“3. Make your interfaces feel more alive” — the wording is open to interpretation, but I’d rather the interface were “usable” and “responsive”, not “alive” and chummy.
“4. Incorporate emotional interactions” — I’d rather my interactions with my pixels be patient and streamlined. When activated, my emotional interactions tend to be “annoyance”, “frustration”, “anger”, and “rage” in quick succession; most often my experience of this has always been along the lines of “why won’t you flappin let me select this piece of text damn it, and no do not override my choice of opening the damn link in a new tab FFS !!”.
“5. Help user recover from unexpected errors” — more generally, make a design-conscious error page, don’t leave the user with a mere data dump. That being said, layout and style are amply sufficient, animation is hardly necessary.
“6. Make a complex task feel easier” — can you really make a case for “animation” being a relevant choice here? Yes, I can see how it makes for a “more modern feeling interface”, but hopefully the webdev doesn’t go overboard, see point #4. If your animations need to make up for your layout and workflow design, you’re doing it wrong.
“7. Breathe fun into the interactions // People love to discover treats in interfaces just as they do in real life.” — except when they don’t, which is the case for most informational sites and product sites. When I’m looking for something, I would rather just be able to get to it and manage my use of the web page in peace, not waste my time wishing I could axe-murder the little pixies trying to take my attention away from my task.