button-design-article

The Ultimate Website Button Design Guide to Get More Clicks

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:

  1. The different types of buttons for websites
  2. Importance of button design
  3. The effects of button placement
  4. How to correctly use button text
  5. The psychology of buttons on your website
  6. Mobile button design
  7. What to avoid when designing buttons
  8. 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.

Different types of buttons on websites

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.

Types of buttons

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.

Button hierarchy design

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.

Psychology of buttons on a website for clicks

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.

Buttons for mobile design

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:

  1. Vagueness
  2. No visual feedback
  3. Inconsistency
  4. Buttons that do not look like buttons
  5. Incorrect hierarchy
  6. 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.

  1. Navigation Test
  2. A/B V