I like to think of Interfaces as that person who you first go to when you have no idea how a certain place work, what you should do there, or where to go next.

You know that person is the medium to get what you need but maybe you are not sure how to ask, or maybe the answer doesn’t really tell anything and you are back where you started. The more approachable and clear to communicate this person is, the most likely you are to leave with the info you need to continue your journey, and if they give extra info (a brochure, phone number, etc) even better!

So.. hopefully, this weird analogy starts to make sense now. An interface can be a quiet, shy, and low-talker person or it can be a smiling, interested, and well-spoken one. Recently I’ve discovered that while high contrast or clarity on labels help in this conversation between the user and the UI, hover effects play a big role too and are great Signifiers.

It requires extra work for everybody, the designer has to think about how these states will look, the developer has to write some additional lines of code, and.. No, wait, that’s it, is not much! But the difference it makes is huuuge.

To know what elements are clickable before taking any actions or guesses, adds to the usability of the product plus it feels like the interface is alive and communicative, like approaching someone and hear them say “Hey, how can I help you?”

In my opinion, hover effects don’t need to be loud or too jumpy. By this, I mean changing the color of your buttons to a completely different one or making a large zoom on a picture when you hover them it’s not necessary. But it really depends on the look and feel you are going for, if done properly a component can change a lot on hover and work perfectly.

!important: please use :hover on interactive (clickable) elements only, if used incorrectly can cause confusion and frustration on the user.

Adding hover effects to clickable things could be too obvious for some or maybe you already knew it but didn’t pay much attention to it (like me), I mean, :hover doesn’t even work on mobile. But hey, I challenge you, check out how many elements have hover effects on websites like Facebook, Airbnb, Dribbble, Github, and see how you feel about it ;).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store