2

I'll often visit beautiful websites with hover animations on links that become distracting to me, and I've noticed that I just play around with the animation and don't even end up clicking the link. I'm not sure if it's because I'm paying more attention to it than the average user, or if it really is a distraction. At what point does it become a distraction to others?

  • 2
    Short answer: When they're a distraction. – plainclothes Jul 1 '15 at 16:35
  • Even shorter answer: Always. – jamesqf Jul 1 '15 at 18:41
2

I think it depends on the nature of the site. If it's designed to be a fun, interactive experience then the heavy use of animations might be on target. If it's a task based website designed to lead the user through specific steps or a complex flow, I could see animations serving as a detriment.

A great way to test this would be using heat map software like crazy egg. If you observe too many users bouncing from the site or not completing tasks as you intended, it might be time to rethink the usage of certain animations.

2

Hover animations distract in a few ways:

1: Hover effects that interfere on your way to a target

At that point they become like the canvassers that ambush you on the sidewalk when you're trying to go to a coffee shop. "Excuse me! Do you have a minute to look at some information I want to show you? How about making some things throb or jiggle?"

Often this can be solved by putting a delay on the animation's start time. For a really responsive feel, it may be necessary to figure out how fast the mouse is moving and key off that.

2: Hover effects that draw the eye away from the content under consideration

Once the mouse has gotten to the desired content, hover effects can draw their attention away.

Sometimes this is good--e.g., I'll leave my mouse on a link and direct my eye to the status bar to see a link's destination, then click once I'm confident it goes where I want.

Often, it's not good, and the user can feel like the popup is in the way or distracting.

This can be addressed by making sure the content of the hover is relevant, and presenting it in a way that doesn't fight for dominance with the static content

3: Hover effects that block content

This one's just disruptive.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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