Register
Quick and easy! Create patterns and join discussions on draft patterns! Go here to RegisterLogin
Already a member? Go here to Login now.Browse Patterns
Top Rated Patterns
Contact Us
Invitation - Tool Tip
Design Problem
The user needs to discover unfamiliar functionality and know what will happen if they click the object over which they are hovering but it is not immediately clear from the object itself.
Solution
When user hovers over an object with which they can interact, show a tooltip that explains what will happen when they click.
Use When
From Yahoo:
(http://developer.yahoo.com/ypatterns/pattern.php?pattern=tooltipinvitati...)
- You want to invite the user to click or interact with the object being hovered over.
- You want to make it clear that something will happen when the user clicks on the object being hovered over.
- You need a textual description to make it explicit what will happen when the user interacts with the object.
- You want to entice the user to interact with the feature.
How
From Yahoo:
(http://developer.yahoo.com/ypatterns/pattern.php?pattern=tooltipinvitati...)
- Provide a tool tip when the mouse is over the target area that calls the user to action.
- Show the tooltip within a very short amount of time (< .25 second) or immediately when the mouse hovers over the interaction area.
- Keep the tooltip visible the whole time the user has the mouse over the interaction area.
- Remove the tooltip when the mouse leaves the interaction area.
- Provide a short phrase that calls the user to action.
- Use verbal phrases like 'Click to Edit'.
Rationale
Tooltips, used in this context, allow the designer to provide valuable information about what will happen when the user clicks, without taking up valuable screen real estate. Since tooltips only appear when the mouse is hovered over the object, they do not add constant clutter to the screen.
One tension associated with the use of tooltips is that they are sometimes used for other purposes (e.g. to show more text when space allows for only a truncated version of the text). If used often and/or for other reasons, users will likely begin to ignore all of them.
Another tension may be the appropriate timing for displaying the tooltip. The goal is that it displays soon enough that a user wondering what an action is will see it. Yet, if there is no hesitation from the user (assuming no hesitation means they know what it does or are happy to "click around" to find out) the tooltip should not display as it becomes clutter and information asking for the users attention.
Accessibility Considerations
Tool tips can be very helpful to users of assistive technology as tool tips provide contextual information by association. Tool tips can also help unclutter an interface making it easier for assistive technology to navigate.
- Provide a TITLE attribute that provides a preview for interaction or context to elements.
- For images both TITLE and ALT attributes can be specified, and the TITLE attribute should serve as the tool tip. ALT should be a text alternative to the image.
This pattern is ready for review
By dogleI've done a preliminary update to this pattern for general relevance for the OSDPL. Feedback would be great!
Now open for comments.
By jhungI have changed this pattern to be marked as "Open for Comments". Now all registered users will be able to view and comment on this pattern, while restricted.hidden to unregistered users.
I have just looked over
By jhungI have just looked over this pattern. Aside from the mouse-centric wording in some spots (i.e. in Design Problem it uses the word "Click", assuming that the user is a mouse user), it looks really good.
Post new comment