Kuidas disainida korralik CTA nupp

Kuidas disainida korralik CTA nupp

Kuidas disainida korralik CTA nupp

20. märts 2012, Egert Tüll, Kodulehed

CTA (Call To Action) nupp ehk tegevusele üleskutsev element on üks kõige olulisemaid funktsioone suurendamaks kontaktide arvu. Seda tuleks kasutada nii kodulehel, sotsiaalmeedias, print meedias jne. Väga tähtis on selle väljanägemine ja õige kasutamine.

Esmalt tuleks mõleda mida tahad CTA nuppuga öelda ja  mida sa tahad, et sinu potentsiaalne klient teeks kui ta seda näeb? Kui see on selge, tuleks antud nupule välimus anda – luua sellele korralik disain. Just selline, mis oleks silmapaistev ja paneb inimesed sellel klikkama.

9 olulist nippi – disainitud ja töötav CTA

  1. SUURUS ON OLULINE  - TEE CTA PIISAVALT SUUR
    Kui sa tahad, et CTA oleks piisvalt silmatorkav, siis oluline on selle suurus. Disaini CTA piisavalt suur, et see tuleks kergesti esile ning sellest oleks raske mööda vaadata. See ongi ju selle mõte, et külastaja teeks sinu soovitud tegevust.
    CTA - suurus
  2. JÄTA TALLE HINGAMISRUUMI
    Kui sa ei taha, et see „upuks“ teksti sisse, siis too see esile. Jäta sellele ümberringi piisavalt palju “õhku”. Üldise taustana sobib hästi nt valge ja oranž. Loomulikult sõltub see ka kodulehe põhi värvitoonidest.
    cta - hingamisruum
  3. ANNA SILMAPAISTEV ASUKOHT
    Kindlasti peaks olema CTA näha kohe enne kodulehe alla kerimist. Ehk siis asukoht üleval pool allakerimise joont. Parimad asukohad on üleval, vasakul. Inimese lugemisharjumus on vasakult paremale ja ülevalt alla. Samas topelt ei kärise. See tähendab seda, et kui ikka on tegemist tekstirohke vahelehega, kasuta mitut CTA-d. Näiteks üleval, kesksel ja ka all. Kõik sõltub sellest, kui palju on sisu vahelehel.
    CTA - asukoht


  4. KASUTA KONTRASTSEID VÄRVE
    Värv on üks kõige võimsamaid disaini elemente, mida saad kasutada CTA puhul. Nupp peaks asetsema kõigest muust eraldatuna ja olema domineeriv. Juhi disainija tähelepanu sellele. CTA nupu värv on ülioluline. Sõltuvalt selle mis valdkonnaga sinu firma tegeleb ja mis sorti teenuseid sa pakud, tuleks valida ka CTA nupu värv. Loe värvide mõju online keskonnas. http://www.wsionline.ee/varvide-moju-online-keskkonnas
    CTA - kontrast
  5. LISA „HOVER“ EFFEKT
    See tähendab, et kui hiirega minna üle CTA nupu, siis tekib eriline effekt. Näiteks vahetab nupp värvi. Samuti võib üleminekul minna nupu tekst suuremaks või lisad varju. Valikuid on erinevaid, leia endale sobiv.
    CTA - hover effekt
  6. KASUTA MITTEKONSERVATIIVSEID KUJUSID
    Enamus CTA nuppe tehakse ühesuguse (standardse) kujuga. Lihtne ristkülik kas ümarate või teravate nurkadega. Kui võimalik, siis proovi kasutada erilise kujuga nuppe. Kindlasti oleneb valdkonnast millega sinu ettevõtte tegeleb, aga teatud juhul võiks kasutada hoopis teise stiiliga nuppe. Näiteks ovaalsed, ümarad või hoopis ebakorrapärased.
    CTA - kuju


  7. LISA SUUNANÄITAJAD
    Kasuta nooli
    , mis viitavad CTA-le ning lisa ka neile tekst juurde. Sellega saad luua lisaväärtuse, kus põhjendad ära miks peaks just sellele CTA nupule vajutama.
    CTA - suund
  8. FOKUSSEERI TEKST
    Väga oluline on tekst
    , mida kasutad CTA nupul. Tee see võimalikult lihtne, arusaadav, klikkima kutsuv. Alati ei pea olema üledisainitud nupp see mis silmatorkab. Vahel piisab ka lihtsast disainist ja läbimõeldud tekstist.
    CTA - tekst
  9. LISA SEKUNDAARNE CTA
    Tegevusi, mida soovid, et külastaja teeks, võib olla ju erinevaid. Näiteks uudiskirjaga liitumine, mõne PDF-i alla laadimine, tasuta konsultatsiooni tellimine või toote ostmine. Põhilist tegevust rõhuta ja tee suuremalt! Teisejärguline tegevus tee veidike väiksem. Kasuta ka erinevaid värve.
    CTA - teine cta

Kokkuvõte

Igakord, kui oled tegemas kodulehe jaoks uut CTA nuppu, siis peaksid mõtlema mitmele tähtsale punktile. Toon veelkord välja kõige põhilisemad detailid, mida peaksid jälgima kodulehele CTA nuppe tehes.

  • Suurus on oluline  - tee CTA piisavalt suur
  • Jäta talle hingamisruumi
  • Anna silmapaistev asukoht
  • Kasuta kontrastseid värve
  • Lisa „hover“ effektKasuta mittekonservatiivseid kujusid
  • Lisa suunanäitajad
  • Fokusseeri tekst
  • Lisa sekundaarne CTA

Nüüd kõige olulisem –  kui sa tahad, et sinu CTA oleks kõige effektiivsem ja täidaks oma eesmärki siis tee A/B testimist. Proovi milline värv töötab kõige paremini ning milline tekst selle peal. Vaheta nupu asukohta. Proovi erineva kujuga nuppe. Kodulehel saab ju külastaja tegevusi mõõta ja patt oleks seda mitte seda teha. Mida rohkem sa analüüsid, seda paremaid tulemusi saad saavutada!

Kasutatud allikas: http://blog.hubspot.com/

Vaata kõiki postitusi

© 2016 Kõik õigused kaitstud. Oleme iseseisvalt tegutsev ja õigusi omav WSI frantsiisiäri.