There's a small corporate website that offers a number of services.

On the homepage there's a showcase of the services offered. There's a strip containing a number of items in reduced form (small pic), and under the strip there's a very large component that shows a large experiential pic with the complete info about the item that's currently selected on the strip. Schematically it looks like this:

enter image description here

I want the gallery to scroll automatically through the items, but I also need it to be interactive - the user should be able to focus on an item of his choice.

What's the best way to define the behavior here? Specifically, once I stop auto-scrolling, when do I turn it on again? One of my problems is that the bottom element takes up the entire width of the page and is pretty large, so the fact that the mouse rests there doesn't necessarily mean anything.

Examples of similar elements on existing websites are much appreciated.



I may have not been clear - by "auto-scrolling" I don't mean that the pics gradually slide in an out of view to be replaced by others. It's not animated in that sense. They just change once in a while - probably about 5 seconds, as the selection switches to the next item in the strip.


The behavior I had in mind is close to the one here (stay on the page for a bit until you see the pic change).

  • Are you saying the experiential pic changes every ~5 sec as focus automatically cycles among the seven service items? Commented Apr 26, 2011 at 11:47
  • Yup. You sound appalled :) Commented Apr 26, 2011 at 11:53
  • 2
    Not appalled, but maybe a little... queasy? :-). Commented Apr 27, 2011 at 13:49
  • so, which was your choice?
    – ALoR
    Commented Apr 29, 2011 at 21:23
  • @ALoR I went with my initial instincts, which matched your suggestions. But the most useful answer to me was the one that made me critique my design the most. Commented Apr 30, 2011 at 10:08

4 Answers 4

  • When in doubt, put the user in control.

You can start off by scrolling through. As soon as they click on one of the thumbnails, STOP. Show that image. That's the one they are interested in! If you have a hunch that after 10s you should start scrolling again, resist the urge. Instead fade in something over the image that enables the user to start the auto scrolling up once again, if they want to. It could be hypertext saying 'slideshow'. It could be clickable slideshow buttons.

The reason for having the scrolling is to show them the range of what is there. Once they have shown you that they are interested and that they know how to select one of the images from the thumbnails, you've achieved your objective. Don't wreck it by wresting control away from them.

  • I agree, this seems like the best solution for something with such a large content area.
    – ICR
    Commented Apr 24, 2011 at 20:33
  • 1
    That's exactly my concern, I don't want to wrestle control away from them, but I do want to flip through some of the items unless I know that they've selected one intentionally. At the moment I'm inclined to stopping the scrolling once the mouse is over the strip at the top, and turning it back on once the mouse leaves the frame described by the entire element (strip + big pic). Commented Apr 25, 2011 at 19:02
  • 1
    Using mouse position to indicate interest (i.e. stopping the animation by "holding" it with the mouse) is a pattern I've seen used successfully in the past, so you may be onto something there. Commented Apr 27, 2011 at 14:15

This type of rotating advertising has become very popular in recent years. However, a recognizable behavior has not been established yet

A site like disney.com.au or abc.com has constantly rotating images. Even when a certain image is selected via the offered interface the rotation will continue.

Another example is skins.net which has implemented a pause button which disables the automatic rotation.

If images contain accommodating text a user might find automatic rotation very frustrating. This is being said, if there's no interface to stop the rotation and you are actually interested in reading a pause button could be a good solution.

I think once the user identified that the thumbnails can be clicked the auto rotation should be switched off. Here's an example in action australianopen.com


I believe you’re correct that relying on mouse hover position would not be precise or reliable. Auto-cycling the pics should have what any continuous animation should have: obvious controls to pause and play. Users can stop and start the slide show when they want to. This can be combined with automatically pausing when the user clicks a thumbnail (or experiential pic), as others on this page have suggested. However, an explicit pause/play control will make it clear the user can pause the animation. Clicking an image has poor discoverability.

Then there’re users like me who would pause the animation immediately after it loads because animation can be really annoying and has been recognized as such since 1996. This is less of a problem if the list and experiential pic are the only things on the page since then there's nothing for the animation to distract the user from. However, if there's text to read above or below the animation, you have a potential problem.

