Having a well-designed button on your website can make a huge difference, it can be the deciding factor as to whether your customer contacts you or not, buys your product or not or subscribes to your newsletter or not. As you would have noticed, buttons come in all different styles, shapes, colours and more, and with many different purposes. Having a good button design implemented across your website is an important factor of web design and should not be overlooked. Buttons play a huge role in the user interface (UI) and user experience (UX) of a website and, therefore, your web design process must consider the wider implications of your buttons.
This article will delve into the understanding of button design where we will look at:
- The different types of buttons for websites
- Importance of button design
- The effects of button placement
- How to correctly use button text
- The psychology of buttons on your website
- Mobile button design
- What to avoid when designing buttons
- How to test the effectiveness of your button designs
What are the Different Types of Buttons you can have on a Website?
Buttons vary depending on their purpose and each button needs to have a unique outlook and perspective in order to accomplish its desired goal. Whether your button is used for purchasing a product, subscribing to a newsletter, or signing up for a subscription, they need to be specifically designed in order for you to maximise the click-through rate (CTR) of that button.
1. Add-to-Cart Buttons
These buttons, most commonly used on e-commerce websites, have the purpose of enticing the user to add your product to their basket in order to checkout and make a purchase. These buttons are extremely significant being the main gateway between your business and your user. This button will single-handedly turn your user into a customer. Some common synonyms of “add-to-cart” that e-commerce websites may use could be “buy now” or “shop now”.
2. Download Buttons
Similar to the add-to-cart button, download buttons prompt users to receive something, whether it be a programme, a document or something else. Download buttons must look appealing to the user and also trustworthy, trust in websites is a hard thing to accomplish with the amount of fraud and spam across the internet, your website will need to instil trust in order to get users to download your item. In order to reduce user hesitance, it can be good practice to include more information about the download, for instance, the file size, the content of what they are downloading or anything more that can help to provide reassurance.
3. Subscribe Buttons
Ah yes, the famous and one of the most common buttons, subscribe. Nobody likes to spam, to be inundated with heaps of emails from businesses pushing their products and services to you. Your subscribe button can be a make or break for your business. Getting a user to subscribe to your mailing list, to your company, means they are willing and want to hear from you, so you cannot let them down. Similar to the download button, this requires trust and reassurance, your subscribe button needs to be direct, informative and compelling to the user and definitely not forced and intrusive.
4. Read More or Learn More Buttons
These buttons are more light-hearted than the aforementioned and prompt users to simply learn a bit more about something or to read an article. The buttons usually have a higher CTR due to them not having any conditions, such as downloads or purchasing, users are likely to click on these buttons because they know the endpoint will not commit them to anything too serious. However, using learn more or read more can be good prompts to get your users to find out more information.
Although recent studies suggest that it may be better to be more direct with your button copy, therefore instead of simply ‘learn more’ it can be better to include more context about what the user is to learn about ie. “Learn more about…”.
5. Sign Up Buttons
Sign-up buttons are important for both you and the user. These buttons are used when you wish to register a new user or collect sensitive data from a potential customer. Therefore, these buttons must be reassuring and friendly to the user. If you wish to collect a lead and information this button needs to stand out and be engaging in order for your user to be willing to provide their personal information.
6. Share Buttons
These buttons are usually the more harmless buttons out of the rest but require the correct placement and design in order for your users to know exactly what they are to expect when clicking on them. They are used to share a piece of information from your website across different social media platforms, the buttons consist of showing social media icons that users can click to spread your website’s information. Essentially, these buttons help provide free marketing for your website to the connections of your user. These buttons can be extremely beneficial if used and therefore should be present on every website’s newsroom or blog.
7. Contact Buttons
Contact buttons are one of the more harmless button types in comparison to the others but still may require your users to provide information that requires trust. Contact buttons typically follow standard locations on a website, commonly found in the top right corner in the header/navigation and simply prompt users to get in touch. They are light-hearted and provide assistance to users to find out more information, to enquire or to complain.
What is the Importance of Button Design?
If your website’s buttons are failing, and users are not clicking on them, then your website will not be meeting its desired objective. Therefore, understanding the reasons for users not clicking on your website’s call-to-action (CTA) is important and the usual reasons are as follows:
- The button is unclear
- The call-to-action copy is not engaging enough
- The button is not in a usual area
- The colour is not enticing
- Users do not know what the button does
Therefore, it is important to consider the following factors to make sure your buttons convert, and you see a positive CTR on your website.
1. Buttons need to look like buttons
Yes, it sounds obvious, but in many cases, websites try to be overly creative or not creative enough and their buttons do not actually come across as buttons, therefore, are not clicked on. If you think of the typical website call-to-action, it is a button, rectangular or with curved edges and round corners. Buttons also typically have a shadow, change colour when hovered on or have some other effect when clicked.
Although this is mainstream and conventional, that is exactly what you want, you want your users to know exactly where they can click to reach the end goal of your website. If your buttons do not look clickable, then they will not be recognised, and you will not benefit from them. Buttons can easily look like buttons just dependent on shape, effects, colour, and cursor type.
2. Colour psychology
The colour of your website’s button can play an important role in how many users click on it. Dependent on your industry and audience your CTR may increase just by simply having a specific colour for your button, a colour that entices particular users from the industry, more so than others. Different types of button colours will have higher conversion rates, depending on your target audience. Some examples are:
- Dmix case study, after an A/B variation test on a homepage call-to-action Dmix found that when the button was red, as opposed to green, the conversion rate increased by 34%.
- Hubspot A/B test, this test similar to Dmix, also compared green buttons and red buttons. From 2000 visits to the page, the red button received 21% more clicks than the green call-to-action button.
However, it is not just the colour change that increased the CTR but also the audience in question. For example, a study has shown that both women’s and men’s favourite colours are blue, with 35% and 57% retrospective votes. Therefore, choosing a button colour needs to combine your brand, buyer persona and the psychology behind the colour.
3. Button accessibility
Your buttons have to be accessible, no questions asked. By this, we do not mean, that they need to be accessible to be clicked on, we mean that they have to be accessible for all users, which includes people who have disabilities and rely on assistive technologies when browsing websites, such as screen readers. So, how can you make your buttons accessible? Buttons need to have accessible names that users can read and know what they do, therefore, button text such as ‘learn more’ may not be helpful here, especially if your user relies on a screen reader, learn more is too ambiguous, therefore the call-to-action copy should be more specific, ie. “Learn more about…”.
Another factor to ensure your buttons are accessible is to make sure the colour contrast meets the required standards outlined by the Web Content Accessibility Guidelines (WCAG). The background colour of your call-to-action button and the text colour must be of a certain contrasting minimum so that there is no difficulty in reading the text. You can easily test the contrasting of your call-to-actions with free online contrast checkers.
Importantly, and often overlooked, buttons without text, perhaps just an icon, commonly used for mobile menus, search buttons or user accounts, need to be labelled so that screen readers can also read them. You can do this by inserting the “aria-label” attribute and giving the aria-label a description ie. for the mobile menu icon you can set aria-label=”menu”, this way, a screen reader will be able to read what the button is for the user, despite there being no text showing on the frontend.
4. Icon usage
Using icons with buttons, either before or after the button (usually before), can help explain to users what the button does. Common buttons such as user icons, downloads and add-to-carts usually have icons that prompt users to the specific nature of the button. A lot of buttons have icons, or are solely icons, and are internationally recognised which provided an added benefit for your user experience (UX).
5. Size doesn’t always matter
Yes, you do want your buttons to be recognised, but you do not want them to become annoying and inconvenient for the user. Therefore, when sizing your buttons, you can make them stand out with other factors than purely the size. Adding effects on hover, bold colours and effective contrast are all great ways to help your call-to-action stand out without annoying your user.
How can Button Placements Improve your CTR?
The design of your buttons extends beyond just the colour, font and legibility of it but also involves the placement of a button. People have been using websites for years, and over this time a standard for button placements has grown and become an expectation on websites. Some button placements are so natural that users expect there to be a call-to-action in certain areas, if you stray away from this standard, you may lose out on clicks.
1. Above the fold buttons
Typically, in the above-the-fold section of your homepage, the screen that shows at the top without scrolling down, there should be at least 2 buttons, 1 button placed in the navigation, prompting either contact, sign up, download or something similar. The second button is usually amongst the header text on the homepage, the primary button that dictates where your users must navigate too next. This may be a shop page, contact page, sign-up page or something alike.
2. Hierarchy of buttons
In every section of a website, there is usually a standard that is followed, a header, some context, maybe an image, and then it is all rounded off by a button that relates to the section and text that you just read. This button navigates the user to either find out more or move forward with the information they just received. The button placement is usually after the text, it can be centred or placed in the bottom right or bottom left of the section but must follow a certain hierarchy of information flow. Users have come to expect a call-to-action after reading something on a website.
3. Multiple buttons
When you have multiple buttons in the same section of your website, you must be careful in how you place them and how they are designed so as to not confuse the user. Good practice can be to design the buttons, side-by-side, in a contrasting fashion, to show separation but consistency in design. They need to be clearly spaced and labelled in order for the user to select the correct one.
If you are using multiple buttons in the same section, sometimes it can be overwhelming and lead the user to take the wrong route, which can frustrate a potential customer and you may lose the lead or sale. Sometimes following K.I.S.S, Keep It Simple Stupid, is the best way forward.
Converting Button Copy
Button copy is the text that is inside your button, it defines your call-to-action, and it is what should make the user take that next step. This text can be utilised to sway users and make them more inclined to take action. Some examples of how button copy can be used are as follows:
- Personalisation
- Triggers
- Urgency
- Creativity
1. Personalisation
By using personalised copy, you help users finalise their journey in what seems like a natural method to them. Your button text follows as if it were personalised for the user, for example, “Begin My Free Trial” answers the question for the visitor, helping them finalise the journey through your website and directly speaking to them on a personalised level.
2. Triggers
Triggers are additional cues that you can include around your CTA to give your customers that extra nudge in the right direction. Commonly found around sign-up buttons and free trial buttons and usually looks like a small bit of text with arrows pointing to the button, directing customers to click it. Button triggers work in the same way as pricing tables, where you usually dictate the most valuable pricing package or your recommended package, providing direction cues for your users.
3. Urgency
Urgency button copy provides text that makes your users compelled to click a button, using text such as “now” or “today” provides a sense of urgency, enticing your users to click that button. User experience typically shows people looking at a website and maybe delaying taking action, however, you can skip this delay when using urgency keywords to give that gentle nudge, as to say, why wait when you can do it now? Time-sensitive button copy has shown success on websites and can help increase click-through rates.
4. Creativity
Button creativity text speaks to the users, stands out from the rest and can increase engagement and interest. Being playful with your words, depending on your audience, can add that extra pizazz and boost your CTR. Creativity can work especially well depending on your brand, if your brand is known to be that little bit edgy and different, using playful copy, puns and glamour can work in your favour. Some examples of this can be, instead of using “contact us” you can use something like “Let’s get talking”.
Button Psychology
Previously we mentioned the colour psychology of a button, however, button psychology extends beyond colour and can have beneficial effects on your CTRs and getting those clicks. In fact, across this article, we have touched upon multiple key areas where button psychology exists, the more you know about it before, the better you can optimise your website’s call-to-action. Some of the key areas where button psychology applies are:
1. Colour
Colour, as previously mentioned, can appeal greater to different demographics and buyer personas. Testing your button colours can help drive more clicks and help your business grow.
2. Copy
Copy, also what was previously mentioned, can help aid users to act quicker and more immediately, rather than waiting. Copy can also provide key information that gives users that necessary nudge in the right direction.
3. Shape
Button shapes also can have psychological effects on the user, common button shapes are rectangular, with sharp edges or rectangular with soft and curved edges. Both of which can appeal better to different target audiences. Typically, e-commerce websites opt-in for sharp-edged rectangular-shaped buttons, which has shown success across the industry. Whereas contact buttons and other buttons alike, have a friendly appeal using soft and round-edged buttons.
4. State effects
State effects are one of the most important button cues for a user to experience and make a huge difference in guiding a user on your website. Depending on the button and the user journey, the state of a button can change drastically to help give information about what it does. For example, if a button seems to be a bit dulled out, transparent and even shows a disabled sign on hover, it immediately indicates to your audience that this button is unable to be clicked.
Some important button states to account for are:
- Active: When a button is clicked
- Hover: When a user hovers over the button
- Focused: When a user clicks on the button
- Disabled: When a user cannot click on a button
These 4 different states each convey different information to the user and play an important psychological role in the buyer’s journey.
Designing Buttons for Mobile Design
Since mobile usage overtook desktops, the importance of designing mobile-first has drastically increased. In most industries, you need to focus on your mobile design more so than your desktop. Therefore, your button needs to look engaging and appealing on mobile. With mobile limitations, such as reduced space, it is easy to compromise your UX, mistakes are commonly made due to your user interface (UI) design. Lack of visual feedback, unresponsive buttons, and hidden buttons all contribute to mistakes made in poor UI/UX mobile design. Therefore, some key areas to focus on when designing your call-to-actions on mobile are:
1. Consistency
Your buttons should be consistent in terms of size, colour, hierarchy and more on mobile as it is on desktop. Moreover, when designing the size of buttons for mobile design, you have to be cautious of the tap area, your button must be big enough to be tapped and not too close to other elements and buttons which can cause errors by the user and, ultimately, frustration.
2. Size
Size is an important factor to consider for button design on mobiles, due to your users having to ‘tap’ on them. Apple, Android and Google all have specific recommendations for the size of your touch targets, this is 48dp x48dp with some padding between the button and the button copy of at least 8dp.
3. Padding
Padding is a key component of button design on mobile, providing breathing space for the UI and giving clarity to your user, clarity on the hierarchy of information and navigational guidance as to where to click.
4. Shape
Button shape on mobile design depends on your audience and brand, also keeping consistent with your desktop version. If you are using curved corners then you should continue as such on mobile but having in mind the padding and size factors needed.
5. Placement
Typically, on mobile, it is easy for buttons to get lost and be hidden further down the page because of the smaller screen sizes. Therefore, it is important to have clear CTAs for users to see and click on instantly, without too much work to find them.
What should you AVOID when Designing Buttons for your Website?
Knowing how to design buttons and call to action is as important as knowing what not to do when designing. If you avoid the following errors, then your website is likely to have a great chance of converting. Some common mistakes that web designers and web developers succumb to are:
- Vagueness
- No visual feedback
- Inconsistency
- Buttons that do not look like buttons
- Incorrect hierarchy
- Too many buttons
1. Vagueness
Vague button labels do not only affect your user experience but Google will also discredit your website in its accessibility ratings in the Google Lighthouse Test. With unclear button text, your users can either disregard the button or take the wrong action, both of which will have negative effects on your business.
However, by clearly labelling your button text and giving precise direction to your user, your UX will benefit and your users will be better off for it.
2. Visual Feedback
By visual feedback the changing state of the button is dependent on the action taken or about to be taken. For example, if your user is filling out card details but does not complete the form, the buttons to checkout or purchase should be in a “disabled” state until all fields are successfully completed. This disabled state can be shown using visual aids to show its unclickable, such as added transparency or showing a disabled cursor on hover. Having a great button means that your users can receive visual feedback throughout the process, the button states are as follows:
- Primary – When the button is ready to be used
- Active – The state after the button has been clicked or “activated”
- Hover – When the cursor hovers over a button, an effect should take place
- Focused – When the keyboard focuses over a button or in its state of clicking
- Disabled – If a button is not currently interactive
3. Inconsistency
Button designs should be consistent throughout your website, consistent in design, shape, size, style, colour and more. This helps users understand what is and what is not a button, aids your branding, mitigates errors and completes a better-looking UI. Even when designing on mobile, it is important to have consistency, so users are aware of what is and what is not a button.
4. Buttons that do not look like buttons
As previously touched upon, by not dressing up your buttons to look like buttons, your users will be left confused and probably abandon your website if they cannot act. Taking action on a website, whether that may be from contacting, calling, purchasing or whatever the button is for, is the main objective and goal of your website. Many designers succumb to the issue of trying to be over-creative with their button designs, this may be counterproductive and affect the UX. You should never sacrifice your UX for your UI, because, at the end of the day, how your users experience and use your website is the most important aspect.
5. Incorrect or awkward hierarchy
Your UX follows a specific route, from the moment your user accesses your website they are on a path, the end result is to buy a product, fill out a form, subscribe or whatever your website’s journey ends at. To get to the result, users must click a button, however, if they are not clearly placed in “normal” positions, then your website will less likely meet its objective. By “normal” positions we mean common positions that users expect buttons to be in, such as in the top right corner of a navigation bar.
6. Too many buttons
By having too many buttons on your website, you are likely to overwhelm your users and lead them to the wrong place, or completely deter them from your website. Less choice can mean more action, too much choice can lead to indecisiveness, delayed action and no action, also known as the Paradox of Choice. At each stage of your website, you must think what is the most important action that you want your users to take and prioritise that.
How can you test the Effectiveness of your Button Designs?
It is great to learn how to design effective and converting buttons, however, the most important part is to test them. Without testing your buttons, it can be difficult to know if they are successful or if they can be more successful. Luckily, there are 3 methods that you can do to test the effectiveness of your call-to-action buttons.
- Navigation Test
- A/B Variation Test
- Heatmaps
1. Navigation Test
When designing buttons, it is important to have some key questions in mind that will help you with button placement, the type of button needed and where it should take the user. Navigation testing usually happens at a wireframing level of web design, to help you visually see how your user will navigate across your website and how to get them where you want them. An important step when wireframing that will help you design the most effective buttons is to ask yourself some questions such as:
- Is this a logical navigation?
- Can users find the main services/features?
- Does the user understand their choice?
- Will the user know what to do next?
There are many questions you can highlight and use a guide to help the navigation of your website. The navigation test is an important step to take but it should be taken prior to the development of a website.
2. A/B Variation Split Testing
When your website is already live and you are receiving traffic, you can start to fine-tune your design to further optimise it and improve your UX. How can you do this? Simply by changing one feature, and this can be anything from buttons to font, colours and more, and see the effects after your change, monitoring your analytics to see if you saw any improvements or deficits.
You can use A/B testing to test different types of the same button, simply by changing the colour, visual effect, or copy, you can see how your users react to it. Monitoring the performance over a certain timeframe and seeing which button had a better CTR can help you know what design works best.
3. Heatmaps
Heatmaps can provide a key indicator of the popularity of your button. You can visually see if your button is being clicked, looked over or seen. Like A/B testing, you can change the placement of your button and its design and see any positives from the heatmap to track successes and failures. Heatmaps can show many benefits with button placement, visually seeing the journey of your user and how changing the position of a button can enhance that. Software such as Smartlook can be used to show your user experience and navigation across your website.
What to Take in?
If you’ve made it to the bottom of our article, congratulations, it is a comprehensive text that thoroughly explains the importance of button designs for websites and, if used correctly, can help you increase the number of clicks your buttons get. So, what can you take away from this article?
- The different types of buttons on a website.
- Button psychology is important.
- Designing for your audience is a must.
- How you can avoid common design mistakes.
- Showing different button states.
- The importance of buttons for mobile design.
- How you can test your button design and optimise them?
