Subtle Hover Design Ideas

Question

I'm using tooltips on my site to show some extra info but i'm finding it hard to make it obvious that the icons are hoverable. I have added in a swirl line that animates, also a pulse animation to the icon itself and have changed the curser to '?' when the icon is hovered however when doing some testing in the company it's clear it is not obvious enough.

I have attached an image of the section in question.

I would like to avoid having 'Hover me' on the page.

Any suggestions would be great, thanks.

Answer 1

There are several perception issues on your page, I personally take some time to understand what the problem is since at first glance it's a landing page with two illustrations in a split field with no interactivity elements.

The main problem is the icons don't look like icons

1. They are too integrated into the illustration
2. They have practically no formal element that associates them, they are totally independent graphic islands

I recommend some actions to reach a good result.

Study the icon group regardless of the illustrations and hovering action. Both you and the user should understand this NOT as islands but as a graphic system. Currently there are six disconnected graphic pieces without any associative visual reference, except the text.

Here's a clear example of icons graphic system (from Dribbble) *:

_{*See more at dribbble/iconography}

An important help to understand the graphic process in composition is to read (and understand) the Gestalt principles, especially the laws of Proximity and Similarity for this case.

---

Once the icon's graphic system has been well defined, study what's the relationship with the rest of the illustrations so it does not hinder their interpretation. An optimal result doesn't need any dotted line or animation for someone to visualize different components that may even have a certain action.

Creating a graphic system allows associating groups of elements and consequently favors the immediate interpretation of future components to be incorporated to help the user to understand the general functionality.

Answer 2

I think your discoverability problems likely stem from a lack of signifiers. Signifiers are the visual clues that tell people how a thing can be used (Like the handle on a car. See 6a on this article from Nielsen Norman group). There's nothing about your icons that say, "click me!"

Here are a few suggestions:

Add signifiers

Links are a great example of strong signifiers. Using a link (or some other signifier) to allow the user to show more information on screen might be a good option.

Show all the content

If the information you want your customers to find is important, don't hide it (if it's not important, why show it?). Based on the example you provided, the tooltip information adds a little additional context to your current labels. You might be able to improve your labeling to include the context without asking people to look elsewhere.