Links, or hyperlinks, give users the ability to navigate to another destination, such as help content. In some designs, we can use links for a call to action.

Overview

Links are why the Internet is so cool. At Intuit, we use links in ways that keep customers moving forward.

Links are distinguished from body text by color. Links are not underlined in their default state, but an underline appears on hover. The weight, size, and case remain the same as the original style of the link. The color changes only after the link has been visited.

Usage

  • Use links for actions where users don’t affect the website’s back- or front-end; users are only clicking and viewing content.
  • Use links to navigate to sections (anchors) on the same page or different pages on the site.
  • Use links to offer less important, or secondary, calls to action. A button will usually be the primary call to action in this case.

In some instances, secondary action buttons, not links, appear with primary action buttons. In marketing pages, these secondary buttons often provide additional offers. On product screens, they offer alternative actions to the ideal path to completion. Find more information about how these calls to action work when you check out the basic buttons component.

Appearance and behavior

Info links

Information links appear like standard links, with a little variation to indicate different behavior. A dotted underline appears by default. On hover, the link turns blue, and a standard dismissible tooltip displays on click as the link turns darker blue.

 

Info links with standard tooltips

Here’s an example of a link that opens a standard tooltip. Check out more guidelines for this link design choice in the tooltips pattern.
 

 

Info links with guidance tooltips

To offer users a bit more help, a link can open a guidance tooltip. Check out more guidelines for this link design in the guidance tooltip pattern.
 

 

Show more/less links

With the show/hide link, users select a link label (typically “Show more” but sometimes just an icon), and the content organized beneath that label slides down from the control. At the same time, the label changes to “Show less.”

Conversely, when users select Show less, the content slides up beneath the control, and the label changes to “Show more.”

Styling

  • Font: AvenirNextforINTUIT, Medium
  • Disabled: #0077c5, 40% opacity
  • Default: #0077c5
  • Hover: #0077c5 plus underline
  • Focus, Active = #055393 plus underline

Content guidelines for links

  • The best structure for a link is a verb followed by a direct object. This structure help users understand where they’re likely to go and encourages them to take action.
    Examples: Add customers, Send invoice, Join our mailing list, Get your report, Update your info, Connect your bank, Discover all our tips and tricks
  • Don’t link from too little. Be direct, but not too brief. We need to make sure the user has a large enough target to select.
  • Don’t link from too much. The ink label has about a 6- to 8-word maximum. Try not to exceed 55 characters.
  • Avoid linking from these terms: Learn more, More, Click here, Here. These are not engaging ways of guiding users to more content. And such copy usually doesn’t give users a clear idea of where they’re going to go with the link.
    Some alternative examples: Explore Online Bill Pay now, Check out the FAQs, Read more about tax changes, Get started now
  • Consider what linked word or phrase a user is most likely to select. Which word appears more often in search engines? What word or phrase would a user type into Google?
  • Labels are sentence case.
  • Be specific and let users know where they’re going after they click the link.
    Examples: Connect your bank, Check out the FAQs, Get help with reconciliation, Set up Online Bill Pay now
  • Recommended voice and tone attributes: straightforward, encouraging, experienced

 

Do
  • Use links to give users access to deeper content that is not linked to from the primary navigation.
  • In product, links usually take users somewhere. Make sure users feel that they’re going somewhere safely and for a good reason.
  • For some marketing pages, we use links for second-level navigation (anchor links) on the on-page navigation within product pages.

 

Don’t
  • Don’t use links to initiate actions where users affect the website’s back-end or front-end, such as adding, changing, or deleting data.
  • Don’t use links with input fields for data.
  • For marketing especially, avoid duplicate or irrelevant content links. These are distracting and misleading for users and might hurt how the page is ranked by search engines.

 

Fixed
  • Color
  • Font Specs: Font face, size, weight
  • States: Disabled, default, hover, active, focused

 

Flexible
  • For some marketing pages, we use secondary buttons and links to draw the user’s attention or emphasize a particular action we might want them to take. In other words, we present links that encourage the user to do something, not just go somewhere.

 

 

 

 

  • Was this Helpful?
  •