designing out[side] the screen
DESCRIPTION
How as UX & Interaction Designers, can we move beyond the need to design a screen into everything and embrace physical interactions? Now computing is becoming ever more ubiquitous & entwined into our lives, surely an acceptable solution isn’t to cover our world in icons & screens. There is an emerging trend of beautifully crafted products that are becoming the face of complex systems, yet they have no screen at all and still provide a rich suite of interactions that are easily accessible by the user. What tools are available to us as Interaction Designer’s to give us the courage to step away from our wireframes & start designing beautiful, engaging physical interactions?TRANSCRIPT
![Page 1: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/1.jpg)
Designing out[side] the screen
Steve TaylorThe Alloy || Principal Interaction Designer
[email protected]@funkadeelia
![Page 2: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/2.jpg)
WhyWhy should we think about design outside the screen?
How can we do this with tools that are available?
What examples (good and bad) are out there?
What How
Designing out[side] the screen
![Page 3: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/3.jpg)
Why does it all revolve around the screen?
![Page 4: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/4.jpg)
Image courtesy of 20px.com
![Page 5: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/5.jpg)
Now we struggle do anything without a screen...
75% of people admit to using their smartphone whilst using the toilet!!
Research carried out by wtop.com
![Page 6: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/6.jpg)
Interaction Design is...
“The design of everything that is both digital and interactive”
Photo from dot3x / https://www.flickr.com/photos/dotx3/4758268844//
![Page 7: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/7.jpg)
Design of products, systems & services [tools] that help people through addressing human needs
Photo from Human/Need/Desire. Bruce Nauman, 1983
![Page 8: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/8.jpg)
As more & more products become ‘connected‘ we are in danger of forcing screens into everything...
![Page 9: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/9.jpg)
Aren’t we already drowning in touch screens & icons?Photo from AP Photo / Manu Fernandez
![Page 10: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/10.jpg)
Our experiences are formed through stimulating a combination of our 5 senses
![Page 11: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/11.jpg)
This is one sense...What about the others?
![Page 12: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/12.jpg)
Sounds of the Sea // Heston BlumenthalPhoto from luxworldwide.com
Our brains light up when 2 or more senses are stimulated simultaneously
![Page 13: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/13.jpg)
Stimulating the same sense differently, affects our perception of the experience
Bernard Lahousse Food PairingFood = Interaction https://vimeo.com/86171854
![Page 14: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/14.jpg)
digital touch vs physical touch
context of use drives method of interaction
![Page 15: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/15.jpg)
How can we (IxD’s) start to think outside the screen & design sense rich interactions?
![Page 16: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/16.jpg)
What if we remove the screen?
![Page 17: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/17.jpg)
What if we remove the screen?
![Page 18: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/18.jpg)
What examples of “designing out the screen” can we reference?
![Page 19: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/19.jpg)
![Page 20: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/20.jpg)
![Page 21: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/21.jpg)
![Page 22: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/22.jpg)
Image from Nissan Motor Company
![Page 23: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/23.jpg)
Reference patentbolt.com Samsung Controls
![Page 24: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/24.jpg)
UX / Digital Designer?
Industrial Designer?
Who is responsible for designing these interactions?
![Page 25: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/25.jpg)
UX / Digital Designer?
Industrial Designer?
Interaction Designer?
Who is responsible for designing these interactions?
![Page 26: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/26.jpg)
How do we do this?
![Page 27: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/27.jpg)
Collaboration across the design process
![Page 28: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/28.jpg)
Collaboration across the design process
Industrial Designer
Interaction Designer
User Research Concept Development Prototyping Specification
![Page 29: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/29.jpg)
Fuse ProjectAn investigation into improving the smartphone experience
![Page 30: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/30.jpg)
Context of use drives method of interaction
![Page 31: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/31.jpg)
How can we enable users to, single-handedly, control services on the device without obscuring content on screen
Defining the challenge...
![Page 32: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/32.jpg)
Interact outside the screen
![Page 33: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/33.jpg)
Prototyping the experience
![Page 34: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/34.jpg)
Delivering physical the experience
![Page 35: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/35.jpg)
Experience prototyping tools
![Page 36: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/36.jpg)
![Page 37: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/37.jpg)
![Page 38: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/38.jpg)
![Page 39: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/39.jpg)
Why use these tools?
![Page 40: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/40.jpg)
ExploreContext of useTangible inputs / outputsStimulating different senses
With industrial designersPhysical design constraintsMaterials & textures
Understand Communicate
Why use these tools?
![Page 41: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/41.jpg)
Summary
![Page 42: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/42.jpg)
Why What How
Summary
Why should we think about design outside the screen?
How can we do this with tools that are readily available?
What examples (good and bad) are out there?
![Page 43: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/43.jpg)
Why...
![Page 44: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/44.jpg)
What...
![Page 45: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/45.jpg)
How...
![Page 46: Designing Out[side] the Screen](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c74c204a7959a5778b4570/html5/thumbnails/46.jpg)
Service
Digital Physical
Conclusion