Buttons (Global)

Last Updated 03-Dec-2003

General Description

Global buttons are buttons that access sections of content that are global to the entire application. A global button is persistent and can be accessed from every area of the application.

Example of Enabled, Active and Disabled Global Button

Below is the contents of this guideline:

General Principle
Global Button Options
Order of Global Buttons
Common Global Buttons
Button States
Visual Specifications

Spec Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Lisa Serface, Ivy Leung
UI Models - all models
Example Products - all products
Related Guidelines - Tabs (global), Introduction to BLAF Page Templates, Help Methods, Icons, Branding, Global Button Flow: Preferences.

Interaction and Usage Specifications

General Principles - below are recommended principles about global buttons:

a global buttons is a content or functional area that is "global" or available from every part of an application.
to determine what type of content should be accessed from a global button; the UI designer must evaluate how "global" the content is in respect to the entire application. If the content is available from 95-100% of the application, a global button should be used to access the information. (Following this recommendation helps prevent a global button from disabling and enabling throughout an application, a situation which may confuse the user to know when the function is available.)
minimum number of global buttons: there should be at least 1 global button per application, Help.
maximum number of global buttons: to prevent horizontal scrolling, the maximum recommended number of global buttons is between 6-7. (NOTE: button label verbiage can significantly effect the total width of all the global buttons combined.) If there seems to be a need for more than this maximum number, it is recommended to reevaluate the high level UI architecture of the product to make better use of all components and elements.
Every text label of a global button is repeated in the page footer component, to give users easy navigation from the bottom of the page when the page is long and the global buttons are scrolled off the top of the screen. See the Page Footer guideline for details.
General Global Button Flow - Generally, when a global button is selected, the page redraws to a global page template, and the global button becomes active. (See: Tabs/Navigation, Introduction to BLAF Page Templates for details.)

Global Button Options - Global buttons may be shown as links only or with global icons depends on the choice of Branding type. A user preference setting may be exposed to allow user to choose from the available Branding Options. See Branding Options for details.

Order of Global Buttons - There is a set of common global buttons that are used in web based application, and a recommended order to display these buttons.

(NOTE: This image does not represent spacing between icons.)

Common Global Buttons - There is a set of common global buttons that are used throughout BLAF applications. See each guideline for details.

Return to Portal (optional)
- This button is required in the UI of an intranet application when the intranet environment also has a portal.
- Return to Portal Flow Guidelines
- Template Guidelines - to come based on flow guideline
Login/Logout
- This toggle button is required in the UI of either an intranet or internet/hosted application.
- Login/Logout Flow Guidelines
- Template Guidelines - to come based on flow guideline
Application Specific (optional)
- This area can contain global buttons specific to the application or module. If the general principle recommendations above are followed, the number of module specific global buttons allowed is limited only by the total maximum number of recommended global buttons allowed.
Preferences
- This button is required for intranet applications.
- This button may or may not be present for internet/hosted application.
- Preferences Flow Guidelines
- Template Guidelines - see Global Page Templates
Contact Us (optional)
- Contact Us Flow Guidelines
- Template Guidelines - see Global Page Templates
Help
- This button is required.
- Help System Flow Guidelines
- Template Guidelines - see Help Templates

Button States - There are 3 states to a global button; enabled, active and disabled.

Enabled state signifies the button is available to click and access specific global information.
Active state is displayed when the user has already selected the button, and is viewing the contents of that specific global section.
Disabled state is rarely used, but would denote that the global button content is not available from that specific location. It is recommended to avoid disabling a global button, but instead reassess whether the content area is truly "global" to the entire application. (See 95-100% suggestion above under "General Principles.")

Visual Specifications

Text Styles and Colors

	Enabled	Selected (Active)	Disabled
Text Color	Brown (Text will be a link); #663300	Dark Blue; #336699	Very Dark Beige; #999966
Text Style	Arial, 9pt (CSS), Regular	Arial, 9pt (CSS), Regular	Arial, 9pt (CSS), Regular
Button Fill Color	white; #ffffff	light blue; #99ccff	light beige; #f7f7e7
Button Border Color	dark beige; #cccc99 (highlight) - very dark beige; #999966 (shadow)	dark blue; #336699 (highlight) - dark blue; #336699 (shadow)	dark beige; #cccc99 (highlight) - very dark beige; #999966 (shadow)
Image of Rendered Button Fill and Border Colors
Approximate Icon Size and Shade	18x18(min)-21x21(max), very dark beige; #999966	18x18(min)-21x21(max), dark blue; #336699	18x18(min)-21x21(max), dark beige; #cccc99
Total Button Size	32x32	32x32	32x32

Buttons are Icons within a Circle, and the Button Label Text is HTML - Each global button is an icon within a filled circle, and needs to be rendered for all 3 states. The button label is HTML text and is centered below each individual global button.

Technical Rendering of Each Global Button

Button Text Label Wrapping - The global button text label should only wrap to 2 lines. The text is centered below the global button.

Maximum Width of Global Button "Bar" - To prevent the global buttons from horizontal scrolling in an 800 width environment, it is recommended to not exceed 450 pixel width for the combined set of global buttons and button text labeling. The maximum width can vary greatly depending on the text label length, thus it is important to follow stringent guidelines for keeping button label verbiage curt (see recommendations below under "Button Label Verbiage.")

Minimum Width Between Global Buttons and/or Button Labels in Global Button "Bar" - To prevent the global buttons from touching, a minimum value has been set between the global buttons and/or global button label depending on which is longer. This value is 10 pixels.

Button Label Verbiage - To prevent surpassing the suggested maximum width for the combined global button "bar," as well as prevent text from wrapping to two lines, it is recommended to keep global button label verbiage succinct, but still maintain understandable terminology for the user that describes the entire contents of the specific global area. The label should be consistent with the other common global button terminology and not be action oriented. See also Language in UI guidelines for more tips.

Common Global Button Label Verbiage

Return to Portal
Login (May be more specific [i.e., "Login to XXX"])
Logout (May be more specific [i.e., "Logout of XXX"])
Preferences
Contact Us
Help

Global Button/Branding Options

Non-Contextual Branding - Large Layout

Non-Contextual Branding - Regular Layout

In-Context Branding - Regular Layout

Actual Icon Set for Global Buttons

See Icon Guideline and Icon List for set of common global button icons.

Open/Closed Issues

Open Issues

"Return to Portal" global button verbiage is under investigation since technically Oracle application users do not start from a portal.