Designing Multi-Device Experiences (book review)

transcript

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

Topics

An ecosystem of connected devices

Three approaches for multi-device design

Beyond the core devices

How to

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

Photo: flickr.com/photos/smoothgroover22/13145117175

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.

Three approaches for multi-device design

Consistent Complementary Continuous

Consistent

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

Full-responsive website

Asklepios Kliniken

Account section

Miles & More

Cross-platform app

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

Differences between devices require design optimizations

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

Photo: flickr.com/photos/quinnanya/5892760393

Optimization for devices vs. consistent ecosystem

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

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

OmniGraffle (and syncing with OmniPresence)

Photo: omnigroup.com/omnigraffle © The Omni Group. Reproduced by permission of the Omni Group.

? Continuous vs. Consistent?

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?

pre- event

Finding events

Exploring event info

Registering for an event

Choosing sessions Agenda-

People

-cente

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.

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

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

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

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: flickr.com/photos/trysil/5865597031

Deutsche Telekom + Canyon

Photo: flickr.com/photos/kevinshine/10082788546

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?

! 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?

Think customer journey.

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

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

Take away points

Michal Levin O’Reilly, 2014

Two more chapters cover additional topics.

§  Multi-Device Analytics

§  Transforming Challenges

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