UI Design
< 5 minute read

The Power of Touch – The Evolution of Button Design (with Infographic)

Micah helps businesses craft meaningful connections through branding, illustration, and design.

What is actually happening when a button is pushed? Do we ever pause to ponder the powers we’re activating? The “pressed” state holds so much potential, so many possibilities. Some are mundane, some are astonishing, and some are so sinister that we can’t publish them here.

Today, buttons are interaction celebrities. Product teams agonize over every state, label, color, and rounded corner. Well-considered buttons aid navigation, boost conversion, and improve the user experience. Buttons are the darlings of the design world, but it wasn’t always so.

Like so many objects of the industrial era, buttons were born in obscurity. For decades, they toiled in anonymity, abused and overlooked, raw material to be mauled and mashed by our sticky, food-caked fingers. Sure, there were exceptions. A few bright stars made it to the global stage. Who can forget paragons like the “Play” button, the ever-ominous “Doomsday” button, or that strangely irresistible “Easy” button from those old Staples ads?

Button design
Has there ever been a button as widely recognized as the Staples Easy Button?

Outside of these anomalies, buttons garnered little fanfare. No matter. Rain or shine, recognition or not, they simply did what they were designed to do. Go down, rise up, and dutifully initiate the most diverse array of operations.

So how did we get here? How did we journey from a land of button oblivion to this lush and lustrous button Shangri-La we now inhabit?

Levers to Voice Commands – A Brief History of Buttons

This may come as a shock, but the history of the button is relatively short, spanning somewhere between 130-140 years. For further discovery, we turn to Bill DeRouchey, Principal Product Designer at Zendesk.

DeRouchey’s blog Push Click Touch is loaded with compelling detective work that illuminates the winding backstory of buttons and their integration into society. But for designophiles and button fanatics, the real gem is his talk History of the Button.

Starting in the 1890’s, Derouchey ponders both the philosophical and anthropological impact of buttons. The entire presentation is remarkable, but some of the more fascinating points are worth highlighting:

  • Before buttons, we lived in an era of levers. With levers, we could see how one motion (pulling the lever) triggered similar mechanical motions, and we could follow this to a final result.
  • With the arrival of the button era, motion was abstracted. For the first time in human history, the initial motion (pushing a button) could result in motions that were completely dissimilar. According to DeRouchey, this was a monumental shift in the way humans perceived the surrounding world, and buttons became associated with one thing—ease of use.
  • From the 1890’s to the 1950’s, buttons were marketed as a way to make life easier, quicker, and more convenient, and we see this frequently in advertising for consumer goods from that period.
UI button design
So easy a candy cane can do it—this RCA ad from December 1953 promotes push-button convenience.
  • At the same time, button panels were being used to control highly complex machines and automated systems, and there was a growing sense that interaction with buttons required special training. In popular culture, buttons were even depicted as overly confusing and causing oppressive work environments.
  • As the 1970’s rolled around, the burgeoning world of in-home video game systems introduced simple, button-based controllers, and buttons established a place in our psychology of play.
  • By the 1980’s, virtual buttons appeared inside computer interfaces. These buttons still had to be controlled by a physical button (the computer mouse), and software companies went to great lengths to explain how users should interact with them.
  • With the dotcom boom of the 1990’s, we were introduced to a new form of button—the buttonless button. Online, any graphic element (text, icon, photo, etc.) could become a clickable link. Around the same time, and into the 2000’s, touchscreen technology became more and more advanced. With the release of the first iPhone in 2007, surface touch buttons started a rapid ascent towards ubiquity.
  • Today, we exist somewhere between eras. Physical buttons abound, touch buttons are more popular than ever, and instances of buttonless interactivity are expanding into previously ignored objects, spaces, and places.
UX buttons
Voice-controlled user interfaces like the Amazon Echo Dot (Alexa) provide a glimpse into the future of buttonless interactivity.

Simplicity Is the Aim of Button Design

Entropy spares no entity. We experience a thing like the button, something plain and pure, and we desire to multiply the effect. A single button becomes a row of buttons, becomes a panel of buttons, becomes a screen of infinitely clickable options. Designers ought to take note of this tendency in the infographic that follows and remember that the power of the button has always been its simplicity.

The Power of Touch - The Evolution of Button Design

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

What is a UI button?

A user interface (UI) is the point where a human interacts with a device’s computer operating system. Traditionally, user interfaces have contained buttons that allow users to initiate actions. A UI button is simply a button that exists within a user interface.

Why is the CTA important?

Within digital products and websites, CTA’s (call to action) encourage people to perform various tasks like purchasing goods and services or filling out forms. The wording and placement of a CTA are important because it must stir a sense of need within users and present a clear way to act.

What are the key elements of a user interface?

There are four general fields of user interface elements. Input controls include elements like checkboxes and text fields. Navigational components include elements like searchfields and icons. Informational components include elements like tooltips and notifications. Containers are typically shown as accordions.

What are button states?

In digital interfaces, buttons are often represented as small rectangles or squares. When people decide to interact with a button, they need to see that it is operational. At their core, button states (like enabled, hover, pressed) show functionality when people hover over or click on a button.

What is a focused state?

A focused state shows users when they have selected or highlighted a button (or some other user interface component) using an alternative input method like a keyboard or a voice command. As designers look for ways to increase buttonless interactivity, look for focused states to become increasingly important.