When to Use links?

02 Apr.,2024

 

If you want to learn more, please visit our website .

4 min. read

Learn the difference between a button and a link, when to use which, what are their states and style, and what are the differences between calls to action.

There is an old adage from the 90s and the early internet design era: "Buttons are for actions and links are to go somewhere."

While that is a helpful starting point, these decisions are not always that simple.

Before we get started, let's define what we have to work with.

  • Links - text that can be clicked or tapped
  • Buttons - a boxed area that can be clicked or tapped

Buttons can be styled in many different ways, but it is important to realize there is an area around the text of the button that can be clicked, not just the text itself.

Buttons and links from the Bootstrap Default Theme, a responsive web framework.

When to use which?

In order to decide on which element to use, you need to think of the screen action hierarchy.

First, you want to think of the primary task you want the user to accomplish on each screen. That should be a button. Actions that are most important should be more visible. That one action we call the Primary Call to Action. There should only be one per screen.

Secondary actions can also be buttons, but you shouldn't have tertiary actions as buttons. Items that are low effort or not as important should be links.

Links should never be used to change the state of an application. This means that clicking on a link should not add, change, or delete any data on the screen, So, a delete action should never be a link, nor should a save action.

The bright orange button is used for the primary call to action, while the transparent button is the secondary action and lower in the visual hierarchy.

Let's look at a more complex example.

Starting from the top, there are 2 links that both say "Details." When you click on them, a pop-up opens to tell you more about Free Shipping. Now is that an action or is that going somewhere? Well, with our framework, it doesn't matter as much. It is more about the importance of the action. Letting people know the details about free shipping is a tertiary action and of lower importance than say, buy.

The next two items are both links as well. Clicking on the company name takes you to a new page, which is the Seller's profile. The second link, Fulfilled by Amazon, brings up another pop-up.

The next item down is a link. Clicking on it opens a pop-up telling the person about the benefits of Amazon Prime.

Finally, after 5 links of extra information, we get to the button. That button is a nice golden color, it has an icon and clear text. You know what is going to happen when you click on that button. It stands out from all of the other items on the page. It is the Primary Call to Action.

You'll notice below that button a few more links, and then two more buttons. However, notice that both buttons are a different color, therefore secondary to the primary call to action. Also, one of the buttons is smaller, so it is of even less importance.

The Share link at the top also opens a pop-up.

On the desktop, buttons usually have 4 states: On (default, not clicked), Hover (or rollover), Clicked/Selected, and Disabled.

On the desktop, links usually have 4 states: On (default, not clicked), Hover (or rollover), Visited, and Disabled.

On mobile, there are just 3 states for buttons: On (default), Tapped/Selected, and Disabled.

On mobile, there are just 3 states for links: On (default), Visited, and Disabled.

Buttons can be a box with text in the middle, or something more creative:

We've all seen links that say "click here" or "read more" and buttons that say "Learn More." Keep in mind this type of writing is not the best practice or good for your users. There are 3 reasons for this:

  1. It's a generic phrase that doesn't give context to what you are about to interact with.
  2. For accessibility, it leaves blind people lost with what they are clicking on.
  3. Finally, it can hurt the SEO of your website.

You always want to be as transparent as possible with your text on buttons and links. On buttons, it also pays to be succinct. For example, "Add to Cart" is an excellent phrase for a button. What about "Send Data"? Well, where is the data being sent? How is it being sent? A better wording would be, "Send Data via Email."

Finally, we have menus. These are a collection of buttons or links for the purpose of having a primary set of actions to navigate a website or app.

Now, look at the menu above from Google Drive. Are those buttons or links? So it is actually one button and a list of links. The links have icons to the left of the text. Like buttons, links can be styled as well.

However, keep in mind that a menu that uses just icons has a strong tendency to decrease in understanding and usability for users. It is best practice to always use text with icons if you are going to use icons.

Summary

We learned about using buttons versus links. Also, how the style can vary greatly. The interaction you intend and the hierarchy of that interaction on the screen can help you choose when to use which type of element.

Additional resources

Which type of link should you use?

Traditional user interface designers who code web pages from scratch tend to advise using text links for linking to other pages and reserve buttons, which require more coding, only for actions. (See A Complete Guide to Links and Buttons and When to Use a Button or Link.) With a do-it-yourself website design platform like Squarespace, it’s just as easy to create button links as text links, so the lines blur, in my opinion, about the traditional rules about using links. Here are the guidelines I go by when deciding which type of link to use.

