Buttons (Action/Navigation)

General Description

Action/Navigation buttons in BLAF applications may be used to:

• Perform actions only (Action Only Buttons)
• Perform an action and navigate to another page (Action/Navigation Buttons)
• Not perform an action, but navigate the user to another page (Navigation Buttons)

These buttons are referred to as Action/Navigation buttons and are placed throughout the page, according to context and function.
Refer also to the Buttons (as Links) and Buttons (Global) guidelines.

Guideline Contents

• General Principles
• Placement of Action/Navigation Buttons in UI
• Button Placement and Interaction/Usage Details
• Single Field, Poplist or Text Area Related Action/Navigation Buttons
• Standard Web Widget Group Related Action/Navigation Buttons
• Page Content Section Related Action/Navigation Buttons
• Table Related Action/Navigation and Action Only Buttons
• Page Level Action/Navigation Buttons
• SubTab Related Action/Navigation Buttons
• Repeating Action/Navigation Buttons
  • Omitting Repeating Buttons
  • Examples of Repeating Action/Navigation Buttons
• Page Level Action/Navigation Button Order
  • Page Level Button Language Subtleties and Specific Interaction Notes
  • Examples of Button Order Based on Different Page Types
• Buttons that are NOT Action/Navigation Buttons
• Action/Navigation Button States
• Action/Navigation Button (Text) Language
• Visual Specifications
  • UIX .GIF Generator Rendered Action/Navigation Buttons
  • Action/Navigation Button Shapes & Measurements
  • Buttons on Different Colored Backgrounds
  • Text Styles and Colors

Technical Note: The order of action/navigation buttons is not included at this time in the UIX framework. The various verbiage in the 1/2 shaped button, and locator text can not be rendered as specified yet either.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Raymond Wong, Craig Louis, Lisa Rinderknecht
UI Models - all models
Example Products - all products
Related Guidelines - Intra-Application Navigation, Page Templates, Buttons (Global), Buttons (as Links), Language in UI, Tables, Instruction Text, Headers

Interaction and Usage Specifications

General Principles

Action/Navigation Buttons perform an action and navigate the user to another page. An Action Only Button performs an action, but remains on the same page (the action redraws the page with additional or updated information and/or confirmation message to reflect the action). A Navigation Button does not perform an action, but navigates the user to another page. These different button types are all referred to as Action/Navigation Buttons.

Examples of different Action/Navigation Buttons

Placement of Action/Navigation Buttons in UI

The placement of these buttons in the UI is determined by their relationship to widgets, components, content sections, or entire page contents. The valid locations of all types of action/navigation buttons are as listed below:

1. Single Field, Poplist or Text Area Related Action/Navigation Buttons
2. Standard Web Widget Group Related Action/Navigation Buttons
3. Page Content Section Related Action/Navigation Buttons
4. Table Related Action/Navigation and Action Only Buttons
• Selection Dependant Action/Navigation and Action Only Buttons
• Action/Navigation Buttons Global to a Table (i.e., independent of row selection)
• Action Only Buttons that Refresh the Tables Contents
5. Page Level Action/Navigation Buttons
• Action ONLY Buttons Related to the Entire Page
• Action/Navigation Buttons Related to the Entire Page Contents
• Navigation Buttons Only Buttons Related to the Entire Page Contents

• SubTab Related Action/Navigation Buttons

The links in the above list take you to the sections following for each button type. The numbers adjacent to each link indicate the button type's representation in the following image. Note that SubTab related buttons are not represented in the image.

Act/Nav Button Placement Examples

Button Placement and Interaction/Usage Details

Single Field, Poplist or Text Area Related Action/Navigation Buttons

This type of button corresponds to one field, poplist or text area only. If it is an action/navigation button, once selected, the page may redraw with the respective functionality that allows the user to fill in the original field. If it is an action only button, once selected the page redraws appropriately related to the selection or input of that field/poplist.

Placement

This action/navigation button is placed justified center and right of the field.

Some Examples of Action/Navigation Buttons Related to a Single Field or Poplist

