Interactive Design Guide

Want to become a WIREWAX pro?

We have created this guide of creative best practices and thoughtful design for interactive video. You can learn more about hotspots, overlays, poster frames and everything in between. Check out some spoilers here ⬇️

Best practices

  • Have a hotspot within the first few shots.
    • If the audience now knows they can interact with the video - they want to and will be frustrated if there’s nothing to click on within the first few seconds (within the first 10 seconds is ideal!)
  • Let shots run a little longer
    • Where you want viewers to interact try letting shots run a little longer - 3 seconds or more are most successful. This doesn’t mean your video has to be baggy or slow, just where you’re encouraging interaction, try and allow more time for the viewer to move their mouse/hand and interact.
  • Focus on a few hotspots in one shot
    • Try not to overcrowd a shot with too many hotspots. Try to focus on 2-3 items to avoid the hotspots taking over.

Poster frame

The poster frame is the image that the play button sits on when the video initially loads. This can be a static image or a moving gif. 

We recommend not autostarting the video where possible as we tend to see much higher engagement and interaction rates in audiences who choose to start a video. 

Designs for poster frames we typically create in illustrator, photoshop or sketch.  After effects for animated poster frames. 

You can see examples here

The poster frame should be: 

  • 16:9 (1920x1080) 
  • JPG or GIF
  • Below 200kb for JPG
  • Below 2mb for GIF 

Recommendations for Poster Frame: 

  • Include a strong background image that captures the idea of the video 
  • Use the title of the video as a pull 
  • Let your viewers know the video is interactive
    • Could be simple - “This video is interactive” 
    • Or more creative and educational using graphics etc to tell people how to  interact in the video 
    • Animated gifs can be a powerful way of showing animation and grabbing attention. (just be wary of size).

Hotspots

The hotspot is the area of the video that acts as a ‘hitbox’ – clicking on the hotspot will lead to the content or action of your choice. 

You can see some examples and downloadable templates here

Designs for custom hotspots - typically created in Illustrator, Photoshop or Sketch. 

We then export the hotspots as SVGs. 

  • SVG’s are recommended if possible as scale (JPG, PNG and GIF will work also but might not scale as well on different screen sizes). 
  • You can design for a normal state and a design for a hover/rollover state.  This is a good way of letting the audience know the video is interactive. 

Video Recommendations

We accept all major video file types but recommend the following for delivery:

  • Video: MP4 .h264 codec - 3-5Mbps
  • Audio: 128k stereo
  • Resolution: 1920x1080

 

To see the full guide click here ➡️ WIREWAX - Interactive Design Guide ⬅️