There’s this certain trope from classic point-and-click graphic adventure games referred to as pixel hunting. The best way I could explain that trope is by using an example so here goes. Let’s say you’re playing a game in which you’re faced with a locked gate. To unlock this gate, you have to find the key stashed in a drawer with dozens of other keys and the only clue you have is that the key features a similar design to the gate you’re facing. The gist is that only the right key can be picked up but you have no way of knowing this until you’ve clicked on the right key.
It sounds like a terrible joke but a lot of games I played when growing up suffer from this problem. The classic Myst and the Indiana Jones games from LucasArts are some that I can name off the top of my head. Luckily, modern adventure games no longer suffer from this condition as usually, they include what is called a hover effect, in which the mouse pointer changes to indicate that a certain object can be interacted with or picked up, which makes life a whole lot easier. It’s not just in video games, hover effect also bring several things to the table when it comes to web development.
The trend of hover effects in websites
You know how when you’re reading something on Wikipedia you come across a name or a term you’re unfamiliar with that you feel like you have to click on the link only to close it again after reading the first paragraph? You no longer have to do that anymore. In the desktop version of Wikipedia, every time you hover over a link, a small box will pop giving users a general overview of what that particular link is about.
Let’s say that you opened the Wikipedia article on this year’s Oscar for a recap on all of this year’s nominees and while you’ve seen A Star is Born, you don’t exactly remember who Sam Elliott is. Instead of having to click on his name, all you have to do is hover over the link and you’ll be presented with a short information on the man and a photo of him with his trademark mustache and you’ll go, “Oh, I remember that guy!”
This feature from Wikipedia is just one example from how hover effects can be used in the internet. This one is purely functional, saving users from having to open a link if they’re only looking for short information but there are other decorative uses as well. If you’re thinking that hover effects seem too small of a feature to make a meaningful impact on your website, you’re not exactly wrong but as we’ve seen with Ariana Grande’s tattoo fiasco, it’s the little detail that counts. The following is some of the better uses of hover effects I’ve seen so far.
To provide users with additional information
The Wikipedia example is one and Amazon also uses hover effect in their homepage to provide users with a prompt for ‘Quick look’, in which can then click on the label to see more about the products on offer without leaving the page they’re currently in. Again, this application might seem minor but you have to remember that users normally spend their time in Wikipedia and Amazon opening multiple links and products and adding a feature that minimizes the work on the users’ part is no small feat.
To a lesser degree, the entertainment news website Vulture also uses the hover effect to provide users with contextual information where necessary in lieu of links. For example, in this piece detailing how the film Oscar nomination for the film Bohemian Rhapsody and Green Book has generated a backlash. In certain parts, some words and phrases in the piece is followed by a number written in superscript, akin to what you see in Wikipedia. Hovering on these words would reveal additional text on the left side of the piece providing contextual information.
To inform users of additional actions
This is somewhat similar to the Amazon example above, where users are given the prompt for ‘Quick look’ but more comprehensive. For example, in Netflix, whenever you hover over a film or a television series, a trailer for that particular film will play in the background while possible actions are showed on screen. The thumbs up and down icon allows user to like or dislike that content, the plus icon allows user to add that content into their queue while clicking on the arrow will reveal even more information about that content.
YouTube also does this on a much smaller scale. Hovering over a video would reveal the clock icon, which when clicked will add that video to the user’s queue. The news aggregator service Flipboard is more in line with Netflix’s approach where hovering over a story allows the user to add that story to their magazine, like that story or share that story with their contacts. In this case, hover effects simply add convenience to the user, allowing them to perform actions instantaneously without having to jump through unnecessary hoops.
To show off your creativity
Take for example, the website A Story about Trusts. Set up by the historical banking institution J.P. Morgan & Chase as a way of familiarizing new users with their investment trusts, the website cleverly and creatively uses the hover effect for users to manipulate certain elements on the screen while still delivering information on their services and investment in general in an attractive way. I’m not personally a fan of private financial institutions but even I have to admit that this was pretty brilliant.
When using hover effect as a creative outlet, the possibilities are endless. The typeface design company Font Smith went way above and beyond the call and duty when they launched the typeface FS Untitled, named so because it’s too flexible to pigeonholed to a single name. There’s quite literally nothing I could use to describe what they did so jump in and play around to see the kind of thing you could do with hover effects if you’re willing to go that far.