Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working on tooltips, when I was told there are some tooltips that have close buttons. Is a tooltip with a close button user friendly?

enter image description here

share|improve this question
5  
I wouldn't call it a 'tooltip' if it requires the user to click something. I'd call it an alert or pop-up dialog. –  Phil Perry Mar 26 at 20:42
    
yes i agree Phil, but there are some tooltips with close button on user hover something. –  Pradeep Mar 27 at 4:18
    
Then it's not a true tooltip, and shouldn't be called one. It's a pop-up dialog triggered by mousing over an element, and a bad design to boot. –  Phil Perry Mar 27 at 17:31
add comment

5 Answers 5

To know if the tooltip should be closable by the user, we should know when it gets displayed.

  • As a mouse-over: no, it is hidden, when the user moves away.
  • On some event: How would it get closed otherwise? Time is not a good option as it would a break accessibility guidelines.
  • Click in text line: Not necessary, but I would provide this option as stackexchange is doing it. Users like to have control.

In general I would provide a close button. Usually it doesn't destroy a design but most people will like it.

share|improve this answer
8  
Agree, if it is a static tooltip that appears after a click (on a button) then a close button should be added and the tooltip should disappear when an other element is clicked. Tooltips that appear on hover don't require close buttons. –  Paul Mar 26 at 10:54
    
I agree with having a close button. When I'm interacting with a pop-up or a lightbox I click somewhere in the background for it to disappear. But I've come across many users who doesn't know this and look for a close button. –  nuwa Mar 26 at 11:43
    
@nuwa I'd say that if the tooltip is triggered by a click event, then it needs a close button because users would expect another click to close it. However, if the tooltip appears on hover then it isn't required because it would be expected the disappear as soon as the mouse moves out. –  AlanChavez Mar 26 at 17:27
    
I agree with @AlanChavez. Though, on mobile you would need a close button, unless the tooltip closes once the user clicks outside. –  Pathachiever11 Mar 26 at 20:36
add comment

The thing with tooltips (as with everything else on screen) is that it increases cognitive load and requires to be processed (read) by the user.

So the general question to ask is: does the user need (or want) to see the tooltip permanently, or should be allowed to close it? Is the tooltip really helpful or trivial?

I'd say that tooltips in general need to be visible only as long as they convey important message to the user. So they should have close button or disappear themselves after some other user input (mouse hover, click on associated element, fixing the problem etc.), or time delay (but as it was stated in previous answers - it is at odds with good accessibility guidelines, so should be used only for trivial information).

TL; DR;

In the current context what is shown in your screenshot I see two bad UX issues and would advise not to put close button on your tooltip.

  1. There was a problem with username and/or password. This happens very often and most of the people know what to do in this situation: You need to select username input field, reenter your username, press tab or click to select password field, reenter password and then press enter or click on submit button. For user to click to close popup is a redundant click operation (unless the popup blocks the input fields, which then is a terrible placement and I would suggest to show this message as a text string bellow the form and not as a tooltip).

  2. A tooltip is generally associated with an element and has a pointer towards it. Your tooltip says "There was a problem" and points at the submit button As if the submit button was clicked incorrectly or is somehow responsible for wrong username/password. :) So either you point it at the username/password field or use string text error message under the form.

share|improve this answer
add comment

I agree with Harijs' answer.

You need to address the question of why you are using the Tooltip for error handling in the first place. Here is a helpful article:

In order to display error messages on forms, you need to consider the following four basic rules:

  1. The error message needs to be short and meaningful.

  2. The placement of the message needs to be associated with the field.

  3. The message style needs to be separated from the style of the field labels and instructions.

  4. The style of the error field needs to be different than the normal field.

Source: http://www.nomensa.com/blog/2010/4-rules-for-displaying-error-messages-from-a-user-experience-perspective/

You should also not use tooltips for error messages.

Is the supplemental information an error, warning, or status? If so, use another UI element, such as a balloon, error message, or status bar. Notification area icon infotips are an exception because they can be used to show status information.

Source: http://msdn.microsoft.com/en-us/library/aa511495.aspx#rightcontrol

Consider also the conditions to use Tooltips in the first place as outlined in another SE post here:

To tooltip or not to tooltip?

I highly recommend you try a different approach for your error handling especially within the login. Here are some great examples:

Using colour:

example

Using the whitespace on the right:

example

Below each field:

example

example

This example looks tooltip-esque but I believe the error message stays there as long as the validation marks it as wrong. It could be dynamic or when the user clicks on log in.

example

share|improve this answer
add comment

I would definitely use a close button on tooltips for websites that are responsive since there is no such thing as hover on a touch screen device.

This would be in cases where the tooltip is accessed via a click instead of a hover. In my work I strive to have a single method for accessing this type of information to keep a code base small and have the user only need to learn one way of doing things no matter which device they happen to be using right then.

In practice this has led me to avoid using hover at all because touch screen devices are becoming so popular.

share|improve this answer
    
I always have to mention, my mobile phone (Samsung S3) supports hover and I love it. Hope it gets more popular in the future. –  Gustav Mar 27 at 8:11
    
how does it do that? Can it tell your finger is close to the screen or does it have a cursor or something? –  pathfinder Mar 27 at 14:48
1  
Air view recognizes if your finger is nearby. This site describes it very well: allaboutgalaxys4.com/galaxy-s4-features-explained/air-view –  Gustav Mar 27 at 15:09
add comment

I think for tooltips the "close" button serves the purpose of reassuring the user that this is indeed a tooltip and it can be closed. It's a quick fix for cases when users are inexperienced with interfaces, and definitely not a requirement.

Remember that you have to teach the users how to use your apps, not just give them "faster horses".

But in this specific example, I don't think this message should be shown in a tooltip, but in an appearing text field that lists all the encountered errors.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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