• Icon Taxonomy
• Icon Usage
• Icon Considerations
• Common Fusion Icons

Common Icon Types

Type	Usage	Size	States	Examples
Functional	Clickable icon used in toolbars, table cells, next to data fields, tree nodes. Performs an action or takes the user to a place to perform the action. Functional icons can be singular (click and do something) or toggles (flip between one icon and another when pressed). Toggles require two icons to be requested\, each with their own set of states.	16x16	Enabled, mouseover, mousedown, disabled
Item Qualifier	Non-clickable icon that accompanies text such as the title of a message dialog. Icon is non-functional and only reinforces the concept described in the text label. The use of the icons for Error, Warning or Information as standalone icons, outside of the Fusion Apps patterns or RCUX treament for messages does not constitute an error, warning, or information message as defined in those documents. Instead, these are effectively status texts, implemented as tooltips. The responsibility for the design and delivery of the text rests with the designer using the icon, and not the UX UA team. The text should not be submitted to development environments using the Message Review Tool or categorized using any of the text types available in that tool.	16x16	Display only
Item Indicator/Flag	Non-clickable icon that draws the attention of the user to an item in a list, such as a red flag or "new" indicator.	12x12	Display only
Status	Non-clickable icon that demonstrates the status of an object in the system (warning, error, complete). May only be used with other non-clickable status icons, may not be mixed with functional status icons	12x12	Display only
Functional Status	Clickable status icon that demonstrates the status of an object in the system (warning, error, complete) and lets the user click it to navigate to details about that status. May only be used with other clickable status icons, may not be mixed with non-clickable status icons	12x12	Enabled, mouseover, mousedown, disabled

Special Icon Types

The following special icon types are approved for use in Fusion on a case by case basis.

Functional icons should never be used as a way to "pretty up" a page or unclutter a form. Don't use too many or they will be hard to juggle. Label them for self service users. Always use alt text on icons. Use states if icons are clickable.

Functional Icons

Functional icons cause an action to occur on the page. Alt text is required on these icons which describes the action to be performed when the user clicks it (Create Purchase Order, Delete Row, etc)

In a toolbar

Functional icons are most commonly used in toolbars, such as those belonging to tables, treetables, trees, and subheader regions. Icons are generally arranged in these toolbars left-to-right in order of importance. Toolbar separators are a way of grouping icons with a similar or related function. If there is an action menu present in the toolbar, the actions represented by icons should be replicated in that menu.

In a form

Users easily miss icons unless they are associated with an element of the page. If an icon is added to a form, it should be adjacent to the field it affects. The datepicker component is an example of an icon with good association with its related field. If the icon performs an action against the entire form, it should be situated in the toolbar region of the panelheader the form appears in (page level, subheader, subsubheader). Functional icons should never float in a form disassociated from the element of the form the action is performed upon. Usability studies have shown that users are reluctant to click icons if they don't know what the action is performed against. They also tend to not see these "orphaned" icons which results in task failure.

Representing major tasks

Icons are not easily understood by all users. Consider using a text button for self-service users to remove ambiguity from the user's task, or using labels on the same button as the icon. Icons are not recommended for page level toolbars because they are a relatively small target on the page and lack the presence needed to illustrate the importance of page level actions.

Item Qualifiers

Item qualifiers are used to visually describe/categorize an item within a set of objects. For example, if a list of documents are shown on the page, but they are different types (Word doc, PDF, HTML, Powerpoint), item qualifiers can help identify the type of document. Item qualifiers also let the user scan a list of items to find a certain type of object. In the case of messaging dialogs, they add meaning to the title of the dialog.

Item qualifiers should never be used on their own as they are not clickable and do not make sense without the context of the accompanying text. Alt text is not needed on these icons if their meaning is redundant with the accompanying label (i.e. an error icon qualifier in an error dialog where the dialog title is "Error"). Alt text is required when the qualifier serves as a type identifier where the meaning of the icon is not mentioned in the accompanying text (such as a list of document types)

