Subtle Hover Design Ideas – User Experience Stack Exchange

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.

enter image description here

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

enter image description here

*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.

enter image description here

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.

enter image description here