Welcome to UX Things, a weekly newsletter on all things UX, Visual, and Product Design. If you’d like to sign up, you can do so here. Or else, just read on.

This week’s issue is dedicated to a very useful UI pattern — tooltips.

Tooltips are a great way to offer additional information to your users, as they interact with UI elements. In most cases, they’re activated with hover, click or focus events.

That information usually sits behind a tooltip icon, which works in most cases. However, there are a few scenarios where the usage of tooltips in such ways becomes a UX concern.

Crucial information

If the information is crucial for a user to perform a task, we shouldn’t place it behind a tooltip, to begin with.

A good rule of thumb to follow here would be to keep the information visible at all times if it’s crucial for our user to complete a task. Let’s explore a few different scenarios.

If we show all of the information, our UI can end up looking more complicated, than what it actually is. It can also add up to confusion and make the task seem more difficult to complete.

If our users keep coming back to that part of the UI and are already familiar with the actions, it can easily end up as unwanted content.

An example scenario

Let’s imagine a scenario where we have a form with many fields that need important additional information — on top of just having labels. Having additional information always visible below the inputs could overwhelm the user.

What other options do we have if the tooltip information is crucial, but also quite lengthy? Our first guess could be to go with a classic tooltip.

We could also move it aside instead of having it appear next to the label — to give it a bit more emphasis.

However, if we’d like things to be visually more appealing, we could also place our tooltip inside of the input. This approach is a bit more mobile-friendly as well, as we can retain the full width of our inputs on mobile devices.

We could also highlight the label itself and give it more emphasis with an underlining border. The border is very light on purpose because otherwise it might be mistaken for a link. This way, together with the tooltip, it appears as a hover-able area instead.

This approach brings quite a few benefits for the user.

• the hover-able area is larger

• easier for users to notice

• it adds an extra layer of importance

• larger tap area for touchscreen devices

Ideally, we would place the additional text below the input, if it’s short and crucial. We could also have a sidebar on the side of the form, explaining the steps as we make our progress through the form elements.

Popup on focus

Last but not least, and quite often the most optimal solution is to use a popup on element focus.

This approach could be an ideal solution in most cases, as it hides the content initially — to avoid confusion and complex appearance. At the same time, we ensure that the user will end up seeing the extra information — when the time is right.

Tooltips are a great way to offer additional information when required. If not treated with care though, they might end up being a source of frustration for the users. So let’s try to think about the importance of tooltips to try and keep our users away from guessing.

Connect with me

Join me on Twitter to discuss all things design. ❤