From MCG 'Museums Get Mobile!' event 16 May 2014 This session looked at how user needs and behaviours vary across different contexts in their lives and how different devices are used in different ways that affect how to think about responsive service design. It combines concepts to help think through and prioritise a responsive design, with hints and tips based on service implementations at the V&A that you can adapt and use.

1. Andrew Lewis
Thinking Holistically about
Mobile-responsive Services
Museums Get Mobile!
MCG Spring Meeting
Victoria and Albert Museum
MShed, Bristol, 16 May 2014

3. Mobile-responsive?

4. A responsive web service is one
that adjusts automatically
to suit the different ways your
audiences choose to access it

6. brick
• Heavy
• Rough
• Orangey
• Porous
• Flat
• Hand-sized
• Stable on each side
• Dense material
• Quite brittle
• Cheap
characteristics

7. phone
• Takes photos, videos audio
• Allows remote speech
• Has a rechargeable battery
• Quite light, easily breakable
• Pocket-sized
• Touch enabled, finger-sized
• Expensive/valuable
• Has model-specific features
• Replaces pre-planning
• Taken everywhere
characteristics

8. 2007
Stability Disruption

10. What does mobile responsive mean?

11. Technology
Social behaviour

12. • Takes photos, videos audio
• Allows remote speech
• Has a rechargeable battery
• Quite light, easily breakable
• Pocket-sized
• Touch enabled, finger-sized
• Expensive/valuable
• Has model-specific features
• Replaces pre-planning
• Taken everywhere
characteristics

15. as digital technology changes
User contexts change
services need to be
responsive to
mobile is simply a
significant context (currently)

16. The contexts of voice??

17. The contexts of wearables??

19. User context – planning on the go

20. User context – phone as visual diary

21. User context – comfy sofa time

22. User context – uncomfy conference time

23. Department of Transport.THINK! campaign
Mobile users Tablet users
A.Lewis, random observation

24. Digital elements of a museum visit… screen use is contextual
Discovery Journey Being hereAwareness
Activity: social digital
Location: anywhere
Screen: mobile
Activity: leisurely discovery
Location: home
Screen: tablet
Activity: wayfinding
Location: on the move
Screen: mobile
Activity: leisurely discovery
Location: Museum
Screen – none/gallery screens/
mobile
Twitter, Facebook,
etc
Digital map,
What’s On
Mobile-optimised
Visit Us page
The awesome V&A

27. Enough theory…

28. Keeping it simple

31. Display changes as
screen size changes
@media screen and (max-width: 640px) {
your code here… }
}

32. Banner
A CB
Banner
A B
E F
C D
A
B
C
Banner

33. Scaling and positioning of images

34. Dual-modes for task optimisation

35. Responsive to orientation

36. Responsive to zoom scale

37. Responsive for large screens

38. Visitor Information
Optimisation - quick wins based on data

39. Separate user-design
from digital assets

40. Search the Collections (STC)
Mobile STC
Website auto-display module
Furniture gallery digital label
Digital map
One chair.
One authoritative
digital asset.
Powered by APIs

41. Free stuff

42. www.vam.ac.uk/b/blog/digital-media/mobile-research-resources
Research reports are listed here :)

43. http://www.vam.ac.uk/b/blog/digital-media/responsive-website-1
Planning V&A responsive is here…

44. http://www.vam.ac.uk/b/blog/digital-media/mobile-wifi-screens
Mobile Wi-Fi review is here…

45. www.vam.ac.uk/digital

46. Andrew Lewis
Thank you…
Victoria and Albert Museum
www.vam.ac.uk/digital