Showing Products In Context with Animated GIFs

From the Retail Email Blog‘s 2010 Design Hall of Fame comes an example of showing a product “in context” (in use) with an animated GIF image:

While animated GIFs are not unusual in email, I’ve yet to see one on a product page. In this case, it gives context to the furniture and the paint, and could work both ways.

As a something-in-between static images and product video, animated GIFs allow for additional context (you may have to get creative with what that means for your industry or products) without the decreased page load speed, cost and playback issues that often come with video. (Hey, I’m not down on product page video – just sayin’ there are some negatives).

Can you think of a way to use animated GIFs on your product pages?

Related Articles

6 Responses to “Showing Products In Context with Animated GIFs”

  1. What I love about this example is that Sherwin-Williams isn’t just copying the latest trend, they’re doing something that makes complete sense for the kind of product they carry.

  2. While this is one of the more clever and useful ways to use an animated GIF on a product page, I think it probably isn’t a great idea. I feel like it would distract a lot of users and take their attention away from primary call to action spots, such as the add to cart button.

    I think a better way to do it would be to have smaller “swatches.” Basically, small image links next to the main photo, and if a user clicks on one of those the background color in the main photo will change using AJAX. This way you can still show a number of different paint colors, but not draw too much attention to the main image itself.

    • ndizzle says:

      Making an add CTA inviting and obvious to find is a must; but no ones going to be clicking it if they don’t want to buy the item.

      Or do you really believe that a user would be so distracted by a slow-transition animated gif that they’d forget to buy the product they’re so mesmarised by? :)

      However, I would personally advocate a :hover state instead of an animated gif. i.e. on mouse-over the image would change state. This way things aren’t moving about on the page without the users interaction.

  3. Alvin Tan says:

    This may be a pet peeve, but having more than one animated GIF on a page looks very, very spammy to me.

  4. Jack says:

    I’ve started using a similar idea with some of my e-commerce sites. However, it terms of functionality, creating multiple images and fading between them with jQuery works a lot better. The different images/frames can simply be uploaded from the back-end by the user, so there’s no need to get technical by creating gifs!

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS