47

Bit of background - I'm currently working on an ecommerce clothing site specifically with an older age range (50+). Historically the company has always used flat jpgs to display product images on across the entire site.

We have recently started investigating the use of GIFs to display the products.

The question is, how do I best communicate this to the user? I had the simple idea of having a standard play button icon overlaying the image on a PDP (product description page). This won't be a video with sound, just a 3 second GIF of the product spinning around (as an example). I want to be able to convey to the user that a product has a GIF available to view on the PLP (product lister page) without literally saying "GIF available" as some people may not know what a GIF is.

Improve this question
18
  • 8
    what's the constraint of not letting it play automatically the moment customers land on the page? Just add a replay button once the loop is over.
    – user108525
    May 30, 2018 at 9:50
  • 8
    In my opinion a play button would be effective. I'd place the play button in one of the 4 corners of the image so that it doesn't overlap the image of the clothing itself though.
    – user106292
    May 30, 2018 at 9:50
  • 62
    I'd say that the image is actually an animation. Don't bother the user with the particular technology used to create the animation.
    – MSalters
    May 30, 2018 at 10:57
  • 11
    Please tell me you are not really going to use gif... It's 2018, webm is widely supported and provides better quality at smaller sizes.
    – n0rd
    May 30, 2018 at 14:38
  • 6
    This is an awesome question, in 1999. Most web users are unimpressed by animated graphics, and you are going to a lot of trouble to ensure the user understands the functionality of the graphic rather than adopting a more seamless/intuitive approach. If you've already got this amount of concern that they won't "get it", and you're just starting this process, that's a big sign that it's not the right approach. Maybe migrate to using PNGs first for static graphics and investigate the value of an animated svg or an actual video clip (which will be obvious from the big play icon).
    – Anthony
    May 31, 2018 at 6:16

8 Answers 8

Reset to default
96

The fact that it's a GIF is really a technical detail and not relevant (or even comprehensible) for most users. What you need to convey to them is that there is more data available. Technically, it would probably even make more sense to use actual video rather than GIFs, depending on the size and content of the animation.

One option is indeed to overlay a "play" button (right-pointing triangle), which most people will take for an indication there is a video.

Another option, if indeed the video/GIF shows the object being rotated, is to convey this, using an icon like one of these for instance:

rotate glyph 3D glyph 360 glyph

Of course, if there are different types of "functionality", the icon should reflect the differences. The choice of the exact icon should also reflect the fact that there's no control, just an animation, so avoid icons that include a pointer or hand for instance.

But for me, this should be the case only on product listing pages (where you could even start the animation on hover), just to avoid too much stuff moving all over. On a product page, if it's the main image, you should probably just start the animation right away.

