I find myself often telling designers and front-end engineers that “buttons should feel like buttons and links should look like links.” It occurs to me, that after a few years of the flat design trend, I should explain what that means.
Buttons should feel like buttons
When you press a physical button in the real world — any key on a physical keyboard, for example — you can tactically feel it depressing. You’ll also see its form shrink away from you and the way the light falls on it will cause it to look slightly different.
Absent the tactile feeling of an on-screen button being pressed, we should simulate the other clues to provide feedback to the visitor. This feedback gives them confidence their click was successful. In a digital world, where our physical actions are decoupled from on-screen events, this confidence is critical.
This doesn’t mean we need to abandon flat design or minimalist trends. Instead, we need to be deliberate about our styling and consider the full range of button actions.
Links should look like links
Buttons are (usually and hopefully) fairly obvious. Even with flat and minimal design trends I would expect visitors to have a reasonably high confidence that the element is clickable. Links though, have suffered years of becoming less obvious.
I’m not advocating for a return to the web of 1999, where every link was blue and underline, but links should have a distinct style for their inactive, hover, focus, and active states. In essence, links should stand out and act clickable and they should provide feedback when they are interacted with.
When users aren’t sure where they can click, they lose that sense of empowerment that is so critical to a positive experience. They have to slow down to determine where they can go next, which is an unnecessary addition to their cognitive load.
–Kate Meyer, NNGroup
Navigation and interaction are key to the web. It doesn’t take much extra effort to ensure hyperlinks and buttons look and act like interactive elements. Good links and buttons are unquestionably clickable and promote visitors spending more time on site and viewing more content.