Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What is the Material of UX?

342 views

Published on

Presented at
FITC presents Spotlight UX/UI

Overview

The Bauhaus curriculum offered students a deep examination into the materials of its day: clay, stone, wood, metal, textiles, color, glass. In the digital age, what are the materials of user experience? Is it the lithium we extract from the ground to power our hermetically sealed devices, or is it invisible systems our devices connect us to? What are our methods for shaping the unseen, the immaterial? This talk will introduce a taxonomy—including human motivation, feedback, and conversation among others—and identify some of the properties that differentiate materials of the digital age from the past.

Objective

Identify the invisible materials of user experience—human motivation, feedback, and conversation among others—and their properties for designers to see.

Target Audience

UX designers



Five Things Audience Members Will Learn

A brief history of the Bauhaus
An introduction to the Bauhaus study of materials
A systems based definition of user experience design
Models of open and closed-loop systems and their components
Approaches to designing interactive systems

Published in: Design
  • Be the first to comment

  • Be the first to like this

What is the Material of UX?

  1. 1. FITC Spotlight UX/UI 2017 What is the Material of UX? What is the Material of UX?
  2. 2. FITC Spotlight UX/UI 2017 What is the Material of UX? Hello! My name is Michael. I design at Etsy.
  3. 3. Etsy is a global marketplace where people around the world connect, both online and offline, to make, sell and buy unique goods.
  4. 4. Reimagine commerce in ways that build a more fulfilling and lasting world. OUR M ISSION 4
  5. 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. 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. 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. 8. FITC Spotlight UX/UI 2017 What is the Material of UX? What is the material of UX?
  9. 9. http://www.metmuseum.org/exhibitions/listings/2017/rei-kawakubo
  10. 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. 11. https://www.amplify.com/viewpoints/q-john-maeda-risd-president-and-steam-advocate
  12. 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. 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. 14. Photo: Paul Lau
  15. 15. FITC What is the Material of UX? Spotlight UX/UI 2017 In collaboration with Morgan Edgerton
  16. 16. Photo: Henry Bayuzick
  17. 17. Photo: Henry Bayuzick
  18. 18. Photo: Henry Bayuzick
  19. 19. Photo: Henry Bayuzick
  20. 20. http://vtiff.org/events/architecture-design-film-series-objectified/
  21. 21. FITC Spotlight UX/UI 2017 What is the Material of UX?
  22. 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. 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. 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. 25. FITC Spotlight UX/UI 2017 What is the Material of UX? The Industrial Revolution was the driving force behind Classical Design.
  26. 26. FITC Spotlight UX/UI 2017 What is the Material of UX? Bauhaus 1919-1933
  27. 27. Bauhaus 1919-1933
  28. 28. FITC Spotlight UX/UI 2017 What is the Material of UX? Bauhaus 1919-1933
  29. 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. 30. Bauhaus 1919-1933
  31. 31. The Bauhaus Curriculum gave designers ways of seeing, thinking about, and working with physical materials. Bauhaus 1919-1933
  32. 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. 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. 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. 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. 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. 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. 38. https://www.youtube.com/watch?v=hzxlDE95XcY
  39. 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. 40. https://www.youtube.com/watch?v=9X_fP4pPWPw
  41. 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. 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. 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. 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. 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. 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. 47. FITC Spotlight UX/UI 2017 What is the Material of UX? Behavior is the medium of interaction design.
  48. 48. FITC Spotlight UX/UI 2017 What is the Material of UX? What is the Material of UX?
  49. 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.”
  50. 50. 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.”
  51. 51. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 65. https://standardsmanual.com/products/nasa-graphics-standards-manual
  66. 66. FITC What is the Material of UX? Spotlight UX/UI 2017 https://www.youtube.com/watch?v=E2evC2xTNWg
  67. 67. hello-operator.softwareadvice.com. Retrieved May 25, 2017. How to Sound Like a Fortune 500 Company WithYour Company’s Auto Attendant
  68. 68. https://pmm.nasa.gov/education/water-cycle
  69. 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. 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. 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. 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. 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. 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. 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. 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. 77. Temperature Control Lever Fixed Contact Screw 50 | | | | | 60 | | | | | 70 | | | | | 80 | | | | | 90 Moving Contact Magnet* Temperature Indicator Pin After Paul Pangaro, Hugh Dubberly
  78. 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. 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. 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. 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. 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 Office Thermostat regulating room temperature (via a heater) After Paul Pangaro, Hugh Dubberly
  83. 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. 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. 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 OfficeAfter Paul Pangaro, Hugh Dubberly
  86. 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. 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. 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. 89. https://www.youtube.com/watch?v=oOvVLOTF078
  90. 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. 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. 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. 93. https://vimeo.com/77608435
  94. 94. Feedback Conversation Language Research Interface Systems thinking <code>
  95. 95. FITC Spotlight UX/UI 2017 What is the Material of UX? @michaelryap
  96. 96. FITC Spotlight UX/UI 2017 What is the Material of UX? What is the Material of UX?

×