Differences between revisions 1 and 14 (spanning 13 versions)
Revision 1 as of 2010-12-22 00:39:33
Size: 655
Editor: shoobe01
Comment:
Revision 14 as of 2010-12-29 01:11:36
Size: 3673
Editor: shoobe01
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.

NEVER just put text down without link styling or an indicator!

Line 9: Line 2:
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 6:
The '''Indicator''' pattern is a type of action initiator between a '''[[Link]]''' and a '''[[Button]]'''. Indicators are always used with text labels, and may perform any action: linking, state changes, and commit actions.

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.

MIXING
Line 15: Line 14:
Indicators are expressed in a limited number of manners, but can express three different types of meaning.

'''Content beyond''' - Explains what type of content will be loaded if the link is followed. This is typically an icon in front of the text label. Examples are the file type (e.g. Acrobat, Word) or types of objects to be viewed (e.g. photos, videos).

'''Type of action''' - Describes the type of activity that will occur when the link is selected. This will usually reinforce the wording, instead of adding additional information, to assist with glanceability. For example, a "Refresh" label can be accompanied with a revolving refresh icon.

'''Manner of action''' - Describes the way the action will be carried out. This is typically in addition to label, adding to the description. The icon should indicate that the action goes forward or backwards in the process, opens a '''[[Pop-Up]]''' or performs some other type of action.
Line 18: Line 24:
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 28:
'''Indicators''' are almost entirely associated with text. Even when the text is positioned alone, or as a part of a list, the should be inline with the text, and therefore immediately to the left or right of the text.

Which position is used will often carry meaning, so should be carefully considered. If the function is "forward" or "next," for example, then the Indicator icon will be facing right. It may be a good idea to place the indicator to the right of the text in this case.

graphic icons...

Icon types...

Indicators may be text in constrained environments. See the list in the '''[[Button]]''' pattern for some useful text items.

... 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 24: Line 43:
Avoid placing indicators above or below the text. Centered below the text, for example, may appear to be the most space-efficient location, but in fact is likely to be perceived as on another line, and either nonsensical or associated with other items on the second line.

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.

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. Indicators are always used with text labels, and may perform any action: linking, state changes, and commit actions.

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.

MIXING

Variations

Indicators are expressed in a limited number of manners, but can express three different types of meaning.

Content beyond - Explains what type of content will be loaded if the link is followed. This is typically an icon in front of the text label. Examples are the file type (e.g. Acrobat, Word) or types of objects to be viewed (e.g. photos, videos).

Type of action - Describes the type of activity that will occur when the link is selected. This will usually reinforce the wording, instead of adding additional information, to assist with glanceability. For example, a "Refresh" label can be accompanied with a revolving refresh icon.

Manner of action - Describes the way the action will be carried out. This is typically in addition to label, adding to the description. The icon should indicate that the action goes forward or backwards in the process, opens a Pop-Up or performs some other type of action.

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

Indicators are almost entirely associated with text. Even when the text is positioned alone, or as a part of a list, the should be inline with the text, and therefore immediately to the left or right of the text.

Which position is used will often carry meaning, so should be carefully considered. If the function is "forward" or "next," for example, then the Indicator icon will be facing right. It may be a good idea to place the indicator to the right of the text in this case.

graphic icons...

Icon types...

Indicators may be text in constrained environments. See the list in the Button pattern for some useful text items.

... 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' ...

Antipatterns

Avoid placing indicators above or below the text. Centered below the text, for example, may appear to be the most space-efficient location, but in fact is likely to be perceived as on another line, and either nonsensical or associated with other items on the second line.

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.

Examples

Indicator (last edited 2011-07-31 21:01:28 by shoobe01)