|
Size: 655
Comment:
|
Size: 2801
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| Between the link and icon. If it has an arrow next to it, to indicate it goes somewhere, etc. Does not include add-ons (off site icon) if a link. This is for the special case where THIS is the indicator (get it) that there's something the associated text does. Usually horizontally aligned. Left or right of the text. Yes, reveal items and leaf node icons in the reveal list are this. Others maybe, so go find them. |
Good one: Using icons for content type, whether PDF icon or an avatar image, is a type of this... Make this make sense with the list style that describes it already. |
| Line 9: | Line 7: |
| Within any context, an action must be initiated, information submitted, a link followed to more information, or a state change carried out on the current page.. | |
| Line 12: | Line 11: |
| The '''Indicator''' pattern is a type of action initiator between a '''Link''' and a '''Button'''. There is significant overlap between these three patterns, and the '''Icon''' pattern; there are some cases where the decision as to which to use is up to consistency and style. | |
| Line 13: | Line 13: |
| xxxx Between the link and icon. If it has an arrow next to it (iOS loves triangles and GT/LTs), to indicate it goes somewhere, etc. Does not include add-ons (off site icon) if a link. This is for the special case where THIS is the indicator (get it) that there's something the associated text does. xxxx Always helps explain the text item is actionable, or what sort of action. If the situation calls for hyperlinks, to not use this to avoid underlining, but it can be used in addition, to add further clarity to the link. |
|
| Line 15: | Line 18: |
| Content beyond - Explains whit is beyond. like icon for file type. Type of action - like pinpoint icon, or refresh. Usually reinforces the words, not Standalone.hood example is the Reveal List. One icon indicates branch or parent, so you know it will just open. Other indicates leat, so you know it will open instead. Manner of action - Next / back indictors (see pagination) and alsoto indicate what a non-implying word will do. E.g. in an email, a name w/ a rt. arrow can imply (if the os already supports this) that it will load a page w/ more info, to the 'right' |
|
| Line 18: | Line 26: |
| Typically almost none. A partof the text, usually the whole box will link, But for a '''Link''', will need to be separately coded to link 25 an image or similar. Usually should. Esp. it inline. less important it in a list, where all icons we in a different place... but any larger target is usually good. | |
| Line 21: | Line 30: |
| Usually horizontally aligned. Left or right of the text. | |
| Line 24: | Line 34: |
| Do not use an icon or indicator just to be consistent, or add visual flair. Assure all indicators are accurate,truthful and clearly explain themselves. Do not use indicators with a clear meaning which they too not actually carry out. A common error is theuse of the right arrowto men "more" when the specific item lords as a '''Pop-Up''', or loads a new application entirely. This should, instead, only be used when a "next" page is loaded, preferably by visibly sliding to the right. |
Good one: Using icons for content type, whether PDF icon or an avatar image, is a type of this... Make this make sense with the list style that describes it already.
NEVER just put text down without link styling or an indicator!
Problem
Within any context, an action must be initiated, information submitted, a link followed to more information, or a state change carried out on the current page..
Solution
The Indicator pattern is a type of action initiator between a Link and a Button. There is significant overlap between these three patterns, and the Icon pattern; there are some cases where the decision as to which to use is up to consistency and style.
xxxx Between the link and icon. If it has an arrow next to it (iOS loves triangles and GT/LTs), to indicate it goes somewhere, etc. Does not include add-ons (off site icon) if a link. This is for the special case where THIS is the indicator (get it) that there's something the associated text does. xxxx
Always helps explain the text item is actionable, or what sort of action. If the situation calls for hyperlinks, to not use this to avoid underlining, but it can be used in addition, to add further clarity to the link.
Variations
Content beyond - Explains whit is beyond. like icon for file type.
Type of action - like pinpoint icon, or refresh. Usually reinforces the words, not Standalone.hood example is the Reveal List. One icon indicates branch or parent, so you know it will just open. Other indicates leat, so you know it will open instead.
Manner of action - Next / back indictors (see pagination) and alsoto indicate what a non-implying word will do. E.g. in an email, a name w/ a rt. arrow can imply (if the os already supports this) that it will load a page w/ more info, to the 'right'
Interaction Details
Typically almost none. A partof the text, usually the whole box will link, But for a Link, will need to be separately coded to link 25 an image or similar. Usually should. Esp. it inline. less important it in a list, where all icons we in a different place... but any larger target is usually good.
Presentation Details
Usually horizontally aligned. Left or right of the text.
Antipatterns
Do not use an icon or indicator just to be consistent, or add visual flair. Assure all indicators are accurate,truthful and clearly explain themselves.
Do not use indicators with a clear meaning which they too not actually carry out. A common error is theuse of the right arrowto men "more" when the specific item lords as a Pop-Up, or loads a new application entirely. This should, instead, only be used when a "next" page is loaded, preferably by visibly sliding to the right.