When to use a text link

Use a text link to lead website visitors to extra related information that provides more background, context, or details about the subject. The information you link to could be on another page of your website (an “internal” link) or on someone else’s website (an “external” link).

Examples of text links to pages on your website

  • Link to a Services page

  • Link to a photo gallery

  • Link to the About page from a summary on the Home page

  • Link to a blog post

  • Link to a product page or online store

  • Link to the Contact page

  • Link to a hidden page that contains more details, such as policies or a form

Examples of text links to pages on an external website

  • Link to an online article or resource

  • Link to a purchasing site

  • Link to a social media site

  • Link to a contributor’s website as a credit or attribution

  • Link to a professional organization, club, or group

When to use a button link

Use a button link as a bold call to action that you don’t want people to miss. A button is a design element that has a distinctive color and shape that’s easily seen, but also coordinates with the colors of your website. The text on the button (the “label”) is usually a short, command-style word or phrase, such as “Read More,” “Learn More,” “Contact Me,” “Get Started,” “Shop Now.”

I prefer to use buttons for links to pages on the same website. Because they take up space on the website page, I want buttons to promote an action that keeps people on the website rather than encouraging them to go to another website.

Examples of button links to pages on your website

A button link can be used in the same situations that a text link would be useful, but I tend to use it most often for these types of links.

  • Link to a Services page

  • Link to a product page or online store

  • Link to the Contact page

When to use an image link

Image links are used as an additional way to link to the information represented by the image. When a website visitor clicks or taps the image, they see the new page. I usually supplement image links with a button or text link because I’ve discovered it’s not always obvious to website visitors that an image can be a link that leads somewhere else.

Examples of image links to pages on your website

For most websites I design, image links lead to information on the same website, such as:

  • Specific services pages

  • The About page

  • A category of products for sale

  • A photo gallery

  • A blog post

Examples of image links to pages on an external website

Images that link to an external website are often logo images that represent the company, organization, or educational institution being linked to. Here are some reasons you might add an image that links to an external website:

  • Link to a description of a professional honor, award, or certification

  • Link to organizations with whom you have professional affiliations

  • Link to educational institutions from which you received degrees or training

  • Link to client websites

Pro tips

Here are a few guidelines I’ve developed and use with my clients’ websites.

Open external links in a new window

When you link to an external website, I recommend setting the option to open the link in a new window so your website page stays open in the original browser tab, which helps visitors find their way back to your website easily.

Make an external website name readable

When you link to a website name, make the text short and readable. Use either the company name or a shortened version of the URL, such as Kerry A. Thompson, KerryAThompson.com, or kerryathompson.com. Use the full URL (with http:// or https://) only for the actual link you’re setting.

Avoid styling text as underlined

Avoid styling text as underlined. Squarespace will automatically style text links on your website. Underlined text that isn’t an active link will confuse readers.

Check your links periodically

Occasionally check the links on your website to make sure they still work correctly. Pages on your website or external websites can be renamed or removed over time, resulting in a 404 Page Not Found error.

Specialized links

Squarespace and other builders offer other types of links that are used for special purposes.

Email links

Email links when clicked or tapped open the reader’s default mail application with the To: field filled in.

Phone links

Phone links when clicked or tapped open the dialer on a smartphone or mobile device to call the number.

File

You can upload a file, usually a PDF document, to a file link. When people click or tap the link, the file opens in the browser.

Links to specific blog posts or products

You can link to blog posts by typing the URL of your blog page and the blog post link, omitting your domain name (such as /blog/whats-the-purpose-of-your-website). You can also link to products if you have set up a store.

Links to a specific part of a page

A link to a specific part of a page on your website is known as an anchor link.

You can add anchor links in Squarespace if you have a Business plan or higher by using a Code Block. Click here for a Help article with instructions.

Links are a convenient way to direct people to other parts of your website to help them find the information they need to make a decision about hiring you. Links are also helpful for highlighting your credentials and building credibility by referencing sources of information outside your website. Follow the guidelines here to use links judiciously as additional paths to information for your website visitors.

When to Use links?

The three types of website links and how to use them — Kerry A. Thompson Website Design

You can find more information on our web, so please take a look.

For more information, please visit China 3 Way Ball Valve Manufacturer.