16

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?

Roger Attrill
  • 71,049
  • 15
  • 151
  • 246
Rdpi
  • 697
  • 4
  • 10
  • 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 09 '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 09 '12 at 16:59
  • 2
    This is a bad idea – Ben Brocka Jan 09 '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 01: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 07:18
  • JoJo, it depends on the manual.. The help section we created links to tutorials and video guides that are very handy to understand complex workflows. The help in this case is more "conceptual" then practical. – Rdpi Jan 11 '12 at 10:19
  • @Rdpi: If we've answered your question, you can select the best solution so that if anyone comes across the same problem in the future, they know the course of action. – dnbrv Feb 07 '12 at 18:34
  • Some good answers here. Just to add if you are having to draw attention to the help of your software then the software itself could probably do with some work. – Sheff Feb 20 '12 at 14:42

6 Answers6

28

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

dnbrv
  • 13,227
  • 5
  • 44
  • 75
  • Thank you for the answer. You shared some very useful thoughts. – Rdpi Jan 09 '12 at 17:08
  • 2
    I totally agree. – Naoise Golden Jan 09 '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 09 '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 09:32
  • 1
    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
5

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.

Peter Mortensen
  • 200
  • 7
Schroedingers Cat
  • 9,141
  • 1
  • 23
  • 31
4

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.

Pam G
  • 715
  • 3
  • 12
3

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?

Jaco Briers
  • 886
  • 6
  • 11
  • 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
2

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.

marcintreder
  • 1,029
  • 7
  • 12
1

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

jonathan
  • 11
  • 2