CTA Buttons should look like buttons.
We’ve heard it many times. When they say it they are talking about making button shape and style in either rectangular or oval shape for better user experience and conversion, so that users can find it quickly to act quickly.
But, not all the buttons are in traditional shape, rectangular and oval. Many online retailers have experimented with unusual designs that require courage to do that on the web because such button shapes can confuse the viewer and lead to the loss of many potential sales.
Call-to-action buttons are too critical part of a web design that they can’t be designed without understanding what makes them effective besides just making them appealing and fit in the overall design. That’s the reason why we see many online retailers thinking out-of-the-box and using CTA button shapes and styles that beat many successful CTA button shapes and styles.
Today, we’ll know about some of the unusual shapes and styles that are often overlooked, but experimented by many to attract the visitors’ attention.
Irregular & Unusual Button Shapes
The notion is that CTA buttons should appear clear to online users because they are conditioned to the standard button shapes and they quickly recognize CTA buttons. But, many retailers experiment with irregular and unusual button shapes too.
Bryan Eisenberg explained that many times irregular and unusual shapes (contrary to the regular rectangular or oval shaped buttons) and buttons with icons, like plus signs or shopping cart signs, are catchy than the regular button shapes. They seize the users’ attention and get more clicks.
“One of the secrets we learned about having great call-to-action buttons, and this is something you might not even notice, is using irregular shapes, neither rectangular nor oval.”
But, thinking out of the box requires courage. It’s quite risky to test such variations on websites because users are not familiar with such buttons.
Examples: Tide.com, 13creative & resumebaking.com
Blending - Rectangular and Round Shape
Amazon is one of the pioneers in using a blend of rectangular and round-shaped buttons. They made it unusual to turn them into catchy buttons. The left side was round with an icon and the right side was rectangular. Firefox also used the same blend for many years.
You can experiment in any way till the CTA button retains a legitimate virtual shape. It must keep a resemblance with the real life button design. For example, think of the power button (ON/OFF) of the iPhone. In any real life, physical ON/OFF button, you will find that they maintain one of the two basic button shapes: round or rectangular. On ecommerce website, the design of CTA should also follow the same concept to help users recognize it quickly.
Visual Clues
The addition of the visual element to the CTA button increases the conversion rate. For example, the icon of the shopping cart in the buy button, or heart icon in the add to wishlist button, the down arrow sign in the download button or arrow pointing to the right in the sign in or contact us button.
All this is meant to bring more clarity to the user telling him what this button is for. The visual clues give meaning to the button without requiring reading the text. But, you can’t solely depend on the visual element by removing the text from the button.
Examples: Download.com and Officedepot.com
You don’t know what works until you test different variations and evaluate all variables. No shape has ever proven to be the best. Testing decides what performs better on your web design. Unusual shapes and styles can often outperform successful shapes and styles of CTA buttons. So, always be testing.