IxD Deep Dive: Hover Functionality Today
I’ve always wanted to overlay my product design competencies with a specialised skill. As I searched for the niche I could burrow into, I found Interaction Design to be intriguing because, to my untrained eyes, it seemed like a blend of UX design and motion design.
Now I’ve begun a journey to first learn then practice. My learning phase allows to me not sleep walk through product experiences — I’m always looking for delightful interactions to break down or just marvel at.
Recently, I observed that the treatment of the hover action is increasingly becoming an opportunity for improved assistance and insight. So here are four examples of the hover interaction being extended beyond typical use.
Detail Card on Hover
On Twitter(X), you will notice that if you hover over a username, the profile details of the user appear, bound within a card that holds the key profile details (name, follower information and a large call to action to follow the user). Although this function has been implemented for some time, it is noteworthy.
I can imagine that this design decision was made for a few reasons like
- reducing interruptions in user journey through the timeline, and
- improving decision making by giving users key information for deciding who to follow.
History on Hover
The Arc browser by The Browser Company is an amazing case study on the use of interaction design, generally. It feels like every interaction was considered and thoughtfully crafted.
One of the many brilliant ways the Arc browser uses the hover action is to display page history.
This interaction helps me save time and navigate easily to previous pages.
Preview on Hover
Products like Notion and Figma use hover for previewing content. On Notion, this is especially helpful when there is a list of several pages that are unfamiliar to the user.
Bonus Find: AI Summaries on Hover
On the Arc browser, the hover interaction is used to make search result pages dynamic. The browser utilizes AI to create summaries of each web page in the list of search results. This summary is generated on hover over each search result. Unfortunately, I couldn’t capture a demonstration of this example, but feel free to download the Arc browser and play around with the interactions on it.
Historically, the hover interaction has been used to display tooltips or indicate a state change in an element on a screen. More recently, this interaction is expanding — I’m excited about how it’s already being used to save users time, improve decision making and provide summaries. I’m eagerly looking forward to how the hover interaction will evolve even further in the future.
