Blinking, bouncing and flashing elements

Question

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?

Answer 1

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).

Answer 2

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.

Answer 3

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.

Answer 4

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?

Answer 5

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.

Answer 6

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