Size: 868
Comment:
|
Size: 2775
Comment:
|
Deletions are marked like this. | Additions are marked like this. |
Line 14: | Line 14: |
When a function like a tooltip is called for, but it may be deliberately displayed by the user, or has interactivity in the information label itself, this is instead an '''[[Annotation]]'''. See that pattern for more details and comparison. |
|
Line 18: | Line 22: |
There is usually no explicit method to present tooltips. For any systems which support hover states (mostly scroll-and-select), any item in focus may display a '''Tooltip''' label. For any device, including touch and pen devices without a hover paradigm, tooltips can be used by the system to point out unused tools, or new features. The lack of contextuality makes this less immediately useful, and the items to be highlighted must be carefully selected to avoid over-selling a single new feature. Certain desktop systems allow entering a "help mode" where tooltips appear instantly (though still on hover), for all page items, but this has not yet become common in mobile so cannot be considered a pattern yet. The floating information labels may not be selected in any way. They should be built so they do not exist as far as selection mechanisms go. For example, if a tooltip is partly obscuring a function in a touch or pen device, if the tooltip label is under the contact point it should be ignored, and the item behind it activated as though it is visible. When the label is being displayed, it has to get out of the way of other actions the user might request. If any selection is made elsewhere on the page, and especially somewhere adjacent to the label, it should be disappear immediately. |
|
Line 21: | Line 32: |
'''Tooltip''' labels should be presented after a brief pause | |
Line 24: | Line 36: |
Do not over-use the item Labels should never exceed the space available. Do not let them simply float off the page. Label text should not end in ellipsis or wrap to a second line. Multiple lines of information may be displayed, but each line should carry it's own information. |
Can float, or be at a fixed place on the interface (sometimes only comes up when you press a help button)... or even be read off??? Or is that voice output and somewhere else?
Do not obscure things! If you mouse over an adjacent area, or type into the area in a field, etc. then make any traditional tooltip go away.
Tooltips, instead, are transient and initiated by hover or automatically presented when the system determines the user needs help -- such as first time, or a change in the system since last visit (put these notes over there when done here). The info in a tooltip is also a helpful sort of label or content add on. It is not content itself which it should be in an annotation.
Problem
Solution
When a function like a tooltip is called for, but it may be deliberately displayed by the user, or has interactivity in the information label itself, this is instead an Annotation. See that pattern for more details and comparison.
Variations
Interaction Details
There is usually no explicit method to present tooltips. For any systems which support hover states (mostly scroll-and-select), any item in focus may display a Tooltip label. For any device, including touch and pen devices without a hover paradigm, tooltips can be used by the system to point out unused tools, or new features. The lack of contextuality makes this less immediately useful, and the items to be highlighted must be carefully selected to avoid over-selling a single new feature.
Certain desktop systems allow entering a "help mode" where tooltips appear instantly (though still on hover), for all page items, but this has not yet become common in mobile so cannot be considered a pattern yet.
The floating information labels may not be selected in any way. They should be built so they do not exist as far as selection mechanisms go. For example, if a tooltip is partly obscuring a function in a touch or pen device, if the tooltip label is under the contact point it should be ignored, and the item behind it activated as though it is visible.
When the label is being displayed, it has to get out of the way of other actions the user might request. If any selection is made elsewhere on the page, and especially somewhere adjacent to the label, it should be disappear immediately.
Presentation Details
Tooltip labels should be presented after a brief pause
Antipatterns
Do not over-use the item
Labels should never exceed the space available. Do not let them simply float off the page. Label text should not end in ellipsis or wrap to a second line. Multiple lines of information may be displayed, but each line should carry it's own information.