Improve this answer
6
  • 2
    Definitely a good choice to recommend a button that illustrates what the gif does, especially; having the word "gif" across the middle of the image may be frustrating for users who just want a picture. But I'd point out that having the animation starting right away may be disorienting or distracting for non-technical users who aren't expecting it. Also to be considered is that if they are using a mobile phone to view the site, they may not have a large data plan (my experience is that over-50s typically don't), so they may get concerned that it is eating into their data allowance.
    – Myles
    May 31, 2018 at 8:57
  • 4
    @Myles Having animations is also distracting for technical users (though those maybe know how to switch it off).
    – Paŭlo Ebermann
    May 31, 2018 at 18:38
  • 2
    Something better than GIFs or videos: a stack of PNGs for each angle and a simple javascript drag widget with left/right arrows, which swap the currently shown PNG for the one(s) from n degrees in the direction they drag. Let the user control the angle and rotation speed. Caption it like ⤾ Drag to rotate ⤿ (arrow buttons for anyone who doesn't like dragging), and the user doesn't need to care about tech at all. Using video might make people hesitate: expecting intrusive audio, a pointless 30 second corporate intro, or a waste of their mobile data allowance.
    – user56reinstatemonica8
    Jun 3, 2018 at 8:44
  • @PaŭloEbermann, I think this is a good example of a product page which is clearly targeted at technical users, where the use of video auto-start is not distracting and really brings a real plus. I'm definitely not talking about a a long video with sound, lots of effects, or anything. Just something that gives you very quickly a good idea of what the product does, and is probably a tremendous boost to sales.
    – jcaron
    Jun 3, 2018 at 11:04
  • @jcaron I agree that this is a good use of a (non-moving) video, but I don't think this is related to it being for technical or non-technical people – a similar video for a non-technical product would work as well. (Though I can't really argue why, it is just my feeling, and I'm not an UX expert.)
    – Paŭlo Ebermann
    Jun 3, 2018 at 16:14
38

Yes your solution is good and will work, but it gets problematic if someday you introduce videos to your site.

Also if people see the Play-Button they expect a video (longer then a gif) which usually also provides sound and better quality.

You could use a facebook style approach for this.

enter image description here

If you want it more obvious for your user you could use "Play GIF" instead of "GIF" only.

This way you will not have problems if you start adding videos since you differentiate between them.

Using patterns sites like facebook use is mostly good because users already know these patterns.

Improve this answer
13
  • 4
    I like this. If no one else chips in with an answer I'll mark it. Also... I wonder how many people have clicked on this thinking it was a real GIF.
    – sclarke
    May 30, 2018 at 11:08
  • 110
    I clicked the example image expecting it to play. I am not proud of myself.
    – DHT
    May 30, 2018 at 11:10
  • 22
    I didn't click the image because I see no ▶ button
    – user1306322
    May 30, 2018 at 12:41
  • 24
    Folks incorrectly assume that “gif” means “animation”. Why not label it “video” and not worry abut the end user’s knowledge of image file formats.
    – James
    May 30, 2018 at 15:28
  • 48
    I can't agree with this. First, the question explicitly says that the target audience is over-50s who may not be particularly computer literate. They shouldn't be expected to understand that "GIF" means "click on this to see a video/animation." Not least because "GIF" doesn't mean that.
    – David Richerby
    May 30, 2018 at 18:23
33

From the non-technical users standpoint, it is a video. The lack of sound does not change that. No need to explain the difference - just say it will play a video when you press the button.

Improve this answer
6
  • 14
    Right. And from a technical user's standpoint, it's a video as well. Or, an animation. But not “a GIF”, that's only how somebody who doesn't really know about image formats but merely sees them often on the internet would call them. (Arguably, the gif format shouldn't be used anymore for this since HTML5, though I have to admit I use it a lot myself.)
    – leftaroundabout
    May 30, 2018 at 12:40
  • 5
    Hmm.. I wonder if the non-technical user would think their sound is messed up if you present the GIF as a video. Most videos do have sound. Most videos are longer than a couple seconds. Most videos don't loop. Most videos have controls to pause, fast forward, etc. I think GIFs are different enough to not try and pass them off as videos.
    – maxathousand
    May 30, 2018 at 13:13
  • "Animation" tends to specificially mean a moving, drawn image. But all moving image media is "video" is the end...
    – rackandboneman
    May 30, 2018 at 16:24
  • 2
    If you encoded the exact same content into h.264 and presented it to the user the same way, one would be 100% correct to call that a video, and 0% correct to call it a GIF.
    – rackandboneman
    May 30, 2018 at 23:32
  • 4
    A devilish, almost dark pattern-ish, way to deal with the expectation of sound would be to put a permanent (and intentionally nonreactive) crossed out loudspeaker button in the bottom left.. everyone would be slightly annoyed but consider it some glitch with the sound and forget very soon....
    – rackandboneman
    Jun 1, 2018 at 11:59
17

I would recommend using a broader term like "animation" instead of "GIF", which might be too technical and unnecessarily specific, especially for your target user base.

I think the appearance will depend on what you want. Maybe play the GIF automatically on mouse hover, or have a small "play animation" label in a corner of the product picture.

Improve this answer
2

In this specific case, I'd go for a rotate icon with a short yet descriptive text See 3D next to it / as a caption. It specifically "says" what will happen upon playing. No point explaining file format, who cares.

Improve this answer
5
  • I think the "product spinning" was just an example, so it may not be a rotation. I don't know if "See 3D" would be sufficiently versatile of a caption.
    – maxathousand
    May 30, 2018 at 13:08
  • Unique UX is always about specific case you wish to address - so unless OP specifically says what he needs to achieve (which I think he did), we can freely guess how to explain file format to somebody who needs a t-shirt.
    – wscourge
    May 30, 2018 at 13:12
  • Sorry, I might not have communicated what I meant correctly. I was just pointing out that OP mentioned that the GIF being of a rotation is just an example, so that caption may not work in all cases.
    – maxathousand
    May 30, 2018 at 13:14
  • The spinning image was just an example of what it planned. It could be an animation of someone taking off/putting on sunglasses. I'm interested in the principles around how to show this function. I do agree with your "No point explaining file format, who cares."
    – sclarke
    May 30, 2018 at 13:46
  • With "See 3D", some might expect anaglyphic images ...
    – Hagen von Eitzen
    Jun 2, 2018 at 14:41
1

I would add a small caption inside the image that leads the consumer to know that there is something else going on. Include a small tooltip/text that says, See product in Action! or something along the lines of that since we are only concerned about showcasing your product and not displaying your skills of embedding a GIF.

Improve this answer
1

Have you considered autoplaying the gifs, rather than waiting for user interaction? People are attracted to moving things so it might increase customer satisfaction (as long as the gifs are relevant to what the users are looking for). This suggestion relates to desktop mostly because gifs are relatively data intensive.

If you do want to wait for user interaction, I suggest putting a play button in the bottom right corner of the gif. I would refrain from putting it in the center of the image, as you will most likely want your users to get the full image of the 'still'. Considering your target audience, I suggest a simple 'play' icon. Something like this

Improve this answer
6
  • 21
    Autoplaying anything on the internet is just cancerous and should be forbidden by law, at least if the users does not have any control over the autoplay.
    – Pectoralis Major
    May 30, 2018 at 13:47
  • 4
    @PectoralisMajor yeah autoplay is annoying at some points which is a reason why I use Vivaldi as browser because it gives me the control over that built in.
    – Arsenal
    May 30, 2018 at 13:57
  • Both are right - "it is annoying" and "A/B test it if you want to really know if it helps".
    – rackandboneman
    May 30, 2018 at 23:34
  • @PectoralisMajor autoplay is "cancer" just because it consumes bandwidth for videos. But gifs are fully loaded by browser as standard images, so autoplay for them it just a matter of ergonomy and visual effects.
    – Jean-Baptiste Yunès
    Jun 4, 2018 at 7:35
  • @Jean-BaptisteYunès from a UX perspective, autoplay is "cancer" because motion inherently grabs user attention. Therefore, starting video or animated content before users have confirmed their interest in it is distracting at best and openly hostile at worst. Unsolicited motion should only be used for urgent, high importance information (such as errors).
    – Josh Doebbert
    Jun 4, 2018 at 22:12
1

Since no one mentioned it yet,

you may also consider having the video autoplay but only on mouse hover, this also eradicates the issue of auto-playing everything all the time ending up overloading eye stimulation of the user and their device/bandwidth resources.

On the positives, the user can get accustomed to it and expect this feature intuitively without being instructed by an icon, when he needs more details of an item at a quick glance. This also eradicates the issue with less technological adapt people, like your target audience here be overwhelmed or confused by (GIF) or play button icons that also obfuscate the visuals of the item on sale.

EDIT: this was meant as a proposal for item grids, where you have too many of those in the same page(since OP suggested they want to run this across their site). For single product pages(where images are shown enlarged anyway to avoid obfuscation issues), a play button overlaid over the gif is still a valid choice.

Improve this answer
3
  • This is only really discoverable by accident and precludes mobile, tablet and keyboard-only users.
    – Steve Jones
    May 31, 2018 at 14:45
  • @Dev In terms of accessibility, this is dangerously close to hostile. In the context of designing a web-based application in an increasingly touchscreen-dominated world, this is unwise.
    – maxathousand
    May 31, 2018 at 20:32
  • @Dev: Reconsider. We have already crossed the line of more than 50% of all online access coming from mobile devices. And not even this year.
    – Gábor
    May 31, 2018 at 23:53

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.