Links Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.0.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 06-May-2010

FusionFX products use links to drill down for more information; to navigate to related pages, components, or windows; and to perform actions with specific components.

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
Breadcrumbs All Location orientation through Breadcrumb links.
PanelBox All Links highlighted within a container.
Page Layout All Links to focused content, and placement of Global links.
Help Framework All Drill down links in Help text.
Message Framework Message List Dialog Links to inline messages in Message Dialogs.
Table Interaction Links in Tables Links in Tables.
Tabs Level 4 Tab Bar Fourth level tabs.
Train All Drill down to tasks
Page Stamps All Use of stamps in branding bar and overall Global layer.

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:commandLink Link component for actions.
af:goLink Link component for external page navigation.
af:commandImageLink Link component that includes icons.
af:commandNavigationItem Creates a link inside a navigation pane.
af:navigationPane Container for global links.

General Principles Bookmark this Heading Return to Top

Purpose:

A link may:

  • Drill down to more information
  • Navigate to pages with core information or tasks, or to pages at a higher level in the application hierarchy.
  • Navigate to specific components from message dialogs.
  • Navigate to external windows or pages from Help dialogs.
  • Perform a specific action associated with a FusionFX component.
  • Launch an external application.

Usage:

  • A combination of link types can be used within a page.
  • Drill down link text should always consist of an object name, a navigation target, or an action.
  • Ensure that the purpose of each link can be determined from the link text. Never use terms such as "Click Here" or "Click Link" which do not indicate why a user should do so.
  • Do not embed links inside of text.
    • Links could become altered when the text is translated, since word order frequently changes during the translation process.
    • Screen reader users will often read all the links on a page upon first entry. Embedding links in text may not provide these users with the necessary context to understand the functions of the links.
  • Avoid using links where the linked text is only one character long, as this provides too small a click target for the user. When it is unavoidable to have a one-character link—for instance, when the link may be a number like "1"—add non-breaking spaces (the " " character) at the beginning and end of the linked text to provide a larger target area.
  • Links may perform similar functions to buttons. In order to maintain cross-application consistency, FusionFX products should observe these distinctions:
    • Buttons should be used to perform a task, or navigate a user to a dialog window or page where the task can be performed.
    • A link may consist of a specific object name, such as "Bob Smith", whereas button labels should always be generic terms, such as "Submit" or "Create Invoice".
    • Except for specific cases, such as Global links opening related content, links should not be used to display dialog boxes.
  • Links for high-frequency actions should be assigned an access key:
    • When a link is associated with an access key, the letter used for that access key is underlined in the link text.
    • Product teams should always select an access key that appears in the link text. If the link does not contain the letter used for the access key, users have no way to know that the access key is available.

Types of Links Bookmark this Heading Return to Top

There are three principal types of links:

Drill Down Links Bookmark this Heading Return to Top

Purpose:

Drill down links are used to obtain more information on a specific item or to edit that item's details.

Usage:

  • Drill down links typically consist of object names.
  • The page or component containing drill down links must provide context for the link, so users understand its purpose. For example, in a section titled "View Order", a table with a column header "Order Number" provides context for the object link "12345-678" within the column. When clicked, the drill down link displays purchase order details (such as order date, customer name, and so on).
  • When a link is shown in a form layout, it is recommended that product teams place a text label before the link for identification. For example, when an attachment can be accessed from a link, a label should preface the link, such as "Attachment".
  • Drill down links are commonly used in:
    • Tables, to display table object details.
    • Form Layout, to display form object details.
    • A catalog type page, where lists of links drill down to catalog item details.
    • Help, where links point to more extensive information than can be shown in a page or dialog window. In this case, links may navigate to external windows.

Drill Down links in the cells of a particular column in a table.

Drill Down Links in a Table

Navigation Links Bookmark this Heading Return to Top

There are three subtypes of navigation links:

  • Standard links used in FusionFX components
  • Product-specific navigation links
  • Global Links

Standard Links in FusionFX Components Bookmark this Heading Return to Top

Purpose:

Links are used in several FusionFX components to perform functions. Additional link usage is specified in detail in the individual component guidelines.

Usage:

  • Breadcrumbs links are used to navigate higher in the application hierarchy.
  • Within a Message Dialog, a link may be used to navigate to inline messaging within a page. See the Message Framework guideline for more details.
  • Within a guided process, a link may be used to navigate to a specific step. See the Train guideline for more details.
  • Fourth level tabs navigate to content areas within an application. See the Tabs guideline for more details.

Example of links used in a Breadcrumbs locator element.

Links in Breadcrumbs

Showing some Field Name links within a message dialog.

Links in Message Dialog

Product-Specific Navigation Links Bookmark this Heading Return to Top

Purpose:

Product teams may use product-specific navigation links as needed in the cases listed below.

Usage:

  • Links inside Panel Boxes navigate to ancillary content, such as related applications or shortcuts.
  • Links inside a context region drill down to details related to the current page. See the Page Layout guideline.
  • Links inside an Auxiliary Content Region navigate to pages with related content. The content may consist of peer pages or sequential pages. See the Page Layout guideline for details.
  • Anchor links may be used to navigate within a long, single page. This allows users to jump to specific content and avoid scrolling. Anchor links are recommended when the contents of a long page can be grouped into sections of content and the page length is equivalent to two screens of content.

Links within an auxiliary content region beneath a page header.

