samspelet mellan innehåll och interaktionsdesign

Design och copy som ger effektiva call-to-action

Patrik Åkerman von Knorring och David Aler

torsdag den 27 september 2012

Var?


Var i köpcykeln?Webbplatsen bara en av många bra placeringar för effektiv CTA

Var befinner sig kunden i köpcykeln?

Kan du anpassa CTA efter detta? Dvs det du vet om kundens behov just i denna fas?

Placera CTA i whitepapers, webinars, presentationer (slideshare), epostnyhetsbrev, adwords, signaturer, bloggposter, videos, facebook, twitter, linkedin


Flera CTA på samma sida


Anpassa efter enhet och sammanhang


Design


Storleken räknas


Omgivningen spelar roll

!"#$%&'()*$+%*,%#')(*-*./01*/2*."33#4$/4".$'/(!"

###$%&'()*+$,*-

!"#$%&'"()&*+,,-.

().,/.012332,+

456178591:591;:<=1>?=1;:?;@1>5A<;BA<>@1C<>>1B>1A5D<E1#<CC@1;:?;1F?81

;51=56D1,+.@1=561>:56CG1HBI<1B;1>5A<1JD<?;:B8H1>K?F<$1L58M;1FD59G1;:<1

C?8H6?H<168C<>>1;:<1B8N5DA?;B581?D568G1B;1B>17<=1;51;?7B8H1;:<1?F;B58$1

