The sole purpose of any promotional copy – be it the copy of an ad, an email, or a website, is to lead the reader towards that shiny, interactive, and most often, a rectangular clickable UI element i.e., the button. Call-to-action (CTA) buttons not only hold every marketer’s hopes of winning at conversion techniques, but also a psychological effect that has the potential of reflecting your brand’s image. How can a mere button do that, you ask? Well, CTA buttons being one of the most crucial elements of any user interface can convey sophistication and class through its intelligent design.
Long story short – the most basic purpose of an effective CTA button is to be click-worthy. CTA buttons vary in shapes, sizes and also messaging basis the end goal associated with them. Read on further to learn about some simple design tricks to get the most out of these click magnets!
#1: Make them discoverable
As a result of long exposure to specific shapes that are associated with specific colours, our minds tend to get used to reacting to them in specific ways. Our perception of colours and shapes have the capacity to affect our moods and emotions. A traditional CTA button would ideally be a horizontal rectangle. While it may be a little too ambitious to experiment with abstract shapes to denote a button, it shouldn’t mean that you stick to the good old rectangle.
When it comes to colours, it is recommended that designers use contrasting colours for the buttons, and stick to shapes that can be easily identified as buttons. Having said that, tweaking them to a safe extent so as to make them look contemporary is definitely a safe path to tread. For example, designers can try softening the corners or curving the sides of a rectangle to make the button look sleeker.
#2: Add some shadow
Buttons have existed in different types of design – three-dimensional design, skeuomorphic design, flat design and drop shadows, to name a few. The interplay of light and shadow has inspired several streams of design, making them look more alive. Adding a soft, blurred drop shadow to a button gives it more depth and prominence. However (and this is a pretty big ‘however’), it is much too easy to overdo these light-shadow effects. Designers tend to add one effect after the other without pausing to think whether these effects are simply good-looking or truly necessary. So, add your shadows, but keep them subtle. The best practice is to match the colour of the shadow to that of the button, keep the opacity under 40%, and let the shadow be smaller than the button
#3: Lay emphasis where it’s required
People typically follow the Z-pattern while scanning website content as they scroll down. Same goes for buttons that are placed adjacent to each other. The button that you want your website visitors to click must be placed towards the right-hand side. That’s where the user’s gaze ends and stays. For buttons that are vertically stacked, it makes more sense to place the high priority button at the bottom, for the same reason stated in the previous sentence.
When these high priority buttons are placed at the left-hand side or at the top, it can disturb the readers’ natural scanning direction, and ultimately, the flow of their attention. Designers also generally use ghost buttons to deter users from clicking those.
#4: Let the icons help a little
Buttons don’t have to be an arrangement of two words written on a solid coloured rectangle. Much like pictures, icons too can speak a thousand words. It is completely okay for text buttons to make use of icons in addition to text. No, it doesn’t mean that you are adding too much in too little space. It simply means that you are making your message more emphatic. However, make sure that you don’t go overboard with the colours. It is necessary to ensure that the colour of the icon matches the colour of the text. Also, it may be safe to stray from icons that have a colour fill or too many details. Again, the key is to keep it simple and stick to outline icons.
#5: Remember the 8-point rule
Leave your buttons some breathing space. Avoid leaving too much or too little blank space around your buttons. The ideal way to go about this is to follow the 8-point rule. Essentially, the 8-point rule states that all the elements in a design, including the height, width as well as the space around, follow multiples of 8. You may be wondering why 8 specifically? The explanation is that the average screen size of a majority of popular devices is easily divisible by 8. Hence, scaling the design (size and spacing) by increments of 8 helps in maintaining a consistent rhythm across all the design elements. This, in turn, ensures consistency across all your website pages. You can read more about this concept here. For buttons that are placed adjacently or stacked vertically, maintain the same 8-point distance on all sides of the button.
Since we are talking about space, designers must also remember to pay close attention to the letter-spacing. Maintain optimum spacing between each letter of your text, depending on the density of the letters, to ensure ease of reading.
#6: Buttons exist in different states
No, we don’t mean geographically, of course! But it is important to remember that any CTA button goes through different states of appearance – idle, hover, and clicked. Making use of visual effects such as adding a drop shadow, a glow effect, a change of colour, etc. can help achieve a distinction between each of these states. A lot of brands are pushing the envelope with this aspect of UI button design and it is going to be amazing to see where this goes.
These are just a few of the many ways of making the button really shine on your website pages. But no matter how well-designed your buttons may be, it all comes down to two ultimate requirements – placement and messaging. If your copy has brought your website visitor to a point where he/she is ready to make a decision, but the button is spaced too far away from reach, or worse, it doesn’t speak just the right words for making him/her click, then you’ve lost your deal right there.
There are a hundred things that can go wrong with poorly designed buttons. However, designers can only learn through trial and error. To make this learning journey easier for you, we will continue to write more of these UI design-specific articles. We hope that you keep reading!