Buttons Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.0.2 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 22-Nov-2010

Buttons are used in FusionFX products to perform actions on data, to navigate to another page or secondary window, or both perform an action and navigate at the same time.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
Toolbars All Use of buttons in toolbars
Language in UI All General guidance on use of language on the page, and comparison of related UI terms
Links All Use of links for navigation
Help Framework Description Text Use of description text (tooltips) for buttons

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:commandButton
af:goButton All

General Principles Bookmark this Heading Return to Top

Purpose:

Buttons perform three functions in FusionFX applications: Perform actions only, perform an action and navigate to another page or secondary window, or let the user navigate to another page or secondary window without performing an action.

Usage:

  • Buttons may appear on a toolbar, in the body of a page, or in a secondary window.
  • Buttons are divided into three categories depending on their general function:
    • An Action Only button performs an action, but remains on the same page. The action redraws the page with additional or updated information or a confirmation message to reflect the action. Examples: Save, Clear.
    • A Navigation Only button does not perform an action, but takes the user to another page or secondary window. Examples: Previous, Advanced.
    • An Action and Navigation button both performs an action and takes the user to another page or secondary window. Examples: Finish, OK.

Button Formats Bookmark this Heading Return to Top

Buttons may be implemented in three different formats:

  • Iconic Button: Button with icon only (a.k.a. "butcon").
  • Text Button: Button with text only.
  • Iconic Text Button: Button with both icon and text (a.k.a. "text butcon").

image of 3 button formats: Text Button, Iconic Text Button, and Iconic Button

Button Formats

Usage:

  • Iconic Buttons: Require the least horizontal space of all button formats, and should be used for common functions that are generally associated with specific images or symbols. FusionFX provides default icons for iconic buttons included in ADF components. Use of these default icons for common actions is highly recommended to promote visual consistency, but customers may use different icons to conform to an application's overall look-and-feel.
  • Iconic Text Buttons: Require the most horizontal space of all button formats, but are both the most noticeable and recognizable of all three formats. Consider using iconic text buttons for infrequently used application-specific functions. Icons should appear before the text in these buttons.
  • Text Buttons: Require a medium amount of horizontal space, are readily recognizable, but not as noticeable as the other formats. Consider using text buttons for functions that do not have a standard iconic button.
  • For visual consistency, it is recommended that application teams implement either iconic text buttons or text buttons throughout all application pages AND that all pages use the same icons, when applicable, for the same task. For example, consistently use the pencil icon for an edit action. Either iconic text buttons or text buttons may be combined with groups of iconic buttons, but note that icons may also cause the button to grow in height, and therefore iconic buttons and iconic text buttons may appear to be larger than text buttons.

Button Types Bookmark this Heading Return to Top

FusionFX products include up to five types of buttons:

  • Command Button
  • Inline Selector Button
  • Toggle Button
  • Radio Group Button
  • Tool Button

Usage:

  • All button types may use iconic button, text button, or iconic text button formatting.
  • Command buttons take a direct action and typically refresh the page, launch a dialog, or navigate to a new page.
    • Examples: Print, Save, Delete
  • Inline Selector buttons provide a choice of commands. See Selection Panel below for details.
  • The other button types (Toggle, Radio Group, and Tool) are only used in toolbars. See the Toolbars guideline for details.

Configurable Elements Bookmark this Heading Return to Top

The following image lists the basic button elements:

Elements of a Button: the container, the icon, the text, the access key, default cursor, and tooltip.

Button Elements

Product teams can configure the button elements listed in the following sections.

Button Text Bookmark this Heading Return to Top

Text and iconic text buttons may include a standard or application-specific button label.

  • Buttons for high-frequency actions should be assigned an access key.
  • If the button has an access key associated with it, the letter in the button text matching the access key is underlined.
  • If the letter in the access key combination is not present in the button text, the access key does not appear in the button. Therefore, it is strongly recommended for product teams to always select an access key that appears in the button label.
  • See Button Labels below for usage of common command labels.

Icon Bookmark this Heading Return to Top

When present, the icon should always be the first element in the button. Icons must clearly communicate the function of the button to its intended audience. Some considerations when using icons include:

  • Icons may be interpreted differently in different cultures.
  • An icon motif may already be in use for a different purpose.
  • Users may fail to make the intended association with the icon.
  • All button icons in an application should have a consistent size.

