What is the Material of UX?

1. FITC Spotlight UX/UI 2017 What is the Material of UX? What is the Material of UX?

2. FITC Spotlight UX/UI 2017 What is the Material of UX? Hello! My name is Michael. I design at Etsy.

3. Etsy is a global marketplace where people around the world connect, both online and offline, to make, sell and buy unique goods.

4. Reimagine commerce in ways that build a more fulfilling and lasting world. OUR M ISSION 4

5. 5 1.6M Active Sellers AS OF MARCH 31, 2016 25M Active Buyers AS OF MARCH 31, 2016 $2.39B Annual GMS IN 2015 35+M Items for Sale AS OF MARCH 31, 2016 Photo by Kirsty-Lyn Jameson BY THE NU MBE RS

6. SELLER Pursues craft, grows business ET SY Facilitates the   transaction ETSY Invests in the   platform and   delivers a   global base of   buyers BU YER Funds unique   goods that are   hard to find   elsewhere

7. 8 Make Etsy an Everyday Experience Build Local Marketplaces, Globally Offer High Impact Seller Services Expand the Etsy Economy THE PATH AHE AD

8. FITC Spotlight UX/UI 2017 What is the Material of UX? What is the material of UX?

9. http://www.metmuseum.org/exhibitions/listings/2017/rei-kawakubo

10. FITC Spotlight UX/UI 2017 What is the Material of UX? We need new ways of seeing, thinking, and handling materials beyond “Classical Design.”

11. https://www.amplify.com/viewpoints/q-john-maeda-risd-president-and-steam-advocate

12. FITC Spotlight UX/UI 2017 What is the Material of UX? After John Maeda Design “Classical Design” There’s a right way to make what is perfect, crafted, and complete. Driver The Industrial Revolution, and prior to that at least a few millenia of ferment. Driver The need to innovate in relation to individual customer needs requires empathy. Driver The impact of Moore’s Law, mobile computing, and the latest tech paradigms. Because execution has outpaced innovation, and experience matters. Designing for billions of individual people and in realtime, is at scale and TBD. Business “Design Thinking” Technology “Computational Design”

13. FITC Spotlight UX/UI 2017 What is the Material of UX? After John Maeda Design “Classical Design” There’s a right way to make what is perfect, crafted, and complete. Driver The Industrial Revolution, and prior to that at least a few millenia of ferment. Driver The need to innovate in relation to individual customer needs requires empathy. Driver The impact of Moore’s Law, mobile computing, and the latest tech paradigms. Because execution has outpaced innovation, and experience matters. Designing for billions of individual people and in realtime, is at scale and TBD. Business “Design Thinking” Technology “Computational Design” “Cycle-ahead” Product Design

14. Photo: Paul Lau

15. FITC What is the Material of UX? Spotlight UX/UI 2017 In collaboration with Morgan Edgerton

16. Photo: Henry Bayuzick

20. http://vtiff.org/events/architecture-design-film-series-objectified/

21. FITC Spotlight UX/UI 2017 What is the Material of UX?

22. FITC Spotlight UX/UI 2017 What is the Material of UX? COMPUTAT IONAL DE SIGN Designing for billions of individual people and in realtime.

23. FITC Spotlight UX/UI 2017 What is the Material of UX? FACEBOOK 1.96B WHATSAPP 1.2B YOU TUB E 1B Statistica.com. Retrieved May 25, 2017. Most famous social network sites worldwide as of April 2017

24. FITC Spotlight UX/UI 2017 What is the Material of UX? After John Maeda Design “Classical Design” A smartphone, laptop, robot, and any human-facing IoT device. Technology “Computational Design”

25. FITC Spotlight UX/UI 2017 What is the Material of UX? The Industrial Revolution was the driving force behind Classical Design.

26. FITC Spotlight UX/UI 2017 What is the Material of UX? Bauhaus 1919-1933

27. Bauhaus 1919-1933

28. FITC Spotlight UX/UI 2017 What is the Material of UX? Bauhaus 1919-1933

