User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Should animations pause on mouseover? I have my opinion, but I was wondering if there was any evidence to support/refute the idea that users expect this to happen.
EDIT: I'm specifically concerned with sliders/carousels and other non user-initiated animations.
Regarding sliders/carousels I say most definitely yes.
A slider (e.g., like slidejs) is really a list, or array, of information elements. In this case the elements usually consist of a full-bleed background image possibly containing a title, some descriptive copy, and possibly a link/call-to-action. The idea is you can show more information in a smaller space by only showing one of these elements at a time (makes the interface simpler and easier to digest, etc.)
Personally I find it extremely frustrating as a user when I'm trying to read one of those types of information elements and the damned slider just keeps on changing automatically before I'm done reading what I was looking at! When I'm engaging with a piece of content, that content is the most important thing on the page to me. If, beyond my control, it disappears before I'm done with it, I feel the user experience has clearly suffered, and I might loose interest and go somewhere else, maybe never to return.
What I've seen around, and which I implement myself when making these sorts of widgets, is for the animation to work as follows:
If the mouse cursor is not on top of the slider area and the timer/delay for the current slide has expired, animate to the next slide automatically.
If the mouse cursor is on top of the slider area and the timer/delay for the current slide has expired, wait. The cursor being on top of the slider area is probably a pretty good indication that the user is currently using that area, and in this circumstance I would expect the default behaviours to be overridden by the user's interactions.
If the mouse cursor is on top of the slider area but the current slide has already started its transition to the next slide, finish animating to the next slide, and then wait on that slide (the new current slide). Jerky animation (if the animation suddenly stopped on mouse over) is distracting too. A natural continuing flow seems like an intuitive behaviour for this in-between state.
Ultimately, keep in mind that the goal of any interface is to facilitate the intentions of its users. If I'm using an interface and its doing things on its own that I don't want (or expect) it to do, then I feel there's something wrong with the interface (or it could at least be optimized some more).
The mouseover event is a good way detect a given user's context (e.g., "currently reading a slide in the slideshow area") and, within that context, one should ask oneself what the user's intentions are and how best to fulfill them. I think for when I'm mousing over a slideshow, my intention is to read the current slide, and the slideshow script should wait until I'm done what I'm doing, or I indicate some new action to execute directly (like navigating to another slide).
jQuery gives you enough freedom while doing animations. There are methods like delay()
Also in certain situations, you can queue() and dequeue() animations where you introduce a delay before any event, and let a sequence of animations in progress.
So, there is no point is delaying animations by default, since in most cases it is not required, however can be used at any point in time.
Also, It is very much a case specific scenario.
For example, to make the user show that something happened when they performed an action on the page, say, while reloading visible data on the page, a delay is usually present, and then it is shown to make the user comfortable that something has changed on the page with their action.
However, animations on their , own take some time, which is usually mentioned in the code. So say, when a user takes his mouse over an event that triggers an animation, the result would take up (animation time + delay + time to load data).
One does not want to increase time (insert a delay) for an important action, say over a button which leads to a payment page, or a booking page.
So to sum it up, if there is a gap in which the user sees information that is crucial to him, and will make him stay on the page, there is no point in inserting a delay. In other scenarios, a delay is usually inserted, example, image sliders.
If you are talking of visual cues on mouseover, the answer is possibly yes. I think it is important that when your mouse goes over something, it does not immediately change to something unrecognisable. So if you want to just give a pointer if someone stays over an element, then yes.
If you have a lot of eye-candy with long or slow animations, it makes a lot of sense to delay them, so that you do not have lots of animations which might hold up the browser. However, I would also say that if you are doing this, then don't. It looks horrible.
So there is no straightforward answer. Yes, delay it if you feel that this would serve as a better cue, and give an indicator that this thing they are hovering over actually does something. But consider carefully that if delaying your animation or effect seems like a good idea, is it actually needed at all?
