Links can sometimes be used to provide clarity in context with the current user task.
Info Links are linked words or terms that deliver quick clarification via a tooltip. Content should be brief and useful in context.
Help Links open a help topic or new page with more content than would fit in a tooltip. They provide answers to more complex questions. For example, the linked phrase “How do I create an invoice?” opens up a help topic that explains how to create an invoice, and the differences between the transaction types. Or the linked phrase “Help me choose” next to product options could link to a marketing page that explains all of the product SKUs, prices and features so the user has enough information to buy the correct product.
When to Use
Use Info Links when minimal clarification is needed. They are ideal for clarifying an action, quickly defining a term, or giving a little bit of context. Note: Use this only when extra explanation is critical. These links replace the old question mark icon. They provide more context with less clutter.
Info Links can be applied to text in a sentence, a field label, or plain text on the page.
Use Help Links when in-depth information is helpful to the user. An example: During QB setup, we require information from a specific government document, and the link sends the user to a help topic describing why the user needs a certain document and where to find it.
Note: These patterns should not be used together. For instance, a Help Link should not appear inside of a Info Link’s tooltip.
Appearance & Behavior
These are based on the standard link pattern, with slight 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.
These are standard links that open a Help Popout, like below:
- Link capitalization is sentence case
- Use common language to inform the customer what the link leads to
- Don’t use phrases such as “click here” without providing any context
- Don’t do this: “Click here to learn about QuickBooks Mobile”
- Do this: ”You can access QuickBooks without an app by using the browser on your device! Please see QuickBooks Mobile for more information on supported browsers for mobile devices” or ”Still have questions about QuickBooks Mobile? Learn more”