29. FITC Spotlight UX/UI 2017 What is the Material of UX? “My architecture students will not be architects. The architect is dead!” —Hannes Meyer Students were organized into “co- operative cells” which incorporated seniors and juniors, experts and novices into a single team. Meyer trained specialists to operate as a single creative unit: “The building materials expert, the small town master builder, the colourist—each an instrument of co-operation.” Bauhaus 1919-1933

30. Bauhaus 1919-1933

31. The Bauhaus Curriculum gave designers ways of seeing, thinking about, and working with physical materials. Bauhaus 1919-1933

32. FITC Spotlight UX/UI 2017 What is the Material of UX? Theoretical classes and practical workshops were devoted to materials Bauhaus 1919-1933

33. FITC Spotlight UX/UI 2017 What is the Material of UX? Students examined materials to “bring clearly to light the essential and contradictory within each.”

34. Contrasting materials wood-metal-glass Contrasting forms jagged-smooth Contrasting origins nature-human Contrasting rhythms straight-curved http://www.bauhaus.de/de/ausstellungen/ sammlung/204_unterricht/432

35. smooth-rough shimmer-dampen tall-short fragile-resilient reflect-absorb https://www.washingtonpost.com/graphics/augmented-reality/what-perfect-sound-looks-like/?utm_term=.da8e48ebf16b

36. FITC Spotlight UX/UI 2017 What is the Material of UX? These ways of seeing, thinking, and making are from a different place and time. We need a new materials literacy for new design challenges ahead.

37. FITC Spotlight UX/UI 2017 What is the Material of UX? The Machine Revolution Role of Machines Extend and enhance… …muscles (1750–1850) (1955–1995) …muscles and nervous system …nervous system (2015–?) Value creation by lowering the cost of… …performing physical labor …performing cognitive tasks …collaborating Industrial Revolution Computer Revolution Automation Revolution After Paul Pangaro The Machine Revolution

38. https://www.youtube.com/watch?v=hzxlDE95XcY

39. FITC Spotlight UX/UI 2017 What is the Material of UX? Collaboration also includes working with artificially intelligent agents to perform cognitive tasks—generating and exchanging knowledge, making decisions, and coordinating our actions.

40. https://www.youtube.com/watch?v=9X_fP4pPWPw

41. FITC Spotlight UX/UI 2017 What is the Material of UX? What does it all mean to be human in a world of connected devices that are all designed to do things for us, to make our lives more convenient and to automate tasks we find boring. Or, just because they can be automated?

42. FITC Spotlight UX/UI 2017 What is the Material of UX? Effortless, thoughtless consumption Pursuit of an inspiring and fulfilling life Develop new usable, useful, and desirable product experiences

43. FITC Spotlight UX/UI 2017 What is the Material of UX? And, now and in the future, what are the materials of UX? What are our ways of seeing and thinking about them? What is essential or contradictory about each? How do we handle them?

44. FITC What is the Material of UX? Spotlight UX/UI 2017 Data, algorithms, and “anything virtual” UX DesignComputational Design Human behavior, feedback, and models to see their invisible properties

45. FITC Spotlight UX/UI 2017 What is the Material of UX? Human Behavior “Everyone experiences far more than he understands.Yet it is experience, rather than understanding, that influences behavior.” —Marshall McLuhan

46. FITC What is the Material of UX? Spotlight UX/UI 2017 User experience is constructed. Attention, Behavior, Concepts, Energy, Goals, Knowledge, Messages, Models, Past Experiences,Time etc. If we can learn about people’s experiences then we can make it the source of inspiration and ideation for design. Making user experience the source of inspiration, we are better able to design for experiencing. System User Interaction Experience What the system brings What the user brings Sanders, L. (1999). Postdesign and Participatory Culture

47. FITC Spotlight UX/UI 2017 What is the Material of UX? Behavior is the medium of interaction design.

49. FITC Spotlight UX/UI 2017 What is the Material of UX? “Behavior is a wondrous thing—it’s both a symptom of and catalyst for change. As interaction designers we thrive on this give-and- take: behaviors shape our work, while we work to shape behaviors.[…] We learn that people are messy, and we learn to love them for it.”

52. FITC Spotlight UX/UI 2017 What is the Material of UX? Objectives What do we want to know? Hypotheses What are our assumptions? Methods How do we plan to learn? Research Gathering information and knowledge Synthesis Understanding opportunities There are many ways we can learn about people’s behavior. Design research methods gives us access to their experiences. Design Research

