We suddenly live in a strange and wonderful nexus of digital and physical. Touchscreens let us hold information in our hands, and we touch, stretch, crumple, drag, and flick data itself. Our sensor-packed phones even reach beyond the screen to interact directly with the world around us. While these digital interfaces are becoming physical, the physical world is becoming digital, too. Objects, places, and even our bodies are lighting up with with sensors and connectivity. We’re not just clicking links anymore; we’re creating physical interfaces to digital systems. This requires new perspective and technique for web and product designers. The good news: it’s all within your reach. With a rich trove of examples, Designing for Touch author Josh Clark explores the practical, meaningful design opportunities for the web’s newly physical interfaces.

1. the
PHYSICAL
INTERFACE josh clark
@bigmediumjosh

2. a quick trip to the near future

3. Curious Rituals
curiousrituals.nearfuturelaboratory.com

5. THERE ARE
A MILLION WAYS
WE COULD GET
THIS WRONG

6. A MILLION WAYS
WE COULD GET
THIS WRONG
so let’s think hard
about how we might get it right

8. MUNDANE
TECHNOLOGY
functional cheap accessible

14. TOUCH DATA
like a physical object

15. DFTSEA16Zabookapart.com

16. our job is to
TRANSLATE
INTENT
INTO ACTION

17. DIGITAL PHYSICAL

18. DIGITAL PHYSICAL
DIGITALPHYSICAL

19. THE SMARTPHONE IS
THE FIRST HUGE
IOT DEVICE
sensors smarts connection

21. www.w3.org/standards/techs/js
• RECORD AUDIO & VIDEO
• UNDERSTAND SPEECH
• MAKE & HEAR SOUND
• SCREEN SHARING
• VIBRATE
• VIDEO CONFERENCE
• ACCELEROMETER
• AMBIENT LIGHT

22. DO THIS TODAY
www.w3.org/standards/techs/js

23. WHERE DO WE
GO FROM HERE?

24. SENSOR INPUT TO THE WEB
four kinds of physical interfaces

25. SENSOR INPUT TO THE WEB
NOTIFICATION FROM THE WEB
four kinds of physical interfaces

26. SENSOR INPUT TO THE WEB
NOTIFICATION FROM THE WEB
AVATAR OF DIGITAL INFO
four kinds of physical interfaces

27. SENSOR INPUT TO THE WEB
NOTIFICATION FROM THE WEB
AVATAR OF DIGITAL INFO
PHYSICAL INTERACTION
four kinds of physical interfaces

28. SENSOR INPUT
TO WEB SERVICES
the web gets physical
1.

29. MOBILE gives
COMPUTING POWER to
IMMOBILE OBJECTS

30. Nappy Notifier
bit.ly/diaper-app

31. propellerhealth.com

34. bt.tn

36. DO THIS TODAY

37. NOTIFICATION
FROM WEB SERVICES
the web gets physical
2.

38. Glowcaps

39. WEB ≠ BROWSER

40. Ringly

41. Lechal

43. DESIGN
CALM
TECHNOLOGY

44. Mailchimp: Oliver
bit.ly/mailchimp-oliver

45. DO THIS TODAY

46. PHYSICAL
INTERFACES
FOR DIGITAL APIs

47. PHYSICAL AVATAR
OF DIGITAL INFO
the web gets physical
3.

48. Connected Paper
bit.ly/connected-paper

49. What if a physical
store could do all
the best things
an online store
can do?
@LizaKLIZA KINDRED

54. YOU COULD TOUCH
A PRODUCT
TO GET ITS INFO
@LizaK asks: what if...

55. YOU COULD TOUCH A
ZIPCAR TO RENT IT
INSTANTLY
@LizaK asks: what if...

56. YOU PAID JUST BY
WALKING OUT OF THE
STORE WITH A PRODUCT
@LizaK asks: what if...

57. UNLOCK DATA
IN PHYSICAL
OBJECTS

59. Lifeprint
lifeprintphotos.com

65. WHERE’S THE
UNIVERSAL
CONNECTOR
NETWORK?

66. THE
PHYSICAL WEB

67. The Physical Web
bit.ly/physical-web

69. YOU’RE
SOAKING IN IT!

71. DO THIS TODAY
physical-web.org

72. THE
INTERACTION IS
STILL ON SCREEN

73. phoTo: eriC J. smiTh

74. PHYSICAL
INTERACTION
the web gets physical
4.

75. Thaw
bit.ly/mit-thaw

76. @LARRYLEGEND

77. Presto
http://presto.watch
@prestogesture

78. Grab Magic
bit.ly/grab-magic

79. DO THIS TODAY
push the possibilities
of everyday devices

80. IT’S A CHALLENGE
OF IMAGINATION
it’s not a challenge of technology

82. Reality Editor
realityeditor.org

84. SCREENS CONFIGURE
OBJECTS OPERATE

85. DO THIS TODAY
openhybrid.org

86. PHYSICAL
OBJECTS
TELL US HOW
THEY’RE USED

93. MAKE THE
OBJECTS MAGIC

94. Burj Khalifa

95. DESIGN FOR THE
THING’S
ESSENTIAL
“THINGNESS”

97. A
E
I
O
U

98. CTIVITIES
NVIRONMENTS
NTERACTIONS
BJECTS
SERS
A
E
I
O
U

99. CONVERSATION
and the
PHYSICAL CONTEXT

101. THIS IS THE
THING BEYOND
THE PHONE

102. A SINGLE A.I.
INTERFACE FOR
OVER 300
SERVICES

104. DO THIS TODAY
developer.amazon.com

105. COMPUTERS ARE
BETTER AT SPEAKING
THAN LISTENING
Chris Crawford

106. http://omershapira.com/blog/2014/09/its-raining-again/

107. IT’S TO IMPROVE
THE CONVERSATION
the goal is not to make things talk

108. SENSOR INPUT TO THE WEB
NOTIFICATION FROM THE WEB
AVATAR OF DIGITAL INFO
PHYSICAL INTERACTION
four kinds of physical interfaces

109. SURVEILLANCE
CAPITALISM

110. HOW SMART
DOES YOUR BED HAVE TO
BE BEFORE YOU’RE
AFRAID TO GO TO SLEEP
AT NIGHT? Rich Gold

111. Wink: Robot Butler
bitly.com/wink-butler

115. Teacher of Algorithms
vimeo.com/125768041

117. AMPLIFY OUR
HUMANITY

118. DON’T
INFANTALIZE

119. Obligatory mention of
Minority Report

120. Wayfindr
wayfindr.net

121. ETHICAL DESIGN
MANIFESTO
ind.ie/blog/ethical-design-manifesto/
@indie

122. DO THIS TODAY
check the values of your creation

123. THANKS! josh clark
@bigmediumjosh

124. DFTSEA16Zabookapart.com