A hypertext link (using the "a href" tag in html) may be used in HTML applications to act like a button. The link may be:
a Drill Down Link for more information
a Navigation Link integral to BLAF components that takes user to core information/content/tasks, or Navigation Links that take the user to a higher level in the application hierarchy
an Action Link that performs a specific action. The action performed by this special type of link is inherent to HTML or built-in to a BLAF component.
In general, links differ in usage when compared to Action/Navigation Buttons in that a link is typically associated with drilling down to detailed information about an object/element,
while a button is typically associated with performing a task or navigating the user to a task.
In addition, a link may be assigned with a specific object name, whereas a button is usually assigned with a generic action/navigation descriptor.
For example, "Bob Smith" is a specific object name and may be shown as a link, while "Submit" is a generic action term and should be represented as a button.
The above principles should be observed in determining the appropriate use of a button versus a link within a given page or portion of a page, so that there is usage consistency across the pages within an application.
Link Types and Interaction
Below describes the types of buttons that are seen as links:
Drill Down Links - links used to drill down for more information
on a specific item.
A drill down link is commonly seen in Tables,
to allow the user to drill down for more information regarding
an object or item in the table.
Content containers can have drill down links of specific categories or
detailed information of objects. For example, a news subject
title link in the container can drill down to the entire article.
See Content Containers
for more details.
A Browse Menu usually contains lists of drill
down links. These links may be categories of information and/or
specific catalog items that drill down to details of a particular
item.
A drill down link may be seen within content of the page as
well. For example, it can be within the Instruction
Text or inline Tip to drill
down to further information.
Labeled Data, including Contextual Information,
can have drill down links to details regarding specific data.
Navigation Links
- two different types of navigation links exist. The first type is navigation link that takes the user to more information/content/task, while the second type navigates the user within a UI flow.
Navigation to More Information/Content/Tasks in Components Link usage within specific BLAF components are used to navigate the user to more information,
more content or more tasks. The usage of these links are specified in detail
within the individual component guidelines.
The text label for a global buttons is a link, and navigates the user
to a global content section. See Button
(Global) for details.
In the breadcrumb locator element, links are used to navigate the user
higher in the application hierarchy. See Locator
Element: Breadcrumbs guideline for details.
In the tab/navigation's side navigation (third level), a link is used
to navigate the user to more content. See Tabs/Navigation
guideline for details.
Within a message box, a link may be used to navigate a user to inline
messaging within a page. See Message
Box guideline for more details.
Related Links, are a categoy
of navigation links that take the user to related information,
tasks or objects, etc. given the task at hand. For example;
a content container can have Shortcuts links that navigate
the user to related tasks or related objects within the application.
See the Content Containers
guideline and Related Links
guideline for more details.
In a Task/Property Menu, a list of links are used to navigate
the user to a task or process. See Tabs/Navigation
Guideline for more details
Other components that use a link to navigate the user to more information:
Return to "X" Link
Returns the user back in the UI flow to a certain location
This link is commonly seen as "Return to
'X'" where 'X' is a predesignated page that is higher in the hierarchy of
content. (A Return to "X" link is typically reflectd in one of the breadcrumbs at the top of the page.)
For instance, if a user is within a non-linear
transaction, but may be several pages away from where the transaction originated,
a list of projects, say, there may be a "Return to Project List" link on
each subsequent page to aid the user in quickly navigating back to the list.
Action Links
- special links that perform specific actions that are handled by the HTML or built-in to a BLAF component. Note that an action link does not navigate a user to a task page but actually performs an action.
Currently, only the following types of task links are used:
Mailto Link
This link automatically opens a mail composer window from the user's helper email application and lists a recipient's email address in the recipient field.
"Select All/Select None" Links
Found within tables and HGrids that have multiple selection
capability, "Select All/Select None" allows the user to select
or deselect all objects within the table. This feature is built-in
to the table and HGrid components. See the Table
and HGrid Guidelines for more details.
Shuttle Control Links
These links are used for transferring or removing items in a
shuttle. They are redundant with the action icons. See the Shuttle
Guideline for more details.
Using Different Link Types Within a Page
A combination of link types can be used within a page.
In general, links should be given proper context or descriptive information specific to the destination content/task, so that the user is clear in terms of their usage.
For this reason, nondescriptive terms such as "Click Here" or "Click Link" should not be used as links.
Below is a list of recommendations on how different types of links can be treated:
Drill Down Links
Provide object name, description, or associated category information that conveys context to the link.
For example, in a section titled "View Order", a table with a column header "Order Number" provides context to the object link "12345-678"
within the column as a drill down link that will display purchase order details (i.e., order date, customer name, etc.)
Navigation Links to More Information/Content/Tasks
Provide name of task or process page name within link.
For example, a Breadcrumb link named "Accounts" may navigate to a process page to handle account information; a Shortcut link named "Shipment Information"
may provide shipping information related a given merchandise, and a "Return to Accounts" link may navigate the user back to the "Accounts" process page.
Action Links
With regards to using Mailto Links in particular, if an object has both a Drill Down Link and a Mailto Link within the same page,
then the links must be explicitly defined or given context to avoid confusion in usage. For example, if "Bob Smith" is a drill down link to access the person's information,
then the Mailto Link for this same person should be explicitly stated (e.g. bob.smith@someaddress.com) and should not be "Bob Smith" again.
Visual Specifications
A link button uses master CSS file to determine
the color. See Text Standards for the exact
definitions of the link, alink, and vlink values.
Drill Down Link
Example of a Drill Down Link Used in a Table
Link in a Component for Navigation
Example of a Link Used in Locator Element: Next/Previous
Return to "X" Link
Action Links
Example of Action Links and Drill Down Links Used Within a Table
Example of Shuttle Control Links as Action Links
Example of a Link Used in Side Navigation (Level 3) of Tab/Navigation Component
Example of a Link Used in Locator Element: Breadcrumbs
Example of a Link Used in Message Box
Example of a Various Link Types Used in Content Containers
