Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I work alongside a client and another designer. We currently have menus that open via button taps. After tapping the buttons, the client and other designer have decided that said buttons should animate continually on-screen to show they have been activated.

I am of the opinion that this will draw the user's eye and perception of the next stage in flow to the button, and I think that highlighting the button by giving it a surround, or changing its colours to stand out, etc, would be subtler but far less intrusive and give the same information.

I am happy to be wrong in this case to benefit my UX learning, so are any of you aware of any precedent where an animation (bouncing like a loading MacOS app in this case) is used to show an activated element successfully?

share|improve this question
    
Would it animate while it is processing an action and then stop when that action is complete (such as "Now Saving.."), or would just the act of pressing it enable the animation that would then carry on indefinitely? - i.e. "Now in Edit Mode...") –  JonW Nov 12 '13 at 12:27
    
@JonW The OP says "perpetually", so the later. The answer should, of course, be "no". –  Danny Varod Nov 12 '13 at 12:46
    
It was (originally) designed to animate while loading and would stop afterwards. There was a bug where it kept animating afterwards, and the client latched onto this, thinking it looked cool. –  user38106 Nov 12 '13 at 13:01
    
@DannyVarod: I was really asking from a 'wishful thinking' point of view in-case I'd misinterpreted it. But no, unfortunately it looks like I was not mistaken - perpetual means perpetual! –  JonW Nov 12 '13 at 13:52
3  
@user38106 That's a funny explanation, too bad it's real. –  Danny Varod Nov 12 '13 at 13:56
show 1 more comment

3 Answers

Apple provides some good recommendations to developers regarding animation inside an interface. While this isn't necessarily directly related to website interface design, some of the basic principles still apply, and might be helpful in persuading your client to avoid going down the path of excessive animations.

"In general, avoid using animation as the focus of the user experience. Unless you’re developing a game in which animation plays a major role, you should use animation to subtly enhance the user experience. If you place too much focus on animation in your app, users are likely to become distracted from their task. The best animation helps users understand what’s going on, without drawing attention to itself."

"Avoid animating routine actions supported by system-provided controls. Users understand how common UI elements work, and they don’t appreciate being forced to spend extra time watching unnecessary animation every time they click a button or switch tabs."

"Avoid animating everything. Although it’s tempting to think that more animation results in great clarification and better feedback, it’s not generally true. Most tasks and actions in an app are best performed quickly and with a minimum of fanfare."

These quotes were taken from OS X Human Interface Guidelines. I would recommend reading the section "Clarify and Communicate with Subtle Animation" in this page as it has further recommendations which you could use to further persuade your client. Sometimes when clients won't listen to you, they'll listen to other big names. Unfortunate but true.

share|improve this answer
1  
+1 Good quote. On a side not, I wish all PowerPoint users had to read this before creating a presentation. –  Danny Varod Nov 12 '13 at 20:04
add comment

A brief animation of something which had its state change can be useful, as it helps the users notice the change even from their peripheral vision.

If the user has to click something to continue, then animating that, briefly, to indicate the user must pay attention to it to continue may make sense.

If something changed state once (and does not continue to change state over and over), then continuing its animation indefinitely makes no sense to me. It may distract the user from other things or annoy the user the way that animated adverts do.

share|improve this answer
add comment

You may wish to refer your peers to chapter 2 (What we can easily see) of Visual Thinking for Design, Ware 2008. Specifically to the section on motion. The book explains in depth the way our brain processes visuals with emphasis on lessons for effective and user-oriented visual design. The important bits:

  • Motion (such as blinks or animations) is extremely hard for the brain to ignore (exceptions such as tree leaves moved by the wind do not apply in graphic design).
  • Motion is unique in that it is next to equally discernible across the full visual field, unlike all other features which become increasingly indiscernible outwards the point of fixation.

To quote:

The web designer now has the ability to create web pages that crawl, jiggle, and flash. Unsurprisingly, because it is difficult for people to suppress the orienting response to motion, this has provoked a strong aversion among users to the web sites where these effects flourish. The gratuitous use of motion is one of the worst forms of visual pollution, but carefully applied motion can be a useful technique.

This further supports the popular recommendation that animations should be used sparingly, primarily to support key user or business goals. I wouldn't consider an activated button as such, in the same way I wouldn't a visited link.

You are to annoy users with this type of animation, forcing their attention to an element that serves little towards their goal. If I understand the proposal correctly, this is a clear cut don't.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.