Practices that work

1. Call To Action Button
Practices that work

2. 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.

3. CTA
• Button is Called then action appears
• Better CTA means
• Callable button
• Easier, Faster, More Relevant Action

4. The elements of a button
MessagesCall
Placem
ent
Animation
Color
Shapes

5. Colour of a Button
• “What is the best colour for my CTA button?”
• Specific case: The “Buy” button for an e-
commerce website

10. Any ideas for CTA
button colour?

11. Shape of a Button

12. Button shape
• Button must be “pushed”.
• Button must be emerging on the surface.
• Shadow
• Gradient

13. Flat button
• Flat design trend
• Flat button
• Ghost button
• Flat vs Skeuomorph

14. “Animation makes web elements look alive”

15. CTA button Placement
• How to make it more clickable?
• Fixed position
• Above the fold
• Follow patterns : F-pattern, Z-pattern

17. z-pattern

18. CTA Button Message

19. What are the main
barriers?

20. Fear

21. No motivation

22. Confuse

23. Anything else?

24. Quantity
Too many CTA buttons

25. Now, ACTION

26. –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.”

27. Reaction
“an action performed or a feeling experienced in
response to a situation or event.”
• Animation
• Messages
• Error-state

28. Animation
• http://tympanus.net/Development/
ProgressButtonStyles/
• http://tympanus.net/Development/CreativeButtons/

29. Messages

30. Error-state

31. Theorem sucks,
TESTING FIGURES

32. The Olympic
Store
Default Add to Cart button
http://www.getelastic.com/test-size-color/

33. Variation A
Add to Cart button in 1st
fold

34. Variation B
Product Attributes and Add
to Cart Button in the same
block

35. Default
A
B

36. Default
A
B+19.9%
+11.2%

37. With Social Shares Without Social Shares
https://vwo.com/blog/removing-social-sharing-buttons-from-ecommerce-product-page-
increase-conversions/#.

38. With Social Shares Without Social Shares
+11.9%

39. Hubspot’s CTA Button

40. 21% better

50. Conclusions
• Outstanding CTA Buttons
• Relevant and friendly messages
• Follow human patterns
• Reaction

51. Have any questions? Contact me
phowr.uxd@gmail.com
(+84) 949958016