96
http://www.flickr.com/photos/geckospake/4082648621 DESIGNING THE SPACES BETWEEN JOSH CLARK • @GLOBALMOXIE

Mind the Gap: Designing the Space Between Devices

Embed Size (px)

DESCRIPTION

There's untapped magic in the gaps between gadgets. Multi-screen design is a preoccupying problem as we try to fit our content into many different screens. But as devices multiply, the new opportunity is less about designing individual screens but designing interactions BETWEEN them—often without using a screen at all. Learn to create web and app experiences that share control among multiple devices, designing not only for screens but for sensors. The technology is already here in our pockets, handbags, and living rooms. Learn how to use it right now.

Citation preview

Page 1: Mind the Gap: Designing the Space Between Devices

http://www.flickr.com/photos/geckospake/4082648621

DESIGNING THE SPACES BETWEEN

JOSH CLARK • @GLOBALMOXIE

Page 2: Mind the Gap: Designing the Space Between Devices

PALM PILOT

Palm Vbitly.com/palm-train

Page 3: Mind the Gap: Designing the Space Between Devices
Page 4: Mind the Gap: Designing the Space Between Devices

Multidevice

21 device changesper hour

http://www.campaignlive.co.uk/news/1225960/

Page 5: Mind the Gap: Designing the Space Between Devices

90% accomplish tasksacross multiple

screens

http://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html

Page 6: Mind the Gap: Designing the Space Between Devices

90% accomplish tasksacross multiple

screens

67% start shoppingon one device and

continue on anotherhttp://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html

Page 7: Mind the Gap: Designing the Space Between Devices

Search Email Text

Page 8: Mind the Gap: Designing the Space Between Devices

The Gap

Page 9: Mind the Gap: Designing the Space Between Devices

RCA Victor (1961)bitly.com/rca-remote

Remote control

Page 10: Mind the Gap: Designing the Space Between Devices
Page 11: Mind the Gap: Designing the Space Between Devices
Page 12: Mind the Gap: Designing the Space Between Devices

Remote control

Content syncing

Email and SMS hacks

Page 13: Mind the Gap: Designing the Space Between Devices
Page 14: Mind the Gap: Designing the Space Between Devices

The Behavior Gap

Page 15: Mind the Gap: Designing the Space Between Devices
Page 16: Mind the Gap: Designing the Space Between Devices

It’s not enoughto share content across devices.

Share action.

Page 17: Mind the Gap: Designing the Space Between Devices

Sync verbs,not just nouns.

Page 18: Mind the Gap: Designing the Space Between Devices

Apple Continuitybit.ly/ios-continuity

Page 19: Mind the Gap: Designing the Space Between Devices
Page 20: Mind the Gap: Designing the Space Between Devices
Page 21: Mind the Gap: Designing the Space Between Devices
Page 22: Mind the Gap: Designing the Space Between Devices
Page 23: Mind the Gap: Designing the Space Between Devices
Page 24: Mind the Gap: Designing the Space Between Devices

We don’t needno stinkin’native software.

Page 25: Mind the Gap: Designing the Space Between Devices

Racerbitly.com/racer-chrome

Page 26: Mind the Gap: Designing the Space Between Devices

Chess + WebRTCbitly.com/webrtc-chess

Page 27: Mind the Gap: Designing the Space Between Devices

Web

Sock

ets

Web

RTC

Page 28: Mind the Gap: Designing the Space Between Devices

Web

Sock

ets

Web

RTC

Blue

toot

h LE

NFC

Page 29: Mind the Gap: Designing the Space Between Devices

bleep bleep bloop

oh hai!

Page 30: Mind the Gap: Designing the Space Between Devices

sonicnet.jsbitly.com/sonicnet

Page 31: Mind the Gap: Designing the Space Between Devices
Page 32: Mind the Gap: Designing the Space Between Devices

Web

Sock

ets

Web

RTC

Blue

toot

h LE

NFC

Web Audio API

Page 33: Mind the Gap: Designing the Space Between Devices

Web

Sock

ets

Web

RTC

Blue

toot

h LE

NFC

Web Audio API

Infrared

Page 34: Mind the Gap: Designing the Space Between Devices

DangerScreens encumberand constrain.

Page 35: Mind the Gap: Designing the Space Between Devices

DangerAverage smartphone screen time:

3 hours, 16 minsper day

Oct 2014: http://www.tecmark.co.uk/smartphone-usage-data-uk-2014/

Page 36: Mind the Gap: Designing the Space Between Devices

http://www.coroflot.com/Lylover/Surf-Chair

Page 37: Mind the Gap: Designing the Space Between Devices
Page 38: Mind the Gap: Designing the Space Between Devices

Design for people,not screens.

Page 39: Mind the Gap: Designing the Space Between Devices

The best partsof our livesdo not happenin front of a screen.

Page 40: Mind the Gap: Designing the Space Between Devices

Physical Interaction

Page 41: Mind the Gap: Designing the Space Between Devices

Drumpantsbit.ly/drum-pants

Page 42: Mind the Gap: Designing the Space Between Devices

Experiment.Play.Splash in puddles.

Page 43: Mind the Gap: Designing the Space Between Devices

