Buttons and links are essential components of any website design. They are there to prompt web visitors to act, and so they deserve proper consideration. I say ‘proper’ because they are often misused.
In this article, I explore the function and purpose of buttons and links, when they should be used, and their impact on the overall user experience (UX).
Essentially, underlined links, CTA links and buttons communicate very different things, so let’s explore what each means.
What is a link?
Links are interactive elements that usually link to another web page or document. They are used for navigation and actions that do not affect the website. For example, to navigate to another page, open a pop-up containing more information or take you to a different section on the same webpage.
What is a button?
Buttons are different to links because they perform an action that affects the website’s front or back-end. For example, sign-up and purchase actions would all be buttons.
To remember the difference between button and link usage, the UX movement came up with this simple rule:
So, in theory, there shouldn’t be any confusion, but there is.
The distinction between links and buttons has become somewhat blurry over the last 10 years as websites provide more and more features. You can find links used for commands and buttons used for navigations.
Call to action links (that look like buttons)
Calls to actions (CTAs) are often styled to look like buttons so they stand out but there’s no specific CTA element. They are just regular links styled as buttons. In a way they are “false buttons”.
If these are styled the same as the buttons that perform an action, it can be confusing for users, especially if both elements appear on the same page:
Not only does this not correctly differentiate a button from a link, but too many buttons can result in decision fatigue and cause users to leave your site.
Ideally, call to action links should be designed to stand out without looking the same as the buttons on a website.
The key is to design links and buttons in a consistent way that clearly differentiates between them and doesn’t obscure their behaviour.
Styling links and buttons
When styling links and buttons, we should be guided by most users’ expectations, which are that:
- Underlined text takes you somewhere
- Text in a rectangle or rounded rectangle does something
We should provide a visual cue to suggest click-ability for all types of links. For example, by featuring underlined text in a different colour to the body text.
As well as the visual presentation of a link, the link text plays a very important role. Link text should make sense on its own and set a clear expectation about what will happen once a link is clicked. At all costs, you should avoid using the term ‘click here’.
Buttons should be shapes and styles that users are familiar with, such as rectangles with square or rounded corners. Shadows can also add a sense of depth that helps show the user that the button can be clicked.
Also, buttons should be big enough for users to easily click, especially when on mobile.
Studio Brand Up’s approach
Our website design process starts with discovery and strategy, which helps us identity how your website can best serve the needs of your business and your users. This helps us design a website that is clear and easy to navigate.
For example, with Vale Designs’ website, we designed the links and buttons so the user can easily distinguish between them:
Likewise, with accountancy and finance recruitment specialist MacKenzie King’s website, buttons and links are easy to tell apart and serve a specific purpose:
What can we all do to avoid confusion?
Buttons and links play a massive part in a user journey and ensuring your website adheres to best practice can make that experience a positive one.
To help you along the way, here are a few things to consider:
- Advocate for link and button best practice as part of your website design process.
- Make sure that you have a logical user journey and CTA strategy in place
- Include consistent buttons and links at the design stage (to save any confusion with development)
- Reference the correct usage of buttons and links (along with your preferred shapes and styles) within your brand guidelines
- Keep testing and analysing. User behaviour is constantly changing, which is why it is a good idea to remain curious as to whether your link/button strategy still works
Of course, we’d welcome a discussion with you, and so please do reach out for a conversation about UX design and brand strategy. You may even click on our ‘sign-up’ button below to keep updated with the latest insights and trends!