Tooltip Bookmark this Heading Return to Top

Tooltips appear when the user hovers over the button for browser-determined period of time.

  • All iconic buttons must have tooltips. The tooltip should name the action associated with the button, as it would if the button had a text label.
  • It is recommended to keep button tooltip text under 40 characters in length.
  • Do not show access keys in the tooltip.
  • Text buttons and iconic text buttons do not require tooltips since the text on the button describes the action. However, a product team may use description text (see Help Framework guideline) to add a tooltip to a text button or iconic text button if necessary to provide the user with an extended explanation of the button action and its consequences.
Note: When a tooltip is supplied for a text button, the JAWS screen reader will read the content of the tooltip instead of the button text. Therefore, it is recommended to include the button text within the tooltip of a text button.

Selection Panel Bookmark this Heading Return to Top

Product teams may associate a button with a selection panel to form an inline selector button. Users access the selection panel by clicking on a drop-down arrow icon.

Showing a button with a drop-down arrow icon, associated with a selection panel, (with a divider between them), to form an inline selector buton.

Selection Panel - Split Button Behavior with Default Create Action

There are two primary use cases for this type of button:

  • Split Button with Default Action: The selector button is split into two sections. Clicking the labeled part of the button performs a default action, and clicking the arrow displays a panel of related actions.
    • Use this type of button when there are several related actions, but one action is selected far more frequently than all the others. For example, a button labeled "Forward" has the options "Forward Inline" and "Forward as Attachment". The default action may be to forward inline, so clicking the button performs that action automatically. Clicking the arrow, however, shows the selection panel where the user can select either option.
    • In the example image above, a button labeled "Create" displays a selection panel where users choose the type of object to create. Clicking on the button would perform the Create Order action. Split buttons have a divider between the button and arrow.
  • Single Button: The entire button functions as a unit, similar to a submenu name, where the button label is a general action or category term, and the selection panel lists a range of options.
    • Use this type of button when there are several related actions, each of which has an equal chance of being selected.
    • When used as a single button, there is no divider before the arrow.
  • Where possible, the button label should represent a category or a more general or higher-level term than those used in the selection panel. Option labels in the selection panel should be in an action verb form, or use a parallel phrase construction.
  • In a table toolbar, Inline Selector Buttons should not be used to group unrelated actions in an "Actions" menu, as this competes with the object-specific actions menu. See Default Menu Names in the Menus guideline for details.
  • It is recommended to have no more than three actions in the selection panel. For larger sets of actions, consider using a menu.
  • Do not use an inline selector button when you have only a single action.

A selection panel from a single selector button.

Selection Panel - Single Button Behavior (without divider)

Ellipses Bookmark this Heading Return to Top

The ellipsis character (...) is used on menu item and button labels to indicate that more information is needed to complete an action. It provides a clue to users that a dialog or another page may appear where they need to make a selection or enter further details before the action can be completed.

For example: A button like "Save As" requires an ellipsis if the user needs to enter the object name in a separate dialog window before the object can be saved.

Do not use an ellipsis when:

  • The sole result of clicking a button is to navigate to a particular page and no other information is required during this process. For example, a button like "Version History" may take the user to a dialog that shows a history of check-ins, but no other information is needed to finish this action, so "Version History" should not have an ellipsis.
  • The action only displays a warning or confirmation message for the action. For example, a "Cancel" button may show a warning dialog to the user if there is a potential for data loss; however, "Cancel" should not have an ellipsis.

Button Placement and Usage Bookmark this Heading Return to Top

The placement of buttons on the page depends on the scope of their usage in each case. They may affect only widgets, components, or content sections, or they may affect the entire page contents.

Note: Except for standard dialogs, label text and default button order are not provided by the ADF framework.

Buttons Associated with a Single Widget Bookmark this Heading Return to Top

Purpose:

Perform an action associated with a single field.

Examples:

  • "Browse..." - Action and Navigation Button: Button is associated with a "File Name" field. When clicked, the user navigates the user to a page or OS dialog to select a file or item to populate the respective field.
  • "Search" - Action Only Button: Button is typically used with a ListofValues (LOV) component. When clicked, the search is launched and results are displayed in a results table.

