Guidelines for links

Applies to Windows and Windows Phone

An example of what a standard hyperlink control looks like

Description

A hyperlink can take the form of either inline text (XAML and HTML) or a hyperlink button (XAML). In either form, a hyperlink is a piece of text that a user can tap to open a web page in a browser, or to navigate to another page—or to another section within the same page—in the current app.

Example

A screenshot that illustrates the standard hyperlink control

Is this the right control?

Use a hyperlink when hypertext is the right interaction pattern—that is, text that responds when tapped and navigates the user to more information about, or related to, the text that was tapped. The navigation destination is encoded in a Uniform Resource Identifier (URI) in the NavigateUri property (XAML) or the href property (HTML).

A hyperlink that appears inline in dynamic text is best accomplished using a Hyperlink (XAML) or an a element | a object (HTML) so that you’ll benefit from automatic line-breaking within the hyperlink. Use a HyperlinkButton (XAML) when you don’t need line-breaking or if you need to customize the visuals of the hyperlink.

By default, a hyperlink looks and operates like a conventional web hyperlink: text displayed in a distinct color, or an image, that can be tapped to trigger the navigation. But you can customize the visuals that make up a HyperlinkButton (XAML). As the user interacts with it, a hyperlink gives feedback by changing its state and therefore its appearance. Normal, pressed, and disabled are examples of hyperlink states.

As shown below, a button embedded into a sentence is a good opportunity for a rethink. If the button navigates the user to more information about, or related to, the text, then consider a hyperlink instead. If the button triggers another action then consider laying out the button in a different place, and reworking the text and the button’s content.

IncorrectCorrect
Example of incorrect use of a checkbox controlExample of correct use of a checkbox control

In this example, a button is not the correct control to use to display additional content to the user, because it takes up too much space and looks out of place.

In this example, a hyperlink works because it takes the same form as the rest of the text within the sentence.

 

Dos and don'ts

  • Keep individual hyperlinks far enough apart from one another that the user can tap them accurately.
  • Only use the disabled state for a hyperlink if that state is temporary—such as other system processes are occurring—or if the hyperlink can be enabled by user action.
  • Use the default font unless your brand guidelines tell you to use another.
  • Put a tooltip on every link. That way, if the link is occluded by the user's finger, the user can still see what it will do.
  • When navigating to an external site, put the domain name inside the tooltip and style it with a secondary font color. Adding the domain name to the tooltip lets users know that they're about to navigate to an external site so they won't be surprised when they click the link. It's enough to just show the top-level domain.
  • When the user doesn’t care whether he or she has visited a link, style the visited state for that link so that the link looks the same regardless of whether the user has visited that page. The default style for a visited link makes it look different than a link that hasn't been visited. Sometimes the user doesn't care whether a link has been visited. This is usually the case for links that are a part of your app's main navigation.
  • Keep the link text concise. If you want to provide additional information, put it inside the link's tooltip.
  • Don’t use links to perform actions other than navigating.

Related topics

For designers
Guidelines for tooltips
For developers (HTML)
a element | a object (HTML)
For developers (XAML)
Windows.UI.Xaml.Controls Hyperlink class
Windows.UI.Xaml.Controls HyperlinkButton class

 

 

Show:
© 2014 Microsoft