Designing Multi-Device Experiences (book review)

Designing Multi-Device Experiences Book review

b Creative Commons license for this presentation. Copyright and licenses for included images differ.

Photo: Stefan Freimark

@freimark

Photo: flickr.com/photos/j_benson/7296569144

slideshare.net/sfreimark

Photo: flickr.com/photos/114382574@N05/12221680395

Michal Levin O’Reilly, 2014

Michal Levin Senior UX Designer Google, Palo Alto @michall79

Photo used with permission

7

Topics

An ecosystem of connected devices

Three approaches for multi-device design

Beyond the core devices

How to

01

02

03

04

An ecosystem of connected devices

Photo: flickr.com/photos/gabrielap93/6074460669

Photo: shutterstock.com/pic-154488353


Photo: flickr.com/photos/poolie/2433764292




Photo: flickr.com/photos/robgreen/11211153914

Photo: flickr.com/photos/smoothgroover22/13145117175


7G Amount of connected devices in 2013 Cisco Visual Networking Index: Global Media Data Traffic Forecast


24G Amount of connected devices in 2020 (estimation)

Cisco Visual Networking Index: Global Media Data Traffic Forecast


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

! Single-device design is history. And: With new possibilities, expectations rise.


23


Consistent Complementary Continuous

Consistent

Consistent means: The same content and features are available on multiple devices.

Full-responsive website

26

Asklepios Kliniken

Account section

27

Miles & More

Cross-platform app

28

Trello

! Consistent doesn‘t mean identical.

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

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“>

Photo: flickr.com/photos/quinnanya/5892760393

Optimization for devices vs. consistent ecosystem

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.

Continuous

Continuous design addresses a user flow that runs along a set of contexts, during which devices “pass the baton” to one another.

Single Activity

Photo: flickr.com/photos/toffee_maky/7928636400

Single Activity Sequenced Activity

Photo: flickr.com/photos/toffee_maky/7928636400 Photo: Stefan Freimark


Single Activity

Single Activity


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.

Amazon Kindle Single Activity: Reading


Handoff/Continuity on OS X and iOS Single Activity, e.g. Reading


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.

?

? Continuous vs. Consistent?

Sequenced Activity


Sequenced Activity


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

Eventbrite Continuous (Sequenced activity flow)

! Continuous design enables us to rethink user flows we might have taken for granted.

? How can we expand the Eventbrite example? Which features support user needs, while users progress through time?

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

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

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)

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

The trained eye recognizes a customer journey. :-)

Complementary

Different devices complement each other – either by collab-orating as a connected group, or controlling one another.

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.

Scrabble Party Play Collaboration (must have)

Photo: flickr.com/photos/lokesh/4649807115

Companion apps for second screen usage Collaboration (nice to have)

Photo: de.wikipedia.org/wiki/Datei:Secondscreen_wettendass_Ipad-app.jpg

Hexler TouchOSC Control (must have)

Video: youtube.com/watch?v=4v_Eb2j0vZ8

Companion apps for digital cameras Control (nice to have)

60 Photo: Wolfgang Freimark

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.

Beyond the core devices


„ 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/

„ 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/


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


WebMD Yelp Komoot

?

Babbel OmniFocus

Multi-device scenarios Consistent

68 Yelp


Yelp

Continuous (Single activity flow)


Airberlin

Continuous (Sequenced activity flow)

Multi-device scenarios Complementary (Control)

Photo: flickr.com/photos/mycutelife/4734441769



§  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  ...


§  Consistent

§  Continuous o  Single Activity Flow

o  Sequenced Activity Flow

§  Complementary o  Collaboration

o  Control

Cooperations enable integration of services with „new“ devices (like cars). Or services among each other.

Volvo + Spotify

Photo: media.volvocars.com/global/en-gb/media/photos/48255 © Volvo Car Group, Public Affairs, SE-405 31 Gothenburg. Used with permission.

Uber + Spotify

75

Bei der Vernetzung von Services spielen die Geräte eine Nebenrolle.

Photo: flickr.com/photos/cote/15788947118

All devices able to connect (via Bluetooth, WiFi, LTE, NFC...) can be part of the Internet of Things.

Smart Keys

77 Photo: flickr.com/photos/walkn/3041590472

Bluetooth tags enable findability, e.g. by Elgato or Tile

August Smart Lock

Photo: august.com/press.html © August Home, Inc. Used with permission.

Zepp

Photo: flickr.com/photos/trysil/5865597031

Deutsche Telekom + Canyon

Photo: flickr.com/photos/kevinshine/10082788546

?

81

How to

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

! These questions have a place in the design process, but they shouldn‘t be the ones driving the decision making.

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

86

Think customer journey.

87

pre- event

Arriving at the venue

During event

post-event

„ 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

! Do what makes sense. Nobody needs Nike+ on a washing machine.

Conclusion

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

§  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

Michal Levin O’Reilly, 2014

Two more chapters cover additional topics.

§  Multi-Device Analytics

§  Transforming Challenges

94

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

Further reading

96

November 2014 May 2015 December 2014

? ? ?

! Buy Michal‘s book! Read her book! Start with user needs!

! :-) 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

Backup

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

Image credits

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

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

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

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

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

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

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

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

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

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.

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

Date post:	21-Apr-2017
Category:	Internet
Upload:	stefan-freimark
View:	1,877 times
Download:	0 times