Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Call to action - best practices.

Call to action - best practices.

Presentatie door Inventis Web Architects.

Inventis Web Architects

November 16, 2011
Tweet

More Decks by Inventis Web Architects

Other Decks in Programming

Transcript

  1. CALL TO ACTION!

  2. None
  3. CALL TO ACTION !  Een call to action is een

    oproep aan een gebruiker om de gewenste actie te doen !  Iedere website/pagina zou een duidelijke call to action moeten bevatten!
  4. BEPERKT AANTAL DUIDELIJKE ACTIES !   Zet belangrijkste actie in

    de kijker !   Te veel keuze maakt kiezen moeilijk
  5. WELK VAN DE 3 KIEZEN?

  6. TAALGEBRUIK !   Actieve, duidelijke en dringende taal !  

    Bel ons, Koop nu, Registreer vandaag !   Ondubbelzinnig voor buitenstaanders
  7. WANNEER CTA BEANTWOORD? !  Wanneer de gebruiker de nood heeft

    (probleemoplossend) !  Wanneer voordelen duidelijk zijn (what’s in it for me?) !  Incentives !  CTA beperkt in de tijd (tijdelijk aanbod) !  Geruststellende info in buurt (veiligheid, privacy, …)
  8. PLAATSING CTA !  Een CTA hoort overal te staan waar

    bezoekers bereid zijn om tot actie over te gaan !  Ideaal vrij bovenaan in contentgedeelte (kopen bvb rechts naast foto’s product)
  9. BOVENAAN

  10. TUSSENIN Is  de  klant  reeds  overtuigd  in  de  hel2  van

     je  pagina?  Laat  hem  dan   niet  verder  lezen  en  zet  aan  tot  ac:e!  
  11. BENEDEN Op  het  einde  van  een  commerciële  tekst  hoort  een

     CTA,  de  bezoeker  is   beneden  aan  de  pagina  en  moet  ergens  anders  naar  toe,  :jd  voor  ac:e!  
  12. IN DE SIDEBAR Ideaal  voor  secundaire  CTA’s,  niet  voor  primaire

     
  13. IN DE BODY TEKST Bij  het  lezen  van  een  tekst

     is  een  geïnteresseerde  bezoeker  aandach:g,  een   call  to  ac:on  midden  in  de  bodytekst  kan  daarom  zeer  goed  werken.  
  14. IDEALE KLEUR VAN EEN CTA !  Meningen enigszins verdeeld !

     Algemeen oranje beste kleur meet BOB Big Orange Button, he works hard! !  Rood staat voor alarm en groen zet niet altijd aan tot actie !  Bij een oranje stoplicht duw je het gas harder in, zet aan tot actie
  15. IDEALE KLEUR VAN EEN CTA !  Vermijd ook grijze CTA-buttons!

    !  Compromis: CTA-button een unieke complementaire kleur heeft, die verder niet op de website wordt gebruikt !  A/B testen!
  16. KLEURENSCHEMA CTA

  17. CTA BUTTONS !  Buttons zijn van vitaal belang bij een

    call to action, buttons moeten de aandacht trekken en de bezoeker naar de gewenste actie leiden
  18. CTA BUTTONS !  gebruik gradients, schaduw en afgeronde hoeken om

    de button “echt” te doen lijken !  Gebruik een contrasterende kleur (groen, oranje, …) !  Maak de button voldoende groot maar overdrijf niet
  19. CTA BUTTONS !  Zorg voor actieve duidelijke taal !  Begin

    een call to action met een hoodletter !  Ondersteun de actie met een icoontje !  Zorg voor een subtiel hoover effect !  Zorg voor voldoende witruimte rond de knop
  20. CTA BUTTONS

  21. GOEDE VOORBEELDEN

  22. GOEDE VOORBEELDEN

  23. GOEDE VOORBEELDEN

  24. VRAGEN?