Monday, August 4, 2014

Tooltips Best Practices

This article presents some considerations that should be observed when using Tooltips in your design.

Some people may argue that there shouldn't be a need for tooltips. But, let's be honest... There are times where we need to use the tooltip. So then, if we absolutely must use this little guy, then what are some things that we should consider when implementing it into our designs?

1. Open via click, not hover
Sometimes you see a design that has the tooltip automatically open upon mouse hover. The problem with this is that it doesn't port over well to the other channels in a full cross channel experience. Try hovering your finger on an iPad, or PS3 Sony browser. Not much will happen. It's always a best practice to let the user drive the engagement with an interactive element. If the interaction occurs without the user's explicit input, they will likely be shocked or surprised. Additionally, this can be frustrating. Especially if they are trying to get something done.

2. Limit usage
Just like with any screen element, too many of these little "helpful" info tips can result in them NOT being helpful. Consider this... Every data element on screen competes for the user's attention with every other data element on the screen. What this means is that the more of these little info tips you present to the user, then less impact the screen's overall visual or architectural prioritization will have an effect on driving the user to the main call or process flow. Plus, who likes clutter anyway?!

3. Use standard icons
Here are some tooltip icons that have been used. Some of them are more common. If you glance through, you will likely see one or two that you recognize.

Just to clarify a bit. Most common would be an "i" in a circle which stands for "information", or a question mark ("?") in a circle indicating that there is additional help information available.

The rule of thumb here is that it's best to use what is most common in order to ensure that user expectations are being met. When you deviate from the standard, it must be to improve on the standard, without kicking the metaphorical chair of existing know-how out from underneath the user.

4. Tooltips should be deprioritized
As tempted as you are to make the tooltip the main call to action, it's important to us that someone smacks you with a corn-dog. The very purpose of the tooltip is to get excess on-screen help out of the visible and placed into a tiny little hiding compartment so that when users get into a bind, they have a place to go to get the info they need. Tooltips should be used to simplify the screen so that the main call to action can be louder and prouder!

5. Tooltip should be fully visible when opened
One of the beautiful things about a tooltip is that it can help save space anywhere on screen. This means that there is a high probability that the tooltip will appear in obscure areas on various designs. When you are putting tooltips together, remember that when a user clicks the tooltip, they will likely expect the tooltip to appear in their visible window no matter where the scroll bar is set. A modal popup that centers the tooltip is probably the most elegant, versatile implementation that I've seen. The point here is that if a user clicks the tooltip and it pops up, but only half of the tooltip is visible, then you've positioned it incorrectly.

6. Keep your info-tips short and sweet
When a user clicks the info tip, chances are they are not expecting a book to popup on screen. If that level of information is needed in order to help them 1) there is a good chance, you need someone to proofread the work, 2) the process is too complex, 3) It may be information that is going to best serve the user if it had it's own section on the site.

Keep the tooltip short, and concisely written to support quick skimming and scanning. User's will thank you if you can provide them what they need, in a tiny package.

Hope the list helps you. There may be more, but for now, this is all we have for this very simple, very useful design element.

My New blog is Come see my newer/more relevant content.


Yannick said...

Hi, thanks for your article ! I was also hoping you could help settle an argument I'm having with my colleagues : we have a scheduling app, and mousing over assignments shows a tooltip ( we can't just have them click, because clicking triggers the edit mode ) , right now mousing over the target will display the tooltip, it stays for 2 seconds and if you want to see it longer, you have to move the pointer over the tooltip itself, which sucks because it's always in the way. I'm trying to get the devs to just show the tooltip indefinitely when mousing over the target and hide when moving the mouse away. What do you think is the best behavior in this case ? :-)

e eklipzz said...

Great question Yannick. I just got done reading Luke Wroblewski's book titled Web Form Design ( I think maybe it has a part on help text that you will find interesting. Ultimately, the classic problem is if you don't set aside room on the screen for the text to appear, then it will have to pop up and potentially cover some other important element. There are a number of great conversations on this particular topic.

We live in a grey world where what might be right for one situation is not necessarily right for all situations. One good solution is to test a few different designs using AB testing to determine which is perceived best and which actually shows to be best. Good luck friend.

Post a Comment

Yes, please comment.