Buttons go onscreen

Up until the 1980s, all buttons were physical, actual tangible things that you push, press, hit or slap. At the same time, all computer software was text-based, codes and commands that you had to master and type in. Then someone got chocolate in their peanut butter.

The twin inventions of the mouse and the graphical user interface flipped our entire relationship with technology on its head. After the experimental stage and a couple of commercial false starts, this burst into the public consciousness in 1984 with the Apple Macintosh. During the Super Bowl, no less, in one of the most famous commercials of all time, a woman chucking a sledge hammer into the face of tyranny.

Having a mouse and a graphical user interface meant that you needed things to click onscreen. Buttons were the most natural form to transition from physical to virtual. We are used to pushing things. We’ve learned that if you press your index finger against a circle or rectangle with a word or picture on it, something will happen. We’re smart monkeys.

But this transition still required some learning. Many concepts that we take for granted now were fresh then. Somebody had to write down how software should look and behave before things got all crazy. Therefore, Apple published the Human Interface Guidelines: The Apple Desktop Interface.

Reading this book now is incredible. It sets the foundation for all we take for granted in how we interact with products onscreen. Software, web, it doesn’t matter. This says how a computer should be used.

But we were talking about buttons. On page 23, look at how interacting with buttons is described.

“By clicking the mouse button while the screen pointer is within a button-shaped object within the dialog box.” They had to be precise around how to interact with a virtual button, because it wasn’t obvious. Also notice that the object had to be button-shaped. They had to use the metaphor of a physical button to inform the user that “Hey, this is something you can push! OK?” We still needed the physical metaphor to indicate that it was interactable. An affordance, if you like jargon.

Then about ten years later, the Web showed up. From there, a “button” didn’t need to have a button shape anymore. Anything could be a button, but that’s another story for later.