Webvanta Blog: Creating Effective Websites

Reconsidering Motion in Web Page Elements

Reconsidering Motion in Web Page Elements Image

The top-of-page slideshow or carousel has become very common in modern web designs. We’ve built quite a few ourselves, such as for Post Carbon Institute and Green Music Center.

These design elements allow that precious top-of-page real estate to contain more content, by adding the time dimension so the same spot can contain multiple items. They also introduce some motion into the page, which makes it seem more attractive.

However, as a recent article by Jakob Nielsen, Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility, points out, they have their downside. Users might miss content, either because it moves away too quickly, or because they don’t wait on the page long enough for it to show up. There is also the risk that users pay less attention if it looks too much like an ad.

In the Nielsen Norman Group study, the user was given the following task: ‘Does Siemens have any special deals on washing machines?’. At the top of the page was a horizontal accordion, with a timed auto-advance from one section to the next. The first accordion section described a deal on washing machines. But as the article notes:

‘Could the user answer the question? Given that the biggest item on the homepage — in both screen space and font size — is an offer of £100 off ’selected Siemens appliances’ next to a large photo of a washing machine, you would think so. … Nonetheless, the user failed the task. After an extended visit to the website — including much time scrutinizing this homepage — the user gave up and assumed that Siemens didn’t have any special deals for her.’

Our advice is to tread carefully when adding motion, but not to avoid it entirely. Here’s some suggested guidelines for making this type of design element most effective:

  • Limit the number of items in the sequence to no more than five, and ideally stick with three.
  • Don’t advance too quickly.
  • Include controls (such as the common ‘row of dots’) that can be clicked on to jump to a particular slide and stop the auto-advance.
  • Be sure that there is another easily found place where the content appears in a static form.
  • Support the ‘swipe’ gesture for taking manual control over the advance on tablets and phones.

Auto-advancing carousels have their place as well. We humbly suggest that the company logos at the bottom of the Webvanta site are a good example. The idea is to show lots of customers, and it isn’t critical that the user see any particular one. If they are interested, they can wait a few seconds and they’ll all come by again.

Topics: Web Design

Add Your Comments

(not published)