call to action button design
TRANSCRIPT
Call To Action ButtonPractices that work
What is CTA?• In marketing, a call to action (CTA) is an
instruction to the audience to provoke an immediate response, usually using an imperative verb such as "call now", "find out more" or "visit a store today".
• In web design, a CTA is a banner, button, or some type of graphic or text on a website meant to prompt a user to click it and continue down a conversion funnel.
CTA
• Button is Called then action appears
• Better CTA means
• Callable button
• Easier, Faster, More Relevant Action
The elements of a button
MessagesCall
Placem
entAn
imat
ion
Color
Shapes
Colour of a Button
• “What is the best colour for my CTA button?”
• Specific case: The “Buy” button for an e-commerce website
Any ideas for CTA button colour?
Shape of a Button
Button shape
• Button must be “pushed”.
• Button must be emerging on the surface.
• Shadow
• Gradient
Flat button
• Flat design trend
• Flat button
• Ghost button
• Flat vs Skeuomorph
“Animation makes web elements look alive”
CTA button Placement
• How to make it more clickable?
• Fixed position
• Above the fold
• Follow patterns : F-pattern, Z-pattern
z-pattern
CTA Button Message
What are the main barriers?
Fear
No motivation
Confuse
Anything else?
QuantityToo many CTA buttons
Now, ACTION
–Unknown
“Everything happens for a reason. Every action has a reaction. Always remember that whats meant to be will always find a way to come
about.”
Reaction
“an action performed or a feeling experienced in response to a situation or event.”
• Animation
• Messages
• Error-state
Animation
• http://tympanus.net/Development/ProgressButtonStyles/
• http://tympanus.net/Development/CreativeButtons/
Messages
Error-state
Theorem sucks, TESTING FIGURES
The Olympic Store
Default Add to Cart button
http://www.getelastic.com/test-size-color/
Variation AAdd to Cart button in 1st
fold
Variation BProduct Attributes and Add to Cart Button in the same
block
Default
A
B
Default
A
B+19.9%
+11.2%
With Social Shares Without Social Shares
https://vwo.com/blog/removing-social-sharing-buttons-from-ecommerce-product-page-increase-conversions/#.
With Social Shares Without Social Shares
+11.9%
Hubspot’s CTA Button
21% better
Conclusions
• Outstanding CTA Buttons
• Relevant and friendly messages
• Follow human patterns
• Reaction
