The System of a Button

Buttons are all over the screen I’m looking at. There will be buttons on the screen you read this. There’s buttons in your house, in your car, everywhere. And every button is more than just a button. A button is a complex system. “Come on, now you exaggerate!”, you might say. Let me explain.

A button has a purpose. When you press or click the button, something should happen. From the action of pressing the button, follows a reaction. Or rather more than one reaction. The button should trigger some expected behavior of the system that it is a part of. The person pressing the button has the reaction that triggers an expectation of something to happen.

How quickly does the reaction happen? Is there some sort of feedback expected? Pressing a button that turns on a device like a light bulb, the reaction should follow instantly. Sometimes the reaction of the attached system is delayed. Does the user know about this? Does it trigger a behavior of the user to re-press the button? What happens when the button is pressed again?

The existence of the button alone creates this expectation. When I press this button something happens. Either we know exactly what happens, or we don’t know it. A button clearly marked as “on/off” sets the expectation when pressing the button (action) the attached device is turned on or off (reaction).

Also the button has a reaction to being pressed. A feedback, some haptic feeling to it. Even virtual buttons are often designed to give some sort of feedback. The user interacting with the button expects not only a reaction of the button being pressed or clicked, but also some kind of feedback that the pressing of the button has happened successfully. If you have ever touched a screen with a flat static button behind it, where there is no feedback at all, you don’t know if you have touched it or not.

A button also has a distinction. You can usually tell what the button is and what it is not. The big red thingy is the button, everything around is not. Is it fitting in the vicinity? Does the color, size and form fit the system? Is the button clearly marked as what it does?

In IT designers and developers can influence the border of the button. Sometimes the button is a visual representation in a larger layer. And not only a click on the button, but also in the vicinity of the button counts as interaction with the button. The is / is not border has been moved. Expected or not is a matter of design and experience.

A button consists of many parts. With a real button, of course it does. The housing, the wires, the mechanism to register the button being clicked, the movable part, the parts that push back the button. Also virtual buttons have many parts. There are properties of color and size. Does it show a border, some bevel effect. What action is linked with it. The reaction needs to defined, e.g. changing the color, playing a “click” sound.

And then there are the perspectives. There is the person installing the button to provide a person. Where do they put the button. In real world examples it relies on where the system resides in relation that the button interacts with. You need cables, a place to mount it, etc. There is the view of the person using the button. Is it clearly marked what the button is doing? Can they reach the button? What is their expectation when pushing the button? The list goes on.

You can even take the perspective of the button. Where does it sit? Does it have wires attached properly? Is it visible? Does every part move as expected?
Or the perspective of the system the button should interact with. Is the button properly wired? Does it provide the right type of signal to trigger what it should trigger? Does the button expect some feedback?

Pressing a button is an experience. The rule of industrial design is that great design is invisible. When the user can flawlessly use a button, getting the reaction they expect, even find the button where they expect it. If something is off, the experience is impacted.
Sure, there are buttons that are highly visible for a purpose. Even then the design is intentional.

The next time when you press a button, place a button or test a button. Think about what is attached to it.