Here in the Digital Media team at the V&A, we are constantly exploring how we can use text, visuals, audio, interactives and data to support and enhance our on-going mission of promoting knowledge, research and enjoyment of the designed world online.
These efforts may result in stimulating and engaging experiences that are a focal point of a piece of digital content, such as the Interview with DeepMind – Google’s AI research lab – or they they can take a supporting role, augmenting a visitor’s experience to build a cohesive atmospheric aesthetic around a collection, article, event or exhibition. The latter is the goal of our newly implemented moving backgrounds feature recently launched on our Videogames: Design/Play/Disrupt exhibition page.
The surreal neon landscape gently moves, glitches and hums, evoking the themes of design, play and disrupt through an uncanny, joyous playfulness.
Powerful as this is, there’s a temptation to get carried away exploring the possibilities of moving backgrounds without giving due diligence to the pitfalls.
Accessibility is chief among these, and a core concern in everything we do. Moving backgrounds have been around on the web for a long time and they often draw justifiable criticism for worsening the experiences of those with visual or cognitive impairments, as well as creating technological barriers for those without access to a reliable internet connection.
Many would advise not implementing moving backgrounds at all, as they can create more problems than than they solve. In our case though, we felt that when carefully implemented and used sparingly, moving backgrounds could positively convey and enhance the themes of an exhibition.
To ensure they can do this without becoming a barrier to entry, we researched a list of best practices for producing moving backgrounds.
The most comprehensive resource we found was from the University of St Andrews. The focus of their findings was how moving backgrounds can very easily distract from the main content of the site if the videos are too lively.
With this in mind, we compiled straightforward guidelines to ensure the videos are ambient, rather than dominating, in nature – and support their associated content without distracting from it:
- First and foremost, videos should never have sound. Aside from simply being annoying and hugely distracting, people who rely on sound to navigate the web would have their audio cues obscured. Also, autoplaying videos with audio are steadily being blocked on an increasing number of platforms and so it’s important for us to adhere to this emerging standard.
- To avoid visual obscurity, it’s best to ensure there is sufficient contrast between the video and foreground text. Videos should either be dark, or failing this, have a dark overlay applied to them. The text that sits directly over the video should be presented in a large easy-to-read font and the rest of the text contained in solid blocks that cover up the video.
- Slow gentle movements are important to maintain the ambient nature of the video and to avoid distraction. This is especially important for those with visual or cognitive impairments where rapid movements could hamper their ability to absorb the information being presented.
- Likewise, the video should fade in and out when played or stopped. The sudden appearance of a video can be jarring and just as abrasive as fast movement within the video itself.
- Finally, we must always offer a clearly visible and accessible stop button. As much as we may try to mitigate the problems inherent in moving backgrounds, there will be those for whom it is simply not welcome and this should be respected and provided for.
Accessibility is also a technical concern. If our performance overheads limited our site to the most powerful of computers and the fastest internet connections, we would be failing the majority of our visitors.
- To ensure quick loading and a small memory footprint, our moving backgrounds use high quality video, compressed to under 3mb.
- We always fall back to a static image for browsers and devices that do not support HTML5 video, and if the video fails to load for whatever reason, ensuring that a rich experience is delivered regardless of circumstance.
- For this reason we don’t serve moving backgrounds at all on mobile devices. This is partly a stylistic concern, as the smaller screen space would obscure most of the video, but primarily it’s to avoid eating up the data and battery life of our visitors.
- The video will only loop a set number of times that is suitable for the average dwell time on a page. This prevents an infinitely looping video in a forgotten tab negatively affecting cpu usage and battery life.
This is not an exhaustive, nor final, list. Our goal is always to deliver the best possible experience and as such our website is constantly evolving. Going forward we will continue to research and experiment with the types of content we serve, and explore how best to do this in a respectful, safe and conscientious manner.
