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.

Various tooltips.

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.

Problems with tooltips, how to solve them
Revealing additional content takes effort.

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.

Problems with tooltips, how to solve them
Part of the screen is covered by a tooltip.

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.

Problems with tooltips, how to solve them
Tooltip boxes may be cropped.

5. Prompts do not interact well with speech recognition

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.

Problems with tooltips, how to solve them
It is difficult to create icons with oriented speech recognition software.

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.

6. Content disclosure when hovering over the icon is not available

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.

Problems with tooltips, how to solve them
Above: just a badge (bad). Middle: plain text (good). Bottom: text and icon (good).

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.

Problems with tooltips, how to solve them
Above: Content in the tooltip (bad). Bottom: content per line (good)

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.

Problems with tooltips, how to solve them
Switching 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.

Leave a Reply

Your email address will not be published. Required fields are marked *