The V&A Digital Map: tablet-optimised, mobile-responsive, data-driven

This post refers to a previous iteration of the V&A digital map. You can read about our latest work on the map or go straight to the map to explore.

–

In September 2013, the Digital Map launched on the V&A website, offering a new interactive map interface for visitors that works on most tablets and smartphones, regardless of operating system (iPads and iPhones, Android tablets and phones, Windows phones, etc). This post looks at the benefits the map provides for visitors, how it fits within the strategic development of the overall website, the user-centred evidence underpinning the design and the iterative development process employed to deliver it.

www.vam.ac.uk/map

Benefits for visitors

A more enjoyable interface

Put simply, the Digital Map gives visitors a pleasurable, simple-to-use way to explore the V&A on their device of choice. They can pinch-and-zoom, drag-and-drop and touch-select rooms, all within an accurate scale map of the Museum. The intuitive graphical interface allows visitors to explore the many galleries and spaces in the V&A to discover the amazing objects that are on display, find out about events they might like and where they are happening in the building. It also clearly shows practical information about essential visitor-facilities such as entrances, stairs lifts and ramps, toilets, shops and places to eat.

A display that adapts to suit the visitor’s device

The Digital Map is optimised for tablets and their touch screens, which allow an intuitive gesture-based way to explore the Museum at visitors’ leisure. However, as we also know our visitors frequently carry smartphones with them in the Museum, the map is also responsive to display on their smaller screens. The map will just work on more or less any device the visitor chooses to bring with them. They don’t have to choose the best display for their device. The map detects screen size and orientation and adapts the display responsively. Of course, the map also works on desktop computers and is responsive upwards and the scale will scale up accordingly on larger large screens. Because the graphics are vector-based so there is no upper limit to the screen size and no loss of quality.

A more accurate map with dynamically updated information

Previously the only map available for visitors was a PDF download version of the traditional printed map. PDFs are designed for sharing documents and printing, but they are large files which need to be downloaded and to have a plugin to view them on, which may be a barrier to visitors. The Digital Map is simply a web page comprosing of HTML5, Javascript, CSS and SVG vector graphics.

Fast dowload on mobile connections

The file size of of the entire Digital Map with all its interactivity is substantially less than the average size of the PDF it complements. The total file size of the map is 1.4Mb, compared to 4.8Mb for a typical PDF map. This is nearly three and a half times less data to request, so download time is reduced too. On mobile devices with slower connections the time saved can be significant for visitors*.  Printed maps are also static and are only republished every few months The Digital Map however, is dynamic updated. If gallery displays or museum events change, the visitor gets the updated information in the Digital Map.

*In a sample test on over 3G on a tablet, the 1.4Mb digital map took 1.34 seconds to download compared to 10.06 seconds for the 4.8Mb PDF. (20 September inside the V&A building)

How visitors can use the map

The map has features familar within apps such as pinch-and-zoom, drop-and-drag and touch-activation. As well as the graphical controls, the map has a search that returns rooms and events based on visitors’ enquiries. It also has a browseable menu with various options that highlight rooms, themed groupings of galleries, basic facilities, etc.

Visitor evidence used in developing the map

The map was designed to meet visitor needs identified within visitor surveys, from analysis of user behaviour within web stats and general trends in how people access the web in society in general.

The map is one of the visitor information pages. In November 2012 we participated in a web-motivation survey within Culture24’s “Let’s Get Real 2” project. This provided useful web stats from people who told us that they were specifically coming to plan a visit. By analysing navigational usage for the segment of visit-planning, we established a pattern of behaviour which (unsuprisingly) showed they were mainly navigating to two main content areas. Information about what is on (exhibitions, events etc.) and practical information about visiting (opening times, facilities, getting to the museum etc.)

We then applied this pattern to historical web stats data for proportionate use of tablet, mobile and desktop across the areas of the site identified as being of importatnce to people planning a visit. This showed some unavoidable trends. These included:

• Tablet access within the What’s On feature on the website was consistently higher than mobile access (tablet access increased by 275% increase over two years to August 2013)
• Mobile phone access within the Visit Us pages was very high. By August 2013, 28.4% of access to the Visit Us pages was on mobile (with a further 16.6% on tablets)

This chart shows at-a-glance, the growing increase in mobile and tablet use in these key visitor areas. It also illustrates the important principle that the way people access our site on different devices varies depending upon the content and purpose of the pages.