• "Browse..." - Action/Navigation Button: Button is associated with a "File Name" field. When selected, the user navigates the user to a page or OS dialog to select an file or item to populate the respective field.
• "Go" - Action Only Button: Button is typically associated with search or view fields/poplists, and or contextual choices. When selected a portion of the page is redrawn with the desired information or mode.

Template and Examples of Action/Navigation Button to Field

Template, Examples and Measurements of Action/Navigation Relating to a Specific Field (or Poplist)

Standard Web Widget Group Related Action/Navigation Buttons

This type of button corresponds to a set of fields or component.

Placement

This button is placed below the last field of the set, and left aligned with the above standard web widgets. In a two column layout, the button is placed below the first column.

Some Examples of Action/Navigation Buttons Related to a Group of Fields and/or Poplists

• "Add Another [xxx]" - Action Only Button: This button adds another field/poplist or set of fields/poplists to the existing set.
• "GO" (For Advanced Search) - Action Only Button: This button instantiates a search based on the criteria entered by the user.

Template and Examples of Action/Navigation Button to Group of Fields

Template, Examples and Measurements of Action/Navigation Relating to a Set of Fields

Page Content Section Related Action/Navigation Buttons

This type of action/navigation button is related to a page content section. The section may be a subheader section or a subsubheader section.

Placement

This action/navigation button is placed right justified, underneath the section subheader or subsubheader component. See the Header Component Guideline for details on headers. If instruction text is present, the instructions are left justified. See the Instruction Text Guideline for details regarding instruction text.

Some Example(s) of Action/Navigation Buttons Related to a Section of Contents

• "Update [xxx]" - Action/Navigation Button: This button takes the user to another page or flow to update the contents of the specific section.

Template and Examples

Template, Examples and Measurements of Action/Navigation Button Relating to a Section of Contents

Table Related Action/Navigation and Action Only Buttons

There are multiple valid usages of an action/navigation button in a table. See the Tables Guideline for extensive examples and usages.

Sample List of Valid Usages of Action/Navigation Buttons in Table:

• Selection Dependant Action/Navigation and Action Only Buttons
• Non-Selection Dependant (Global) Table Action/Navigation (and Action Only) Buttons
• Action Only Buttons that Refresh Table Content
• Action Only Button Related to a Table Cell

NOTE: See the Tables Guideline for details.

Page Level Action/Navigation Buttons

Page level Action/Navigation buttons apply to the content of the entire page. Page Level Action/Navigation buttons can be either Action ONLY, Action/Navigation, or Navigation ONLY.

• Action ONLY page level buttons do not navigate the user to another page, but just perform the action when selected. Once the action only button is selected, the page may refresh with a Message Box at the top of the page confirming that the action is complete. Use of the message box is optional and depends on whether or not there is a clear indication in the UI that the action has happened. Also, the Action Only page level button keeps the user on the same page, with the same page title.
• Action/Navigation page level buttons, when selected, perform a function, and also navigate the user to another page within the application.
• Navigation ONLY page level buttons do not perform an action, but navigate the user to another page.

Some Example(s) of Page Level Action/Navigation Buttons Related to the Entire Page Contents

• Apply - Action Only or Action/Navigation Button: This button saves user changes, and either navigates to another page (if appropriate for the content) or remains on the same page (if it is necessary for the user to continue updating page contents.)
• Cancel -Action/Navigation Button: This button cancels all updates the user may have performed in the page, and takes the user back to the page prior to the transaction starting.
• Next - Navigation Only Button: This takes the user to the next step in a process.
• Printable Page - Action/Navigation Button: This takes the user to a print friendly version of the page. See Language in UI Guideline for exact button verbiage details.

Placement

Page level action/navigation buttons are placed at the bottom right corner of page, below the Page Contents Bottom Line, and are repeated at the top of the page, right aligned directly under the primary page title, or first header on the page. There is a recommended order for page level buttons. See below for examples.

Example of Page Level Action/Navigation Buttons - Button Relating to the Entire Page Contents (Repeated at Top and Bottom of the Page)

SubTab Related Action/Navigation Buttons

Placement of Action/Navigation buttons relating to SubTabs depends on whether they apply to the all the tabs in the SubTab component, or only apply to the currently selected tab.

