This section provides a description and additional references for each header element type.

Introduction

This section contains images that depict all header elements, with and without horizontal trains. Boundaries surrounding header elements are shown for illustration purposes only.

Figure 3 shows an example of the page header region on a multiple objects work area page.

Figure 3. Header elements in the page header region of a multiple objects work area page

Figure 4 shows an example of the page header region in a single-object work area page.

Figure 4. Header elements in the page header region of a single-object work area page

Figure 5. Header elements in the page header region for a page with a horizontal train

Horizontal Train

Figure 6 shows an example of a horizontal train in the page header region.

Figure 6. Example of a horizontal train

Trains walk a single user through a number of steps to complete a single task. Train stops are presented horizontally across the top of the page. Users can navigate through the task by using the train or page-level buttons. Follow these guidelines for trains:

• Usage is mandatory if the train pattern is employed.
• Content orientation is horizontal.
• Guided Process design pattern set: Single Task design pattern set
• Train Usage Guideline

Header Title

Figure 7 shows an example of the header title in the page header region.

Figure 7. Header title with all other header elements displayed except the horizontal train

The header title identifies the page. In cases where the header title is the only header element, you should still use the AppsPanel component to build the page header region. Using the AppsPanel component ensures that the header elements do not scroll out of users' views. Follow these guidelines for header titles:

• Usage of the header title is mandatory except on dashboard pages.
• Content orientation is horizontal.
• For more information, see the Header Syntax section of the Headers Usage Guideline .

Header Context

Figure 8 shows an example of the header context in the page header region.

Figure 8. Header context

The header context region can contain any, all, or none of the following content. The approved order from left to right is:

• Switcher icon.
  
  • For more information on the Switcher icon, see the Headers Usage Guideline .
• Record Information icon.
  
  • For more information on the Record Information icon, see the Record Information Guidelines
• User Assistance Popup (UAP) icon.
• For more information on the UAP icon, see the UAP Embedded Help Design Pattern.
• Usage is optional, depending on the individual guidelines for each component.
• Content orientation is horizontal.

Header Toolbar

Figure 9 shows an example of the header toolbar in the page header region.

Figure 9. Header toolbar

The header toolbar contains page actions. Follow these guidelines for header toolbars:

• Usage is mandatory, except on the dashboard and work area overview pages.
• Content orientation is horizontal.
• For more information, see the following guidelines:
  • Page Actions Guidelines
  • Record Information Guidelines

Collaboration Toolbar

Figure 10 shows an example of a collaboration toolbar in the page header region.

Figure 10. Collaboration toolbar

The collaboration toolbar component provides access to the collaboration components on business objects and transactions. Follow these guidelines for the collaboration toolbar:

• Usage is mandatory if the page contains a collaboration tool (taggable object).
• Content orientation is horizontal.
  • When you add content to the collaboration toolbar, the horizontal display expands within the available real estate.
    

    Figure 11. Example of a collaboration toolbar

• For more information, see the following guidelines:
  • Collaboration Integration Guidelines
• Tagging Guidelines

Scaling (Scales of Numeric Values)

Figure 12 shows an example of scaling in the page header region.

Figure 12. Example of scaling in the header region

Scaling refers to scales of numeric values, such as "amounts in thousands."

Follow this syntax:

• A phrase including both the defined element and its definition. Examples include:
  • Amounts in thousands
• Population in millions
• {Term} = {Definition}. For example:
  • Currency = US Dollar
  • Note that some currency names include abbreviations, such as US for United States in US Dollar.

Usage

Follow these usage guidelines:

• All exceptions to a scale of values must be noted in that scale.
  • For example: "Amounts in millions, except per share data"
• Consider placing a currency definition in the scaling header element on pages when monetary amounts in a single currency occur frequently throughout the page.
  • In this case, the currency definition should be the first item in the scaling header element.
    • For more information, see the Single Currency section of the Currency Guidelines.
• Display a currency definition (when possible) next to a monetary scaling measure.
  Contiguous placement enables users to easily scan both currency and scale.
  

Figure 13. Single currency code as a scale of values. The currency definition is correctly located as the first item in the Scaling header element.

• For more information, see the Icon and Term Definition Guidelines.
• Content orientation is horizontal.
• When you add content to the scaling element, it expands horizontally within the header element’s available real estate.
• If scaling content exceeds the available horizontal space, content will wrap.
• Scales of value are separated from one another with the pipe (|) character.

Static Instruction Text

Figure 14 shows an example of static instruction text in the page header region.

Figure 14. Static instruction text

Use static instruction text only on pages where typical users may fail to perform a task unassisted. Apply static instruction text to explain the primary way to use a page or a subsection of the page. If a page or subsection does not need help, do not add static instruction text simply to make that page or subsection consistent with other pages or subsections.

If you use static instruction text, be brief and to the point. Use no more than two lines or 400 characters including spaces. The text is always visible.

Follow these usage guidelines:

• Usage is optional.
  
• Content orientation: Text expands horizontally within the width of its header element and wraps up to two lines.

  Figure 15. Example of static instruction text

• For more information, see the Embedded Help Design Pattern: Static Instruction Text.

Task Stamps

Figure 16 shows an example of task stamps in the page header region.

Figure 16. Example of task stamps

Task stamps provide context-specific information regarding task-related and status information. Types of task stamps include the state of a page or section content, such as the last saved date (and time, if appropriate), or last refreshed time; the page data needed for users to complete a task, such as a space quota; and so on. Examples include:

Follow these usage guidelines:

• Usage is optional.
  
• Content expansion is vertical stacking.
  
  • No more than one task stamp per row is allowed.
  • If you have two or more task stamps, each displays on a different row within the task stamp header element (see figure 17).

Figure 17. Example of two task stamps, each displayed on a different row

Right-align task stamps as a block (see figure 19). Within the block, right-align text values (see figure 18).

Figure 18. Within the task stamp block, right-align values

Figure 19. Right-align the task stamp block within its header element

For more information, see the Page Stamps Usage Guideline, Task Stamps section.

Local Context Region

Figure 20 shows an example of a local context region within the page header region.

Figure 20. Local context region

The local context region contains information based on users' selections from a previous page. The information helps users complete the task as they move from page to page and ensures that they are acting on the appropriate object.

Follow these usage guidelines:

• Usage is optional.
  
• The content orientation is a two-column layout by default.
• For more information, see the Page Layout Usage Guideline, Local Context Region section .