History of the Button

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, maybe movies.

@SXSW’10 by Bill DeRouchey, Ziba Design

Click here to listen to this podcast »

Button = Scaling

The first panel I attended was one of those I enjoyed most. In this panel, one great point DeRouchey brought to our attention is that buttons are all about Scaling: a button is there to simplify a complicated, large scale motion to a simple push. This is how initially button was defined as, when everything was mechanical. Button helped to compress time in trains, compress distance with telegram, and abstract any kind of motion to a simple push, a poke or a press. This way we started learning that buttons are abstract.

He drew couple of great examples from the era when button was the ‘cool’ thing and was positioned as the center element in catchy advertising pitchlines: “You press the button we do the rest” for Kodak Camera Ad. “Push button driving” for a 1956 Plymouth car ad.

Push buttons bring new motoring luxury – a 1946 Popular Science article

When asked to his grandmother which button she pressed first, she pointed the light switches on the wall.

Similar valuation of buttons still exists, says DeRouchey: “Push button fat loss, Push button publishing…”. But it really makes me appreciate when I heard the example DeRouchey gave as the first remote control: you push the button, inside the remote a hammer hits the steel, which makes a sound, and machine hears the sound through a microphone. Also, the abstraction of buttons turned into symbolization of life changing circumstances: push-button war (referring to nuclear bomb launching buttons). Also, with the overuse, it lost its simplicity, as in airplane panels.

Buttons = where is it?

We can say that, with the introduction of on-screen devices and computers, button’s scaling effect become less visible, and each individual push of a button makes us less excited. Along the 100+ keyboard buttons, comes the UI elements, mouse cursors, which was the theme of an ad by Apple in the 80s.  Hyperlinks changed the shapes of the buttons, and it lost its shape. It transformed into “anything can be a button”, and designers even got lost about how to represent a button, and more importantly, what it represents: Yahoo had 3 different types of buttons on its homepage in 1996.

Amazon the number of elements that are ‘not’ a button are very small.

Where are we now?

At this age, buttons don’t have any specific patterns. They don’t need any border, color, underline (recently Google also removed the underlines of the links on their results page.), etc. But they still have many different functions that can perform. And buttons keep changing how we think about things in depth and time:

We are approaching a time when anything is interactive. – DeRouchey

It was first a lever, then it become a circular button, then it become a multi-touch surface. It can even be a fluid, or a dynamic tactile surface.

Couple of interesting notes from the QA:

  • His favorite button: OK button. He calls this button a “happy moment button”.
  • My question, ironically:

Since we are in a world where everything is button (I am referring to Amazon.com example), and button has lost its pattern, should we develop a pattern for non-interacting elements on a website? Say, “all non-interactive elements should be dark grey”..