Icons are used as additional visual information
to help quantify text or a functional area on the screen. They are used throughout
Web applications in a variety of common places, such as within global buttons,
in tables, and in legends.
There are multiple types of icons; the type of icon is determined by its function.
Icons are used as visual metaphors to
represent an area of content, textual information or function area within an application.
They are used in conjunction with other elements on the screen to aid in recognition
of the image. For instance, a global button has an icon inside of the button,
but also has a text link to label the button.
Avoid using hands, eyes, and faces
in icons; this type of imagery can be interpreted quite differently amoung a variety
of cultures.
Avoid using only arrows or indicating
directionality, but make sure there is text that also explains the directionality.
If arrows are used, then assessment must be made in determining whether or not
a bi-directional version of the icon is needed.
Avoid using certain colors that
may be interpreted differently by certain cultures (i.e., white, black, and/or
red can be sensitive colors for certain cultures.)
Avoid using anti-aliased text in
an icon, as the text will not be translatable if it is a graphic. NOTE: Technically, some elements are being rendered with a java
tool named Tecate. This tool renders text and imagery together, and is
NLS compliant. The text string is translated prior to final output to a .gif format.
Accessibility Issues Regarding Icons
- To comply accessibility requirements, below
are some heuristics to follow when creating an icon:
Avoid using an icon as the only method to access UI functionality. An icon
should be accompanied with explanatory text either displayed on the page, or accessible
by HTML attributes such as the "alt" tag for images, or other specific tags.
In the HTML code, use the "alt" attribute to the "img src" tag to describe
the graphic, thus if the image is not available (the users' browsers preferences
are set to not display graphics) or a screen reader is reading the page, the alt
tag will be used in place of the image.
Information Quantifier Icons
- Information quantifier icons are used to visually describe a page's
content, or a section of the page's content. There are two types of information
quantifier icons: page title icons and subheader/content container icons.
Page title icons are used in conjunction with a header
component. They may also be used with other components that have
headers such as the Message Box component.
A subheader may also have an information quantifier icon, but since it
is smaller in size than a header, the icon is slightly smaller. Content
Containers in the page use the subheader component and may have an
information quantifier icon as well. These serve the same purpose as a
page title icon (visually describing an area of content) but are slightly
smaller. These icons may be seen in a variety of different page templates,
including Global Page Templates, or Messaging
Page Templates.
Bullseye Icon (Salience or More
Related Information)
Quick Tip Icon
Possible States of Content Container Icons
display only Color and Approximate Size of Content Container Icons
"Line" Color: medium blue; #6699cc
(see "Graphical Rendering of Icon Style" below for treatment details)
"Fill" Color: white
size = 18x18
Inline Icons - Inline icons
are used throughout a page. They can be seen next to a label, a field, data, in
a table, associated with text in a paragraph, etc. Inline icons may be active
or just status icons. Selecting an active icon (by clicking on it) will reveal
more information or functionality. Depending on an application's functionality,
inline active icons can also have multiple states (enabled or disabled). Status
icons denote a state only and can not be clicked on for further information.
Inline
Messaging Icons
There are 3 fixed inline messaging icons. These icons are shown based
on user action (error, warning, etc.) or provide information before
an action is taken. See Inline Messaging
and Tips and Messaging
Template guidelines for full details. Note: No new inline messaging icons can be requested in BLAF.
Examples of Inline Messaging Icons
Example of Inline Messaging Icon with a Field
Error Icon
Error (status) Icon
Information Icon
Information (status) Icon
Warning Icon
Warning (status) Icon Possible States of Inline Messaging Icons
display only (for both active and
status) NOTE: Active icons have a thicker bottom edge outline to denote
"clickability."
Color and Approximate Size of Inline
Messaging Icons
"Line" Color: dark blue; #336699
(see "Graphical Rendering of Icon Style" below for treatment details)
"Fill" Color: white
size = 16x16
exception: error page title is the
only exception and rendered with a "line" color of red;#cc0000
Inline Tip
Icons There is only one inline tip icon. It is used with a "Tip" help
method to call out a specific information to the user. See Inline
Messaging and Tips and Help
Methods guidelines for details. Note: No new TIP icons may be requested.
Examples of Inline
Tip Icons
Example of Inline Tip Icon Displaying a Page Level Tip
Tip (status) Icon [page level tip]
Possible States of Inline Tip Icons
display only Color and Approximate Size of Inline Tip Icons
"Line" Color: dark blue; #336699
(see "Graphical Rendering of Icon Style" below for treatment details)
"Fill" Color: white
size = 16x16
NOTE: The page level
tip icon is always associated with the text "TIP"
Inline Status ONLY Icons Inline Status ONLY and Inline Status Indicator icons provide the user with
status information about an object or item in the interface. It may also provide
stateful meaning about an item such as "changed" item or "required"
icon. Status ONLY Icons are non-clickable (status ONLY).
display only Color and Approximate Size of Inline Status ONLY Icons
"Line" Color: dark blue; #336699
(see "Graphical Rendering of Icon Style" below for treatment details)
"Fill" Color: white
size = 16x16
Inline
Status Indicator Icons
Inline Status ONLY and Inline Status Indicator icons provide the user with
status information about an object or item in the interface. Inline Status Indicator
icons may be status only (non-clickable) or active (clickable). If the icon is
in the active state and is selected, it should drill the user down to more details
of the status of the item.
Examples of Inline Status ONLY Icons
Hypothetical Example of Status Indicator Icons in a Table
Possible States of Inline Status
Indicator Icons
active (clickable)
status
Color and Size of Inline Status Indicator Icons
active (clickable)
overall shape: active icons are
within a circle shape
Line color: dark blue #336699 (except
for trend indicators like "good" (green), "marginal" (yellow)
and "bad" (red)).
Fill color: white (circle fill is
white)
Size: 16x16
status
overall shape: not in a shape
Line color: dark blue #336699 (except
for trend indicators like "good" (green), "marginal" (yellow)
and "bad" (red)).
Fill color: none
Size: 16x16
Functional Icons
Functional icons are typically used in a cell of a table, where each cell
in the column has a functional icon. When selected, either an action is
performed or the user navigates to another page or pages to perform an
action. Functional icons are also occasionally associated to a label/data
pair (such as date picker or LOV icon). See the Table
guideline for more details.
Examples of Functional Icons
Example of Functional Icon; Field with Access to Date Picker
Button
Example of enabled/disabled Functional Icons within a table
View Details Icon
Notes Icon
Update Icon
Delete Icon
Date Picker Icon
LOV or Search Icon
Possible States of Functional Icons
enabled
disabled Color and Approximate Size of Functional Icons
Enabled Icon:
"Line" Color: dark blue; #336699
(see "Graphical Rendering of Icon Style" below for treatment details)
"Fill" Color: light blue; #99CCFF
approximate size = 24x24
Disabled Icon:
"Line" Color: medium grey; #999999
(see "Graphical Rendering of Icon Style" below for treatment details)
"Fill" Color: white
size = 24x24
Component
Icons - There are multiple icons used in different components.
These icons are part of the component web beans, and can not be requested
for development. Some icons used in the web beans for components are
listed in the Icon Repository. Examples
of component icons are:
Tree Icons
Hide/Show Icons
Locator Element: Previous/Next
Quick Links
etc.
Note: No new component icons may be requested.
Object
Type Quantifier Icons - Object Type Quantifier Icons are used
in Trees, HGrids, cells of tables, and related links/shortcuts, and are
associated with an object name. The icon quantifies what type of object
the item is. For instance, an HGrid may contain all marketing campaigns
with corresponding details, contacts, collateral, etc. For each of these
objects in the HGrid, a respective Object Type Quantifier Icon is displayed
next to the name so it is clear which is the campaign instead of the other
objects. See HGrid, Tree,
Related Links/Shortcuts, or Table
guideline for details.
Example of an Object
Type Quantifier Icon within an HGrid
Example
of an Object Type Quantifier Icon in a Tree
Example of an Object Type Quantifier Icon with Related Links/Shortcuts
Examples of Object Quantifier
Icons
Document
Folder
Campaign
Person
etc.
Possible States of Object Quantifier
Icons
view only (not clickable)
Color and Size of Object Quantifier
Icons
Line color: dark blue #336699
Fill color: white
Size: 16x16
Diagram Icons
- Diagram icons are used in graphical illustrations of processes, schemas, file
systems, etc. These illustrations are used in conjunction with the diagram editor
and may be functional depending on the mode in which the user is in. Examples
of diagram illustration with diagram icons are a workflow process, a marketing
campaign process, a database schema, a file directory, etc.
Examples
of Diagram Icons
Example
of Diagram Icons used in a Diagram Editor
Possible States of Diagram Icons
active (function depends on mode)
Color and Size of Inline Diagram
Icons
overall shape: Depends on whether diagram represents a process (i.e.,
workflow process) or schema (i.e.,
file system)
If diagram represents a process:
Start and End icons are in a circle
Branching Type steps are represented in a rectangle
Process steps may be in a square or the shape that represents the type of process
If diagram represents a schema:
Schema nodes should represent the node object type, for instance a document should have a document shape, a
folder should have a folder shape. The specific contents of the folder or document may be an iconic representation within
that shape.
Line color: dark blue #336699
Fill color: fill in shape is white
Size: 32x32
Base Graphics
- Base graphics are not specific icons (i.e., one of the BLAF icon types above)
but are used to create a consistent iconographic library when creating a BLAF
icon. For instance, many different types of icons may need "document"
iconography. The "Document" base graphic should be used when creating
this specific icon.
Stylistically, icon graphics should be less rendered than typical client-side
application graphics, with a more stylized, simplistic look. This look helps the
icons to be less competitive with the UI and task at hand, yet gives a sophisticated
graphical style. Icons have a pictogram quality, typical to signs that one might
see in an international airport. Base Graphics for Icon Development
To ensure consistency in art direction style and icon metaphor, base graphics
for common metaphors have been created. See the Icon
Repository for details.
Bookmark
