Why you should not use the hover event
for important interactions in your application
Hover effects can be a great way to improve web applications. You can provide additional information or support the user in a process. Also you can beautify your application with hover effects. These kind of visual effects are nice and can help to keep the user happy. But they are not really essential for the functionality of the application and therefore are not covered here.
So let’s jump right into the pros and cons for hover effects to display additional data.
Pros
When showing additional information, for example a hint, it is very common and convenient to show it on hover. You can provide these information without wasting space. The information is displayed at the exact moment the user needs it. As a result the page is not overloaded with information that is not always useful.
As you can see in the example the deleting button displays a hint when the user hovers over it. The hint gives additional information on what the button is used for. This can help to understand what the button is actually doing. It’s a good usage of a hover effect to support the user in using the software.
Cons
But let’s talk about the important part. What is actually not so good when using the hover event.
The biggest issue is that there is no hover effect on touch screens. Since you are operating mobile devices with your fingers there is no way to hover over certain elements.
You could argue that it depends on the use case if you want to support touch devices. But for most applications and websites you should support them. And this will increase even more in the future. The number of smartphones sold to end users worldwide is actually stagnating. But there are other fields for touchscreens which might raise in the near future. For example more and more cars are using touchscreens. Other IOT devices like Refrigerators or Air conditioners will use touch screens too. And my personal feeling is that there are more and more people using smartphones and tablets only. They tend to not use a laptop or a PC at all.
With this in mind it’s a better approach to support mobile devices and touch screens. It doesn’t necessarily mean you have to do a mobile first approach. But it’s good to think about support for mobile devices to make the application usable everywhere.
As you can see on a mobile device the hint is not displayed at all. The additional information is not there. What might be solutions to this?
Solutions
You could use the click event to display the data instead of the hover event. For sure this only works if the click event is not used already. For the delete button example, this is no option.
It could make sense thought to use a long click event or double click event to display the additional data. Keep in mind that a right click is also no option on mobile devices. In this example you can see the long click variant.
It’s also a feasible solution to display the data directly in the view and you don’t have to use an event for this at all.
Using different elements to display the additional data is also a good solution. You could create helper elements which can be used to display hints. If this component is used all across the application the user will get used to it and can easily find what is needed.
I hope there is a solution for your specific use case. Let me know if you have some other ideas how to solve this issue.
