|
Size: 2578
Comment:
|
Size: 3512
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| adding notes and nodes along a line graph like google analytics, adding pins to map locations, establishing a reference point with additional information. So: A little thing that indicates, and clicking gives you a little more data, which may well NOT be in the little icon, hence it's not just an Icon (which see) and is a different item. ALSO see the eReader project where the highlight can be selected and show more info (not a Tooltip, though, as that is limited, read only, etc.) This is not a tooltip. Deliberate action needed to reveal the additional info, or always there. tooltips are transient, 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. |
|
| Line 6: | Line 2: |
| A data point in a dense array, or within a graphical representation of a set of information, may be selected to show additional information. | A data point in a dense array of information must be able to show additional details or options without leaving the original display context. |
| Line 10: | Line 6: |
| Graphical information displays -- such as maps and graphs -- are often the clearest, most information-dense way of displaying a set of data. However, conventional methods of drilling in deeper such as the '''[[Link]]''' or '''[[Button]]''' are unsuitable for these items. | High-density information displays, such as maps, charts and graphs, often carry additional layers of information, or may be best understood by viewing details at a point. Conventional methods of drilling in deeper such as the '''[[Link]]''' or '''[[Button]]''' are unsuitable for finding out about a specific data point as they remove the user from the original context. |
| Line 12: | Line 8: |
| A special type of widget is used instead, exemplified by the "pinpoint." An iconic element points to the | A special type of widget is used instead, exemplified by the "pinpoint." An iconic element points to the information selected, and presents (sometimes only after further selection, or in another area of the screen) a label and additional options. This should not be confused with the '''[[Tooltip]]'''. A deliberate action is required to reveal the info information. Tooltips, instead, are transient and initiated by hover or automatically presented when the system determines the user needs help Content within an '''Annotation''' is discrete information, or may even carry functionality, and is not simply help or explanatory text as in a Tooltip. |
| Line 16: | Line 16: |
| Label all the time (gmaps desktop) | Fixed Label - all the time (gmaps desktop) ... label is always attached to pinpoint |
| Line 18: | Line 18: |
| Reveal label - in place (gmaps as I have it now) | Reveal label - in place (gmaps as I have it now) ... pinpoint on load, becomes label when selected (or hovered), selection of THAT does something else usually (else, should be a toggle and un-reveal the label). |
| Line 20: | Line 20: |
| Reveal label - somewhere else (strip off to the side, GPS60) | Banner - somewhere else (strip off to the side, GPS60) - Also, can be options for the pinpoint, exactly as a reveal menu strip (which see). This latter case especially may be used in conjunction with a reveal label, or with either other label type, and be the action when selected. ALSO see the eReader project where the highlight can be selected and show more info (not a Tooltip, though, as that is limited, read only, etc.) -- HUH??? NEED TO SEE THIS... |
| Line 26: | Line 28: |
| Click to see the details... or if you revealed a label, click the label to see more details (SEE the other page!) | Click to see the details... or if you revealed a label, click the label to see more details (SEE the other page!) -- When the label is presented, don't have it have links. For labels attached to the pinpoint, there are no subsidiary actions; click the label/pinpoint to see more details. Labels that appear in a banner may have multiple actions, of any sort desired (button, link, icons, etc) |
| Line 28: | Line 30: |
| Has to get out of the way... | When an expanded label, it has to get out of the way of other actions you might request. If the user clicks somewhere else, especially somewhere adjacent to the label, make it disappear and become a pinpoint only... |
| Line 32: | Line 34: |
| Must clearly point at the location referenced. make clear its not part of the image, so add shadows, and use transitions to mike it appear... | Must clearly point at the location referenced. Pinpoints and labels on top of the image must be clearly not part of the image, so add shadows, and use transitions to make it appear as though it is floating above the image |
| Line 34: | Line 36: |
| Label should never exceed the space available. we ellipsis, etc. Avoid wrapping to a second line. Multiple lines ore okay (try not to exceed 2) but each line should have its own info. | Label should never exceed the space available. Do not let them simply float off the page, and label text should not end in ellipsis, etc. Avoid wrapping to a second line. Multiple lines ore okay (try not to exceed 2) but each line should have its own info. |
Problem
A data point in a dense array of information must be able to show additional details or options without leaving the original display context.
Solution
High-density information displays, such as maps, charts and graphs, often carry additional layers of information, or may be best understood by viewing details at a point. Conventional methods of drilling in deeper such as the Link or Button are unsuitable for finding out about a specific data point as they remove the user from the original context.
A special type of widget is used instead, exemplified by the "pinpoint." An iconic element points to the information selected, and presents (sometimes only after further selection, or in another area of the screen) a label and additional options.
This should not be confused with the Tooltip. A deliberate action is required to reveal the info information. Tooltips, instead, are transient and initiated by hover or automatically presented when the system determines the user needs help
Content within an Annotation is discrete information, or may even carry functionality, and is not simply help or explanatory text as in a Tooltip.
Variations
Fixed Label - all the time (gmaps desktop) ... label is always attached to pinpoint
Reveal label - in place (gmaps as I have it now) ... pinpoint on load, becomes label when selected (or hovered), selection of THAT does something else usually (else, should be a toggle and un-reveal the label).
Banner - somewhere else (strip off to the side, GPS60) - Also, can be options for the pinpoint, exactly as a reveal menu strip (which see). This latter case especially may be used in conjunction with a reveal label, or with either other label type, and be the action when selected.
ALSO see the eReader project where the highlight can be selected and show more info (not a Tooltip, though, as that is limited, read only, etc.) -- HUH??? NEED TO SEE THIS...
Interaction Details
When available, hover or click to see the revealed label. Over...
Click to see the details... or if you revealed a label, click the label to see more details (SEE the other page!) -- When the label is presented, don't have it have links. For labels attached to the pinpoint, there are no subsidiary actions; click the label/pinpoint to see more details. Labels that appear in a banner may have multiple actions, of any sort desired (button, link, icons, etc)
When an expanded label, it has to get out of the way of other actions you might request. If the user clicks somewhere else, especially somewhere adjacent to the label, make it disappear and become a pinpoint only...
Presentation Details
Must clearly point at the location referenced. Pinpoints and labels on top of the image must be clearly not part of the image, so add shadows, and use transitions to make it appear as though it is floating above the image
Label should never exceed the space available. Do not let them simply float off the page, and label text should not end in ellipsis, etc. Avoid wrapping to a second line. Multiple lines ore okay (try not to exceed 2) but each line should have its own info.
Can have icons & so on w/ the text, but only allow one select item. No links (underlines), buttons, etc. If needed, to clarify the click action, a false button (or link) can be added to the area, as it might be used in a banner ad,
Antipatterns