Misfit Shinebitly.com/shine-sync

Page 44: Mind the Gap: Designing the Space Between Devices

Deep Shotbitly.com/deep-shot

Page 45: Mind the Gap: Designing the Space Between Devices

Deep Shotbitly.com/deep-shot

Page 46: Mind the Gap: Designing the Space Between Devices

THAWbitly.com/mit-thaw

Page 47: Mind the Gap: Designing the Space Between Devices

@LARRYLEGEND

Page 48: Mind the Gap: Designing the Space Between Devices

Happy Togetherbit.ly/happy-together-app

Page 49: Mind the Gap: Designing the Space Between Devices

Join us on github:

github.com/houseoflegend/happytogether

Page 50: Mind the Gap: Designing the Space Between Devices

Grab Magicbitly.com/grab-magic

Page 51: Mind the Gap: Designing the Space Between Devices

It’s not a challengeof technology.

It’s a challengeof imagination.

Page 52: Mind the Gap: Designing the Space Between Devices
Page 53: Mind the Gap: Designing the Space Between Devices

There is

magicin the gaps

between devices

Page 54: Mind the Gap: Designing the Space Between Devices

Myo Armbandbitly.com/myo-armband

Page 55: Mind the Gap: Designing the Space Between Devices

Ringlogbar.jp/ring

Page 56: Mind the Gap: Designing the Space Between Devices

LEAP MOTION

Page 57: Mind the Gap: Designing the Space Between Devices

New york timesbitly.com/nyt-leapmotion

Page 58: Mind the Gap: Designing the Space Between Devices

Never ever ever evertry to out-mousethe mouse.

Page 59: Mind the Gap: Designing the Space Between Devices

Physical& Digital

Page 60: Mind the Gap: Designing the Space Between Devices

Apartment finderbitly.com/rom-leapmotion

Page 61: Mind the Gap: Designing the Space Between Devices

Internet of Things

Physical& Digital

Page 62: Mind the Gap: Designing the Space Between Devices

Digital becomes physical.

Page 63: Mind the Gap: Designing the Space Between Devices

Digital becomes physical.

Physical becomes digital.

Page 64: Mind the Gap: Designing the Space Between Devices
Page 65: Mind the Gap: Designing the Space Between Devices
Page 66: Mind the Gap: Designing the Space Between Devices
Page 67: Mind the Gap: Designing the Space Between Devices
Page 68: Mind the Gap: Designing the Space Between Devices
Page 69: Mind the Gap: Designing the Space Between Devices
Page 70: Mind the Gap: Designing the Space Between Devices

Anything thatcan be connectedwill be connected.

Page 71: Mind the Gap: Designing the Space Between Devices

Everyday objectsare digital gadgets.

Page 72: Mind the Gap: Designing the Space Between Devices
Page 73: Mind the Gap: Designing the Space Between Devices
Page 74: Mind the Gap: Designing the Space Between Devices
Page 75: Mind the Gap: Designing the Space Between Devices

“Software is eating the world.”

—MARC ANDREESSEN

Page 76: Mind the Gap: Designing the Space Between Devices

The Web is eating the world.

Page 77: Mind the Gap: Designing the Space Between Devices

Physical thingshave digital avatars.

Page 78: Mind the Gap: Designing the Space Between Devices

Internet of Things

Physical& Digital

Social Machines

Page 79: Mind the Gap: Designing the Space Between Devices
Page 80: Mind the Gap: Designing the Space Between Devices

http://thecomedycouple.com/2011/11/17/peta-hates-our-childhood/

Page 81: Mind the Gap: Designing the Space Between Devices

TOYMAILtoymail.co

Page 82: Mind the Gap: Designing the Space Between Devices
Page 83: Mind the Gap: Designing the Space Between Devices

Software makes hardware scale.

Page 84: Mind the Gap: Designing the Space Between Devices
Page 85: Mind the Gap: Designing the Space Between Devices
Page 86: Mind the Gap: Designing the Space Between Devices

DangerConnected devices won’t alwayssay nice things.

Page 87: Mind the Gap: Designing the Space Between Devices

DangerAnything thatcan be hackedwill be hacked.

Page 88: Mind the Gap: Designing the Space Between Devices
Page 89: Mind the Gap: Designing the Space Between Devices
Page 90: Mind the Gap: Designing the Space Between Devices
Page 91: Mind the Gap: Designing the Space Between Devices
Page 92: Mind the Gap: Designing the Space Between Devices

Software is ideology, embedded with values.

Page 93: Mind the Gap: Designing the Space Between Devices

AwesomenessPlan for gadget hopping

Share action

Peer-to-peer sharing

Design for sensors

Offscreen interactions

Avatars for objects

Page 94: Mind the Gap: Designing the Space Between Devices

Managing transitions between computing devices could very well bethe primary software problemof the next 5 to 10 years.—FARHAD MANJOO, NEW YORK TIMES

Page 95: Mind the Gap: Designing the Space Between Devices

It’s not a challengeof technology.

It’s a challengeof imagination.

Page 96: Mind the Gap: Designing the Space Between Devices

THANK YOU JOSH CLARK@globalmoxie