Have you considered no auto-cycling? Show the most compelling experiential pic by default or, if the users are coming from a search engine, try to choose the pic that best fits their respective search criterion. Alternatively have no experiential pic on the home page, and use the space for an enlarge service list so the user can appraise each item better. Make each item a link to the associated experiential pic on a separate page with small links to the other services below. Some users may click Back to return to the original page to choose the next service, assuming users are interested in more than one service. This would add a click for some users, but that may be better than users having to figure out if and how they can control the animation.

I frankly don’t understand the activity that auto-cycling is supposed to support. Do we really expect users to passively stare at an animated list like they’re watching television? A service list doesn’t sound like a narrative that needs to unfold at a set pace in a set order. If an item of (mild) interest cycles off the experiential region, you really expect users to wait until it comes around again? That may be enough to negate any modicum of enthusiasm the user has mustered. It’s counterproductive.

Perhaps the concern is that a default non-animated experiential pic will cause users to click Back because they assume the site offers only one service (that's not the one they want). Given how fast users click Back, I doubt animation will help: if each experiential pic is up long enough to assess if it's the right service, then it's up long enough to click Back before the user has time to see another service appear.

Users have a mouse in their respective hands and they use it unthinkingly. I believe they’d rather scan the service list and pick the items that seem of greatest interest in the order they choose, and look at them for as long as they like, rather than wait for the items to appear on their own and intervene to prevent an item of interest from disappearing. With interest in each service varying considerably from user to user, it's a real challenge to find the right cycling frequency without some experiential pics appearing for too long and others for too little.

  • Michael, first please see my update concerning the auto-scrolling. It's not auto-play in that sense, and it's not as annoying. I don't think that play/pause is appropriate to this type of element. To answer your question: we need to display the variety of services we have, but there's a bit of info for each item, so I don't want to just spread them on the page, it won't work. Among other reasons - because we want to display them all above the fold. The small pics are very descriptive, and the large one offers additional info. Commented Apr 25, 2011 at 18:55
  • Thanks. Auto-cycling pics is likely less problematic than auto-scrolling, but most of my concerns may still apply. I've edited my answer accordingly. However, if your testing shows the animation works for users then you're okay. Just be sure your test task matches what real users are interested in doing. "Assess the overall quality of these pics," is going to get you different answers than "You need Service A with Feature X. Find out if they do that." Commented Apr 27, 2011 at 13:57
  • I found a behavior similar to what I had in mind over on f-i.com. Would you still use pause and play on this kind of page? Commented Apr 27, 2011 at 18:04
  • on www.f-i.com the animation is not restarted after a click, you have to reload the page to restart it, very annoying. I prefer the auto-restart on mouse-out.
    – ALoR
    Commented Apr 27, 2011 at 19:43
  • Does f-i.com need pause and play? Based on an n=1 usability test with a non-representative user, yes. As soon as I noticed the image changed, I scrolled it out view so I could read below undisturbed. Now I don’t see the images …or the menu –worse than useless. That wasn’t the only problem in a three minute test. For example, your design with the list above is a big improvement since it allows users to click any image for immediate display. Commented Apr 27, 2011 at 21:44

I suggest to stop the rotation when the mouse goes over a small picture (and show the datails below). As long as the mouse is over, the animation is stopped. When the mouse goes out of the small pictures, you can restart the animation.

That way the user can jump from one picture to the other at the speed he wants, if he want to go back one picture, the pause button could be frustrating in this case, since he will have to restart the animation and wait for the next iteration.

I will leave the click to enter the section currently selected.

  • That's my inclination too, with the difference that I want to restart it only when the mouse goes out of the area of the strip at the top plus the big pic, not just the strip. Commented Apr 25, 2011 at 19:09
  • I agree. The mouse on the big picture means "I'm still interested in this topic, please don't fade away..."
    – ALoR
    Commented Apr 25, 2011 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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