Hello all! My name is Patrick and I’m a front-end developer and a recent addition to the V&A Digital and Publishing team. I have been working in web development at companies of varying stages, sizes and industries for just over 3 years. My previous roles have involved developing internal tools and websites, but my main interest has always been creating applications that are accessible and useful for broad audiences. I thought that the V&A might give me an opportunity to work on an application that could be interacted with by the many visitors who come to view the collections. My first project turned out to be that very opportunity!
The Brief
I was to develop a new in-museum interactive installation (referred to hereafter as ‘interactive’) for a display exploring the tragic history of ownership of several objects in the Gilbert collection called ‘Concealed Histories‘. The subject of the interactive was to be the Fischer List, a document that lists the fate of various artworks that the Nazi establishment considered to be ‘degenerate’. It was vital in establishing the history of ownership of the objects of the ‘Concealed Histories’ display, and the V&A has in its possession the only known complete copy. In lieu of that copy being displayed, our interactive would include a digital scan of the list that could be explored. As the Fischer List is a bureaucratic document written in German – which only a subset of our visitors would understand – the interactive was also to explain the history of the Fischer List and show how it was used to inform the display.
It would achieve this through a linear journey that explained the history of the Fischer List and the Nazi categorisation of ‘Degenerate Art’, followed by a case study that used a single page to show how it could be used to determine the provenance of an artwork. This journey would also show visitors how to use the list, which would be then presented for exploration in the last screen of the interactive.
Planning Stage
Fortunately, we already had several components capable of presenting information in engaging ways. The V&A had previously commissioned Digirati to develop several embeddable elements for the main website using IIIF standards and deep-zoom technology. In addition to these components, we could use Universal Viewer to present the document itself. My main task was to build a framework for these components to exist in. After a period of requirements engineering, we decided that the framework should have the following features:
- An attract screen – the first screen the user would see before interacting with the screen
- A linear path through a series of screens, at any point the user could return to the attract screen of the interactive
- An idle timer – if the current user stopped using the interactive then it should eventually ‘reset’ to the attract screen
- Screens containing an image, text and a call to action that would advance the interactive
- Screens containing one of the intractable components
- Compact and easy to distribute build that would not require additional installed programs on the target device
The interactive was to be installed on a basic Mac mini running the latest version of OpenKiosk, a modified version of Firefox 60 – not the latest version, meaning I had to check compatibility issues – which locked down the machine to prevent users from accessing other features of the browser. It also had an in-built local server for hosting the files of the interactive.
Approach
We used two noteworthy web technologies in the development of the interactive: Web Components and a static site generator.
As the interactive was a linear path of static screens, and the unfinished elements were mostly simple links to other screens, I determined that the best approach would be to go framework-less. This would reduce performance and size bloat, make the code more maintainable and reusable – and allow me to integrate all of the existing components that were created using different libraries.
To further increase the reusability of the project, I decided to wrap each of the existing components in a Web Component layer. This would allow them to be integrated into a static page easily, and would also make them ideal for templating and extrapolation into partials. As the Digirati components were written in React and the Universal Viewer was written in native JavaScript and jQuery, it also meant not having to force them to fit into a framework together.
Technology
After some investigation, we decided that Hugo would be our static site generator of choice. An open-source project written in Go, Hugo features an extremely robust and flexible templating system with powerful in-built logic, and allows the use of partials so that code can be written in a modular and reusable way. As I needed to build some additional features in JavaScript – chiefly the idle timer – I used a boiler-plate repository called Victor Hugo that combines both Webpack and Hugo. This allowed me to easily bundle additional JavaScript and CSS and add it to the site generated by Hugo, and then use Babel to transpile code written in ES6. Integrating Google Tag Manager for analytics was very straightforward, and allowed us to see how people use the interactive.
Future
Here you can see the finished interactive in the Gilbert Gallery! It proved popular, with many sessions recorded. While there were some initial technical teething issues, the fact that we built in-house meant that any issues could easily and quickly fixed. It was a valuable experience developing it, as I got to try several cutting-edge web technologies I was curious about – in future I hope to convert it into a fully-fledged interactive framework with a CMS (content management system). I believe that web components lend themselves well for an authoring tool, and there are several CMS solutions that work well with Hugo with little configuration. It would perhaps need to take into account the potential of a more complex path through screens, rather than a linear journey. For a subsequent work, I would also like to be able to support gesture controls and take full advantage of a multi-touch display.
The interactive in this blog is now unfortunately not safe to be used and so is no longer in the gallery. In a COVID landscape, a shared touch screen that cannot be easily cleaned poses a great contamination risk. Future museum interactives will need to avoid this by either being touch free – using gesture recognition devices such as Microsoft’s Kinect – or be available to use via visitors’ own devices. As the resulting interactive from our framework can be used in an internet browser, the work outlined here can be potentially built upon to create interactives for mobile phones and tablets.
Thanks to Eric Bates and Thomas Lumeau for their assistance with the interactive installation; Alice Minter and Jacques Schuhmacher for their knowledge of the Gilbert Collection, and input into the design; and also to Richard Hulse of the Te Papa museum for his work on their own interactive framework which was hugely informative.
