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)