Frukostseminarium: Design och copy som ger effektiva calls-to-action
description
Transcript of Frukostseminarium: Design och copy som ger effektiva calls-to-action
Design och copy som ger effektiva calls-to-action
Patrik Åkerman von Knorring och David Aler
Call to action?!
Var?
Var i köpcykeln?
Världen är större än din sajt...
Flera CTA på samma sida
Anpassa efter enhet och sammanhang
Design
Storleken räknas
Omgivningen spelar roll
mastering the design & copy of calls-to-action10
www.Hubspot.com
Share This Ebook!
spAciAl effect
you know how they say that, sometimes, less is more? well, that can
GHÀQLWHO\�EH�WUXH�IRU�FDOOV�WR�DFWLRQ��,I�\RX�ZDQW�WR�DWWUDFW�PRUH�DWWHQWLRQ�
to your ctA, you should give it some breathing space. don’t crowd the
language unless the information around it is key to taking the action.
simple logic dictates the ‘amount of white space’ decision. separating the ctA from the rest of
the content on a web page will mean it’s a separate item. if there is a tight connection between
the call-to-action and some other web page element, then maybe there should be less white
space between the two.
“the more white space there is in between a call-to-action button versus a surrounding element,
the less connected they are,” writes Jacob gube in smashingmagazine. “therefore, if you
have other elements that can help convince users to take action, reduce the white space in
EHWZHHQ�WKRVH�HOHPHQWV�DQG�WKH�&7$�µ�$QRWKHU�WDFWLF�KHUH�LV�WR�ÀOO�\RXU�FDOO�WR�DFWLRQ�ZLWK�
warm background colors, such as red and orange, which appear larger than colors suggesting
coldness, blue and green. warm colors appear closer to the viewer.
2
”Above the fold”
Tänk på kontrasten
Klicka här
Klicka här
Klicka här
Interaktiva effekter
mastering the design & copy of calls-to-action13
www.Hubspot.com
Share This Ebook!
iNteRActiVe effectssurely, you’ve seen calls-to-action that change when you hover over them
with your mouse. such hover effect creates a perception that the ctA is
instantly clickable and the visitor is one step closer to taking the action.
using hover animation, you can make your buttons change color and brightness. you can also
give them a shadow or have them zoom in or out. there are many Adobe photoshop tutorials
out there that can teach you how to create such a hover animation and help you create an
even more irresistible call-to-action. other design styles that you can apply to your call-to-action
include drop shadow, text and button bevels and gradient colors. All these options are available
through Hubspot’s call-to-Action builder.
5
Använd oväntade former
Skapa en riktning
mastering the design & copy of calls-to-action15
www.Hubspot.com
Share This Ebook!
cReAte A seNse of diRectioNsome of the most successful calls-to-action out there have arrows pointing
at them. it creates a sense of direction and guides the visitor to the
important element on the page. this is a way of prioritizing information
DQG�FUHDWLQJ�D�ÁRZ�
in fact, Hubspot social media scientist dan zarrella, found out that if you have a picture of a
human looking at a lead-capture form or call-to-action on a page, that’s where the eye of the
visitor will also shift to. so don’t add images of people who stare right at your audience; make
them stare at what your audience should look at.
7
Användartesta
Fokusera på texten...
mastering the design & copy of calls-to-action17
www.Hubspot.com
Share This Ebook!
focus oN text, Not gRApHics
the eyetrack iii study also showed that in ads, website visitors read more
text content than graphical content.
people looking for information are looking for text, not pictures.
0DNH�VXUH�\RXU�ZRUGLQJ�LV�FOHDU��VSHFLÀF��DQG�DFWLRQ�RULHQWHG��,Q�WKH�QH[W�FKDSWHU��ZH�ZLOO�FRYHU�
some copywriting tips in more detail
while you should focus on your call-to-action text, don’t forget that graphics can help convey
meaning and strengthen your message. they are especially useful in explaining a concept that is
hard to explain with words alone.
9
“ ” — deAN Rieck, copywRiteR
Vad du säger
Tänk på VAD och FÖR VEM
Har du koll på vad som lockar just dina kunder? (Dvs högst kvalitet för kunden)
Högst värde för dig?
Kommande kampanjer
Personligt anpassad? Vad förstår kunden?
Tänk på satsdelarna (!)
Glöm inte verbet - (genererar t ex mest delningar på Twitter)
Undvik onödiga adverb (nu, snabbt) - använd bara om de förtydligar
Gör det angeläget
Ta fram fördelarna
90 - 150 tecken totalt
Betona fördelarna och hur besökaren blir belönad eller smartare eller mer framgångsrik etc (insikter, expertråd, testresultat)
2-3 meningar med USPar som kortas ned
Undvik tekniska termer
Undvik standard ”klicka här”
Fördelen för kunden i centrum
Siffror, siffror
Internet är fullt av vaga otydliga påståenden
Vad får jag - hur många, hur länge, hur många sidor, hur många intervjuade i rapporten, hur många har redan köpt
Extra bra som rubriker på pressreleaser, epost etc
MASTERING THE DESIGN & COPY OF CALLS-TO-ACTION31
WWW.HUBSPOT.COM
Share This Ebook!
The screenshot below is of a call-to-action A/B test that sought to compare two offer types. The
image actually illustrates what HubSpot’s homepage used to look like in 2010!
Originally, HubSpot’s homepage offered our community a seven-day free trial. However, we were
curious to see if offering a longer trial period would entice more visitors to sign up. Would it have
����������������������������������������������� ������������������������������������������
free trial and the treatment offered a 30-day free trial.
an example ofA CALL-TO-ACTION TEST:
CONTROL
Var stolt
Kundcitat om hur bra du är
Frågor som bara du kan svaren på
WWW.HUBSPOT.COM WWW.HUBSPOT.COM
Share This Ebook!Share This Ebook!
This call-to-action is following the best practice of including
�#��� !��"'!����� �&����$�&����%��"�"�������("�%����������"���
visitor downloads the whitepaper. It’s also action-oriented and
emphasizing that the offer is free.
This CTA is phrased as a question,
which is meant to engage the reader
immediately and create some urgency.
The image also creates a clear
connection to the idea of who the CTA is
targeting. Lastly, the description is very
detailed and includes a number.
����� � ���������
��� �������� ���
�� ������� ��� ��
This call-to-action is using a testimonial from a
happy customer. Testimonials are a marketing
technique meant to instill trust and credibility in
the company and its product or service. The actual
verbiage in the CTA to the left also creates a sense
of urgency by mentioning the word “today.”
WWW.HUBSPOT.COM
�������� ���� ��� ������� ��� ������
CONCLUSION & ADDITIONAL RESOURCES
INTRODUCTION TO EFFECTIVE CALLS-TO-ACTION41
Sammanfattningsvis
Tänk på kundens behov och förförståelse
Tänk på sammanhanget
Många ställen i !era digitala kanaler passar bra för effektiva CTA
Designen stödjer copy
Verb + siffror
Placera ALDRIG en CTA på landningssidan för en annan CTA!
Välkommen tillbaka!
Punkt 1
Punkt 2
Punkt 3
Osv....
Dax för övning!
VAR: i köpcykeln
Uppmärksamhet
Intresse
BegärKöp
KöpΟ
Lev
eran
sBelåt
enhet
HUR: Röda korset
Boka analys nu
Just nu:
Cloud Nine bjuder på mikroanalys av konvertering på er sajt
(Endast 10 kvar)