53. FITC Spotlight UX/UI 2017 What is the Material of UX? Interviews Heuristic Analysis Usability Testing Competitive Analysis Contextual Inquiry Brand Audit Literature Review Analytic Analytic Descriptive Descriptive Evaluative Evaluative Generative Evaluative A/B Testing Usability Testing SWOT Analysis Interviews Users ProductOrganization Competition Questions About What people do What people say, think After Erika Hall

54. FITC Spotlight UX/UI 2017 What is the Material of UX? Say Think Do Use Know Feel Explicit Observable Tacit Not easily expressed in words Latent Not recognizable until the future Dream Listening to what people say tells us what they are able to express in words. Watching what people do provides us with observable information. Understanding how people feel gives us the ability to empathize with them. Seeing and appreciating what people dream shows us how their future could change for the better. Sanders, L. (1999). Postdesign and Participatory Culture

55. FITC Spotlight UX/UI 2017 What is the Material of UX? Behavior can be effectively shaped by the experiences we design, if you can see its properties.

56. FITC Spotlight UX/UI 2017 What is the Material of UX? B=matBehavior Motivation Ability Trigger All three must be present for a behavior to occur. Fogg, B. (2009). Paper presented at the Proceedings of the 4th International Conference on PersuasiveTechnology

57. FITC Spotlight UX/UI 2017 What is the Material of UX? Motivation Ability High Motivation Low Motivation Hard to Do Easy to Do Triggers Succeed Here Triggers Fail Here Action Line Fogg, B. (2009). Paper presented at the Proceedings of the 4th International Conference on PersuasiveTechnology

58. FITC Spotlight UX/UI 2017 What is the Material of UX? Motivation Ability High Motivation Low Motivation Hard to Do Easy to Do Triggers Succeed Here Triggers Fail Here Action Line Motivation High Motivation Low Motivation AbilityHard to Do Easy to Do Marketing, Branding, Behavioral Science UX DesignFogg, B. (2009). Paper presented at the Proceedings of the 4th International Conference on PersuasiveTechnology

59. FITC Spotlight UX/UI 2017 What is the Material of UX? 1. Guide people 2. Harness whatever motivation exists at the moment 3. Focus on increasing ability

60. FITC Spotlight UX/UI 2017 What is the Material of UX? To increase ability: 1. Train users 2. Make the behavior easier to do

61. FITC Spotlight UX/UI 2017 What is the Material of UX? Feedback “We want to fashion puppets that pull their own strings.” —Ann Marion

62. FITC Spotlight UX/UI 2017 What is the Material of UX? “Interaction design explores the dynamic exchanges between users and systems. Both the user and the system are actors sharing the stage in a dramatic narrative.” —Ellen Lupton, Beautiful Users

63. FITC Spotlight UX/UI 2017 What is the Material of UX? “A system is an interconnected set of elements that is coherently organized in a way that achieves something.” —Donella H. Meadows, Thinking in Systems

64. FITC Spotlight UX/UI 2017 What is the Material of UX? Types of systems Wa Evap Systems can be Static or Dynamic which can be Linear or Closed-loop which can be Recirculating or Self-regulatory which can be First- or Second-order After Paul Pangaro, Hugh Dubberly

65. https://standardsmanual.com/products/nasa-graphics-standards-manual

66. FITC What is the Material of UX? Spotlight UX/UI 2017 https://www.youtube.com/watch?v=E2evC2xTNWg

67. hello-operator.softwareadvice.com. Retrieved May 25, 2017. How to Sound Like a Fortune 500 Company WithYour Company’s Auto Attendant

68. https://pmm.nasa.gov/education/water-cycle

69. FITC Spotlight UX/UI 2017 What is the Material of UX? Types of systems Wa Evap Systems can be Static or Dynamic which can be Linear or Closed-loop which can be Recirculating or Self-regulatory which can be First- or Second-order After Paul Pangaro, Hugh Dubberly

70. FITC Spotlight UX/UI 2017 What is the Material of UX? Self-regulating systems have unique properties: goals, feedback, and the ability to act, sense, and compare.

