Links and calls to action

Last updated January 11, 2021

How to add meaningful links and calls to action to content, and make them clear and accessible.

Provide links in context

Make sure all links are provided in context, at the point in the content at which they’re useful. Don’t put all the links together at the bottom of the page.

Don’t use unsorted lists of related links to point users to content you think they might be interested in. These are sometimes known as “further reading” or “more information”.  A better approach is to consider building that content into the page you are on.

Writing link text

When writing a link, make it descriptive and front-load it with relevant terms instead of using something generic like ‘click here’ or ‘more’. Generic links do not make sense out of context or tell users where a link will take them.

Think about the size of the link users need to select. For users with reduced motor skills, a one word link could be very difficult to select.

Links that lead to an action

If your link takes the user to a page where they can start a task, start your link with a verb.

  • For example: ‘Login to MyUW ’, ‘Update your profile’, or ‘Report an issue’

Links that lead to information (rather than action)

Use the text about that information as the link. Consider using the title of the page the link goes to, as your link text.

  • For example: ‘accessibility testing’, ‘Wisconsin Union’, or ‘Dean of Students Office’

Multiple links

Do not use the same link text to link to different places.

Links help people scan content, so do not swamp them with too many or link to the same tool or webpage throughout your page.

Don’t place full URLs in your copy

Do this: Read this news article

Don’t do this: Read this news article: http://www.news.com

Don’t include preceding articles (a, an, the, our)

Do this: Read the library guide for details

Don’t do this:  Read the library guide for details

Opening links in new windows or new tabs

Setting a link to open in a new window or tab changes the web browsing experience for users and can have disorienting effects for users with disabilities.

In most cases, links should open in the same window, but there are some exceptions.

"Read More" and "Click Here"

Generic and non-descriptive links like “read more” and “click here” do not help the user make a decision, and can be confusing, so they should be avoided.

They also do not work for people using screen readers, who often scan through lists of links to navigate a page. It’s important the links are descriptive so they make sense in isolation.

Associate the action in context to what the user will be doing.

Do this

View the syllabus

Canvas video tutorial

Download the time-off request form

Required reading: 18th Century Architecture

Don’t do this

Click here to read the syllabus

Learn more about Canvas Video tutorials

Use this link to download the time-off request form

Read this required article about 18th Century Architecture: https//www.reallylongurl.com/architechture-cen-18-default/145aspx

Predictability

Links and your calls to action should be predictable, and should open in the current window. That means the user should have a good idea what will happen next, just by reading the link text.

Do not underline text

Underlined text = link. Using underline for emphasis is misleading and should be avoided.

Buttons and links

Button text should also be clear, predictable, and in most cases should contain actions. Use descriptive text that uses a call to action and wording unique to the page. The button should help the user understand the action they are about to take.

Microcopy

A type of call to action, microcopy is small bits of copy that help your users take action. Your microcopy should be:

  • Extremely concise and compact
  • In plain language, not technical jargon, even conversational
  • Actionable with buttons only including the action the user will take by clicking

This is an accordion element with a series of buttons that open and close related content panels.

Examples

Airbnb landing page examples of microcopy – “Places to stay, Monthly stays, Experiences, Add dates, Add guests, Explore”

Airbnb landing page examples - “Stays, Experiences, Adventures, Become a Host, Help, Sign in, Log In”

Etsy landing page microcopy example –  “Sign in button call to action, Gifts, Shop Back to School, Everyday finds.”

Image: Etsy landing page example -  “Sign-In” button call to action

Microcopy should also reduce worries

    • If there could be consequences, (example: getting spam after providing an email address) reassure your users with copy that confirms the worst wont happen.
    • If an action is required, explain why, before the action needs to be taken so that users with screen readers are aware before it happens.