Designing Multi-Device Experiences (book review)
-
Upload
stefan-freimark -
Category
Internet
-
view
1.877 -
download
0
Transcript of Designing Multi-Device Experiences (book review)
![Page 1: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/1.jpg)
Designing Multi-Device Experiences Book review
b Creative Commons license for this presentation. Copyright and licenses for included images differ.
![Page 2: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/2.jpg)
Photo: Stefan Freimark
![Page 3: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/3.jpg)
@freimark
Photo: flickr.com/photos/j_benson/7296569144
![Page 4: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/4.jpg)
slideshare.net/sfreimark
Photo: flickr.com/photos/114382574@N05/12221680395
![Page 5: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/5.jpg)
Michal Levin O’Reilly, 2014
![Page 6: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/6.jpg)
Michal Levin Senior UX Designer Google, Palo Alto @michall79
Photo used with permission
![Page 7: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/7.jpg)
7
Topics
An ecosystem of connected devices
Three approaches for multi-device design
Beyond the core devices
How to
01
02
03
04
![Page 8: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/8.jpg)
An ecosystem of connected devices
![Page 9: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/9.jpg)
Photo: flickr.com/photos/gabrielap93/6074460669
![Page 10: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/10.jpg)
Photo: shutterstock.com/pic-154488353
![Page 11: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/11.jpg)
Photo: shutterstock.com/pic-173451509
![Page 12: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/12.jpg)
Photo: flickr.com/photos/poolie/2433764292
![Page 13: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/13.jpg)
Photo: shutterstock.com/pic-135544436
![Page 14: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/14.jpg)
Photo: shutterstock.com/pic-251428303
![Page 15: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/15.jpg)
Photo: Stefan Freimark
![Page 16: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/16.jpg)
Photo: flickr.com/photos/robgreen/11211153914
![Page 17: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/17.jpg)
Photo: flickr.com/photos/smoothgroover22/13145117175
![Page 18: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/18.jpg)
Photo: flickr.com/photos/smoothgroover22/13145117175
7G Amount of connected devices in 2013 Cisco Visual Networking Index: Global Media Data Traffic Forecast
![Page 19: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/19.jpg)
Photo: flickr.com/photos/smoothgroover22/13145117175
24G Amount of connected devices in 2020 (estimation)
Cisco Visual Networking Index: Global Media Data Traffic Forecast
![Page 20: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/20.jpg)
Photo: shutterstock.com/pic-206326831
90% of 1,611 respondents use more than one device for getting a task done
The New Multi-screen World: Understanding Cross-platform Consumer Behavior Google, August 2012 http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
![Page 21: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/21.jpg)
! Single-device design is history. And: With new possibilities, expectations rise.
![Page 22: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/22.jpg)
Three approaches for multi-device design
![Page 23: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/23.jpg)
23
Three approaches for multi-device design
Consistent Complementary Continuous
![Page 24: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/24.jpg)
Consistent
![Page 25: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/25.jpg)
Consistent means: The same content and features are available on multiple devices.
![Page 26: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/26.jpg)
Full-responsive website
26
Asklepios Kliniken
![Page 27: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/27.jpg)
Account section
27
Miles & More
![Page 28: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/28.jpg)
Cross-platform app
28
Trello
![Page 29: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/29.jpg)
! Consistent doesn‘t mean identical.
![Page 30: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/30.jpg)
Some examples for device differences:
§ display size
§ interaction model (physical buttons, gestures, voice recognition...)
§ availability or non-availability of sensors (GPS, gyrometer, accelerometer...)
30
Differences between devices require design optimizations
![Page 31: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/31.jpg)
31
Adjust for device differences
Optimize for layout Grid, dimensions of images and buttons, font size, spacing between elements
Optimize for gestures
Larger tap targets and gaps between linked areas, swipeable sliders, avoiding hover interactions
Optimize for device characteristics
<a href=“tel:12345“> <input type=“tel“> <input type=“email“>
![Page 32: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/32.jpg)
Photo: flickr.com/photos/quinnanya/5892760393
Optimization for devices vs. consistent ecosystem
![Page 33: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/33.jpg)
33
The core experience should remain consistent across devices.
Consistent core functionality
The MVP should be identical across devices. Feature parity: Features should be available as much as possible and work as similar as possible.
Consistent content
Content parity: All content is available of all devices. The IA should be identical (as much as possible).
Consistent “Look & Feel“
A common visual language supports recognition and orientation across devices.
![Page 34: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/34.jpg)
Continuous
![Page 35: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/35.jpg)
Continuous design addresses a user flow that runs along a set of contexts, during which devices “pass the baton” to one another.
![Page 36: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/36.jpg)
Single Activity
Photo: flickr.com/photos/toffee_maky/7928636400
![Page 37: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/37.jpg)
Single Activity Sequenced Activity
Photo: flickr.com/photos/toffee_maky/7928636400 Photo: Stefan Freimark
![Page 38: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/38.jpg)
Photo: flickr.com/photos/toffee_maky/7928636400
Single Activity
![Page 39: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/39.jpg)
Single Activity
Photo: flickr.com/photos/toffee_maky/7928636400
Examples include reading a book, watching a movie or writing a document.
These activities typically span a longer time period and might occur in different contexts – the activity itself doesn‘t change, though.
![Page 40: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/40.jpg)
Amazon Kindle Single Activity: Reading
Photo: Stefan Freimark
![Page 41: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/41.jpg)
Handoff/Continuity on OS X and iOS Single Activity, e.g. Reading
Photo: Stefan Freimark
![Page 42: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/42.jpg)
Single Activity: Drawing a diagram
42
OmniGraffle (and syncing with OmniPresence)
Photo: omnigroup.com/omnigraffle © The Omni Group. Reproduced by permission of the Omni Group.
?
![Page 43: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/43.jpg)
? Continuous vs. Consistent?
![Page 44: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/44.jpg)
Sequenced Activity
Photo: Stefan Freimark
![Page 45: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/45.jpg)
Sequenced Activity
Photo: Stefan Freimark
Some activities consist of multiple tasks (sequences).
The lengthier the activity, the more likely it is that...
§ it won’t be completed in a single engagement (=multiple sessions)
§ the contextual environment will change (=shifting contexts)
§ it can be broken down into a set of granular subtasks
![Page 46: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/46.jpg)
Eventbrite Continuous (Sequenced activity flow)
![Page 47: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/47.jpg)
! Continuous design enables us to rethink user flows we might have taken for granted.
![Page 48: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/48.jpg)
? How can we expand the Eventbrite example? Which features support user needs, while users progress through time?
![Page 49: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/49.jpg)
49
pre- event
Finding events
Exploring event info
Registering for an event
Choosing sessions Agenda-
cente
red
People
-cente
red
Sharing event with peers
Reviewing attendee list
Noting people to meet
![Page 50: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/50.jpg)
Arriving at the venue
Checking the event schedule
Getting to the event on time § Transportation § Directions § Parking
Checking in
Getting coffee to start the day
Determining who’s here
Anyone I already know?
Any of the people I noted?
People-centered
Agenda-centered
![Page 51: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/51.jpg)
During event
Checking event schedule
Exploring events info
Attending sessions § When, where, and how to
get there § Session and speaker info
People-centered
Agenda-centered
Taking breaks § Options (cafeterias,
roof terrace) § Time left until breaks § “break about to end” alerts
Attending social events § What, when, where § How to get there
Making new connections § Meeting new people,
especially those I want to talk with
§ Catching up with people I already know
§ Exchanging business cards
Attending sessions/ social events § Who’s going? § Conversation starters
(e.g. common interests, background, recent articles published)
![Page 52: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/52.jpg)
post-event People-centered
Agenda-centered
Organizing event materials § Slides § Videos § Books
Posting photos/videos from the event
Preparing a review for colleagues
Following up with people
![Page 53: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/53.jpg)
The trained eye recognizes a customer journey. :-)
![Page 54: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/54.jpg)
Complementary
![Page 55: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/55.jpg)
Different devices complement each other – either by collab-orating as a connected group, or controlling one another.
![Page 56: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/56.jpg)
56
Collaboration Devices work as a connected group
Control A device controlling another device
Must have Scrabble Party Play
Hexler TouchOSC
Nice to have Companion apps for second screen
Companion apps for digital cameras
Different devices complement one another – as a connected group or controlling one another.
Participating devices are an integral part of the experience.
An added device can deepen the UX, but isn’t essential to accomplish the fundamental task.
![Page 57: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/57.jpg)
Scrabble Party Play Collaboration (must have)
Photo: flickr.com/photos/lokesh/4649807115
![Page 58: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/58.jpg)
Companion apps for second screen usage Collaboration (nice to have)
Photo: de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg
![Page 59: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/59.jpg)
Hexler TouchOSC Control (must have)
Video: youtube.com/watch?v=4v_Eb2j0vZ8
![Page 60: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/60.jpg)
Companion apps for digital cameras Control (nice to have)
60 Photo: Wolfgang Freimark
![Page 61: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/61.jpg)
61
Collaboration Devices work as a connected group
Control A device controlling another device
Must have Scrabble Party Play Complementary to own software
Hexler TouchOSC Complementary to products by other vendors
Nice to have Companion apps for second screen Complementary to own service
Companion apps for digital cameras Complementary to own hardware
Different devices complement one another – as a connected group or controlling one another.
![Page 62: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/62.jpg)
Beyond the core devices
![Page 63: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/63.jpg)
Photo: shutterstock.com/pic-257990591
![Page 64: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/64.jpg)
„ It feels like a watch in the physical sense. However it does not feel like a watch conceptually. Horace Dediu asymco.com/2015/04/14/the-watch/
![Page 65: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/65.jpg)
„ The question is whether the Watch will quickly leave behind its timekeeping anchor and move into being something completely different. Horace Dediu asymco.com/2015/04/14/the-watch/
![Page 66: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/66.jpg)
Photo: shutterstock.com/pic-257990591
Single-device scenarios
§ Information access o location-unaware
o location-based
§ Notifications o „FYI“, e.g. time-based reminders
o actionable
§ Getting physical access
§ Navigation
§ Special use cases o Cab hailing
o ...
Multi-device scenarios
§ Consistent
§ Continuous o Single Activity Flow
o Sequenced Activity Flow
§ Complementary o Collaboration
o Control
![Page 67: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/67.jpg)
Single-device scenarios
WebMD Yelp Komoot
?
![Page 68: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/68.jpg)
Babbel OmniFocus
Multi-device scenarios Consistent
68 Yelp
![Page 69: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/69.jpg)
Multi-device scenarios
Yelp
Continuous (Single activity flow)
![Page 70: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/70.jpg)
Multi-device scenarios
Airberlin
Continuous (Sequenced activity flow)
![Page 71: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/71.jpg)
Multi-device scenarios Complementary (Control)
Photo: flickr.com/photos/mycutelife/4734441769
![Page 72: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/72.jpg)
Photo: shutterstock.com/pic-257990591
Single-device scenarios
§ Information access o location-unaware
o location-based
§ Notifications o „FYI“, e.g. time-based reminders
o actionable
§ Getting physical access
§ Navigation
§ Special use cases o Cab hailing
o ...
Multi-device scenarios
§ Consistent
§ Continuous o Single Activity Flow
o Sequenced Activity Flow
§ Complementary o Collaboration
o Control
![Page 73: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/73.jpg)
Cooperations enable integration of services with „new“ devices (like cars). Or services among each other.
![Page 74: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/74.jpg)
Volvo + Spotify
Photo: media.volvocars.com/global/en-gb/media/photos/48255 © Volvo Car Group, Public Affairs, SE-405 31 Gothenburg. Used with permission.
![Page 75: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/75.jpg)
Uber + Spotify
75
Bei der Vernetzung von Services spielen die Geräte eine Nebenrolle.
Photo: flickr.com/photos/cote/15788947118
![Page 76: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/76.jpg)
All devices able to connect (via Bluetooth, WiFi, LTE, NFC...) can be part of the Internet of Things.
![Page 77: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/77.jpg)
Smart Keys
77 Photo: flickr.com/photos/walkn/3041590472
Bluetooth tags enable findability, e.g. by Elgato or Tile
![Page 78: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/78.jpg)
August Smart Lock
Photo: august.com/press.html © August Home, Inc. Used with permission.
![Page 79: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/79.jpg)
Zepp
Photo: flickr.com/photos/trysil/5865597031
![Page 80: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/80.jpg)
Deutsche Telekom + Canyon
Photo: flickr.com/photos/kevinshine/10082788546
?
![Page 81: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/81.jpg)
81
![Page 82: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/82.jpg)
How to
![Page 83: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/83.jpg)
Don‘t start by asking questions like...
§ How can our brand be present on device XYZ?
§ Responsive Webdesign or Adaptive Templates?
§ Mobile first?
§ What‘s technically feasible?
§ Consistent, Continuous, Complementary?
83
![Page 84: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/84.jpg)
! These questions have a place in the design process, but they shouldn‘t be the ones driving the decision making.
![Page 85: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/85.jpg)
Start by asking basic questions
§ What are the user‘s needs and goals that this product ecosystem tries to address?
§ What are the main flows and use contexts?
Then: Which experience approaches can best accomodate these needs within each flow?
85
![Page 86: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/86.jpg)
86
![Page 87: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/87.jpg)
Think customer journey.
87
pre- event
Arriving at the venue
During event
post-event
![Page 88: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/88.jpg)
„ The best multi-device experiences are those that first look at people and what they need rather than focusing on technology and what it can do. Michal Levin
![Page 89: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/89.jpg)
! Do what makes sense. Nobody needs Nike+ on a washing machine.
![Page 90: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/90.jpg)
Conclusion
![Page 91: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/91.jpg)
91
Overview of Michal Levin‘s 3C framework
Consistent Continuous Complementary
The same content and features are available on multiple devices.
Continuous design addresses a user flow that runs along a set of con texts, during which devices “pass the baton” to one another.
Different devices complement one another – either by collaborating as a connected group, controlling one another, or both.
§ Single Activity Flow § Sequenced Activity Flow
Event example: o Agenda-centered o People-centered
§ Collaboration o Must have o Nice to have
§ Control o Must have o Nice to have
![Page 92: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/92.jpg)
§ Single-device design is history
§ There‘s more than one way to approach multi-device experiences
§ Start with user needs o Do your research o Think in customer journeys o Think in use cases
§ Know the capabilities and limitations of each device class and platform – both technically and conceptually
92
Take away points
![Page 93: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/93.jpg)
Michal Levin O’Reilly, 2014
![Page 94: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/94.jpg)
Two more chapters cover additional topics.
§ Multi-Device Analytics
§ Transforming Challenges
94
![Page 95: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/95.jpg)
The book contains food for thought throughout.
21 Design Lessons, e.g.:
§ Continuous experience can start offline
§ QR supports continuity; AR provides a complementary experience
§ The complexity and trade-offs behind the freedom “to do anything”
14 Discussions, e.g.:
§ Educating for Continuity
§ Designing for Beginner vs. Advanced Users
§ The Battery-Life Challenge
§ Multi-Device Experiences in the Service of Health
95
![Page 96: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/96.jpg)
Further reading
96
November 2014 May 2015 December 2014
? ? ?
![Page 97: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/97.jpg)
! Buy Michal‘s book! Read her book! Start with user needs!
![Page 98: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/98.jpg)
! :-) Stefan Freimark Senior UX Consultant E-Mail [email protected] Slideshare slideshare.net/sfreimark Twitter @freimark Aperto AG – In der Pianofabrik Chausseestr. 5 10115 Berlin www.aperto.de
![Page 99: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/99.jpg)
Backup
![Page 100: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/100.jpg)
100
slideshare.net/sfreimark/mental-models-nur-folien slideshare.net/chrisdudeberlin/the-experience-is-the-message-creating-unique-airline-brand-experiences
mappingexperiences.com
Learn more about customer journeys
![Page 101: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/101.jpg)
Image credits
![Page 102: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/102.jpg)
This presentation is licensed under CC BY. You may present it in its entirety, or use parts or ideas for your own talks.
Please be aware that the copyright for the template is at Aperto AG.
Please be aware that images used within this presentation do not inherit the CC BY license of the presentation. Although some images are licensed under CC BY, others are licensed under CC BY-SA, and some are copyrighted and not free to use.
102
Licenses
![Page 103: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/103.jpg)
Book covers
103
© O’Reilly Media, Inc.
Cover designer: Randy Comer oreilly.com/catalog/9781449371241
Cover designer: Ellie Volckhausen oreilly.com/catalog/0636920030676
Cover designer: Ellie Volkhausen oreilly.com/catalog/0636920024651
Cover designer: (unknown) oreilly.com/catalog/0636920031109
![Page 104: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/104.jpg)
Shutterstock pictures
104
© by Shutterstock photographers
Dean Drobot www.shutterstock.com/pic-154488353 Licensed by Stefan Freimark
Eugenio Marongiu www.shutterstock.com/pic-173451509 Licensed by Stefan Freimark
guteksk7 www.shutterstock.com/pic-257990591 Licensed by Stefan Freimark
manaemedia www.shutterstock.com/pic-135544436 Licensed by Stefan Freimark
nexus 7 www.shutterstock.com/pic-251428303 Licensed by Stefan Freimark
Twin Design www.shutterstock.com/pic-206326831 Licensed by Stefan Freimark
![Page 105: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/105.jpg)
Flickr images
105
b
Perin J-C www.flickr.com/photos/114382574@N05/12221680395 BY 2.0
John Benson www.flickr.com/photos/j_benson/7296569144 BY 2.0
Gabriela Pinto www.flickr.com/photos/gabrielap93/6074460669 BY 2.0
Alexander Kaiser www.flickr.com/photos/poolie/2433764292 BY 2.0
Lokesh Dhakar www.flickr.com/photos/lokesh/4649807115 BY 2.0
Elmo Love www.flickr.com/photos/mycutelife/4734441769 BY 2.0
License information: www.creativecommons.org/licenses/by/2.0
![Page 106: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/106.jpg)
Flickr images
106
b
Michael Coté Screenshot of Uber app www.flickr.com/photos/cote/15788947118 BY 2.0
walknboston www.flickr.com/photos/walkn/3041590472 BY 2.0
Trysil www.flickr.com/photos/trysil/5865597031 BY 2.0
kev-shine flickr.com/photos/kevinshine/10082788546 BY 2.0
License information: www.creativecommons.org/licenses/by/2.0
![Page 107: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/107.jpg)
Flickr images
107
ba
smoothgroover22 www.flickr.com/photos/smoothgroover22/13145117175 BY-SA 2.0
Robert Basic www.flickr.com/photos/robgreen/11211153914 BY-SA 2.0
Quinn Dombrowski www.flickr.com/photos/quinnanya/5892760393 BY-SA 2.0
Marketa www.flickr.com/photos/toffee_maky/7928636400 BY-SA 2.0
pr_ip Primus Inter Pares http://de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg BY-SA 2.0
License information: www.creativecommons.org/licenses/by-sa/2.0
![Page 108: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/108.jpg)
Press images and miscellaneous images
108
© Miscellaneous photographers/artists
Unknown photographer Image of Michal Levin provided by Michal Levin. Used with permission.
Volvo Car Group, Public Affairs, SE-405 31 Gothenburg media.volvocars.com/global/en-gb/media/photos/48255 Used with permission.
August Home, Inc. www.august.com/press.html Used with permission.
Jesse James Garrett www.jjg.net/elements/pdf/elements.pdf
![Page 109: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/109.jpg)
Screenshots
109
Screenshots made by Stefan Freimark, © by respective rights holders
Miles & More GmbH www.miles-and-more.com
Asklepios Kliniken GmbH www.asklepios.de/hamburg/harburg/
Trello website and app, displaying board of UXcamp Europe planning team trello.com, uxcampeurope.org
Omni Development, Inc. (OmniGraffle app) www.omnigroup.com/omnigraffle Reproduced by permission of the Omni Group.
Eventbrite website and app, displaying a ticket for UXcamp Europe eventbrite.com, uxcampeurope.org
sawrecordings1 www.youtube.com/watch?v=4v_Eb2j0vZ8 Video directed by Terry Church
![Page 110: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/110.jpg)
Screenshots
110
Screenshots made by Stefan Freimark, © by respective rights holders
Olympus K.K. Screenshot of companion app „Image share“, made by Wolfgang Freimark www.olympus.com
Air Berlin PLC & Co. Luftverkehrs KG www.airberlin.com
Smart Fabrics & Wearable Technology 2015 (conference website) www.smartfabricsconference.com
![Page 111: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/111.jpg)
Screenshot of Apple Watch apps
111
Screenshots and press images © by respective rights holders
WebMD, LLC. www.webmd.com Publicly available press image.
Komoot GmbH www.komoot.de Used with permission.
Yelp, Inc. www.yelp.com Used with permission.
Lesson Nine GmbH www.babbel.com Used with permission.
Omni Development, Inc. www.omnigroup.com Used with permission.
Air Berlin PLC & Co. Luftverkehrs KG www.airberlin.com Used with permission.
![Page 112: Designing Multi-Device Experiences (book review)](https://reader031.fdocuments.in/reader031/viewer/2022021921/58f9b3bb760da3da068bd923/html5/thumbnails/112.jpg)
Photos by Stefan Freimark
112
© Stefan Freimark
Stefan Freimark Aperto business card
Stefan Freimark Apple Watch at Apple Store Kurfürstendamm
Stefan Freimark Amazon Kindle Paperwhite
Stefan Freimark iPad mini Retina with Instapaper app icon
Stefan Freimark UXcamp Europe 2014, session by Jason Mesut