71. FITC Spotlight UX/UI 2017 What is the Material of UX? Systems achieve goals The goal defines a relationship between the system and its environment, which the system seeks to attain and maintain.

72. FITC Spotlight UX/UI 2017 What is the Material of UX? Knowing whether you have reached your goal (or at least are getting closer to it) requires feedback. Feedback is the information loop flowing from the system through the environment and back into the system.

73. FITC Spotlight UX/UI 2017 What is the Material of UX? Pilots rely on negative feedback to steer a system toward a goal After Paul Pangaro, Hugh Dubberly

74. FITC Spotlight UX/UI 2017 What is the Material of UX? detection of error compares current heading with desired heading D= correction of error adjusts rudder to correct heading C= Steering as a feedback loop Compares heading with goal of reaching port Adjusts rudder to correct heading Ship’s heading Detection of Error Correction of Error Feedback After Paul Pangaro, Hugh Dubberly

75. FITC Spotlight UX/UI 2017 What is the Material of UX? detection of error compares current heading with desired heading D= correction of error adjusts rudder to correct heading C= Steering as a feedback loop Comparing ActingSensing After Paul Pangaro, Hugh Dubberly

76. Temperature Control Lever The bi-metal coil is connected to the temperature control lever. *The magnet insures a good contact Fixed Contact Screw 50 | | | | | 60 | | | | | 70 | | | | | 80 | | | | | 90 Moving Contact Bi-metal Coil Magnet* Temperature Indicator Pin The bi-metal coil bends towards the contact screw as it cools Moving the temperature control lever moves the bi-metal coil Power to heaterPower in After Paul Pangaro, Hugh Dubberly

77. Temperature Control Lever Fixed Contact Screw 50 | | | | | 60 | | | | | 70 | | | | | 80 | | | | | 90 Moving Contact Magnet* Temperature Indicator Pin After Paul Pangaro, Hugh Dubberly

78. The bi-metal coil bends tow the contact screw as it cool Moving the temperature control lever moves the bi-metal coil After Paul Pangaro, Hugh Dubberly

79. The bi-metal coil bends towards the contact screw as it cools he temperature control lever he bi-metal coil The bi-metal coil bends awa the contact screw as it warm After Paul Pangaro, Hugh Dubberly

80. metal coil bends towards act screw as it cools The bi-metal coil bends away from the contact screw as it warms After Paul Pangaro, Hugh Dubberly

81. FITC Spotlight UX/UI 2017 What is the Material of UX? What if you wanted to redesign this system without knowing its inner workings?

82. Cold air outside ismeasuredby canincrease input output Bi-metal coil Heater System Desired temperature e.g. 68º air temperature in the room lowersthe . . . is indicated by adjusting the temperature control lever which in turn moves the bi-metal coil; increasing the desired temperature moves the coil closer to the contact point; decreasing the desired temperature moves the coil further from the contact point Why does a bi-metal coil bend? bi-metal coils consist of two layers of metal (usually iron and copper) joined together to form one flat strip; because the metals have different coefficients of expansion, the strip will bend in one direction as it cools, and the opposite direction as it warms Contact point. . .bends to touch the. . . . (as it cools) external electrical source . . .bends the opposite direction to lose contact with the. . . (as it warms) . . . . which sends a signal to the. . . . . . . thus no signal is sent, and the heater shuts off...sendscurrentto... January 2010 | Developed by Paul Pangaro and Dubberly Design Ofﬁce Thermostat regulating room temperature (via a heater) After Paul Pangaro, Hugh Dubberly

83. ismeasuredby input Bi-metal coil System Contact point. . .bends to touch the. . . . (as it cools) external electrical source . . .bends the opposite direction to lose contact with the. . . (as it warms) . . . . ...sendscurrentto... After Paul Pangaro, Hugh Dubberly

84. canincrease output Heater System which in turn moves the bi-metal coil; increasing the desired temperature moves the coil closer to the contact point; decreasing the desired temperature moves the coil further from the contact point Contact point . . . . which sends a signal to the. . . . . . . thus no signal is sent, and the heater shuts off After Paul Pangaro, Hugh Dubberly

