Problems with tooltips, how to solve them
Tooltips are messages that appear when a user hovers over a specific part of the interface (usually an icon), they explain how certain elements work or what they mean.
Then, when the user moves the cursor off the element, they disappear.
Although tips often help us out, provide us with additional information, they also have a number of problems.
Now I will explain some of the shortcomings of tooltips and how to deal with them.
1. They are hard to see
Some users may not notice the tooltip, which means there is a chance that they will never see the content of an element, block or paragraph, etc.
2. Sometimes, prompts take effort.
Let s say users need more information, help to fill out a password field with complex rules. Forcing users to reveal additional content themselves is an unnecessary burden.
3. Prompts obscure the screen
Tooltips are often displayed at the top of the screen, thereby blocking part of the interface.
This means that you cannot read the tooltip and control the rest of the screen at the same time.
Users have to strain a little to remember the prompt, or constantly switch between the two modes of operation.
4. On small screens, prompt windows may be cut off
Since tooltips sometimes overlap, chances are they will be clipped when working on small screens.
Tooltips consisting of icons must have an access button. If you use one, its purpose should be clear from the image, do not force users to guess what it is for.
Imagine a bell icon. It s unclear if users have to say “Click on call”, “Click on notification” or something else to activate the icon.
First, to use the tooltip, you need to use a mouse or other pointing device, which makes it impossible for touchscreen or keyboard users to view it.
Secondly, freezing is not always an intention to activate control. The user can move the cursor over the tooltip, which accidentally activates it.
Thirdly, fine motor skills are required for work. Users must carefully move the mouse over the desired area and keep the cursor level so as not to accidentally hide the tooltip.
Fourth, users who use the “Magnifier” function cannot move the viewing area under magnification without hiding the hint.
Finally, users cannot select or interact with content when the tooltip is open.
You can provide similar functionality to keyboard users by showing a tooltip. But this is unconventional and still precludes user interaction with the touchscreen.
What an alternative to all this
1. You have to do the hard work for the convenience of your users.
Having content just to help users understand your interface is a sign of poor design.
If you re using an icon to convey meaning, it s better to use text instead, or icons and text together.
If you have one tricky question, consider if you can simplify it by asking a few short questions?
Either way, work hard to make it as simple and convenient as possible for your audience.
2. Just add explanations to the content itself
If you really need to provide additional clarification to users, just make them part of the content.
Give users what they need, when they need it.
3. Use a content switching template
If these two options don t work for you, use the built-in toggle component.
The switch component is the best option because:
- does not rely solely on iconography
- will not be clipped by the viewport
- does not hide the content
- click-activated and works well in all situations
Let s summarize
While tooltips allow you to hide and show content, the need to clarify how your interface works indicates poor design.
At its best, prompts force users to avoid a number of obstacles and difficulties in accessing your content. In the worst case, they are invisible and completely inaccessible.
The best alternative is to simply place the explanations in context, make them part of the content, or even better, design the interface so that users don t need additional guidance.
If all else fails, try using the built-in toggle component. It provides all the benefits of progressive disclosure without prompting traps.