This data suggests that tablet-access may be more preferable to visitors within areas intended for gentle perusal such as What’s On, whereas mobile-access seems important for areas where quick information is needed, such as opening times and getting-here pages. The data was useful in confirming the importance of providing a tablet-optimised view as default, and also that there is an equally important visitor need to find related visitor-information fast on a mobile. This helped confirm the prioritisation of the mobile-responsive view.

We also know from web stats that access from Android devices has increased from around 15% to 20% in the year up until August 2013, so we also made sure that Android was covered. In fact because the map is html5, it works on almost any recent browser and is about as platform-independent as can be with a universal design at the current time.

Business advantages of the map

The Digital Map uses data from the Museum’s authoritative internal collections and events databases.  The data is served via various APIs (application programming interfaces). This “create once, publish everywhere” approach, means updates happen once within the core business systems and then these definitive changes spread out into the map (and other web features) avoiding duplication of effort.

The work within the organisation in updating information does not happen in the map. It happens within business-as-usual work by staff using core V&A systems in their normal daily processes. This includes staff in Visitor Services creating and updating event records, Marketing staff producing marketing copy or images and staff across many departments updating collection records in the main museum object-cataloguing database.

Digital assets used in the map are also used in a number of other web-delivered services:

Efficient digital asset-management is a core strand part of the V&A’s Digital FuturePlan programme. The Digital Map is just one example of how the emerging cross-musuem, data-driven approach at the V&A is delivering visitor benefits and business efficiencies.

Development process

The map was developed using an iterative agile process in line with UK Government guidleines for developing public “digital by default” services. After some early alpha prototypes, the first beta version was released in March 2013. This was issued to Museum front-of-house Visitor Services staff, initially using iPad tablets. They used the map to help real visitors. This mediated public feedback was structured around a set of pre-determined wayfinding journeys. These were chosen by Visitor Services staff and were representative of real orientation challenges faced by visitors, based on their frontline experience of helping them, for example finding the way from the Main Entrance to the V&A Cafe to an exhibition.

The staff in this initial beta pilot were also given a form to capture their qualitative evaluation of the functionality, when engaged in these preset tasks. This feedback was used to fine-tune some of the features of the display.

In July 2013, the initial mediated beta was extended by placing the map within the V&A’s free iPad calendar app. In September 2013, the Digital Map was launched on the main website as a live service in a full beta.

Overview of main features

• Simple open standard web technology
  The map is simply an HTML5 web page with javascript, CSS and SVG images. Using open standards allows the Museum to participate in open collaborative development across and beyond the cultural sector.
• Platform independent
  Because it uses open web standards, the map is also not locked into proprietary platforms avoiding vendor lock-in. It is not restricted by app rules controlled by third party operating systems iOS, Android or others. For visitors this means it is forward compatible with almost any web-enabled device.
• Scalable Vector Graphics (SVG)
  The map graphics are SVG vectors which can be scaled down or up without loss of quality.  For visitors, this gives a smooth interactive experience that looks just as good close-up as it does zoomed out. It also means much smaller files sizes than a map made with scalar graphics such as JPEGs or PNGs.
• Small file size for faster download
  The total map size is typically less than 1.5Mb, which is considerably smaller than using comparable static images of maps, or  PDFs (less than 30% of the size of an equivalent, non-interactive PDF for example)
• Tablet-orientated
  The default view is intended to be on a tablet as this is a format gennerally accepted as being popular for leisurely browsing, which is what the Digital Map is intended for.
• Mobile-responsive
  The map will adjust its display dynamically dependent on screen size, to ensure it is still easily useable on mobile phones. (any modern browser on any type of phone)
• Large-screen responsive
  The scaleable vector graphics mean that if the map is used on very large screens, it will simpl expand to fit, without loss of image quality. This is designed to enable future deployments on large touch-screen devices or kiosks.
• Digital-asset driven
  The map is enhanced with authoritative information and images from core Museum sources, updated dynamically via APIs (Application Programming Interfaces). It manipulates object record data from the Collection Management system and event record data from the Events database.

The Digital Map is available at www.vam.ac.uk/map

Credits

Development, concept, interaction design – V&A Digital Media Department
Visual design, layouts, concept development – Noodles at Kiss the Sky

All these people were involved in this development: Luca Carini, Rich Barrett-Small, Az Mohammad, Andrew Lewis, Santino Puleio, Julian Harley, Hans Sure

Beta feedback from users – All the above with generous help from Visitor Services staff, especially the following for organising and distributing beta tests front of house: Erik Viera, Caterina Bisquert, Stephen Dolomore, Vernon Rapley