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
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. 8
Make Etsy an Everyday Experience Build Local Marketplaces, Globally
Offer High Impact Seller Services Expand the Etsy Economy
THE PATH AHE AD
17. 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”
18. 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
27. FITC
Spotlight UX/UI 2017
What is the Material of UX?
COMPUTAT IONAL DE SIGN
Designing for billions of individual people and
in realtime.
28. 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
29. 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”
30. FITC
Spotlight UX/UI 2017
What is the Material of UX?
The Industrial Revolution was the driving
force behind Classical Design.
34. 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
37. FITC
Spotlight UX/UI 2017
What is the Material of UX?
Theoretical classes and
practical workshops were
devoted to materials
Bauhaus 1919-1933
38. 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.”
41. 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.
42. 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
44. 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.
46. 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?
47. 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
48. 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?
49. 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
50. 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
51. 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
54. 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.”
55. 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.”
56. 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.”
57. 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
58. 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
59. 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
60. 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.
61. 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
62. 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
63. 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
64. 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
65. FITC
Spotlight UX/UI 2017
What is the Material of UX?
To increase ability:
1. Train users
2. Make the behavior easier to do
66. FITC
Spotlight UX/UI 2017
What is the Material of UX?
Feedback “We want to fashion puppets that pull
their own strings.”
—Ann Marion
67. 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
68. 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
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
74. 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
75. 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.
76. 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.
77. 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.
78. 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
79. 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
80. 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
81.
82.
83. 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
84. Temperature Control Lever
Fixed Contact Screw
50 | | | | | 60 | | | | | 70 | | | | | 80 | | | | | 90
Moving Contact
Magnet*
Temperature Indicator Pin
After Paul Pangaro, Hugh Dubberly
85. 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
86. 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
87. 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
88. FITC
Spotlight UX/UI 2017
What is the Material of UX?
What if you wanted to redesign this system
without knowing its inner workings?
89. 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
90. 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
91. 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
92. 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
93. 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
94. 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)
95. 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
97. 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
98. 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
99. 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.