Designing Captivating Hotspots For Your Interactive Video
October 23rd, 2019
First thing’s first: what the heck is a hotspot?
Well, in short, it’s the call-to-action on your video that gives your viewer a visible sign that they can interact and touch things within it. Think of it as a button, but way more exciting – as it can track objects in your video and make those objects touchable as well.
What can it do?
Great question – glad you asked.
- Jump to another point in the video, allowing you to create amazing branching multi-narrative experiences.
- Open up creative, interactive, weaponized overlays bristling with additional content and media.
- Take your viewer out to another URL.
- Fire off an invisible event you can listen for to trigger actions on your page such as adding items to cart, animations, or content changes.
Why is the design of your hotspot so important?
Depending on your KPI’s, the main aim of interactive video is to get your audience to lean forward and engage. Too subtle a hotspot and they might just not understand that they can click. Too loud a hotspot and they might lose the message of the video – so navigating a fine line with the creative is important.
The Custom Hotspot Uploader
WIREWAX Studio gives you a truckload of jaw-droppingly good hotspots to get you on your way, but with newly announced WIREWAX Custom Hotspot Uploader, you can design and create your own hotspot designs and bring them into the Studio. This means not only can you stay on-brand, but you can fit the hotspot design into your video so they are both perfectly married together.
So where to start?
Like the rest of the WIREWAX Studio we accept all major file types for designs of your hotspot (jpg, png, gif etc). Where possible though, we recommend using SVG’s (scalable vector graphics). This will ensure no matter how big or how small your video, your hotspot will look ultra sharp and grab the viewer’s eye.
When exporting your SVG, ensure that all the elements of your SVG are vector and you are not just embedding bitmap images into your file. Embedding .pngs and .jpgs into your SVG file comes at the loss of quality and can increase file size considerably.
In this IKEA example, you can see the hotspots appear super sharp whether you are watching on your mobile or blown up on the largest of screens.
Try labelling your hotspots with what they do. Like any button on the internet, your audience can be skeptical of just tapping something without knowing what will happen. This could be actual written copy describing what your hotspot will do (i.e. ‘Click to buy’) or use icons to give them a visual idea, like a shopping bag if you are making an item shoppable, for example.
In this Mango example, you can see the shopping bag hotspot is used to indicate to the viewer they can tap the item to shop it.
Visual feedback on hover and click
When viewers hover on a hotspot, they expect that the user interface will respond with appropriate feedback. When viewers don’t have any feedback on a hotspot they might mistake it to be a burned-in graphic and not tap it.
The custom hotspot uploader gives you a host of appealing hover animations to play with – from changing the scale, to adding a border or shadow to your design. To really deliver with a hover effect, though, try uploading an alternative state design that can be switched to on hover.
In this Zara example, a simple size increase to the hotspot was subtle but gave the viewer the feedback they needed to show that the item was clickable.
Big and loud
Interactive video has been around for a while, but in the grand scheme of things, it’s still a baby. We are still not quite at the minority report days of everything being touchable and your audience knowing it to be the case. If you really want to get those viewers clicking, using large, colourful hotspot designs that stand out can be a great way to do it. This aesthetic won’t work for every video, and treading the line between tasteful and noticeable takes a keen design eye.
It didn’t get any louder than ASOS in their Denim campaign: a throbbing arrow that pointed to the shoppable item with the instructions to BUY NOW. This wouldn’t work on every video, but ASOS saw some fantastic results with this bold and colourful call to action.
If you really want your hotspots to stand out and have that WOW factor, try experimenting with animating your designs. There are lots of great SVG animation tools out there such as SVGator and Shapeshifter . Or, you can even try with animated GIFs (just be wary of the file size these can produce).
Porsche utilized an animated SVG in their latest campaign for the Cayenne. Choosing a simple spinning hotspot that sped up on hover was a great way of making interaction visible and fun.
Size is everything
Pay attention to the sizing of your hotspots. Make sure your hotspots are finger-friendly for mobile users – not so small that they go unnoticed.
This pulse design in a H&M experience was the perfect size to drive interaction and to be finger-friendly for when the experience is viewed on mobile.
Don’t flood a clip with too many hotspots. Give your viewer 2-3 hotspots on screen at once. Any more, and you run the risk of confusing the viewer. When you provide too many options, your viewers end up doing nothing.
2 or 3 hotspots per look on this Jaeger example are clear and unconfusing to the viewer.
Hotspot design should always be about recognition and clarity. Your hotspot is the number one way of letting your viewer know your video is interactive so it’s worth putting in a lot of attention to make sure it is right.
Need some creative assistance designing the perfect hotspot? Luckily for you, the WIREWAX creative team does this for a living.
Reach out to them at firstname.lastname@example.org if you’re stuck in a creative rut.
Written by Steve Poxson, Creative Brand Director
Up Next >> 5 Tips on Crafting an Eye-catching Overlay