"Where's the 'any' key?"

A button is a visual artifact that represents one or more functions, functions that are executed when you press it. How we read and understand a button and its represented function(s) is determined by many different, often combined variables; additional text and/or images, color, the button’s own physical shape and feel, and in what context you read the button.

To read and understand the button

To know that something is a button we must read it as a button. That’s the easy part – it’s usually round, colored and contains a word or image. To understand what it actually does (what function it represents) can be trickier, depending on how well designed it is, where it is placed in relation to other elements, as well as how complex the context is:

handheld blender – easy.
Menu on the website – reasonably simple.
Remote digital box – at best reasonably understandable to significantly cryptic.

A well designed button is a button you understand, even if you are unfamiliar with the context in which it is found in. If we buy a food processor, we assume, probably without even reflecting on it, that it probably is equipped with a number of buttons, which representedt functions we quickly are able to understand. The product designer probably assumes that we assume that. A poorly designed button, in turn, is a button one is not able to identify (try finding the flush button on the toilet in a design hotel), or do not understand what it does. Good design is design that’s easy to read, understand and use – the user must understand how to navigate your site, what button to push in order to mix his or hers hummus, how to change the channel on their digital box. And so on.

Minimalist CD
A CD player without TRADITIONAL buttons. Even if you are not familiar with this product you probably will understand how to use it just by glancing at it. Simple, intuitive and playful.

Baby Box Noise Generator
Baby Box Noise Generator – a sound generator with deliberately complicated buttons and controls. The idea (as iI read the design) is that you shouldn’t understand the interface, which will lead to unforeseen musical art-by-accident expressions.

Effects of poor button design

Why I devote a blog post to investigateing something that may seem so obvious as to what constitutes a good or bad button depends on two key reasons: 1. I like details in design, often those that we might overlook. 2. A bad button contributes to a poor user experience, and a poor user experience is not good. One example of the effect of a poor user experience is that your potential customers or client gets tired of your website and leaves, chooses a competitor’s app or product, and so on.

Functionality versus aesthetics

Sometimes there might be design situations where functional intelligibility stands in one ring corner and visual expression in the other. One such example involves a large contemporary trend in design, namely flat design. Simplified, one could say that it is design whose elements have no shadings, textures or other effects that make them look three-dimensional.
Flat design: no shadings, no raised buttons. Instead, colors, color saturation and icons functions as signals for what elements to perceive as interactive, and which mode is enabled/active.

This is where the discussion about how we read the button comes back again – flat design has been criticized for being non-intuitive, a visual trend that stems from an aesthetic expression rather than functional rationalism. In short, users do not really understand what elements of an interface that are interactive (links, buttons, controls, slider and so on) and what is static non-interactive content.

My opinion is that flat design shouldn’t be deemed less user friendly by definition. It is as much about how it is used: how interactive elements are positioned in relation to non-interactive ones, how information is structured hierarchically, which words or images you put in the button as the representation of a specific function. And so on.

Skeumorphism: ugly design that works?

If we turn 180degrees away from flat design we find skeumorphism. In other words, design that tries to mimic the physical stature of the object it depicts: a button on a website or in a program, for example, might have a glossy plastic texture and shadow, as it would have looked like in real life. Looking at the early versions of different operating systems we can see how the interface designers tried to mimic the appearance of physical buttons, and make them look three-dimensional by simulating altitude using shadows, textures and contours:

A button in the good old Windows 95
Skeumorphism 1995: Good old Windows 95. An outer black frame combined with lighter and darker colors to simulates altitude difference. An inner dotted frame shows that is the active button, which is activated in case you prefer to press the Enter key instead of the mouse.

Buttons on Mac OS
Skeumorphism 2001: Stained glass beads (?) countersinked into a plate of brushed metal acts as buttons for window management on Mac OS X. The glass beads hung around for thirteen years, until 2014, when they became flat as pancakes in OS X Yosemite. The metal was also retired.

skeumorphistiskt interface
A skeumorphistiskt interface. This particular example is in my opinion relatively sophisticated, thanks to the discreetreet use of textures combined with very white surfaces.

World after the button

The button has been around a long time and will certainly be for a long time to come. But if there was a time before the button, so maybe it is reasonable to assume that there will be a time after it. Most of us has noticed that we live in interesting times; new futuristic ways to interact with our objects are constantly being developed, ranging from sophisticated voice control in Apple’s Siri and Microsoft’s Cortana, the hand movements in the air of Microsoft’s Xbox and Google’s project Solihull.

The button got its shape is, like everything single designed thing, as a result of the technological and cultural environment that surrounded it. At the time a round tingestobject with a spring mechanism under it was the most functional solution, and perhaps will trump future technologies in functionality. We will know that in ten years when we pleadcomplain about to faulty espresso machines or trying air-zooming in an unsympathetic Google Maps.