• Icon Taxonomy
• Icon Usage
• Icon Considerations
• Alt Text
• Common Oracle Fusion Icons

This section discusses various icon types.

Common Icon Types

This table illustrates some common icon types used in Oracle Fusion.

Type	Usage	Size	States	Examples
Functional	A clickable icon used in toolbars and table cells or next to data fields and tree nodes. The icon performs an action or takes users to a place to perform the action. Functional icons can be singular (users click and perform some action) or toggles (users flip between one icon and another when they are clicked). Toggles require two icons, each with its own set of states.	16 x 16	Enabled hover text, moving the mouse button down or, disabled
Item Qualifier	A nonclickable icon that accompanies text such as the title of a message dialog box. The icon is nonfunctional and only reinforces the concept described in the text label. The use of the Error, Warning, or Information icons as standalone icons, outside of Oracle Fusion Applications patterns or ADF component treatment 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.	16 x 16	Display only
Item Indicator	A nonclickable icon that draws users' attention to an item in a list, such as a red flag or new indicator.	12 x 12	Display only
Status	A nonclickable icon that demonstrates the status of an object in the system (warning, error, complete). You can use status icons only with other nonclickable status icons, and they cannot be mixed with functional status icons.	12 x 12	Display only
Functional Status	A clickable status icon that demonstrates the status of an object in the system (warning, error, complete) and enables users to navigate to details about that status. You can use functional status icons with other clickable status icons, but they cannot be mixed with nonclickable status icons.	12 x 12	Enabled, hover text, moving the mouse button down, disabled

Special Icon Types

This table illustrates some special icon types that are approved for use in Oracle Fusion on a case by case basis.

Never use functional icons as a way to beautify a page or unclutter a form. Don't use too many icons, or they will be hard for users to understand. 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 for these icons, which describes the action to be performed when users click the icon (such as Create Purchase Order, Delete Row, and so on).

Functional Icons in a Toolbar

You most commonly use functional icons in toolbars, such as those belonging to tables, tree tables, trees, and subheader regions. You generally arrange icons in these toolbars from left to right in order of importance. Toolbar separators enable you to group icons with a similar or related function. If an action menu is present in the toolbar, you should replicate the actions represented by icons in that menu.

Here are some examples of functional icons in toolbars:

Figure 11. Functional icons located in a toolbar

Functional Icons in a Form

Users easily miss icons unless they are associated with an element of the page. If you add an icon to a form, place it adjacent to the field it affects. The date-picker component is an example of an icon that is well association with its related field. If the icon performs an action against the entire form, you should place it in the toolbar region of the panel header that the form appears in. Never place functional icons in a form disassociated from the element of the form that the action is performed upon. Usability studies show that users are reluctant to click icons if they don't know what action is performed. They also tend to not see these icons unless they are strongly associated with a field, which results in task failure.

Here's an example of an icon clearly associated with its related page element:

Figure 12. A functional icon associated with the Hire Date field

Representing Major Tasks

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

Item Qualifiers

Use item qualifiers to visually describe or categorize an item within a set of objects. For example, if a list of documents is shown on the page, but the documents are of different types (Word, PDF, HTML, or PowerPoint files, for example), item qualifiers can help identify the type of document. Item qualifiers also enable users to scan a list of items to find a certain type of object. For messaging dialog boxes, item qualifiers add meaning to the title of the dialog box.

Never use item qualifiers 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 (for example, an error icon qualifier in an error dialog box where the dialog box title is Error). You must use Alt text 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.

Here's an example of an example of an item qualifier:

Figure 13. Example of item qualifiers

Item Indicators

Item indicators, such as an importance indicator in a list of email, catch users' attention. These icons require alt text to describe the meaning of the indicator.

Item Indicators in a Form

Item indicators 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 you are indicating. The meaning of the indicator must be communicated through Alt text (for example, Important, Updated Item, or Required.)

Here's an example of item indicators:

Figure 14. Example of item indicators

Item Indicators and Flags in Tables, Trees, or Tree Tables

Item indicators in a table are intended to focus users attention on a particular node or row. Users should see these icons when the page opens, so in the case of a table, place them 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.

Here's an example:

Figure 15. Item indicator associated with a particular row

Status Icons and Functional Status Icons

Informational (nonclickable) and functional status icons follow the same usage rules. Alt text is required for these icons describing the status being communicated. Users can mentally juggle only a small number of status icons (five to seven maximum), so take care not to overload users with too many of these icons on a given page.

Status Icons in Tables, Trees, or Tree Tables

Status icons should be placed in their own column with a meaningful column header (for example, Status) to communicate the status of an object represented by a row. In these cases, place the status column as one of the first few columns of the table. Status columns should be sortable so that users can group items together that share the same status.

Here's an example of the Status column:

Figure 16. Status column on a page

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.

Here's an example of status icons used in column groups:

Figure 17. Status icons in column groups

Status Icons in a Form

Status icons are not recommended for use in a form because only one status is visible at a time and users may not understand the context of the status indicator without understanding the set of possible options. Always indicate status as a value represented by text. If an icon must be used as a secondary visual cue to focus users' attention, such as a status that requires their attention, place it following the value. Do not use a status icon on benign statuses such as Complete where no action is needed from users.

Here's an example of a status icon following a value:

Figure 18. Status icon placed after a value

A number of considerations go into icon creation:

Accessibility

Color-blind users are unable to see the difference between colors, so icons cannot 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, and green circles. To some color blind user, the red (meaning, critical or error) and green (meaning, OK, all is well) appear identical. You must therefore render sets of icons using a combination of color and shape differences.

Alt text is required with icons for use by screen readers as well as to clarify the use of the icon for sighted users.

Internationalization and Cultural Awareness

Avoid references to gender, hand gestures, and body parts in icons because such imagery is considered offensive in a number of cultures. Words or letters are also not used because they do not make sense to users 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 and so on. These alternate icons have a file name ending in "_rtl". If bidirectional icons are required for a given icon, they are noted on 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 users' 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 users' expectations from other applications of that image.

Browser Compatibility

Icons for all Oracle Fusion applications are produced as PNG24 files. This format uses an alpha channel that allows them to contain semitransparent 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. In contrast, the GIF format used in release 12 applications has choppy edges (a workaround is to produce multiple versions for use on light and dark backgrounds) and to use a limited color palette (256 colors). Older browsers such as Internet Explorer 6 do not support alpha channels, so these icons render with a grayish box around the icons.