I'm responsible for the UI/UX in a software development company.

During my absence, some developers decided to implement a "bounce" effect on a button of a website that they think should have more visibility.

Basically you will see this button jumping every 10 seconds, drawing your attention. The button points to the help content of the software.

I am usually against intrusive and annoying animations, but I would like to know more about this topic. I personally think that this solution is very intrusive and distracting.

How should I deal with blinking, bouncing, rotating, and zooming effects? Are there best practices?

  • 1
    It depends so much in the context and what you want to achieve, that it is extremely difficult to just discuss about it. There is no right or wrong. Maybe the question should be more specific. Jan 9, 2012 at 16:56
  • You are right, it's not so easy to discuss about this topic. I just think that before using an animation (to draw attention) the developer should think about more simple solutions (work on positionig, contrast and proportions of the elements)
    – Rdpi
    Jan 9, 2012 at 16:59
  • 2
    <blink>This is a bad idea</blink>
    – Ben Brocka
    Jan 9, 2012 at 21:23
  • 1
    Movement, rotation, and zooming might have serious accessibility ramifications for your application. Users with vertigo, for example, might not handle it so well. Jan 10, 2012 at 1:52
  • 2
    "Users don't read instructions" - Steve Krug. I wouldn't even worry about the bouncing button pointing to the help section because the fundamental goal is already wrong.
    – JoJo
    Jan 10, 2012 at 7:18

6 Answers 6


In my book, all animations of control elements must be triggered only by user actions. For example, in large forms or full-screen workflows animations can be used as additional visual cues for the next step once something has been completed. If This Than That (ifttt.com) is a good example here - the page auto-scrolls to the next step when you click Next.

Random animations distract users from the current task and break their mental flow. This especially concerns elements that have no effect on the workflow of the task at hand (like the help button in your example).

  • Thank you for the answer. You shared some very useful thoughts.
    – Rdpi
    Jan 9, 2012 at 17:08
  • 2
    I totally agree. Jan 9, 2012 at 18:04
  • When a software needs my attention in both MacOs and Windows the system uses animation to get my attention and Im totally fine with it. But if a web site uses animation for a large portion of a page our banner blindness kicks in and we dont look at it. If the web site is more entertainment oriented animation could enhance the experience but if the visitor needs to solve problems the site should be more subtle. Jan 9, 2012 at 23:10
  • A little animation around the next button for a 'useless' screen or some unimportant step in a wizard would be acceptable following this logic.
    – Barfieldmv
    Jan 10, 2012 at 9:32
  • 1
    How exactly does my logic allow for animations on a "useless screen"? Any animation will distract the user.
    – dnbrv
    Jan 10, 2012 at 13:45

As JoJo said in the comments, there is something fundamentally wrong if you need to draw your users attention to a button that link to the help system. The fact that you have a prominent button - not just a link - to help pages is an indication of problems in the user experience, and the fact that someone feels it needs to be more prominent - jiggling like a teenager needing Ritalin - indicates that somewhere, something is critically broken.

In terms of the wider question, yes movement is a valid attention grabber - I did implement a winking button, to draw some attention to it, in one case. However the problem of banner blindness is crucial here - most regular web users assume that a jiggling button is an advert, and so do not click on it. And the same applies to a lot of "clever" animation techniques - they may be very good and appropriate, but the user expectation is that they must be advertising something.

IMO, where a valid and appropriate link to help - or rather, further relevant information to the task at hand - needs to be highlighted, using a different colour or size, or even changing the colour briefly is probably better suited to the purpose.


I mostly agree with dnbrv, but I think perhaps there is a place for un-triggered animation if the personality of the product is "alive", or frenetic and uncontrolled. You might have a next page button in an animated children's book that looks like it's breathing or twitching if it's appropriate to the scene, for instance, or maybe on a site for a kids' game show involving a lot of frantic movement and distraction. In those cases it may not distract from the mental flow because it's actually adding to the ambient character of the product. I almost certainly wouldn't put it on a help button, though, except maybe a small, subtle twitch if there's a good reason to think the user might be stuck and there are other aspects of the interface with personality--not once every 10 seconds.


At very least make it stop bouncing around after the user has clicked on it once. It gives users the chance to stop it if it is a distraction to them.

Although, I can't imagine anything in the help content being so important that you would need everyone to click on it. If there is something that everyone needs to read, why not just put it right on the page?

  • Yes, the user should be able to stop it, or he will end up being really annoyed by this eye-catcher trick...
    – Julien N
    Jan 11, 2012 at 17:47

It all depends. I can imagine scenario in which slightly bouncing button can be appropriate.

There are three basic psychological mechanisms that can help to draw attention to a specific UI element:

  • sudden movement
  • contrast
  • size

We're well aware of the last two... why not to use the first one in some cases?

Which one is right for your case? This is question for both qualitative and quantitative tests. I wouldn't reject it basing just on assumptions and stereotypes.


just to complement the above answers, animated UI elements can be discreet!, I was listening Paul Boag's Podcast on how Boagworlds uses almost unperceivable CSS animations and found the Podcast quite interesting

  • You linked to the main page without giving any specifics about the podcast. Your post sounds spammy.
    – dnbrv
    Feb 20, 2012 at 14:17
  • @dnbrv I guess Paul Boag has a debt with me then :P, edited! thanks for the feedback
    – jonathan
    Feb 20, 2012 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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