Item Indicators/Flags

Item indicators/flags draw the attention of the user, such as an importance flag in a list of email. These icons require alt text describing the meaning of the flag.

In a form

Item indicators/flags work well in forms because they don't often operate as a set (as status icons do). These icons should precede the prompt of the prompt/data pair that is being flagged. The meaning of the flag/indicator must be communicated through alt text (i.e. "Important", "Updated Item", "Required").

In a table/tree/treetable

Item indicators/flags in a table are intended to draw the the attention of a user to a particular node or row. These icons should be in the view of the user on page load, so in the case of a table, place it in the first or second column of the table. If there is not enough room to include a column header, the column header text can be hidden, but must be included in the code for users of screen readers.

Status Icons/ Functional Status Icons

Informational (non-clickable) and functional status icons follow the same usage rules. Alt text is required for these icons describing the status being communicated. Users can only mentally juggle a small number of status icons (5-7 max), so care should be taken to not overload the user with too many of these icons in a given page.

In a table/tree/treetable

Status icons should be placed in their own column with a meaningful column header (i.e. "status") to communicate the status of an object represented by a row. In these cases, the status column should be among the first few columns of the table. Status columns should be sortable so the user can group together items with the same status.

If the row contains multiple items with their own status, use column groups so that the status icon can be in its own column, and can be grouped with the object whose status is being communicated.

In a form

Status icons are not recommended for use in a form because only one status is visible at a time and the user may not understand the context of the status indicator without understanding the set of possible options. Status should always be shown as a value represented by text. If an icon must be used as a secondary visual cue to draw the users attention such as a status that requires their attention, it should follow the value. It should not be used on benign statuses such as "complete" where no action is needed from the user.

A number of considerations go into icon creation.

Accessibility

Color-blind users are unable to see the difference between colors, so icons can not be identical in appearance with color as the only differentiator. An example of a problematic set of icons are the "traffic signal" status icons that indicate the criticality of an object through the use of red/yellow/green circles. To a color blind user, the red (critical/error) and green (ok, all is well) appear identical. Sets of icons must therefore be rendered using a combination of color and shape differences.

Alt text is required on icons for use by screen readers as well as clarifying the use of the icon for sighted users.

Internationalization/Cultural Awareness

References to gender, hand gestures, and body parts are avoided in icons because such imagery is considered offensive in a number of cultures. Words or letters are also not used because they will not make sense to a user reading the interface in a different language.

Bidirectional images

Icons that indicate direction with a left-to-right reading bias need to have an alternative icon provided with the icon pointing in the other directions (right-to-left) that is displayed when the framework of the application changes for languages such as Arabic, etc. These alternate icons have a file name ending in "_rtl". If bidirectional icons are required for a given icon, they will be noted in the detail page of that icon within the repository.

Reuse of Common Metaphors

Common metaphors are reused whenever possible when constructing icons to reinforce the metaphors represented by recurring imagery. This leverages the user's recognition of these metaphors as they repeat throughout the interface. For example, a pencil is used to denote an "editing" function. Using the pencil to mean something other than editing contradicts the user's expectations from other applications of that image.

Browser Compatibility

Icons for all Fusion applications are produced as PNG24 files. This format uses an alpha channel which allows them to contain semi-transparent pixels. These pixels allow icons to be placed on any background color, light or dark, without producing an unwanted halo around the images. Icons in this format can also have smooth edges and a full color spectrum allowing for rich blends. To contrast, GIF format which is used in R12 applications has choppy edges (workaround is to produce multiple versions for use on light and dark backgrounds), and a limited color palette (256 colors). Older browsers such as Internet Explorer 6 do not support alpha channels, so these icons will render with a greyish box around the icons. This is not an issue for Fusion applications because the minimum browser requirements for Fusion are Internet Explorer 7 and Firefox, both of which support alpha channels. The gray boxes will be visible in DWPE if viewed in IE6, but not in the actual product code.