Usage:

  • The button may refresh the data in the field directly, or display a dialog box to do so.
  • The button should be placed immediately after the field. For single-line fields (such as text fields and choice lists) it should be vertically center-aligned with the field. For multi-line fields (such as text areas and list boxes), the button should be vertically top-aligned with the field.
  • When horizontal space is limited, the button may alternatively be placed below and start-aligned with the field.

Button placement on th page after a single field

Button with a Single Field

Buttons in a Section of the Page Bookmark this Heading Return to Top

Purpose:

Perform an action associated with the content below a section or subsection header (subheader or subsubheader).

Examples:

  • "Edit [xxx]" - Action and Navigation Button: This button takes the user to another page or flow to edit the contents of the specific section.
  • "Save" - Saves criteria for a search under a user-defined name.

An "Edit" button placed at the top right of a content region

Button Associated with a Section of the Page

Usage:

  • The button may affect the page section in one of three ways:
    • Refresh the data in the section directly.
    • Display a dialog box to edit the data in the section.
    • Redisplay the section with a different set of fields.
  • The button should be placed in the section or sub-section header toolbar. See Header Toolbars in the Toolbars guideline for details.
  • See the Headers guideline for more information on headers.

Buttons in Subtabs Bookmark this Heading Return to Top

Purpose:

Perform an action associated with an entire set of subtabs or with a single subtab.

Usage:

  • Buttons applying to an entire Subtab component should be placed above the subtab, end-aligned with the subsection header.
  • Buttons applying only to the currently selected subtab should be placed end-aligned below the Subtab bar, or as otherwise recommended for subsections placed within the Subtab component. See the subtab-related sections of the Tabs, and Headers guidelines for details.

A page with three tab areas, showing Apply and Revert buttons in the top right corner of the secondary tab.

Buttons Associated with Subtabs

Buttons in Toolbars Bookmark this Heading Return to Top

Purpose:

Buttons are commonly displayed in toolbars that perform actions related to the entire page, or act on a table, Tree Table, or Tree component.

Usage:

See the Toolbars guideline for details.

Buttons in Dialog Boxes Bookmark this Heading Return to Top

Purpose:

Buttons are commonly displayed in dialog boxes to perform or cancel actions specified in the dialog, or to open a nested dialog.

Usage:

  • Buttons in dialog boxes should be end-aligned within the dialog footer.
  • Buttons in dialog boxes should follow the same order as page-level buttons. See Page-Level Button Order for details.

Page-Level Buttons Bookmark this Heading Return to Top

Purpose:

Perform an action related to the entire page or navigate to another page.

Examples:

  • Save - Action Only Button: This button saves user changes without navigating to another page, so that the user can continue updating page contents.
  • Save and XXX - Action and Navigation Button: This button saves user changes and navigates to another page.
  • Next - Navigation Only Button: This takes the user to the next step in a guided process.
  • Printable Page - Action and Navigation Button: This takes the user to a printer-friendly version of the page.
  • Cancel - Action and Navigation Button: This button cancels all updates the user may have performed on the page, and takes the user back to the page prior to starting the transaction.

A row of buttons at page level.

Page-Level Buttons

Usage:

  • Page-level buttons should be placed in a page-level toolbar, end-aligned. See Page-Level Toolbars in the Toolbars guideline for details.
  • The recommended order for page-level buttons is described in the following section.

Page-Level Button Order Bookmark this Heading Return to Top

The following is the recommended order for page-level buttons as they appear in the UI from left to right (the order would be reversed in right-to-left languages):

  1. Action Only buttons (varied and contextual to application)
  2. Action and Navigation buttons (varied and contextual to application)
  3. Navigation Only buttons (such as "Next", "Back", "Continue", "Review", "Skip")
  4. Submit Only buttons (such as "Apply", "Save")
  5. Submit and Navigation buttons (such as "OK", "Done", "Submit", "Finish")
  6. Cancel button

