design och copy som ger effektiva calls-to action

26
Design och copy som ger effektiva call-to-action Patrik Åkerman von Knorring och David Aler torsdag den 27 september 2012

Upload: patrik-akerman-von-knorring

Post on 13-Dec-2014

99 views

Category:

Design


0 download

DESCRIPTION

Föreläsning från Web content Management Day 2012 på Clarion Hotell i Stockholm, kring hur du får design och text att samspela. Hur jobbar du effektivt med interaktionsdesign, grafisk design och copy så att användarna gör det du vill att de ska göra

TRANSCRIPT

Page 1: Design och Copy som ger effektiva calls-to action

Design och copy som ger effektiva call-to-action

Patrik Åkerman von Knorring och David Aler

torsdag den 27 september 2012

Page 2: Design och Copy som ger effektiva calls-to action

Var?

torsdag den 27 september 2012

Page 3: Design och Copy som ger effektiva calls-to action

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

torsdag den 27 september 2012

Page 4: Design och Copy som ger effektiva calls-to action

Flera CTA på samma sida

torsdag den 27 september 2012

Page 5: Design och Copy som ger effektiva calls-to action

torsdag den 27 september 2012

Page 6: Design och Copy som ger effektiva calls-to action

Anpassa efter enhet och sammanhang

torsdag den 27 september 2012

Page 7: Design och Copy som ger effektiva calls-to action

Design

torsdag den 27 september 2012

Page 8: Design och Copy som ger effektiva calls-to action

Storleken räknas

torsdag den 27 september 2012

Page 9: Design och Copy som ger effektiva calls-to action

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

torsdag den 27 september 2012

Page 10: Design och Copy som ger effektiva calls-to action

”Above the fold”

torsdag den 27 september 2012

Page 11: Design och Copy som ger effektiva calls-to action

Tänk på kontrasten

Klicka här

Klicka här

Klicka här

torsdag den 27 september 2012

Page 12: Design och Copy som ger effektiva calls-to action

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

torsdag den 27 september 2012

Page 13: Design och Copy som ger effektiva calls-to action

Använd oväntade former

torsdag den 27 september 2012

Page 14: Design och Copy som ger effektiva calls-to action

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

torsdag den 27 september 2012

Page 15: Design och Copy som ger effektiva calls-to action

Användartesta

torsdag den 27 september 2012

Page 16: Design och Copy som ger effektiva calls-to action

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

torsdag den 27 september 2012

Page 17: Design och Copy som ger effektiva calls-to action

Vad du säger

torsdag den 27 september 2012

Page 18: Design och Copy som ger effektiva calls-to action

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?

torsdag den 27 september 2012

Page 19: Design och Copy som ger effektiva calls-to action

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

torsdag den 27 september 2012

Page 20: Design och Copy som ger effektiva calls-to action

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”

torsdag den 27 september 2012

Page 21: Design och Copy som ger effektiva calls-to action

Fördelen för kunden i centrum

torsdag den 27 september 2012

Page 22: Design och Copy som ger effektiva calls-to action

torsdag den 27 september 2012

Page 23: Design och Copy som ger effektiva calls-to action

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;!"#!$$%&'%!#&(')"&*+&,

#')&-'$

torsdag den 27 september 2012

Page 24: Design och Copy som ger effektiva calls-to action

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

torsdag den 27 september 2012

Page 25: Design och Copy som ger effektiva calls-to action

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!

torsdag den 27 september 2012

Page 26: Design och Copy som ger effektiva calls-to action

Punkt 1

Punkt 2

Punkt 3

Osv....Tack

torsdag den 27 september 2012