• Action/Navigation buttons applying to an entire SubTab component are placed above the SubTab component, below the section or subsection header, aligned right.
• Action/Navigation buttons applying only to the currently selected SubTab are placed right aligned below the SubTab bar, or as otherwise recommended for page content subsections placed within the SubTab component according to BLAF Object Templates, Header Component, and other Guidelines.
• See "SubTab Content Layout " in the Subtabs Multi-Page Non Linear Object Template section of the Object Templates Guideline.
• Also see Tabs/Navigation: SubTab Navigation for more information and examples on using the SubTab component, and how it coordinates with other navigation controls.

SubTab Action/Navigation Button Placement

Repeating Action/Navigation Buttons

Usability test results have shown that action/navigation buttons repeated near top of page (i.e., below page title) greatly improves users performance to accessing the primary page level buttons. Below are examples of repeating action/navigation buttons and their interactions with various contents and widgets.

Several points are worth noting:

• In general, Instruction Text and Key Notation should be short and kept to a minimum. In cases where they become very long, the text should wrap around the repeating buttons. See the Instruction Text and Help Methods guidelines for details regarding usage.
• In cases where action/navigation area at the top section is too crowded, instruction text or key notation can be added directly below the area.
• The "Return to" link does not repeat at the top section, as there are other navigation methods (i.e. breadcrumbs, tab bar, etc.) that can provide the same functionality at the top of the page.

Omitting Repeating Buttons

Page level action/navigation buttons may not need to be repeated on particular short pages. Page level buttons must be repeated top and bottom on all other pages. When the page level buttons are not repeated, the lower buttons are retained. Short pages where repetition of page level buttons may be omitted include:

• Short Message Pages (Error, Warning, Information or Confirmation)
• Short Login Pages

When is a Message or Login Page "short"? If the rendered page can be expected to normally occupy less than 3/4ths of the vertical monitor size, omitting the upper page level Action/Navigation buttons should be considered.

Examples of Repeating Action/Navigation Buttons

Action/Navigation Buttons (Cancel and Apply) and Instruction Text

Action/Navigation Buttons (Cancel and Apply) and Long Instruction Text

Action/Navigation Buttons (Printable Page, Cancel, and Apply) and Two Key Notation Items (Required Field and Currency)

Action/Navigation buttons, Instruction Text and Key Notation

Action/Navigation Buttons (Next/Back/Cancel/Submit) and Wrapped Instruction Text

Action/Navigation Buttons and Contextual Information

Multiple Action/Navigation Buttons with Choice List and Wrapped Instruction Text

Multiple Action/Navigation Buttons with Choice List and Instruction Text Below (No Wrapping)

Page Level Action/Navigation Button Order

Page level Action/Navigation buttons are grouped into button categories or types, and follow a standard order (from left to right). The following are the categories of page level buttons as they appear in the UI from left to right (in bi-di applications, this order is reversed):

• Return to [XX] - Note: this is a link, see Button Link Guidelines.
• Final Dismissal
i.e., "Cancel"
• Action/Navigation(s) - Varied and Contextual to Application
• Navigation/Locator Variations
i.e., "Next", "Back", "Continue", "Review", "Skip"
• Final Submission/Acceptance
i.e., "Apply", "Submit", "Finish"

Page Level Button Language Subtleties and Specific Interaction Notes

• Navigation Language Subtleties
• Skip vs. Next:
• Skip - "Skip" is used in a batch detail flow, when user navigates forward to the next detail page, but not performing any actions on page.
• Next - "Next" is used in a step by step flow when user is moving forward to the next step. This may or may not perform actions within the page.
• Next vs. Continue:
• "Next" takes user to the next step for a 3+ step flow.
• "Continue" takes the user to the next step, but is only used for 2 step process where 1st step is "do x" and second step is "do y."
• Continue vs. Review:
• "Continue" is used only for 2 step process where 1st step is "do x" and second step is "do y".
• "Review" is used only for 2 step process where 1st step is "do x" and second step is "review x".
• Locator Options
• Page X of X
• Step X of X
• [objectname] X of X
• Final Submission/Acceptance Language Subtleties
• Apply vs. Submit vs. Finish
• "Apply" commits changes/updates to the database.
• "Submit" sends the changes/updates to workflow for approval.
• "Finish" completes a step by step process. The user does not necessarily have to be at the final step to finish.

