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'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?

share|improve this question
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. –  Naoise Golden Jan 9 '12 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 '12 at 16:59
1  
<blink>This is a bad idea</blink> –  Ben Brocka Jan 9 '12 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. –  Stefan Kendall Jan 10 '12 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 '12 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).

share|improve this answer
    
Thank you for the answer. You shared some very useful thoughts. –  Rdpi Jan 9 '12 at 17:08
2  
I totally agree. –  Naoise Golden Jan 9 '12 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. –  Tony Bolero Jan 9 '12 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 '12 at 9:32
    
How exactly does my logic allow for animations on a "useless screen"? Any animation will distract the user. –  dnbrv Jan 10 '12 at 13:45

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.

share|improve this answer
1  
Thank you Pam, much appreciated –  Rdpi Jan 9 '12 at 23:55

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.

share|improve this answer

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.

share|improve this answer

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?

share|improve this answer
    
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 '12 at 17:47

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

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

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.