History of the Button
Upcoming SlideShare
Loading in...5
×
 

History of the Button

on

  • 35,102 views

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.

Statistics

Views

Total Views
35,102
Views on SlideShare
26,056
Embed Views
9,046

Actions

Likes
102
Downloads
470
Comments
4

78 Embeds 9,046

http://www.jvetrau.com 2626
http://gefahrgutblog.de 853
http://mariofink.de 621
http://students.expression.edu 599
http://socks-studio.com 594
http://frontendandvodka.com 533
http://arquiteturadeinformacao.com 489
http://www.anvandbart.se 365
http://webdemais.com.br 357
http://www.spatiallyrelevant.org 335
http://davaidavai.com 326
http://blogs.hp.com 220
http://localhost 160
http://www.saysaysay.de 86
http://krakum.tumblr.com 83
http://definitionofdone.blogspot.com 72
http://macbook 72
http://www.slideshare.net 53
http://marks.dk 47
http://www.scoop.it 41
http://flavors.me 37
https://twitter.com 36
http://www.definitionofdone.com 32
http://twitter.com 31
http://cloud.feedly.com 31
http://definitionofdone.blogspot.se 31
http://feeds.feedburner.com 29
http://localmdcreatives.com 29
http://outrolado.com.br 27
http://krakum.co.cc 23
http://krakum.lakum.in 20
http://blog 17
http://desyna.com 16
http://leiteamanda.tumblr.com 14
http://erbium 13
http://static.slidesharecdn.com 12
https://si0.twimg.com 12
http://local-anvandbart 10
http://uxandui.tumblr.com 9
http://zuriaga-tecnicas10.blogspot.com 7
http://webcache.googleusercontent.com 7
http://drupalstage.heltenkelt.se 6
http://www.linkedin.com 6
http://www.google.com 4
http://saysaysay.de 4
http://itsdevelopmental.com 4
http://feedly.com 3
http://zuriaga-tecnicas10.blogspot.com.ar 3
http://boutofcontext.com 3
http://thepwr.co 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • well done sir. thanks for this.
    Are you sure you want to
    Your message goes here
    Processing…
  • I love this. Reminds me about 'As We May Think' by Vannevar Bush in 1945 in which forecast the future as a Memex, so many things right, except we would push a lever to use the machine :)
    Are you sure you want to
    Your message goes here
    Processing…
  • Awesome 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Researching for the last four years or so. The result of moving from working on web to working on products. <br />
  • 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. <br />
  • 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. <br />
  • 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. <br />
  • How did we evolve from the crudest interactions to products like the iPad in a little over 100 years? <br />
  • how we cognitively understand objects, interactions and the space around us <br />
  • blah <br />
  • And how we&#x2019;re going to do this is take an anthropology approach by looking at items from the last 100 years. <br />
  • blah <br />
  • <br />
  • blah <br />
  • blah <br />
  • blah <br />
  • blah <br />
  • To understand our current transition, it&#x2019;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&#x2019;s step way back. <br />
  • 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. <br />
  • Shooting a gun is nothing more than throwing a tiny rock really really hard with much better accuracy. <br />
  • Pushing a piano key is really just hitting a string. It&#x2019;s all about scaling. <br />
  • With machinery, you can see the action happening. You can follow the action to the results. <br />
  • But some pretty interesting developments happened that changed how we think about the world around us. <br />
  • Railroads compressed our sense of time. Travel that use to take months could now take days. <br />
  • 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. <br />
  • 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. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • The opera comes to your door. The observoscope. Home News Service. Events as they transpire. <br />
  • The opera comes to your door. The observoscope. Home News Service. Events as they transpire. <br />
  • <br />
  • <br />
  • The opera really did come to your door. <br />
  • The opera really did come to your door. <br />
  • <br />
  • <br />
  • <br />
  • Roy&#x2019;s Robot Repair <br />
  • Roy&#x2019;s Robot Repair <br />
  • Roy&#x2019;s Robot Repair <br />
  • Roy&#x2019;s Robot Repair <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • blah <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Gold before chloride? <br />
  • &#x201C;That Touch of Mink.&#x201D; <br />
  • &#x201C;That Touch of Mink.&#x201D; <br />
  • &#x201C;That Touch of Mink.&#x201D; <br />
  • &#x201C;That Touch of Mink.&#x201D; <br />
  • &#x201C;That Touch of Mink.&#x201D; <br />
  • Before this point, buttons had all been about serious business. Getting work done. But of course that changed too. <br />
  • Humpty Dumpty. Pinball Hall of Fame in Las Vegas. Tim Arnold. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • This is the era where I lost a lot of quarters. <br />
  • <br />
  • <br />
  • <br />
  • 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. <br />
  • Along another track, buttons lost their physical nature and become more of a concept than a physical thing. They went virtual. <br />
  • <br />
  • Douglas Engelbart invented the mouse. <br />
  • 20 years later, Apple introduced the mouse into the mainstream. <br />
  • Apple bought all 39 pages of advertising in November issue of Newsweek. <br />
  • This is only 26 years ago. <br />
  • Look at how much effort they are making to describe what a button is, how to use it. <br />
  • <br />
  • The idea of what&#x2019;s interactable breaks down even further with the web. <br />
  • Doesn&#x2019;t matter if it&#x2019;s a word, a box, an image, something floating. Essentially anything now can be a button. In fact, let&#x2019;s hide what ISN&#x2019;T a button on this screen. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • A LOT of instruction for physical interaction. Coins In. Coins Out. Cash In. Cash Out. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • blah <br />
  • blah <br />
  • Imagine someone encountering this device 100 years ago. This was designed by Ziba for a Li-Ning flagship store in Shanghai. <br />
  • Imagine someone encountering this device 100 years ago. This was designed by Ziba for a Li-Ning flagship store in Shanghai. <br />
  • Imagine someone encountering this device 100 years ago. This was designed by Ziba for a Li-Ning flagship store in Shanghai. <br />
  • <br />
  • blah <br />
  • blah <br />
  • <br />
  • <br />
  • <br />
  • blah <br />
  • 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. <br />
  • 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. <br />
  • 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. <br />
  • <br />
  • <br />
  • <br />
  • <br />

History of the Button History of the Button Presentation Transcript

  • Historyof the Button Bill DeRouchey
  • 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