Presentation given at SXSW on March 12, 2010. Synced with the audio!
...
Presentation given at SXSW on March 12, 2010. Synced with the audio!
Even though technology evolved at a crazy pace the last 100 years, the humble button has stayed at the center of it all. What is its past, its future? Why is it important? What does it say about the interaction between humans and technology? Pictures, stories, revelations, movies.
Jonathan GibsonAwesome presentation, Bill. The research and attention to detail is refreshing and complete. I will be recommending this to many others. Sorry I missed the live show.1 year ago
Researching for the last four years or so. The result of moving from working on web to working on products.
SXSW mostly web. Why look back? We need to reach back into our history. This is where all of our interface conventions were born. We owe our careers to buttons.
SXSW mostly web. Why look back? We need to reach back into our history. This is where all of our interface conventions were born. We owe our careers to buttons.
SXSW mostly web. Why look back? We need to reach back into our history. This is where all of our interface conventions were born. We owe our careers to buttons.
How did we evolve from the crudest interactions to products like the iPad in a little over 100 years?
how we cognitively understand objects, interactions and the space around us
blah
And how we’re going to do this is take an anthropology approach by looking at items from the last 100 years.
blah
blah
blah
blah
blah
To understand our current transition, it’s helpful to look back to the last major transition, which took place about 1900 when we first made the leap from the mechanical world to the electrical world. But first, let’s step way back.
We are a bunch of smart monkeys. We figured out how to use the objects in the world around us to augment our human motion. Sticks into rakes. Bones into shovels. Iron into gears.
Shooting a gun is nothing more than throwing a tiny rock really really hard with much better accuracy.
Pushing a piano key is really just hitting a string. It’s all about scaling.
With machinery, you can see the action happening. You can follow the action to the results.
But some pretty interesting developments happened that changed how we think about the world around us.
Railroads compressed our sense of time. Travel that use to take months could now take days.
Telegraphs compressed our sense of distance. We could communicate from afar for the first time. The Crimean War was the first war fought remotely in 1853.
But buttons did something different. They abstracted motion. They helped us made the cognitive leap that the action we take can lead to a radically different type of reaction. The motion that we put into an interaction leads to a categorically different result. This tweaked our sense of meatspace.
The opera comes to your door. The observoscope. Home News Service. Events as they transpire.
The opera comes to your door. The observoscope. Home News Service. Events as they transpire.
The opera really did come to your door.
The opera really did come to your door.
Roy’s Robot Repair
Roy’s Robot Repair
Roy’s Robot Repair
Roy’s Robot Repair
blah
Gold before chloride?
“That Touch of Mink.”
“That Touch of Mink.”
“That Touch of Mink.”
“That Touch of Mink.”
“That Touch of Mink.”
Before this point, buttons had all been about serious business. Getting work done. But of course that changed too.
Humpty Dumpty. Pinball Hall of Fame in Las Vegas. Tim Arnold.
This is the era where I lost a lot of quarters.
Dexterity is a prized skill. Pushing buttons for entertainment has become an industry all on its own. Design schools. Competitions. Movies based on games. ScreenBurn here at SXSW.
Along another track, buttons lost their physical nature and become more of a concept than a physical thing. They went virtual.
Douglas Engelbart invented the mouse.
20 years later, Apple introduced the mouse into the mainstream.
Apple bought all 39 pages of advertising in November issue of Newsweek.
This is only 26 years ago.
Look at how much effort they are making to describe what a button is, how to use it.
The idea of what’s interactable breaks down even further with the web.
Doesn’t matter if it’s a word, a box, an image, something floating. Essentially anything now can be a button. In fact, let’s hide what ISN’T a button on this screen.
A LOT of instruction for physical interaction. Coins In. Coins Out. Cash In. Cash Out.
blah
blah
Imagine someone encountering this device 100 years ago. This was designed by Ziba for a Li-Ning flagship store in Shanghai.
Imagine someone encountering this device 100 years ago. This was designed by Ziba for a Li-Ning flagship store in Shanghai.
Imagine someone encountering this device 100 years ago. This was designed by Ziba for a Li-Ning flagship store in Shanghai.
blah
blah
blah
When I was this age, interactive still meant putting baseball cards in your bicycle spokes. Pong came out when I was 7. Imagine the worldview this kid will have when that is the new normal.
When I was this age, interactive still meant putting baseball cards in your bicycle spokes. Pong came out when I was 7. Imagine the worldview this kid will have when that is the new normal.
When I was this age, interactive still meant putting baseball cards in your bicycle spokes. Pong came out when I was 7. Imagine the worldview this kid will have when that is the new normal.
Hello.
This incarnation of the History of the Button was
presented at SXSW on March 12, 2010.
This slide deck is slightly different from the live
presentation. The main difference is that the videos
that were in the presentation have been translated
here to stills as best as possible.
Enjoy.
Also, narration boxes like this are
Bill DeRouchey extra notes to help fill in context
where necessary and point out
bill.derouchey@gmail.com where this version differed from
@billder the live presentation.
About the audio.
If you’re listening to the audio, sorry about the bad
quality for the first 12 minutes. SXSW somehow cut
off the first 12 minutes.
To make up for it, I had to slice in the audio from
my FlipCam recording, which was better than
nothing.
If you’re not listening to the audio, then it doesn’t
matter at all. Carry on.
This is astory
that spans over
100 years...
As a contrast to SXSW
which focuses so much on
the Now and the Future.
... about how we got from
here to here...
buttons
... about how
have changed how
we understand
our world...
buttons
... about how
have changed how
...
think.
we understand
our world.
Products Movies
Advertisements Screens
We’ll take almost an anthropological
approach by looking at these items
to examine the history of the button.
1910 1956
1984 2010
These were all movies in
the original presentation.
The simplest motion.
1910 1956
1984 2010
These were all movies in
the original presentation.
is just push the button.
This was a movie in the original
presentation (from Apple.com).
We’re in a transition....
This was a movie in the original
presentation (from Apple.com).
a transitiontransition....
We’re in a to Surface.
Transitions
are interesting...
because that’s when our
brains change.
Generations of Interaction
1 Lever
2 Button
now
3 Surface
4 Fluid We are currently in a transition
from a button era to a surface era.
Generations of Interaction
1 Lever 1900
2 Button
3 Surface
4 Fluid We should look to the previous
transition to understand today.
We are a bunch of smart
monkeys. We figured out
how to use the objects in
the world around us to
augment our human motion.
Bones into shovels. Sticks
into rakes. Iron into gears.
We love our tools.
For example, a gun can
simply be understood as
throwing a rock, a tiny
rock, much faster and
with greater accuracy.
Pressing on the keys of
a piano simply triggers a
hammer hitting a string.
Motion is augmented.
You can see the
Action.
In the mechanical era, you
can see action happen, see
how one motion affects
another. You can follow the
results from action to result.
Levers
scale motion.
Scaling
is the mechanical age.
Compressed
Time
Major advances in technology actually
change how we perceive the world.
For example, train travel compressed our
sense of time between faraway places.
The telegraph changed our sense of connection
over distance. Instant communication across
hundreds of miles for the first time.
Compressed
Distance
But the button meant for the
first time, the result of a human
motion could be completely
different from the motion itself.
Abstracted
Motion
The motion Push
does not scale to
the result Light.
This abstracted interaction with
technology represented a new
way to comprehend the world.
Buttons
abstract motion.
Abstraction
is the electronic age.
What was the
first button?
This might be the most common
question people ask me.
The flashlight was the first simple
everyday button. It revolutionized
our sense of light.
What was the
first button?
1898
Buttons
enter
Daily Life
George Eastman of
Kodak introduced
cameras for regular
people.
1890s
Eastman used the
phrase “You Press
the Button, We Do
the Rest” to show
how simple
cameras can be.
Button = easy.
1890s
Doorbells replaced
pull ringers in homes.
1900s
As the electricity grid
expanded, homes
installed lights and
simple pushbuttons to
turn the lights on and off.
1910s
Sidenote:
An editorial
cartoon from 1911
depicting a dark
vision of the future.
Surrounded by
technology, lazy,
pushing buttons.
For a similar
dystopian view,
read the 1910
short story
“The Machine
Stops” from
E.M. Forster.
1911
“The Opera Delivered to Your Door” = Pandora
“The Observascope” = webcams
Of course, all with a robot servant!
The next major tech
innovation was the
radio, sending live
audio from a distance.
The opera really now
was delivered to you.
The radio. 1920s
30 million radios
sold by 1938.
This was their Internet boom.
But tuning to your
favorite stations
almost required a
scientist mentality.
Until 1938 when radio
presets (buttons)
exchanged the
emphasis on “tuning”
for “returning.”
1938
Radio presets.
Essentially, radio
presets were the first
notion of “saving” in
technology. Save
your favorite station.
1938
First notion of Save.
Radio presets.
Buttons
represent
The Future
1939
During the Great
Depression, people
looked to a better
future, capped by the
World’s Fair in 1939.
New York
World’s Fair
1939
Technology was
heralded as the
emancipator of leisure.
A shrine to
the button?
Movie from 1940
depicting a vision of the
future. With robots.
1940
Roy’s Robot Repair is
helping this concerned
woman with her robot.
1940
She controls her robot
with buttons. Roll-Oh
can even fix a furnace.
1940
When fixed, Roll-Oh
fetches the nice
repairman’s hat.
1940
1958
Visions of the future
continued, including
this Monsanto home,
promoting both the
wonders of plastics
and pushbuttons.
Monsanto
House of
the Future
Another movie.
1958
The happy wife pushes buttons
to access hidden compartments.
1958
The happy wife pushes buttons
to access hidden compartments.
1958
The happy wife pushes buttons
to control her home.
1958
Buttons
represent
Luxury
In the 1950s, the promise of
pushbutton technology became
available to a wide variety of
consumer items, providing a
new luxury for the middle class.
And in nearly every case,
the phrase “pushbutton”
became an adjective
communicating modern,
luxury, advanced, new, easy.
1956
1958
1960
1959
1961
Now there’s a woman
in control of her laundry.
1959
So easy...
even a woman
can do it.
And also in nearly every case, women
were used in ads to add the subtle
message of, this new technology is so
easy to use, even a woman can use it.
Picture the
classic Crossing
the Chasm
diagram of early
adopters vs. late
adopters.
“Pushbutton”
meant that the
product was
simple enough
for late adopters
to now buy.
Buttons cross the chasm.
This practice of using “pushbutton”
continues today, but only in the
seamier parts of the web.
Get rich quick!
Lose weight now!
1959
Join the Push Button Empire!
Returning to the living room,
the remote control has
become the classic example
of this pushbutton era.
1959
Because for the first time,
regular people could
control an object from a
distance. No wires!
First control
from a distance 1956
Buttons
represent
Fear
After WWII, we had
automated war machinery
so much that global
nuclear annihilation was
perceived to be as easy
as pushing a button.
And it may have been.
Who has theirfinger
on the button?
Raising a generation on fear.
1950s
Buttons
represent
Control
At the same time, engineers
were building complex machines
controlled by rows and rows of
switches and buttons. We were
learning to automate.
At the same time, engineers
were building complex machines
controlled by rows and rows of
switches and buttons. We were
learning to automate.
Only a select few could
understand these machines,
could use these buttons, using
a highly specialized language.
Only a select few could
understand these machines,
could use these buttons, using
a highly specialized language.
From “That Touch of Mink.”
Doris Day works at Univac. 1962
She’s fed up at working in
this automation job. 1962
So she slams the machine. 1962
And leaves the machines
running. (Note the Univac in
the background.) 1962
Chaos ensues. 1962
Buttons
represent
Play
Humpty Dumpty
pinball machine was
the first to use flippers.
1947
First pinball flippers.
First mechanical game
where you can interact
with the ball in play to
keep it in play. Beginning
of a new era in gaming.
1947
First game interaction?
Generational 1977
Icon
This Atari joystick
revolutionized
gaming in the home.
Shape as
Play
1978
Experimenting
with the shape of
the button itself.
Arcades boomed
in the 1970s
Dexterity in pushing
buttons now became a
prized skill, generating
an entire industry.
Buttons
become
Metaphor
Before this, buttons were physical things. The
Macintosh in 1984 introduced to the general
public the idea that buttons could be virtual.
The virtual button still needs a physical button. 1964
The virtual button still needs a physical button. 1984
This concept was so new
that Apple needed to
educate people simply
how to use a mouse.
They took out 39 pages
of advertising in
Newsweek to essentially
publish a user’s manual.
Education through Advertising 1984
Notice the incredible detail to communicate
the basics of something we take for granted.
Education through Advertising 1984
Notice the incredible detail to communicate
the basics of something we take for granted.
1984
Buttons
lose
Shape
With the web, “buttons” could
become anything. They didn’t
need a specific shape that said
“I’m a button.” They could be
blue text and underlined.
1996
Images, text, anything is now
actionable. As an example, the
next page shows everything
that can be acted upon.
Compare it to this page.
Nearly everything can be acted
upon. This has changed how
we perceive the world around
us. All items can have deeper
connection.
We even understand that
simple gray text is actionable,
simply from its location to its
neighbors. We assume that
“Work” is a link.
2010
But would we
assume that here?
Buttons
go
Touch
Touchscreens are becoming
everyday interactions.
Touchscreens are becoming
everyday interactions.
The poster child of touch.
Now taking orders
Where are we
now?
Buttons don’t need...
form
borders
contour shape
words
ornamentation
... and yet, we attribute to them
ease process
magic control
play simplicity
automation
think about
We now
objects with
depth and time,
instead of just static things.
We are approaching a time
when anything
is interactive.
Gesture interaction game
designed by Ziba for
Li Ning in China.
Imagine somebody 100
years ago encountering
this device.
Imagine somebody 100
years ago encountering
this device.
Generations of Interaction
1 Lever
2 Button
3 Surface
soon
4 Fluid The next generation will
feature dynamic surfaces.
Dynamic
tactile surfaces
will create
disposable
physical interfaces.
If it was rumored to be in the
iPad, then the technology must
be only a few years away.
Research on dynamic tactile surfaces
from Chris Harrison and Scott Hudson
at Carnegie Mellon University.
When buttons can essentially have a
disposable physical form, we can build
interfaces into any surface.
Meaning our entire surroundings can
be interactable. Imagine the
generation that grows up with that.
And the next
generation?
Imagine growing up in a world where
touchscreens and interactive gestures are a given.
How does that affect your brain processing?
Imagine growing up in a world where
touchscreens and interactive gestures are a given.
How does that affect your brain processing?
Imagine growing up in a world where
touchscreens and interactive gestures are a given.
How does that affect your brain processing?
The button has been a
100 year transition technology
from the mechanical age
to the truly electronic age.
The button represents
how we interact with
the objects we create.
And that’s why the button
is the most influential
yet least appreciated
innovation
of the 20th Century.
Historyof
the Button
Bill DeRouchey
@billder
bill.derouchey@gmail.com
Billy Choi
The research and attention to detail is refreshing and complete.
I will be recommending this to many others. Sorry I missed the live show. 1 year ago