85. Cold air outside System air temperature in the room lowersthe Why does a bi-metal coil bend? bi-metal coils consist of two layers of metal (usually iron and copper) joined together to form one flat strip; because the metals have different coefficients of expansion, the strip will bend in one direction as it cools, and the opposite direction as it warms direction to lose contact with the. . . (as it warms) and the heater shuts off o and Dubberly Design OfﬁceAfter Paul Pangaro, Hugh Dubberly

86. ismeasuredby input Bi-metal coil System Contact point. . .bends to touch the. . . . (as it cools) external electrical source . . .bends the opposite direction to lose contact with the. . . (as it warms) . . . . ...sendscurrentto... After Paul Pangaro, Hugh Dubberly

87. Cold air outside ismeasuredby canincrease input output Bi-metal coil Heater System Desired temperature e.g. 68º air temperature in the room lowersthe . . . is indicated by adjusting the temperature control lever which in turn moves the bi-metal coil; increasing the desired temperature moves the coil closer to the contact point; decreasing the desired temperature moves the coil further from the contact point Why does a bi-metal coil bend? bi-metal coils consist of two layers of metal (usually iron and copper) joined together to form one flat strip; because the metals have different coefficients of expansion, the strip will bend in one direction as it cools, and the opposite direction as it warms Contact point. . .bends to touch the. . . . (as it cools) external electrical source . . .bends the opposite direction to lose contact with the. . . (as it warms) . . . . which sends a signal to the. . . . . . . thus no signal is sent, and the heater shuts off ...sendscurrentto... (via a heater)

88. System Goal Environment Disturbances a Comparator isembodiedin subtracts the current state value from the desired state value to determine the error ismeasuredby affectsthe . . . describes a relationship that a system desires to have with its environment . . . may be characterized as certain types typically falling within a known range; but previously unseen types may emerge . . . has resolution – (Accuracy) frequency – (Latency) range – (Capacity) . . . has resolution frequency range canaffectthe input output a Sensor passes the current state value to . . . . . . . . . . responds by driving an Actuator After Paul Pangaro, Hugh Dubberly

89. https://www.youtube.com/watch?v=oOvVLOTF078

90. 2nd Order System | Created by Dave Mahmarian | Tue Apr 05 2016 Second Order Cybernetic Model: Samsung NaviBot Robot Vacuum DISTURBANCES (Bumping) SENSOR: MEASURES FULLNESS OF BIN INPUT OUTPUT ACTUATOR: MOTOR WHICH UNLOADS DIRT Observed System Goal: To automatically unload the dirt at the charging station Moves through it’s environment while vacuuming. System learns pattern over time Comparator: Compares the size of the bin to the amount of dirt it has collected Will return to charging station to unload dirt when the bin is full System gets smarter by learning environment and avoids disturbances Has the ability to self- correct if it does encounter a disturbance System will collect dirt and sense the level in the bin The NaviBot will return to the charging station when it senses that the power is running low SENSOR: VSLAM (IR) Observing System INPUT OUTPUT Comparator: compares where it’s been to where it needs to go to complete the pattern Goal: Complete the learned cleaning pattern at a speed of 100mm/second ACTUATOR: MOTOR Senses the environment using mapping technology

91. DISTURBANCES (Bumping) SENSOR: MEASURES FULLNESS OF BIN INPUT OUTPUT ACTUATOR: MOTOR WHICH UNLOADS DIRT Observed System Goal: To automatically unload the dirt at the charging station Comparator: Compares the size of the bin to the amount of dirt it has collected Will return to charging station to unload dirt when the bin is full System gets smarter by learning environment and avoids disturbances Has the ability to self- correct if it does encounter a disturbance System will collect dirt and sense the level in the bin stem te the pattern

92. FITC Spotlight UX/UI 2017 What is the Material of UX? The Automation Revolution will be driven by smart, connected, self-regulating systems like the Nest thermostat and the Tesla automobile. Feedback is the mechanism that closes the loop in self-regulating systems.

93. https://vimeo.com/77608435

94. Feedback Conversation Language Research Interface Systems thinking <code>

95. FITC Spotlight UX/UI 2017 What is the Material of UX? @michaelryap