|Icon Usage Guidelines|
|Oracle Fusion Icon Taxonomy|
This section discusses various icon types.
Common Icon Types
This table illustrates some common icon types used in Oracle Fusion.
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 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:
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:
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.
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:
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:
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:
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:
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:
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:
|Icon Creation Considerations|
A number of considerations go into icon creation:
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.
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.
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.
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.
|Alt text is required on all icons for accessibility.|
|Common Oracle Fusion Icons|
This table illustrates common Oracle Fusion icons.