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.
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.
Bookmark
