View
635
Download
6
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
Andrew Lewis
Thinking Holistically aboutMobile-responsive ServicesMuseums Get Mobile!MCG Spring Meeting
Victoria and Albert Museum
MShed, Bristol, 16 May 2014
Mobile-responsive?
A responsive web service is one that adjusts automatically
to suit the different ways your audiences choose to
access it
brick
• Heavy• Rough• Orangey• Porous• Flat• Hand-sized• Stable on each side• Dense material• Quite brittle• Cheap
characteristics
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
2007
Stability Disruption
What does mobile responsive mean?
TechnologySocial behaviour
• 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
as digital technology changes
User contexts
change
services need to be responsive to
mobile is simply asignificant context
(currently)
The contexts of voice??
The contexts of wearables??
User context – planning on the go
User context – phone as visual diary
User context – comfy sofa time
User context – uncomfy conference time
Department of Transport. THINK! campaign
Mobile users Tablet users
A.Lewis, random observation
Digital elements of a museum visit… screen use is contextual Discovery Journey Being hereAwareness
Activity: social digital
Location: anywhere
Screen: mobile
Activity: leisurely discoveryLocation: homeScreen: tablet
Activity: wayfindingLocation: on the move
Screen: mobile
Activity: leisurely discoveryLocation: Museum
Screen – none/gallery screens/mobileTwitter,
Facebook, etcDigital map, What’s On
Mobile-optimisedVisit Us page The awesome V&A
Enough theory…
Keeping it simple
Display changes as screen size changes
@media screen and (max-width: 640px) { your code here… }
}
Banner
A CB
BannerA B
E FC D
ABC
Banner
Scaling and positioning of images
Dual-modes for task optimisation
Responsive to orientation
Responsive to zoom scale
Responsive for large screens
Visitor Information
Optimisation - quick wins based on data
Separate user-designfrom digital assets
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
Free stuff
www.vam.ac.uk/b/blog/digital-media/mobile-research-resources
Research reports are listed here :)
http://www.vam.ac.uk/b/blog/digital-media/responsive-website-1
Planning V&A responsive is here…
http://www.vam.ac.uk/b/blog/digital-media/mobile-wifi-screens
Mobile Wi-Fi review is here…
www.vam.ac.uk/digital
Andrew Lewis
Thank you…
Victoria and Albert Museum
www.vam.ac.uk/digital
Recommended