Examples:

  • Apply, OK, Cancel
  • Save, Cancel
  • Actions (inline selector button), Save, Submit, Cancel
  • Import, Back, Next, Save, Cancel
  • Actions (inline selector button), Back, Next, Save, Submit, Cancel
  • Apply, Done, Cancel
  • Actions (inline selector button), Back, Next, Save/Save and Close, Cancel
Note: Product teams may change this order (for example, put the Cancel button before the Action and Navigation buttons) as long as they are consistent within their applications.

Disabling Buttons Bookmark this Heading Return to Top

Purpose:

To prevent the user from clicking a button.

Usage:

  • If a function is typically available to a user (based on the security model and the user's role) but is not available for a specific instance when the page is drawn, the button may appear disabled. This is not common, but may occur when objects may be shared by multiple users, but only one user at a time has access to the object.
  • If a function is never available to a user (based on the security model and the user's role) the button should NOT be displayed, rather than being displayed in its disabled state.

Button Labels Bookmark this Heading Return to Top

The following tables provide standard button terms that are used in FusionFX products. Related terms are grouped together, and are compared in a separate section below.

Note: Product teams may also use application-specific terms other than those listed below.

Common Button Labels Bookmark this Heading Return to Top

The following table displays variables as follows:

(xxx) indicates that the control commonly includes a pre-defined object type, such as "Create Invoice."
(nn) indicates that the control commonly includes a pre-defined number, such as "Add 10 Rows."

Note: If translation costs are a consideration, using the action term without the object type is preferred, such as "Create" rather than "Create Invoice." The object type (such as, "Invoice") should only be added when necessary—that is, when the action alone is ambiguous in the context of the page.
Correct Term Component Usage Incorrect Term for this Usage
Adding New Content
Add
Add (xxx)
Action/Nav. btn Adds a specified object type to current container (table, list, region). The object then needs to be populated with data or properties. Insert
Add (nn) Rows Action btn Add a specified number of rows to table. Used instead of "Add (xxx)" where users frequently need to add multiple rows. Add Another Row
Add Another Row Action btn Adds a single row to a table. Used instead of "Add (nn) Rows" where users typically do not need to add multiple rows at once. Add (nn) Rows
Create
Create (xxx)
Action/Nav. btn Creates a new object, or displays a page or dialog where the new object can be specified. New
Insert
Insert (xxx)
Action/Nav. btn Inserts a new object above the selected object, or displays a page or dialog where the new object can be specified before being inserted. Add, Create
Modifying Existing Content
Edit
Edit (xxx)
Action/Nav. btn Allows user to make changes to an existing object. Update, Enter, Apply, Submit
Delete
Delete (xxx)
Action btn.

Action/Nav. btn

Removes objects from the database. Some applications may use the term "Remove", if Delete is considered offensive, such as "Delete Person". Cut
Remove
Remove (xxx)
Action btn.

Action/Nav. btn

Removes objects from temporary storage or from the UI without deletion from the database, such as "Remove from Shopping Cart". Delete, Cut
Duplicate Action btn. Places a copy of the selected object immediately below it, or takes the user to a duplicated object page. Copy
Save As Action/Nav. btn Saves current object settings under a different name. Save
Confirming Changes
Apply Action/Nav. btn Confirms changes made in current page without navigating to another page. (Recommended only for dialogs.) Go, Set, Submit, Update, Save
Save Action btn Saves changes without navigating to another page, so that the user can continue modifying page contents. Apply, Go, Set, Submit, Update
Save and (xxx) Action/Nav. btn Confirms changes made in current page and navigates to another page, unless action-specific button is provided, such as Export. Save
OK Action/Nav. btn. Confirms changes made in current page or dialog, and closes dialog or navigates to another page. (Recommended only for dialogs.) Apply, Go, Set, Update, Close
Submit
Submit (xxx)
Action btn.
Action/Nav. btn
Submits a proposed change for approval by others (such as credit card approval, or in a workflow process) or posts changes in a public location. Run, OK, Go, Set, Apply, Update
Save as Draft Action/Nav. btn. Saves the changes to the database and returns user to the originating page (usually an object list), with a confirmation that the object was saved and is in an incomplete state. Object list pages should contain a status column indicating that the object is still in draft state. Commit
Run (xxx) Action/Nav. btn. Confirms changes made in current page or process, and launches another process. To be used only when common industry usage is "Run" followed by an object type, such as "Run Report", "Run Script" or "Run Forecast". Submit, Apply, Go, Set, Update, OK
Canceling Changes and Clearing Settings
Cancel Action/Nav. btn Aborts current process and retur ns to a prior screen (not necessarily the previous one). Process may or may not be linear. Abort, Return, Close, Return to (xxx)
Clear (xxx) Action btn Clears current settings in a field or region of page. Input fields become blank. Remove, Reset
Clear All Action btn Clears current settings in a page. Input fields become blank. Remove All
Reset Action btn Returns settings in a field or region of a page to previously-saved settings. Clear
Reset to Default Action btn Returns to original or base settings -- principally for Preferences. Restore
Revert Action btn Returns page to previously-saved settings. Reset, Restore
Reloading Pages and Data
Refresh Data Action btn Queries database for latest state of records, and redraws page. Update, Refresh, Reload
Refresh (xxx) Action btn Redraws specified object without querying database, such as Refresh Total, Refresh Table, and Refresh Tree. Update, Refresh, Reload
Navigation and Selection
Next Action/Nav. btn Displays next page in a process that may or may not be linear; not same as browser Forward button. Forward
Back Action/Nav. btn Displays previous page in a process that may or may not be linear; not necessarily same as browser Back button. Can also be used when "Cancel" is misleading, such as canceling a contract. Previous
Expand All Link Expands all collapsed nodes in a tree. Expand
Collapse All Link Collapses all expanded nodes in a tree. Collapse
Searching and Filtering
Search Action/Nav. btn Used to initiate a search. Find
Advanced Action/Nav. btn Displays a page where users can specify or select additional search options. Advanced Search
Printing
Printable Page Action/Nav. btn Displays a printable page with all summary information from the current page but without unnecessary UI elements. The user then relies on browser print controls to print the page. Print, Print (xxx)
Customizing UI
Personalize Action/Nav. btn Used to provide functionality to customize the UI. Customize, Configure
Exiting Applications
Log In Global link Connects to an Oracle network or a remote system. Log Into, Login
Log Out Global link Disconnects from an Oracle network or remote system. Log Out of, Logout, Quit, Exit
Sign In Global link Signs the user in to Oracle intranet applications. For Internet applications, Sign In provides access to more functionality. Sign on, Log In
Sign Out Global link Signs the user out of all Oracle intranet applications, or out of advanced functionality in Internet applications. Sign Off, Log Out, Quit, Exit
Close Action/Nav. btn Closes secondary window. Cancel, Exit, Quit

Labels Specific to Guided Processes Bookmark this Heading Return to Top

The following table displays variables as follows:

(xxx) indicates that the control commonly includes a pre-defined object or activity type, such as "Continue Shopping."

Note: For translation considerations, using the action term without the object/activity type is preferred, such as "Continue" rather than "Continue Shopping." The object/activity type (such as, "Shopping") should only be added when necessary: that is, when the action alone is ambiguous in the context of the page.

Correct Term Component Usage Incorrect Term for this Usage
Next Action/Nav. btn Displays next page in step-by-step process; not same as browser Forward btn. Forward
Back Action/Nav. btn Displays previous page in step-by-step process. Previous
Continue
Continue (xxx)
Action/Nav. btn In a page that is a possible completion point, "Continue (xxx)" moves to next page in a sequence, or to a higher page in the hierarchy, where the user can continue the specified activity, such as, "Continue Shopping".

"Continue" is also currently used to complete a subprocess (process within process), and for forward movement through sequential tabs.

Next (xxx)
Finish Action/Nav. btn Completes the process and either displays completion screen or returns to screen prior to starting process.

Note: When completion of the first process initiates another significant process, especially one that is time-consuming, use context-specific action terms that indicate what will happen, such as "Run Script".

OK, Apply, Update, Done
Submit Action/Nav. btn Completes the current step-by-step process, and submits proposed changes for approval (in a workflow process) or to a public location. Finish, Done, OK, Apply, Update
Cancel Action/Nav. btn Aborts current step-by-step process and returns to screen prior to starting process. Abort, Back, Return, Close, Return to (xxx)