Button and link usability
Taylor Dewey on
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.
Comments
I see a lot of WordPress themes where links are not really visible in the default design. In most cases links in text should be unterlined and have a different color. People are used to that – it is good practice.
Buttons should change color, size or move on mouseover. I also found buttons which start to wiggle after some seconds very much visible – good affordance.
Unfortunately, the 2 buttons in the example look exactly alike to me. The box shadow is such a light shade of grey that it is practically invisible against the white background. I had to look at the code to determine that it was the principle difference between the buttons.
I agree that the navigation experience should be intuitive. Bottom line: if a user has to give a second thought as to how to navigate through a site, then you’ve already failed them in a small (and sometimes large) way. And we have to find a balance between well-worn conventions, and new trends. For instance, in my mind, links should be colored differently than the surrounding text. However, they don’t necessarily need to be underlined (as they were in yester-year). Color-coded but not underlined – that’s a good halfway balance that makes sense for an evolving user experience.