Examples of Button Order Based on Different Page Types

General Page such as: Object List, 1 Step Transactional, Messaging Page, etc.

Step by Step (3[+] Steps)/Batch Detail Mode

2 Step Page Templates

Buttons that are NOT Action/Navigation Buttons

• Buttons that are "Global" or Applicable to an Entire Set of Tabs
• This type of button is the same as a global button, since it is global to an application.
• See Buttons (Global) guideline for details.
• Button that are "Global" or Applicable to the Entire Application
• This type of button is the same as a global button, since it is global to an application.
• See Buttons (Global) guideline for details.

Action/Navigation Button States

There are 2 states to action/navigation buttons, enabled and disabled.

• Enabled Action/Navigation Buttons - Enabled Action/Navigation buttons can be selected to perform an action and/or navigate the user to another page. The button uses an alt tag to describe it's function.
• Disabled Action/Navigation Buttons - Disabled Action/Navigation buttons can not be selected to perform an action or navigate the user to another page. They visually appear different than enabled buttons, as well as use an alt tag to describe the buttons state. There are only used in certain situations in BLAF applications:
  • Usage of Disabled Action/Navigation Buttons in BLAF:
  • The web model typically is a stateless environment, thus it is important to follow the heuristics below to determine whether or not to disable a button.
  • If a function is rarely or never available to a user (based on the security model and/or his/her role) this button should not be displayed in the UI, therefore a disabled button should not be used.
  • If a function is typically available to a user (based on the security model and/or his/her role) yet for a specific instance when the page is drawn, it is not available at that time, the button may appear disabled. This rarely occurs, but may be the case in situations where objects are shared by multiple users, but only one user at a time has access to the object, for instance.

Example of Disabled Button State

Example of Enabled Button State

Action/Navigation Button Label (Text) Language

For details regarding specific action/navigation button labels, as well as verbiage tips, see the Language in UI Guideline.

Visual Specifications

UIX .GIF Generator Rendered Action/Navigation Buttons

Action/Navigation buttons are dynamically generated in UIX using a Java based image generator. The outline edges (including the drop shadow) and the background fill are drawn by the tool. Then, the tool imports the appropriate text string to place inside the button. (This text string is translated as needed prior to generation of final image.) Finally, the tool renders and saves the composited image as a gif.

Since the buttons are actually images, they should also use an "Alt" tag to describe the function in "rollover/bubble text". The tag may be the button label, but can also provide further details regarding the function. See the Inline Messaging, Tips, Hints, and Bubble Text and Language in UI guidelines for bubble text recommendations.

NOTE: Generating the action/navigation buttons using the rendering tool is compliant with NLS [Internationalization and Translation] Requirements as well as Accessibility Requirements.

Action/Navigation Button Shapes & Measurements

Typical: Round on Both Sides

All Action/Navigation buttons are rounded on both sides.

Typical Action/Navigation Button Shape

Action/Navigation Button Measurements

Action/Navigation Buttons are a combination of rounded corners, and a text string. The text string or button label is centered in the button, and is constrained to one line only (i.e., the button text does not wrap.)

Note: Additional Action/Navigation layout measurements, including horizontal spacing between page level buttons, can be seen in Buttons (Global): Visual Specifications.

Measurement of Action/Navigation Button and Example of Text String in Button

Exception: Round on One Side, Straight Edge on the Other

The only exception for a non-rounded edged action/navigation button are for navigation only buttons: "Next" "Back" and "Continue." These buttons have a rounded corner and a flat edge.

Exception Action/Navigation Button Shape: Used ONLY for Next/Back/Continue Buttons

Buttons on Different Colored Backgrounds

Action/Navigation buttons can be on different colored background including:

• white (#ffffff)
• dark beige (#cccc99)
• medium beige (#ffffcc)

Buttons on Different Colored Backgrounds

Text Styles and Colors

Open/Closed Issues

Open Issues

None


Closed Issues

22-Mar-2000 - A new button design proposal regarding the look of the button has been accepted and implemented.
The look of the action/navigation button has been updated based on usability and feedback.