(BAKC<1C5HBF1GBF;?;<>1;:<1O?A568;15N19:B;<1>K?F<M1G<FB>B58$1(<K?D?;B8H1;:<1,+.1ND5A1;:<1D<>;15N1

;:<1F58;<8;1581?19<J1K?H<19BCC1A<?81B;M>1?1><K?D?;<1B;<A$1/N1;:<D<1B>1?1;BH:;1F588<F;B581J<;9<<81

;:<1F?CCP;5P?F;B581?8G1>5A<15;:<D19<J1K?H<1<C<A<8;@1;:<81A?=J<1;:<D<1>:56CG1J<1C<>>19:B;<1

>K?F<1J<;9<<81;:<1;95$111

Q+:<1A5D<19:B;<1>K?F<1;:<D<1B>1B81J<;9<<81?1F?CCP;5P?F;B581J6;;581I<D>6>1?1>6DD568GB8H1<C<A<8;@1

;:<1C<>>1F588<F;<G1;:<=1?D<@R19DB;<>1S?F5J1T6J<1B81(A?>:B8H-?H?UB8<$1Q+:<D<N5D<@1BN1=561

:?I<15;:<D1<C<A<8;>1;:?;1F?81:<CK1F58IB8F<16><D>1;51;?7<1?F;B58@1D<G6F<1;:<19:B;<1>K?F<1B81

9?DA1J?F7HD568G1F5C5D>@1>6F:1?>1D<G1?8G15D?8H<@19:BF:1?KK<?D1C?DH<D1;:?81F5C5D>1>6HH<>;B8H1

F5CG8<>>@1JC6<1?8G1HD<<8$1#?DA1F5C5D>1?KK<?D1FC5><D1;51;:<1IB<9<D$1

V


”Above the fold”


Tänk på kontrasten

Klicka här

Klicka här

Klicka här


Interaktiva effekter

!"#$%&'()*$+%*,%#')(*-*./01*/2*."33#4$/4".$'/(!"

###$%&'()*+$,*-

!"#$%&'"()&*+,,-.

./+012,+.3040550,+((6789:;4:<6=>84?88@4AB99?CD<CBADE<@4DFBD4AFB@G84HF8@4:<64F<>874<>874DF8I4

HEDF4:<674I<6?8$4(6AF4F<>8748JJ8AD4A78BD8?4B4K87A8KDE<@4DFBD4DF84,+24E?4

E@?DB@D9:4A9EALBM984B@N4DF84>E?ED<74E?4<@84?D8K4A9<?874D<4DBLE@G4DF84BADE<@$4

&?E@G4F<>874B@EIBDE<@;4:<64AB@4IBL84:<674M6DD<@?4AFB@G84A<9<74B@N4M7EGFD@8??$4O<64AB@4B9?<4

GE>84DF8I4B4?FBN<H4<74FB>84DF8I4P<<I4E@4<74<6D$4+F8784B784IB@:42N<M84)F<D<?F<K4D6D<7EB9?4

<6D4DF8784DFBD4AB@4D8BAF4:<64F<H4D<4A78BD84?6AF4B4F<>874B@EIBDE<@4B@N4F89K4:<64A78BD84B@4

8>8@4I<784E778?E?DEM984AB99CD<CBADE<@$4*DF874N8?EG@4?D:98?4DFBD4:<64AB@4BKK9:4D<4:<674AB99CD<CBADE<@4

E@A96N84N7<K4?FBN<H;4D8QD4B@N4M6DD<@4M8>89?4B@N4G7BNE8@D4A<9<7?$42994DF8?84<KDE<@?4B784B>BE9BM984

DF7<6GF4%6M(K<D=?4,B99CD<C2ADE<@4'6E9N87$

4

R


Använd oväntade former


Skapa en riktning

!"#$%&'()*$+%*,%#')(*-*./01*/2*."33#4$/4".$'/(!"

###$%&'()*+$,*-

!"#$%&'"()&*+,,-.

,./0+/101(/2(/1*3145./,+5*2(6781691:;8176<:1<=>>8<<9=?1>@??<A:6A@>:B6C16=:1:;8D81;@E81@DD6F<1G6BC:BCH1

@:1:;87$15:1>D8@:8<1@1<8C<81691IBD8>:B6C1@CI1H=BI8<1:;81EB<B:6D1:61:;81

B7G6D:@C:18?878C:16C1:;81G@H8$1+;B<1B<1@1F@J1691GDB6DB:BKBCH1BC96D7@:B6C1

5C19@>:L1%=M(G6:1(6>B@?1-8IB@1(>B8C:B<:14@C1N@DD8??@L196=CI16=:1:;@:1B91J6=1;@E81@1GB>:=D81691@1

;=7@C1?66OBCH1@:1@1?8@IA>@G:=D8196D716D1>@??A:6A@>:B6C16C1@1G@H8L1:;@:P<1F;8D81:;818J81691:;81

EB<B:6D1FB??1@?<61<;B9:1:6$1(61I6CP:1@II1B7@H8<1691G86G?81F;61<:@D81DBH;:1@:1J6=D1@=IB8C>8Q17@O81

:;871<:@D81@:1F;@:1J6=D1@=IB8C>81<;6=?I1?66O1@:$

R


Användartesta


Fokusera på texten...

!"#$%&'()*$+%*,%#')(*-*./01*/2*."33#4$/4".$'/(!"

###$%&'()*+$,*-

!"#$%&'"()&*+,,-.

.*,&(/*0/+12+3/0*+/456)%7,(

+89/1:9;<=>?/777/@;AB:/=C@D/@8DE9B/;8=;/FG/=B@3/E9H@F;9/IF@F;D<@/<9=B/JD<9/

;9K;/>DG;9G;/;8=G/L<=M8F>=C/>DG;9G;$//

)9DMC9/CDD?FGL/ND</FGND<J=;FDG/=<9/CDD?FGL/ND</;9K;3/GD;/MF>;A<9@$//

@DJ9/>DM:E<F;FGL/;FM@/FG/JD<9/B9;=FC

#8FC9/:DA/@8DACB/ND>A@/DG/:DA</>=CCO;DO=>;FDG/;9K;3/BDGP;/ND<L9;/;8=;/L<=M8F>@/>=G/89CM/>DGI9:/

J9=GFGL/=GB/@;<9GL;89G/:DA</J9@@=L9$/+89:/=<9/9@M9>F=CC:/A@9NAC/FG/9KMC=FGFGL/=/>DG>9M;/;8=;/F@/

8=<B/;D/9KMC=FG/EF;8/ED<B@/=CDG9$

Q

“ ”/R/S160/571,T3/,*)U#57+15


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

!"#$%&'()*$+%*,%#')(*-*./01*/2*."33#4$/4".$'/(!"

###$%&'()*+$,*-

!"#$%&'"()&*+,,-.

+./0123//41.5607/8590:105;0<02<88=65=<26:540>?'06/1606.<[email protected]<3/069505;;/306DC/1$0+./0

:B<A/0<26@<88D0:88@163<6/109.<60%@7(C56E10.5B/C<A/0@1/F0650855G08:G/0:40HI"IJ0

*3:A:4<88DK0%@7(C56E10.5B/C<A/05;;/3/F05@3025BB@4:6D0<01/L/4=F<D0;3//063:<8$0%59/L/3K09/09/3/0

2@3:5@106501//0:;05;;/3:4A0<0854A/3063:<80C/3:5F095@8F0/46:2/0B53/0L:1:653106501:A40@C$0#5@8F0:60.<L/0

;3//063:<80<4F06./063/<6B/4605;;/3/F0<0!I=F<D0;3//063:<8$

<40/M<BC8/05;!"#!$$%&'%!#&(')"&*+&,

#')&-'$


Var stolt

Kundcitat om hur bra du är

Frågor som bara du kan svaren på

!!!"#$%&'()"*(+ !!!"#$%&'()"*(+

!"#$%&'"()&*+,,-.!"#$%&'"()&*+,,-.

),-./01223453104-56/-./752258-69/4,:/;:.4/<=104-0:/57/-602>?-69/

@-.-45=/?586251?./4,:/8,-4:<1<:="/A4B./12.5/104-5635=-:64:?/16?/

:C<,1.-D-69/4,14/4,:/577:=/-./7=::"

),-./*)E/-./<,=1.:?/1./1/F>:.4-56G/

8,-0,/-./C:164/45/:6919:/4,:/=:1?:=/

-CC:?-14:2H/16?/0=:14:/.5C:/>=9:60H"/

),:/-C19:/12.5/0=:14:./1/02:1=/

0566:04-56/45/4,:/-?:1/57/8,5/4,:/*)E/-./

41=9:4-69"/I1.42HG/4,:/?:.0=-<4-56/-./@:=H/

?:41-2:?/16?/-602>?:./1/6>C;:="

),-./01223453104-56/-./>.-69/1/4:.4-C56-12/7=5C/1/

,1<<H/0>.45C:="/):.4-C56-12./1=:/1/C1=J:4-69/

4:0,6-F>:/C:164/45/-6.4-22/4=>.4/16?/0=:?-;-2-4H/-6/

4,:/05C<16H/16?/-4./<=5?>04/5=/.:=@-0:"/),:/104>12/

@:=;-19:/-6/4,:/*)E/45/4,:/2:74/12.5/0=:14:./1/.:6.:/

57/>=9:60H/;H/C:64-56-69/4,:/85=?/K45?1H"L

!!!"#$%&'()"*(+

!"#!$%&'"#()(*++','"#*$(-.&"%-!.&

AM)N(O$*)A(M/)(/PQQP*)ARP/*EII&3)(3E*)A(MST


Sammanfattningsvis

Tänk på kundens behov och förförståelse

Tänk på sammanhanget

Många ställen i flera 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!


Punkt 1

Punkt 2

Punkt 3

Osv....Tack


samspelet mellan innehåll och interaktionsdesign

Education