
Micah Bowers
Micah helps businesses craft meaningful connections through branding, illustration, and design.
Today, buttons are darlings of the design world, and product teams obsess over their every detail. But 150 years ago, they didn’t even exist. Learn how buttons rose from obscurity to design stardom.
Today, buttons are darlings of the design world, and product teams obsess over their every detail. But 150 years ago, they didn’t even exist. Learn how buttons rose from obscurity to design stardom.
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?
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?
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:
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.
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.
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.
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.
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.
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.
World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.