andrew lewis - thinking holistically about mobile-responsive services
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.TRANSCRIPT
Andrew Lewis
Thinking Holistically aboutMobile-responsive Services
Museums 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/mobile
Twitter, Facebook, etc
Digital 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
Banner
A B
E FC D
AB
C
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-design
from 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