5 Suunnittelutyökalut parempien CTA-painikkeiden suunnittelusta
Kun käymme useimmilla verkkosivustoilla, meillä on usein tavoitteita. Tavoitteen saavuttamiseksi on tavallisesti useita vaiheita, joihin meidän on ryhdyttävä, ja ensimmäinen vaihe alkaa klikkaamalla CTA (call to action) -painiketta. Ajattele viimeksi, kun olet kirjautunut palveluun tai lataat sovelluksen, prosessi todennäköisesti sisälsi vuorovaikutuksen toimintapainikkeen kanssa.
CTA-painikkeet ovat verkkosivustossasi käytettäviä painikkeita, jotka ohjaavat käyttäjiä tavoitteen muuntamiseen. CTA: n koko kohta on ohjata sivustosi kävijöitä haluttuun toimintatapaan. Joitakin yleisiä esimerkkejä CTA: sta ovat:
- "Aloita kokeilu"
- "Lataa sovellus / kirja / opas"
- "Rekisteröidy päivityksiin"
- "Hanki kuuleminen"
Tänään keskustelemme 5 parhaasta käytännöstä CTA-painikkeiden suunnittelussa yhdessä parhaiden reaalimaailman esimerkkien kanssa, joiden avulla saat mahdollisimman paljon klikkauksia aloitussivulta.
1. Visuaalisesti vaikuttava painike
Sinun painikkeen väri on tärkeä. Itse asiassa, jos aiot ottaa vain yhden yksittäisen neuvon tästä artikkelista, sen pitäisi olla tämä: "Harkitse CTA-painikkeen väriä". Värin avulla voit tehdä tietyistä painikkeista erottuvan enemmän kuin toiset antamalla heille näkyvyyttä.
Käytä kontrastiivisiä värejä
Kontrastiiviset värit toimivat parhaiten CTA-painikkeille käyttämällä kontrastiväria, on mahdollista luoda silmiinpistäviä painikkeita, jotka erottuvat. Sinun on valittava kontrastiväri verkkosivun värimallilta, mutta silti sopii yhteen yleisen mallin kanssa. Harkitse alla olevaa Firefox-esimerkkiä. Firefox-sivun CTA-painikkeen vihreä väri on siirtymässä sivulta ja välittömästi saa käyttäjän huomion.
Firefox CTA -painike on kirkkaanvihreä ja erottuu hyvin tummansinisellä pohjalla
Toinen silmäänpistävä CTA-painike löytyy Hipmunkin kotisivulta. Kirkas oranssi painike ottaa käyttäjän huomion ja määrittää seuraavan mahdollisen toimenpiteen.
Negatiivinen tila
Ei vain väri, joka on tärkeä CTA: lle, vaan myös sen ympärillä olevan tilan määrä. Välilyönti (tai negatiivinen tila) luo olennaisen hengitystilan ja erottaa CTA-painikkeet muiden käyttöliittymän elementtien joukosta. Vanha Dropbox-etusivu oli hyvä esimerkki negatiivisen tilan käyttämisestä ensisijaisen CTA-popin tekemiseen. Sininen "Ilmoittaudu ilmaiseksi" CTA erottuu taustan taustalla.
2. Toimintosuuntainen teksti
Tekemäsi tekstipuhelu, joka pakottaa kävijät tekemään oikean toiminnan, ei ole helppo tehtävä. Onneksi on muutamia asioita, jotka voivat auttaa sinua tekemään sen:
Aloita verbillä
Sinun tulisi välttää epämääräiset ja tylsät sanat, kuten "Anna lisätietoja" CTA-painikkeille ja korvata ne enemmän toiminta-suuntaisilla sanoilla kuin "Aloita ilmainen kokeilu" tai "Saat alennus nyt." Evernote on yksi yleisimmistä, mutta silti työskentelevät toiminta-orientoituja tekstejä CTA-painikkeellaan.
Aloita verbi, kuten "Käynnistä", "Hae" tai "Liity"
Mielenkiintoisempi esimerkki löytyy Treehouse-kotisivulta. Treehousein verkkosivustolla oleva CTA ei vain sano "Aloita ilmainen kokeilu"; se sanoo "Vaadi ilmaista kokeilua". Sanamuodon ero saattaa tuntua hienovaraiselta, mutta "vaatii ilmaisen kokeilujesi" kuulostaa paljon henkilökohtaisemmalta.
Käytä lyhyesti ja helposti ymmärrä tekstiä painikkeille
Muista ilmoittaa tarkalleen, mitä kävijä saa, jos hän napsauttaa CTA: ta. Ihannetapauksessa haluat pitää nappia tekstissä kahden ja viiden sanan välillä.
Lisää arvoehdotus
Todennäköisesti olet huomannut, että monilla painikkeilla on kopioinaan ilmaisia ilmaisia sanoja, ja se ei ole sattumaa, kun käytät tällaisia sanoja painikkeessa korostaa tarjouksen arvoehdotusta. Niinpä kirjoittaessasi CTA: ta, yritä löytää keino yhdistää yksi (tai kaikki) 3 vakuuttavaa sanaa:
- Vapaa
- Bonus
- heti
Annan esimerkkinä: Yksi suurista pelko käyttäjistä on ennen sitoutumista allekirjoittamaan jotain, on, että on kipu peruuttaa tilauksensa, jos he eivät pidä palvelua. Netflix vapauttaa pelon käyttämällä lupausta "Peruuta milloin tahansa" vieressä "Liity vapaa kuukausi" CTA.
Luo kiireellisyyttä
CTA-painikkeiden kiireellisyyden tunnistaminen voi tuottaa vaikuttavia napsautussuhteita. Esimerkiksi voit käyttää nappia tekstiä, kuten "Rekisteröidy ja saada 25% pois tänään vain!" Rajoittamalla jonkun tekemää päätöstä tekee ihmiset haluavat hakea tarjouksensa, kun he voivat.
Hyödyllinen teksti
Joskus haluat ehkä harkita lisätietojen lisäämistä painikkeen tekstissä. Tämä käytäntö on yleinen ilmaisten kokeilupainikkeiden kanssa. Esimerkiksi ilmainen kokeilupainike saattaa sanoa "30 päivän kokeiluversio, ei luottokorttia" pienemmässä tekstissä CTA-painikkeen alapuolella "Aloita ilmainen kokeilu" -teksti. Tämän ylimääräisen tekstin pitäisi helpottaa päätöksentekoprosessia.
3. Tee se näkymästä ilman vierittämistä
Toimintopainikkeiden sijoittaminen on yhtä tärkeää kuin väri ja viesti. CTA-painikkeen pitäisi sijaita helposti löydettävissä olevassa paikassa, joka seuraa orgaanisesti verkkosivujen virrasta. Yritä säilyttää CTA-painike taakse, jotta käyttäjät eivät koskaan menetä sitä. Ihannetapauksessa CTA-painikkeen pitäisi olla ensimmäisiä asioita, joita käyttäjä näkee sivulla, kun he saavuttavat sen. Lisätietojen on pysyttävä kannen alapuolella, missä ne ovat edelleen saatavilla, mutta eivät häiritse.
4. Suuri painike pyöristetyt kulmat
Ajattele, miten malli viestii edullisuudesta. Kuinka käyttäjät ymmärtävät elementin painikkeena? Käytä muotoa ja kokoa elementin näyttämiseksi painikkeeksi.
Tee se tarpeeksi
CTA: n pitäisi olla riittävän suuri katsomaan etäisyydeltä, mutta ei niin suurta, että se heikentää huomiota sivun pääsisältöstä
Käyttäjäpainikkeet pyöristetyt kulmat
Painikkeen muoto voi olla suuri rooli. Se on a todistettu tosiasia että pyöristetyt kulmat ovat helpommin silmiä. ContentVerven testissä pyöreä vihreä painike teki paremman kuin sininen suorakulmio.
5. Vähemmän enemmän, kun se tulee valintoihin
Muista, että jos haluat, että asiakkaasi ryhtyvät toimiin, sinun on avustettava heitä poistamalla kaikki mahdolliset esteet tieltä. Kun käyttäjille annetaan liian monta valintaa, heillä on taipumus sekaantua. Joten, on parempi tarjota potentiaalisille asiakkaille vain yksi vaihtoehto.
Jos haluat silti sisällyttää useita painikkeiden valintoja, anna painoarvoa muiden valinnan yli, jotta ne voivat kanavoida käyttäjiä kohti tiettyä reittiä. Yksi hyvä esimerkki on Evernote: heti kun pääset Evernote-sivuston pohjaosaan, on melko selvää, että suositeltava vaihtoehto on "Rekisteröidy ilmaiseksi", kun taas käyttäjien vertailuverkostojen vertailu on hyvin toissijaista.
johtopäätös
Tehokkaan CTA-suunnittelun saavuttamiseksi sinun on harkittava enemmän kuin vain itse painike. On myös tärkeää miettiä taustaväriä, ympäröivää kuvaa, ympäröivää tekstiä ja monia muita elementtejä. Basecamp-tiimi ymmärtää näiden elementtien merkityksen ja on suunnitellut täydellisen ulkoasun aloitussivulleen. Myös CTA-painikkeen alla käytetty mikrokoppi ("4.714 yritystä rekisteröitynyt tällä viikolla!") Lisää potentiaalisten asiakkaiden luottamusta.
Toivon, että tässä artikkelissa mainitut vinkit auttavat sinua luomaan paremman puhelun toimintopainikkeelle verkkosivustollesi. Viimeinen hetki on testauksen merkitys - jos päätät luoda CTA: n sivustossasi, muista kokeilla, toimiiko se yleisösi.