Call to Action Buttons Part 3: Shape and Size
In our 4-part series about Call to Action buttons, we have come to the 3rd post in which I explain the impact of shape and size on the effectiveness of a button. With the help of several studies I will show you the best practices in order to increase the CTR (Clickthrough Rate) of the buttons. But remember: it’s entirely up to you to find out what works for your application by testing your CTA’s.
You will find links to the other parts at the bottom of this article.
Shape of your Call to Action buttons
A CTA button is nothing more than a digital version of a real-life button, such as an ordinary doorbell. We all identify the doorbell as being clickable (action) and that it has a result. These characteristics need to be transferred into our design of the CTA-button. Circular shapes are well equipped for that but are less common in the digital world.
Rectangular shaped buttons have been introduced into the digital world a long time ago and people are used to its functionality by now. According to Andy Hertzfeld of Folklore.org it was Bill Atkinson, who worked together with Steve Jobs on the early developments of the Apple Macintosh in 1981, who added new code to QuickDraw to draw circles and ovals. Steve Jobs wanted more and Bill came with a mathematical solution to draw rectangles with rounded corners.
I strongly suggest using rounded or circular corners on the ends of your CTA for three reasons:
First, rounded corners point inward and draw the attention to the inside (content) of the button. A square edge on the opposite, points outward and draws the attention away from its object.
A second reason to use rounded corners is that these settles your subconscious. Studies have shown that we are ‘programmed’ to avoid sharp edges in nature (primordial reaction) because they present a possible threat.
The last reason why you should use rounded rectangles is because it actually takes less effort to see. I would like to quote Professor Jürg Nänni, author of the exemplary Visual Perception: “A rectangle with sharp edges take indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down”.
Size of your Call to Action buttons
Generally speaking, the larger an element is on a page the more noticeable it will be, thus the more importance it should hold. It was Fitts’ Law that told us that the time to point at an object is directly influenced by the size of that object. I would like to add that it is not the size as such but rather size relative to its surrounding elements that matter. A button might be considered as being large, but when the other elements are larger the visibility of the button drops drastically.
How to decide the size of your CTA button
As I told you before in our previous CTA articles, you first need to decide how vital certain actions are and size your call to action buttons accordingly.
You can imagine there is no point in telling you the perfect dimension of a button because it simply doesn’t exist. I can only advise you not to make it too small because no one will notice the button, nor make it too large because the user will not understand that it is clickable. Make it aesthetically pleasing but never forget the value of sales/conversions. The golden rule is to test, test and test…
In my article “5 quick and easy ways to improve your websites’ usability” I talked about the 5 pixel blur screenshot, which is a little trick to find out if your most important sections of your design, such as the CTA-buttons, are visible enough or not. If not, you should increase the size of your buttons. You’re not only emphasizing the button but also increasing the click target size, making it more user-friendly and easier to use.
Leevi Graham came with a very useful jQuery plugin to increase the click target.
When you have more than one call to action you could change the size according to their relation in importance. If the result isn’t very pleasing, you could try to change the color instead of size.
To finish it off you can design the CTA-button with a subtle, life-like shadow and some highlights, giving it a sense of depth. It is yet another link to our real-life version.
Let us all know how things are working out with your CTA-buttons!