Monday, November 15, 2010

Animation on the Homepage

In the bad old days of website design, you had to go through a splash page to reach the homepage. It was a wonderful opportunity for artistic directors to shine. However, users hated it. Eventually, website decision makers saw the light and splash pages have completely disappeared except in history books and ad agency websites.

The new plague is large image rotation on homepages. These take up more than half a laptop screen and rotate every few seconds. They are the new way for artistic directors to win awards. Unfortunately, they often reduce usability and contribute very little toward website objectives.


Basic Principles

When designing a homepage, two resources are in limited supply:

  • Screen real estate is scarce and its allocation is a zero-sum game. What is used by one page element cannot be used by the others.
  • User attention is limited. When a homepage element draws attention to itself, it reduces attention to other elements.

The “art” of designing a homepage is to use these two resources to maximize the website objectives. When a website shows large images, it reduces the space that can be used by other sections of the website. When the image is animated, it draws attention away from the rest of the content.


What do visitors do on your website homepage?

Did you ever go to a website because someone told you they had a great animation? When did you return to a website because the homepage images were really nice? Unless images are the website’s main attraction (fashion, celebrities, adult content, etc.), the answer is almost never.

Homepages are not billboards or neon signs. Homepages are maps to your content. When someone arrives on your homepage, theirs eyes scan the page to determine if the content is worth their time and if they should follow one of the options in the navigation or the content. This period is critical to the success of your website. Avoid distracting your visitor with visual animation or sound.

Dr. Jakob Nielsen says “Don’t do it

Dr. Jakob Nielsen is a leading web usability consultant and book author. In one of his most famous articles: “'Top Ten Mistakes in Web Design”, he wrote:
Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text!
Any Exceptions?

Dr. Nielsen lives in a black and white world where nuances are few. There are some situations where you want to draw the user attention to areas of the web page. For example, in a news website, you may want to bring the focus on the latest news. Another exception is on homepages where users are very familiar with the sitemap (Intranets), animation may be used to draw the user to the new content.


Let’s Compromise

The things that bother me most with rotating sets of large images on homepages are:
  • They break my concentration while I scan the page to find something interesting to follow;
  • They remove the control that I normally have on the web by not allowing me to pause the animation.
On the other hand, the people who put large moving images on homepages are not idiots. Their reasoning is often that it will enhance the user experience and reinforce the brand. This is a valid argument for other media but not for the web where users are notoriously impatient and a click away from your competition.

A good compromise would involve removing the animation on the page but rotating the image at every page visit. This would also improve response time. Furthermore, if we want users to see the other images in the set, controls could be added to show the next and previous images.

If rotating images are deemed "absolutely" necessary, a compromise would be to set the delay to at least 15 seconds between images and make available a “Pause” button.

Still not sure what to do? How about having two versions of the homepage online and checking the bounce rates. This can be done using the A/B test functionality of Google Analytics.


Whether you agree or not, I would appreciate your opinion. Please leave a comment.

You may also be interested in this article by Gerry McGovern: Are marketing images damaging your brand?

2010-11-20 Update: Following the 15+ comments in Facebook, LinkedIn and in RL (Real Life), I have added nuances in the post. Thanks you all.


5 comments:

Anonymous said...

Thanks for the informative post. I work for a digital agency that is in the process of redesigning their home page. The animation issue keeps coming up. You made some great points regarding the A/B testing and offering users come control.

Anonymous said...

What about homepage animation in an ecommerce point of view. Many ecommerce site use animated splash page to featured different promotional content to help see 'whats new' on the website for user that are in exploration mode

Marc Poulin said...

On many Internet websites, users want to know "What's there?" and not "What's new?". Only on sites with a lot of repeat visits is it interesting to bring attention to what is new. That is particularly the case for news websites and Intranets.

Remember that animation is one of many ways to draw attention to a section of your page.

kinaze said...

Interesting article! I like the way you present this usability issue. As you point it out, there are two key factors to consider about the image rotators: 1) Screen real estate and 2) user attention.

These factors force us to think about what we put in rotators. Nice and cool images? Trendy visual designs? Or information for the goals and objectives we need to communicate to users?

Take google analytics home page as an example: http://www.google.com/analytics/. Look at the image rotator on the home page. You might notice this rotator don't rotate! And it lets users decide if they want to see more or less of what is considered important by site's owner. Let's stress the fact that this "rotator" is used to display key objectives and not only pointless images. It seems like Mr. Nielsen would like that.

But what about news websites? It's true that it can be quite disturbing when news images rotate ad nauseam. But it's also true that this technique forces new content to be pushed automatically without user shaving to click. I really like the way radio-canada.ca manages news on the front page of its website: They rotate once before stopping. The more I think about it, the more I find I should implement the same technique on uqar.ca, a university portal I manage. I think this would be a good compromise. What do you think?

On a final note, I think sometimes, the movement rotators generate might be a desirable thing. Take gaming reviews website like gamespot.com for example. I think it would be bad to stop the rotator in this site because targeted users are gamers who don't mind dealing with a lot of interactions.

Marc Poulin said...

@Kinaze,
I happened to visit www.radio-canada.ca yesterday and did notice the animation that stopped after one rotation.

I would like to point out that there are many ways to draw attention. Animation is one of them but there are others such as visual design and placement. On R-C, the position on the screen is so prevalent that I would notice it anyway.

Thanks for the thoughtful comments.

Post a Comment

Note: Only a member of this blog may post a comment.