A Short Wonky History of Web Buttons
A brief exploration of the history of buttons and a proposal for taking button design to the next level
The Button Concept
Who do we want to put in charge of the button?
This is a question invoked with severity and sometimes hysteria — a hypothetical oft used when evaluating the sanity of the US president. Indeed, buttons can be a big deal (with real or imagined importance), although the ubiquitousness they enjoy today — both in our actions and in our lexicon — is relatively recent. The first buttons (at least the relatively easy-to-use ones) entered the market around the turn of the 20th century.; the phrase “push of a button” took off around the 1940s; “easy as pushing a button” popped up in the late 1950s; and “big red button” made its way forward in the late 1990s (Google Ngrams).
Buttons, most simply, are components of a larger, 2-part concept: interaction and environmental reaction. Interaction is performed by us humans, and that interaction causes some kind of environmental response or change. Controlling how we interact — and what the corresponding output of that reaction is — is the button. As humans got better at logic and physics, we began to hold more reliable expectations about what kinds of things our interactions would cause. We started to shape the interactions in order to consistently guarantee certain outcomes. Put another way, we made machines.
Real World Buttons and Machines
In the industrial revolution, machines didn’t start with buttons. Machines were less of a black box — it was easy to see how your interaction of lifting up a small dam allowed water to rush towards some wheel which moved some gear which subsequently moved some more gears which then rotated some stones which then ground your wheat for you (no more daily grind; the machines did it for us).
We then got to the stage where some of the mechanisms were hidden under the hood, but there was still a demanding interaction from us. Enter: tractors. The first tractors of the early 20th century were started mechanically. In order to start their ignition (like starting a car), you couldn’t turn a key or press a button. It was you that provided the force to wind up the crankshaft or flywheel that would start the tractor.
Crank wheel tractors, however, were notoriously difficult to start and sometimes dangerous. If you didn’t take the proper precautions, the crank could rock back into you — breaking your wrist, arm, or even fatally hitting you in the head. Easier ignitions that required less work from you gained popularity in the 40s. With other button-enabled machines well established by then, the 20th century saw buttons cement themselves in our colloquialisms.
From archaic pulley systems to hand-cranked tractor engines, we certainly don’t have a throughline to the buttons you might see on a website. We do, though, have a neat narrative of examples for the willful scoping of input and output — a story that might help us design better buttons today.
With websites, we have interactions we want users to take and we want them to have an intuitive sense of what outcomes their interactions will yield. They push a play button, and audio plays. They click a button that says “Buy” and it leads them to a checkout page. They click a red button or an X that aborts (oh god, please abort). The first types of buttons were hyperlinks — but soon after those, we arrived at the button design period known as Skeuomorphism.
Skeuomorphism
In the late 90s, making screen buttons that mimicked material objects — like the buttons on a calculator — became the main experiment. Shadows, highlights, shapes, and symbols were made to make buttons look like they were on a real object. Users knew that the “Play” button on an mp3 player would play music — it’s easy to translate that idea to a screen.
Users had a long time to get used to and familiarize themselves with 2D buttons. By 2014, implicit associations were well ingrained and designers could abstract away from the literal and suggest behavior in different ways.
Flat Design
In 2014, Google released its new UI approach: Material Design. The style relies on shapes, grids, and color (i.e., things look flat but colors pop). Flat design was (and sort of still is) immensely popular because its simplicity makes it easy to code, lightweight for load times, and accessible to most users.
But flat is boring, and so designers started experimenting with different treatments — ghost buttons, gradients, soft shadows. A few years later, in 2019, something new, neumorphic, emerged on the scene.
Neumorphism
A new take on skeuomorphism, neumorphism emphasizes shading but is expertly used to create a smooth, integrated feel. Buttons are made to look like they are subtly raised from the screen — everything looks velvety, and you really want to touch it.
In 2021, it is all the rage — it’s aesthetically appealing, harkens to skeuomorphism, and utilizes some of the clean, simple coding that goes with flat designs.
2021 Experiments
Part of what makes neumorphism so visually appealing is its seamless integration and low contrast with the rest of the UI. This gives us some problems, however, when it comes to accessibility and CTA buttons. These buttons may stand out, but they don’t pop. So, what can we do to take part of this neumorphic trend but also address some of these issues? What might be next?
I think there are 3 directions we can go in.
Anthromorphic: a term I’m using to group together the class of interactions that mimic human movement.
- Wii controls (like Wii tennis and swinging your arm).
- Swipes and directional tapping that feel intuitive.
Improving upon Neumorphism (don’t make me say neoneumorphism): leaning into the skeuomorphic aspects a bit more.
- Stronger emphasis on 3D while keeping low color contrast.
- Using other real world interactions — not just buttons — to inspire new designs (like bouncing a ball, or steering a bike).
Agnostic Kineticism: regardless of the style (flat, anthro, neu, skeuo), relying on the movement and animation of the element to inspire desired effects.
- Each style can be invoked depending on the use case and what’s needed (so us designers are less limited and can please a wider range of audiences).
- Buttons using movement (no matter the style) — we can suggest certain actions and make buttons stand out.
Agnostic Kineticism is what I’m most interested in: animating web elements is becoming easier and more powerful by the day, movement is incredibly powerful at suggesting action or conveying meaning, and movement allows us a lot of room to experiment and push boundaries.
In collaboration with Clicky Button, I’ve created a few examples. Our approach is to use Agnostic Kineticism that employs neuroaesthetics and VASMR to make the interaction with buttons satisfying and irresistible. You can check out some of these buttons live here on our microsite. Tell me what you think in the comments. Have we missed the mark or are we pushing the boundary of buttons in cool ways?