Link in an Auxiliary Content Region

Note: Links that navigate to other Web pages using the af:goLink ADF component are hidden in printable pages. See Printable Page Elements in the Printable Page guideline for details.

Global Links Bookmark this Heading Return to Top

Purpose:

Global links provide consistent access to content that is generally applicable on pages throughout an application.

Description:

  • The pages displayed using Global links are typically outside the navigational hierarchy or structure of the application. Examples include: Sign In, Preferences, Favorites, and Help.
  • If the number of characters in the entire set of global links exceeds the horizontal space allotted to the component, the global links will wrap.
  • A global link shares all elements and most default behaviors of ordinary links. Exceptions are:
    • Global link text cannot be truncated.
    • Global links do not have any "visited" states, but have an additional "selected" state for the currently selected link in a global page.
  • Global links are placed in either the branding bar or the global control panel of the Global layer. See Global Control Panel in the Page Layout guideline for placement details.
    • Task-related global links should be placed in the global control panel in the Global layer.
  • Global links and the Login stamp share the same line in the branding bar. If the number of global links requires them to wrap, the wrapped global links are placed end-aligned on the line below. See User Stamps in the Page Stamps guideline for information on Login Stamps.

The elements of Global Links on a page are called out: the branding bar region, the global links, and optional links that may be included in the global links (in this case,'Reports', 'Administration, and 'Preferences'), and the login stamp.

Global Links and Login Stamp

Showing the situation in which the number of global links in a branding bar require some links to wrap to the next line. The wrapped link is displayed end-aligned in the global links.

Wrapped Global Links in Branding Bar

Usage:

  • Global links should be used only to display information that remains applicable throughout almost all of an application.
  • It is recommended for products to feature two global links—Help and Sign In (or Sign Out)—at a minimum.
  • Global links typically display company-specific Global Pages, but may also be used to open another browser window or a dialog box.
  • A global link may be implemented as an inline selector to group several similar or related links together.
Note: By default, the ADF component af:navigationPane hint="buttons" does not support inline selectors; however, developers can achieve the functionality by using multiple af:navigationPane components in an af:panelGroupLayout component.
 
  • When building a global page, product teams should disable the link that launches that page.
  • To avoid page clutter, neither the branding bar nor the global control panel should contain more than seven global links each.
    • If the branding bar could potentially contain more than seven global links, consider moving some of the links into the global control panel.
  • Generally, if more than seven global links appear to be needed on any layer, product teams should either:
    • Configure one or more global links as inline selectors, or
    • Re-evaluate the product's information hierarchy to see where tabs may be used instead.
  • Where possible, global link text should be in noun form, though some verb forms are acceptable, such as Sign In/Sign Out. See the Language in UI guideline for more information.
  • Global links should not be used in dialog windows.
  • Global links should not navigate to an anchor within the current page, or initiate a PPR event on the same page.
  • Separators should not appear between global links in the branding bar.

A page in which application-specific Global Links are displayed in the Global Control Panel of a Global Layer.

Global Links in Global Control Panel of Global Layer

Global Links on the page, with one link's inline selector clicked to show the link's dropdown.

Global Links with an Inline Selector

Common Global Links Bookmark this Heading Return to Top

Commonly used global links are listed below with their recommended order from start to end.

  • The order of global links listed below applies to placement in the branding bar of the Global layer. Product teams may provide additional task-related global links or menus start-aligned in the global control panel of the Global layer.
    • When task-related global links or menus are used, the "Home" link should be the first link in the global control panel, instead of in the branding bar.
    • When a product has no more than two task-related global links or menus, these may be placed after the "Home" link in the branding bar instead of in the global control panel.
  • Product teams may use different terminology than recommended for similar functions if it would make sense to the user.
Global link Notes
Home Optional link. Returns to the product home page or user's dashboard.
<Application-specific Links> Up to two optional task-related links or menus when links within the global control panel are not being used. When there are more than two task-related links or menus, it is recommended that product teams place task-related global links or menus start-aligned in the global control panel.
Administration Optional link or menu. Navigates to administrator preferences or functions that will affect all users. Appears only when user has administrator privileges.
Preferences Optional link or menu. Navigates to personal preferences or functions that will affect only the current user.
Help Mandatory link or menu. Navigates to related Help content. See the Help guideline.
Sign In or Sign Out Mandatory link. "Sign In" authenticates the user. "Sign Out" de-authenticates the user.
<Login Stamp> Optional text. Indicates username of currently-authenticated user.

Action Links Bookmark this Heading Return to Top

Purpose:

Action links perform specific actions that are handled by browsers or are built into a FusionFX component. Note that an action link does not take the user to a task page but actually performs an action.

Usage:

Only the following types of action links should be used:

  • Sign In/Sign Out Link—Signs the user into or out of the application.
  • Attachments Link—Enables users to view an attachment in an external application or window.
  • Media Link—Enables users to view a media file in the appropriate media viewer. See the Media Player guideline.
  • Mailto Link—Opens a mail composer window from the user's e-mail helper application and lists a recipient's e-mail address in the recipient field.
    • If an object has both a link and a Mailto link within the same page, then the links must be explicitly defined or given context to avoid confusion. For example, if a page has a "Bob Smith" link to display information about him, but it is also necessary to have a Mailto link to Bob Smith, then the Mailto Link must indicate its function, such as "Contact Bob Smith", so it is distinct from the information link.