Buttons are very important, especially if you want people to do something (like buy something). If you wait until the last minute to create them, you might not get as many people doing what you want.
If a button is placed in the wrong area of a page or uses the wrong color, it can prevent a user from taking the desired action.
If they don’t take it, then the button has failed for one of the following reasons:
- The button is placed in an area that’s unfamiliar to the user;
- The color turns the user off or doesn’t stand out enough;
- It’s not immediately obvious that the button exists.
According to UX Movement, we can categorize all CTA (Call to Action) buttons as:
- Positive – changes, sends or adds information. For example, a button accompanying a newsletter signup box would send information;
- Neutral – no changes are made, or the button takes the user back to a screen (e.g. cancel);
- Negative – deletes or resets information.
Consider Color and Contrast
If the main CTA button does not have enough color contrast, it will be difficult for users to see what action to take. This will either slow them down or they will not click the button.
This is important for your users who may suffer from colorblindness because colors can appear similar to the colorblind user.
The argument over which color button is better (red or green) is a good example of why you should take into account users who are colorblind.
The debate over whether to use a red or green button briefly is as follows: Red typically implies “stop” or “delete” in most people’s minds, but some people believe that users are more likely to click a red button over a green one. So the question is, which one should be chosen?
People with normal color vision see red and green as strongly contrasting. Depending on what kind of color blindness a person has they may see both red and green as a kind of murky khaki i.e. Both colors appear as very similar shades to the colorblind user.
This discrepancy occurs because red and green are opposite each other on the color wheel. This means that colorblind users will have a hard time processing and interpreting the colors, and are less likely to take the desired action.
You should not use red and green next to each other as this will make the button invisible.
Give some thought to what colors to choose for your website, depending on the kind of site it is and what kind of ‘personality’ you want it to have. You should also think about who will be using the site, and what kinds of colors they would respond to.
As such, you must take care not only with the colors of your buttons, but also to make sure that the colors stand out in contrast to the rest of the page, as well as to other buttons.
Just as important as the button’s color and the text on it or accompanying it is where on the page you place the button.
Buttons should definitely appear prominently on the page.
However, as Jeremy Smith points out in this excellent Crazy Egg blog post, buttons also need to be placed logically in relation to where the user is going to next on the page. You’ll want to take into account how people actually read the page when deciding where to put buttons.
Let’s take a look briefly at F-patterns and Z-patterns.
The F-Pattern
The typical eye movement pattern on a website with a lot of text is called the F-pattern. This means that users’ eyes will scan the page from left to right, then move down a line and scan from left to right again. So, if you want people to take a specific action on your site, it’s a good idea to place your call to action where their eyes will end up when they finish scanning across the page from left to right.
The Z-Pattern
This design pattern is characterized by plenty of open space and content that encourages users to scan the page in a zigzag pattern. So any call to action should be placed along this “z” line, ideally near the end.
The placement of buttons within a website should be strategic in order to ensure that users will see and click on them. Additionally, it is important to use web conventions when designing a website, as these elements are typically placed in certain areas for a reason.
There are a few ways to make buttons appear nice and clickable.
Let’s go through some considerations that Gabrielle Gosha outlines in her excellent Sitepoint article:
- As we said above, color is an important part of making a button stand out. It’s also useful in making a button clickable. If the button blends too much into the background, a user won’t realize that it’s something you can press.
- Buttons should also contain text that provide the user with further visual clues to direct action. Text can be used to clearly direct the user, such as “sign up”, “join now”, or “get started.”
- Give the button some room to breathe. When placing a button below a chunk of text, we’d recommend adding a margin that’s roughly the height of the button.
- Sorry, Yoda, but size matters when it comes to buttons. You want to consider how big the button is in relation to the other elements on the page. Too small and it’ll go unnoticed. Too big and it may overwhelm users. And there’s mobile to consider.
Try to keep your buttons simple and rectangular, instead of getting too artistic. Replacing a button with clever text or a GIF usually makes the experience worse for the user, since they will be facing something that is unfamiliar.
Kamil Zieba believes that it is more important for a label to be clear, rather than clever. He believes that a label such as “Cool, let’s rock it!” is not as effective as “Submit” when communicating the action.
When optimizing your website for conversions, visual elements on your page, such as color, images, and cues, play a significant role.
Here are some tips to greatly increase your conversion rates with some easy visual changes.
1. Call-to-Action Button
You can test different colors for your call-to-action buttons to see which ones result in the most clicks. Some variables you can test include the color of the button, the text on the button, and the placement of the button.
If you’re not sure if a CTA button is visible, try looking at the page with your eyes almost closed.
If you allow things to become unclear, your call to action should still be noticeable.
Another option you could try is to make your button larger.
Many people tend to look at a webpage in an “F”-shaped pattern, meaning they will look at the top left corner first, then the right side, and finally the left side again. One layout that takes advantage of this natural tendency is with the logo in the top left corner, the login button in the top right corner, and the call-to-action button in the middle of the left side.
A good layout to encourage sign-ups.
This is an example of what you should do to make your visitors take action: design your CTAs in a favorable manner and place them where they will have the most impact.
2. Hero Image or Mascot
The soothing colors and memorable mascot of a brand may make an impact and make the brand memorable.
An example is Social Media Examiner’s hunter/scout.
Mascots can be very effective in creating a lasting impression on your customers.
Although it is not necessary, a mascot can be helpful in driving action. If you don’t have one, you can still use an effective hero image.
The hero image on your page is important in conveying your headline and values proposition.
It ties in closely with your benefits and drives people e.g. to enter their email.
3. Color Psychology
This part is discusses how different colors supposedly evoke different emotions in people. You nay have heard that orange is associated with confidence, blue/green is associated with dependability, etc.
When looking at the effects of color, it is important to consider the context in which it is used.
It’s important to choose colors for your website that create the desired effect. Just because a particular color works well for your competitor doesn’t mean it will have the same effect for you.
You need to think about the colors of the background and foreground, as well as other important elements on your page, like the text.
The colors that a person likes is based on their personal choice, culture, and how they were brought up. The colors also depend on the context they are used in.
You should test different aspects of your website, like the call-to-action button color or the background color, to see what works best.
In other words, the color yellow does not necessarily indicate happiness. If it is used in combination with a smiley face, it indicates happiness. However, if it is used as a background on a website, it means that the website needs some basic user interface classes.
If you’re a fan of Harley Davidson, you’re really just buying the feeling of being rugged, tough and free.
If a bike company started making pink bikes, would you think of them differently?
We tend to prefer colors that have positive sounding names over those with negative sounding names, even if the colors themselves are identical.
In conclusion, conduct extensive testing before deciding on the right color for your brand.
4. Contrast
It’s important that your CTA button or sign up form are very noticeable on your page.
To determine whether your landing page will pass the test, simply blur the page and see if your main element is still distinguishable.
Why? It’s all about incorporating contrast into your design.
This is based on the psychological principle known as “Isolation Effect.” Essentially, an item that is more isolated or stands out more than others will be more recognized and remembered.
5. White Space
The last thing you want is for a visitor to be ready to buy your product but not be able to find the buy now button!
To fix these issues, ensure that you use an adequate amount of white space around your elements.
Whitespace doesn’t have to be a solid white color. It’s just the space between elements on a page, and it can be an effective way to emphasize a call to action or headline.
While some may see white space as an empty or wasted area, Copyblogger shows us that it can actually create a sleek and user-friendly design.
6. Stock Photos
There are still many marketers who use stock photos that are not very good. This was a popular practice a decade ago, but it is slowly dying out.
The use of bad stock photos featuring men and women in formal wear, with blue and white color schemes, will always give the impression of fakeness.
Although some stock photography can be bad, you can still find good stock photos. To make an image more engaging, look for real human emotions.
7. Directional Cues
A study done on Sunsilk shampoo revealed the importance of eye tracking.
When a neutral image was tested, it was found that only a few people looked at the product. The heat map showed that they focused mainly on the headline.
The results of the study were shocking when the woman’s gaze was changed. She was now looking at the product and most of the visitors followed her gaze.
In short, they looked at the product now.
Directional cues can also be explicit. These include arrows and pointers.
Related posts:
