Chapter #7. Make Your Buttons Look Like Buttons
The flat design aesthetic, born out of Microsoft's Metro user interface, rose to near ubiquity in the late 2000s. In iOS 7 and Android's material design, these extremely minimal visuals are still the go-to look for modern web applications.
Flat design is bad. It's really terrible for usability. It's style over substance and it forces your users to think more about every interaction they make with your product. Stop making it hard for your customers to find the button:
The Metro user interface in all its "what is clickable?" splendor
There are parts of your UI that can be interacted with, but your user neither knows which parts these a, nor wants to spend time learning this. They have used buttons in real life, many times—on elevator controls, on their oven, and in their car—so they understand how a button works:
Buttons that exhibit visual affordances such as texture and pseudo-3D shadows (left) consistently perform better in user tests than those without them (right)
By drawing on real-world examples, we can make UI buttons that are obvious and instantly familiar. The human visual system is tuned to see depth, and by removing the illusion of depth from your UI, you remove a whole layer of information for the user.
Buttons in real life look pushable: they're raised or they suggest an obvious way that they might move if pushed. For example, they might have an indicator light and look more prominent when enabled. You should copy these features into your UI.
The inverse is also true: there are real-world buttons that don't look pushable—flat capacitive buttons on car park machines and coffee machines spring to mind—and these buttons are often accompanied by a stuck-on, handwritten press here for ticket note.
Using real-life inspiration to create affordances, a new user can identify the controls right away. Create the visual cues your user needs to know instantly that they're looking at a button that can be tapped or clicked:
Bringing flat design to the real world has consequences
Lastly, the opposite is also true: don't make non-button elements look like buttons if they're not.