12

I've read Do people actually use tooltips?, and there are mixed answers there - I know a lot of people do use tooltips, but there are still a lot of people, in my opinion, that don't use tooltips.

How, from a design perspective, do you tell users (especially new users to a website) that they can rollover a specific element to find out more?

Would you make that element flash? Or would that be too intense?

  • 1
    sorry if this is off topic here - the Help Centre What topics can I ask about here? section is a bit sparse... If it is off-topic, please tell me and I'll delete :) – ᔕᖺᘎᕊ Apr 9 '15 at 20:36
  • 2
    I find your question so relevant, I even answered it :) – Dvir Adler Apr 9 '15 at 21:55
  • 1
    +1 for the question, but also for doing your research (including visiting the help center!) beforehand – tohster Apr 9 '15 at 22:30
16

Observations

  1. Browser implementation of tooltips is not predictable. Some browser show tooltips immediately, and some show them after a delay. The position and styling of the tooltips is not predictable across different browsers.

  2. Users often miss native browser tooltips because (1) they are small; and (2) most browsers require users to pause the cursor over an element before the tooltip is shown, so users moving a mouse across an element may never see the tooltip. Here's a typical browser tooltip that shows after a delay.

    enter image description here


Modern approaches

To avoid depending on browser tooltips, many modern apps implement custom tooltips which provide UX designers with much better control over placement, styling and microinteractions for the tooltip.

Here is an example of a modern approach to tooltips.

These approaches are variously used:

  • Show the tooltip immediately instead of after a delay. This avoids awkward affordance of pausing the cursor before a tooltip appears. This is very common nowadays (e.g. used in Gmail). Note that sometimes to avoid the "flash" effect when a user is moving the cursor quickly across an element, you may want some controlled delay.

  • Brighten the tooltip. Use colored backgrounds, larger fonts, drop-shadows, or irregular box styles (e.g. callout) to make the tooltip bolder/more noticeable. Animation can also be effective (see the live example above).

  • Indicate the interactability of an element better. You can use placeholders as @DvirAdler suggests above. However, they may appear intrusive for non-beginners who may get tired of seeing them all the time. You can also use color or the convention of a dotted underline to indicate that an element has a tooltip (or at least, is interactable). Here are a few alternatives for indication:

    enter image description here

You will have to determine which combination of approaches works best for your site.

  • I hate immediately-visible tooltips. All too often, it means I need to carefully plan my route through a form so that when the cursor reaches its goal, there isn't a tooltip covering it. – Mark Apr 10 '15 at 1:22
  • @Mark that's why I included a number of different approaches. Tooltips as a whole elicit a very broad range of reactions from users (and I've found its pretty hard to test tooltips btw), and it's notable that despite yours and others reactions to instant tooltips, they do test positively as a whole in many apps. – tohster Apr 10 '15 at 1:45
  • 1
    Thanks for the answer! +1 I like the dotted underline idea and the different colour idea - so I'm going to accept this one :) – ᔕᖺᘎᕊ Apr 10 '15 at 10:23
9

There's a simple and classic solutions for this.

You just add a tiny icon letting them know there's a helpful tooltip waiting for them:

enter image description here

There a are many occasions where you want to help first time or rare users, but you don't want to clutter the screen with lengthy explanations. Tooltips are a greta solution, but as you mentioned, many people are not aware they are there. Thus this tiny indicator invites the user to look for help only when they need it.

Don't even think about making those icons flash. They should be subtle, and not get in the way of people who have the right to ignore them.

  • 1
    I guess so... and I presume the help icon itself is the tooltip, and not the text next to it...? But this could get messy - there could be a lot of tooltips in a site - where a ? might not fit - what to do in those situations!? – ᔕᖺᘎᕊ Apr 9 '15 at 21:57
  • 1
    when the user hovers above or clicks the ? icon the tooltip appears in a bubble. Another option is to show the tooltip in a fixed box on the screen, and it shows the tooltip the moment the user hovers over a field. You can get many more ideas here: uxmatters.com/mt/archives/2007/05/dynamic-help-in-web-forms.php – Dvir Adler Apr 9 '15 at 22:05
  • Thanks for the link :) But all those suggestions are to do with forms - tooltips can be used in other places! Like over normal text... – ᔕᖺᘎᕊ Apr 9 '15 at 22:11
  • 1
    what extra information would you want to offer over a text? if there's a text, why not just the tooltip into the text? – Dvir Adler Apr 10 '15 at 0:38
6

One thing I’ve seen more websites doing is changing the mouse cursor to the "help" style:

enter image description here
Try it on W3Schools.

This real-time change can help a lot because it lets users know that the area where they have the mouse is special. This is best combined with redundant display options that detect the user’s situation and show the tooltip in a way that’s going to work on their screen, in their browser, etc.

  • Thanks +1 - this with the dotted line @tohster suggested will work great :) – ᔕᖺᘎᕊ Apr 14 '15 at 6:09
2

There are some sound answers here but I would like to add to it by saying that if you are that dependent on users reading what is in your tooltips, it perhaps should not belong in tooltips, but already visible for your user.

1

There are a few ways to approach this. Consider an intro tutorial for the first time a user interacts with the application. It could quickly show them what they can do and how to do it. Check out toggl, new users are given a tutorial on how to do everything.

The down side to this of course is that it may mean your application may be too complex and you may need to rethink the solution to the problem you are solving for. But often times its more of a suggestive guide.

Another option might be to test variants of how the user could interact with the element see what questions and challenges their actions cause. Check out usabilityhub or trymyui you could also a/b test or use a heatmap tracking tool like crazy egg 2¢

0

personally i like the IDM tool-tip. enter image description here

you can let the first tool-tip appears automatically . then you can navigate with arrows or buttons . however every time there should be a way to backup and a exit form the tool tip. because for a experienced user of your application might get irritated. and now a days newly updated Firefox browsers use this type of automated tool-tip and navigation for a new users. actually that give a great user experience for beginner.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.