Quick Links

Last Updated 09.28.03

General Description

Quick Links are used for long pages that have clearly defined sections of contents within a page. The quick link "bar" (group of anchor links) provides an overview to the user of the sections of content within a page, some of this content may be scrolled off the bottom of the page. Each quick link in the quick link "bar" is a link that allows the user to "jump to" a specific section of the page contents quickly. At each section heading, there is a quick way to return to the top.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Lisa Serface
UI Models - all models
Example Products - all products
Related Guidelines - Page Templates, Common Navigation Guideline, Header Component

Interaction and Usage Specifications

General Principles

Every Quick Link in the Quick Links "Bar" has a reciprocal "Return to Top" link at the section title within the content of the page
Quick Links are only placed at the top of an entire page contents above the page title.
A string of links with an icon for each together form a Quick Link "bar."
The arrow icons are clickable (and relate to the anchor text to the right.)
The quick link arrows must have an "alt" tag. See Icon Repository for exact verbiage.
The first header on the page, or page title, should not have a Quick Link.
The first section under the page title does not have quick links. All following sections should have Quick Links.
Maximum Quick Links in Quick Link "Bar":
- In general, the recommended maximimum number of Quick Links in the Quick Link "bar" is 6-7
- If side navigation is also on the page, the recommended maximimum number of Quick Links in the Quick Link "bar" is 5-6.
- Exceeding maximum numbers are not recommended for usability. It is recommended to reassess section division to make sure content is divided appropriately.
Minimally there should be at least 2 Quick Links
A dotted Separator Line should be directly below the Quick Link "bar", and span the width of the page contents. See Separator Line guideline for more details.
Quick Link verbiage does not need to be an exact repeat of section name, but can be shortened if shortened form is still meaningful. On mouse over of the link, a rollover help tip should provide the full section name. (Note: Mouseover of links is only applicable in Internet Explorer at this time.)
A single Quick Link label text can wrap to two lines. The entire Quick Link "bar" does not wrap to multiple lines.

Quick Link Usage In Page Templates

Quick Links are used as navigation to multiple sections of content within a page. Consolidating multiple sections of content into one page allows user to view information readily available in the entire page, and allows user to browse and/or compare information quickly from section to section. However, as more content accumulates within a page, there is increase of complication in usability and performance (e.g. cluttered information, page loading time).

Therefore, whenever possible, multiple sections of an excessively long page should be broken up and distributed into several pages. In general, Quick Links should not be used in page templates that typically have two sections or fewer. In addition, it should not be used in steps or processes in which contents of a particularly long page can be divided among several process/step pages.
Quick Links are commonly used in the following page templates:
- Page with Side Navigation (Object Template option; Process pages)
- Single Long Page With Multiple Sections (Object Template option; Transactional page)
Quick Links is not recommended to user in the following page templates:
- Page with Sub Tabs (Object Template option)
- Step-By-Step Pages (i.e., a Train)
- Home Page

Quick Link Flow

Below is a flow schematic of a quick link selected in the quick link bar, and then the reciprocal return to top link selected. (Note: This does not illustrate other locator elements in this schematic, just quick links.)

Note: When Quicklinks anchor to sections with hide/show on section headers, the user is jumped to section. If that section's hide/show is 'closed' by default, the hide/show for that section does not automatically open. These are 2 independent controls.

Visual Specifications

Visual Principles

In the Quick Link "bar", the Down Arrow icon is positioned left of Section anchor link
With the section header, the Up Arrow icon is left of "Return to Top" link. See Header Component for details regarding headers and lines.
Arrow down icon is 16x16
Arrow up icons is 16x16
Space inbetween arrow icon and link text 3 pixels
Space between each Quick Link in the Quick Link "bar"
- minimum value = 16 pixels
- maximum value = 30 pixels
Quick Link "bar" is left justified with page content (and page title)
The "Return to Top" link and up arrow are justified right on a header line.

Quick Link Layout and Measurements

Quick Link Bar, Separator Line and Return to Top link Relationships

Quick Link Measurements
This is an measurement and layout diagram of some quick links in a quick link bar.

Return to Top Link Measurements
This is an measurement and layout diagram of some quick links in a quick link bar.

Vertical Placement of Quick Links and Other Components

For detailed vertical placement of quick links within a page see Component Order guideline for complete list of the vertical order of all components.

Quick Link Examples

Example of Quick Link "bar" and return to top on an Overview Page Template
This is an example of quick links on an overview page template.

Example of Maximum Number of Quick Links in Quick Link "Bar", with Individual Links Wrapping to 2 Lines
This is an example of the maximum number of quick links that should be in a quick link bar. This also shows the text label of a quick link can wrap to two lines for more horizontal space.