Overview

The Link component is crafted to navigate marketers to different locations within our product or to external websites. It plays a crucial role in creating a seamless, interconnected experience, particularly for marketers who often engage in building, iterating, and analyzing content directly within Iterable .

Design

Structure

1. Link: Provides context to the link and where it leads
2. New tab icon (Open16): if the link opens up a new tab, regardless if it is an external or internal location, an icon should be used. This helps provide affordance to the marketer that by clicking the link, they’ll be taken to a new tab.

 

Sizes

• Body2 (default): the standard size of links that matches most of the content throughout the Iterable platform. Icon size is 14x14px to match font.
• Caption: used in situations like help text below an input, or when the link is a part or near other caption-sized text. Icon size is 12x12px to match font.
• Body 1 (use sparingly): this is commonly seen in empty state messages or places where the surrounding text uses the body1 style. Icon is 16×16px to match font height.

 

Variants

• Standalone: Positioned independently, outside of text blocks, for clear navigation or calls to action.
• New tab: Signals that the link will create a new tab that may lead to either an internal or external site, accompanied by an icon to indicate this
• Inline (use sparingly): Embedded within sentences or paragraphs to link related content.

 

States

• Default: The initial appearance of the link.
• Hover: Style changes when the mouse hovers over the link to indicate interactivity.
• Active: Shows when the link is being clicked.
• Focused: When the link has been focused using the keyboard.

Styles

 

• Default: The standard appearance of the link. This should be used in most cases for links as it provides a clear visual indicator that the string of text is a link.
• Monochrome: This should be used sparingly, when the link is secondary or tertiary to the resource—for example, a messaging insights link on the Campaign index.
• Inherited: special circumstance, when the link is used inside of a container with a colored background—it should inherit the color of the surrounding text. For example, a Banner.

Guidelines

Use cases

• Navigating to related content: Facilitate marketers in connecting campaigns to pre-created lists or related pages—like Template revision history.
• Support documentation: Links to a related support document within support.iterable.com
• External resources: Directs marketers to external articles, research, or tools relevant to marketing strategies.
• Downloading assets: Enables marketers to download campaign assets or reports.

 

 

 

When to open a new tab

New tab

• Accessing External Resources: If the link directs marketers to external websites or resources that are not part of the Iterable platform. This allows users to view additional information without leaving their current workflow in Iterable.
• Preserving User Progress: In scenarios where marketers are engaged in tasks that might not be saved automatically, like form filling or creating a campaign. Opening a new tab for additional information or actions ensures that their progress is not lost.
• Reference Material: When the link points to reference materials, documentation, or help guides that marketers might want to view alongside their current task.

 

Same tab

• Navigating Internally: For links that direct marketers to another part of the Iterable platform. Keeping navigation in the same tab promotes a seamless experience and prevents the accumulation of unnecessary open tabs, which can be confusing and overwhelming.
• Streamlined Workflows: In cases where you want to ensure a linear workflow or guide marketers through a specific process within Iterable. Opening a new tab could disrupt the flow and distract users from the task at hand.
• Frequent, Routine Actions: For actions that are part of the marketers' regular workflow within Iterable. Constantly opening new tabs for these actions can lead to a cluttered browser and a disjointed experience.

 

 

When to use a Link vs Button

Use a button when

• Initiating an Action: If the element triggers an action such as submitting a form, opening a modal, or any other interaction that doesn't navigate to a new page or URL, use a button.
• Form Submissions: In the context of submitting forms, buttons are the standard, facilitating operations like saving settings, sending messages, etc.
• Interactive Commands: For elements that perform specific commands within the application, like opening a dropdown, toggling settings, or any other non-navigation action.

 

Use a link when

• Navigating to a Different Page or View: If the primary purpose is to take the marketer to a new page within Iterable or to an external site, opt for a link.
• Directing to External Resources: Links are the go-to for directing marketers to external websites, articles, or tools that are not part of the core application UI but are relevant to their tasks or interests.
• Referencing Internal Paths: For guiding marketers to different sections within Iterable, such as help documents, campaign details, or analytics reports, links ensure a smooth transition.

 

Content

• Concise and descriptive: Keep link text brief but informative about the link's destination or action.
• Action-oriented: Begin with action verbs when suitable, especially for actions like downloading or accessing tools.

 

Accessibility

• Ensure links are focusable with a visible focus state for keyboard navigation.
• Apply `aria-label` for links lacking descriptive text or needing additional context.
• For external links, use `rel="noopener"` to enhance security.
• Maintain appropriate contrast ratios for text and background colors to ensure readability for all users, including those with visual impairments.

Health