Tegevussuuniste juhised, parimad tavad ja näited

Kodulehekülgedel esinevad üleskutse nupud jäetakse sageli tähelepanuta. Mõnikord ei mõista disainerid täpselt, mis teeb hea helistamisnupu kaugemale kui atraktiivne ja üldisele kujundusele vastav. Kuid üleskutse nuppudele on liiga tähtsad, et neid ei saaks mõista, et mõista, mis muudab need tõhusaks. Lõppude lõpuks on üleskutse nupu peamiseks punktiks saada külastajaid teha midagi.

Oluline on saada vähemalt põhiteadmised sellest, kuidas värv, skaala, keel ja muud tegurid mõjutavad üleskutse nupu konversiooni määra. Siinsed mõisted ei ole keerulised, kuid nad võtavad natuke ettekujutust ja kavatsevad luua konkreetse disaini raames võimalikult tõhusad üleskutse nupud. Lisateavet nende punktide kohta saate rohkem.

Tegevussuuniste eesmärk

Toimingunupud võivad teenida erinevaid funktsioone. Pealegi, “üleskutse” on tõesti natuke ebamäärane. Kõik see tähendab, et selle peamine eesmärk on saada saidile külastaja tee midagi. See, et midagi võiks olla toote lisamine oma ostukorvile, midagi alla laadida, teavet küsida või midagi muud.

Kuna üleskutse nuppudel on nii erinevad eesmärgid, tuleb palju kaaluda, mida nupp püüab saavutada. Tegevuskeskkonna nupu parimal kujundamisel saavad mängida rolli saidi tüüp, sihtturg ja soovitud tegevus.

"Toimetuse" nuppude tüübid

On mõned erinevat tüüpi helistamisnupud. Kuigi iga tüübi eesmärk on saada külastajad teatud toiminguks, võib see toiming oluliselt erineda. Järgnevalt on toodud kõige tavalisemad tegevusvõtmete tüübid, mis põhinevad nende poolt soovitud tegevusel.

1. Lisa ostukorvi nupud

E-kaubanduse saidid kasutavad tavaliselt mitmeid helistamisnuppe, kuid kõige levinum on see “Lisa ostukorvi” nuppu. Need nupud kuvatakse üldjuhul üksikute toote lehtedel. Nende eesmärk on meelitada kliente eseme ostmiseks. Ühiste kujunduselementide lisamine ostukorvi lisanupudesse sisaldab lihtsat sõnastust (nt “Lisa ostukorvi” või “Lisa kotti” või “Osta kohe“) ja ikoonide kasutamine (tavaliselt kott või ostukorv).

2. Laadi alla nupud

Allalaadimisnupud on sarnased, et lisada ostukorvi nuppe, et nad üritavad meelitada külastajaid objekti valdusse. Allalaadimisnuppude puhul soovivad paljud disainerid lisada rohkem teavet kui muud tüüpi nupud (näiteks versiooni teave või allalaadimise suurus).

3. Katse nupud

Mõned saidid püüavad meelitada oma külastajaid proovima oma pakkumisi, tavaliselt tasuta prooviperioodi vormis. See võib olla tasuta allalaadimine või tasuta konto, sõltuvalt konkreetsest saidist. Mõned saidid kasutavad seda “vähem on rohkem” filosoofia ja hoidke oma nuppude keel minimaalselt, samas kui teised soovivad pakkuda rohkem teavet selle kohta, mida uuring sisaldab.

4. Lisateave nupud

Lisateabe saamiseks nuppude kasutamine on tavaliselt teaser-teabe ploki lõpus (sageli kodulehtel). Need nupud on tavaliselt lihtsad, kuid sageli liiga suured, et meelitada külastaja tähelepanu.

5. Registreeru nupud

Registreerimisnupud ilmuvad kõige sagedamini kahes erinevas versioonis. Esimene tüüp on tavaliselt seotud registreerimisvormiga. Teist tüüpi kasutatakse tavaliselt sarnaselt “Lisa ostukorvi” nupud, nii et kasutajad saavad teenust või kontot osta või sisse logida, enne kui nad tegelikult registreerumisvormi jõuavad.

On ka teisi helistamisnuppe, kuid need on kõige levinumad. Ülaltoodule kohaldatavad juhised kehtivad tõenäoliselt ka mistahes muule kutsungi nupule, mida te kavandate.

Negatiivse ruumi tõhus kasutamine

Sa tahad, et teie üleskutse nupud paistaksid ümbritsevast sisust välja ja annaksid tõesti teie saidi külastajate tähelepanu. Selleks peate kasutama nende nuppude ümber negatiivset ruumi. Sisesta tühi tühikut oma sisu ja oma üleskutse nupu vahel. Kuigi see on vähem oluline (ja vähem levinud) mõnedel nuppudel, nagu näiteks ostukorvi lisamine nupudega, töötavad teised, nagu need, mis rohkem teada saavad, rohkem ruumi.

Oluline on tasakaalustada nuppude kõrval negatiivse ruumi suurust nuppude suurusega. See on umbes proportsioon. Sa tahad, et teie nupp, selle ümbrus ja ümbritsev sisu näeksid välja nagu nad koos, isegi suuruste erinevustega. Võib juhtuda, et peate asjadega natuke viigistama, et neid õigesti otsida.

Mõned juhised:

Veenduge, et sinu nupu ümber oleks piisavalt ruumi, et see ei oleks täis
Arvestage põhimõtteid, nagu kolmanda reegli reegel või kuldne suhe, kui soovite määrata, kui palju ruumi lisada
Negatiivne ruum annab teie helistamisnupule ruumi teie teisest sisust välja paistma ja eristab seda

Suurus ja värv

Kui suur on teie üleskutse nuppude tähtsus. Liiga suur nupp võidab kõik selle ümber. Liiga väike nupp läheb kaduma kogu muu lehe sisu. Sa tahad, et teie nupp oleks piisavalt suur, et välja paistma ilma disaini ülekaalukalt.

Värvi saab kasutada oma nuppude suuruse tasakaalustamiseks. Suuremate nuppude puhul valige värv, mis on teie disainis vähem nähtav (kuid jääb taas taustaks). Väiksema nupu jaoks võiksite valida heledama, kontrastsema värvi, et tõesti nupp pop. Mõlemal juhul veenduge, et teie kasutatav värv seab nupu üksteise peale, ilma et see puutuks kokku saidi üldise kujundusega.

Mõned juhised:

Teie üleskutse nupud peaksid ideaalis olema antud lehe suurimad nupud
Väiksemate nuppude esiletoomiseks kasutage kontrastseid värve
Suuremate nuppude paremaks paigaldamiseks kasutage vähem erinevaid värve
Te helistate toimingunuppudele, et juhtida tähelepanu ilma oma disaini ülekaalukalt

Keel

Täpne sõnastus, mida soovid kasutada oma üleskutse nuppudele, võib avaldada konversioonile suurt mõju. Võrdlema “Osta kohe” koos “Lisa ostukorvi“. Üks on palju kiirem kui teine. Või kuidas “Proovi seda tasuta” koos “Tasuta prooviversioon“? Üks on palju punchier kui teine ja paistab rohkem.

Keel, mida kasutate oma helistamisnupule, peaks olema võimalikult lihtne ja lihtne. Sa tahad, et külastajad teaksid vaid lühidalt, mida nad nupule vajutades saavad. Kui nad seda kahtlevad, tähendab see, et nad on peatanud, mis võib viia madalamate konversioonimääradega.

Ära unusta ka oma fontide suurust. Sinu helistamisklahvi tekst peaks olema suur ja paks, sobiv vastavalt nupu enda suurusele ja värvile. Veenduge, et seal oleks piisavalt kontrastsust ja et teksti oleks lihtne lugeda.

Mõned juhised:

Kasutage lihtsat ja otsest keelt
Kasutage põhiteksti nupule suurt, paksut kirja
Veenduge, et keel vajab konkreetset tegevust

Loo kiirus

Sa tahad, et teie saidi külastajad viiksid soovitud toimingud võimalikult vähe mõtlema. Kuigi te ei soovi oma külastajaid petta, seda rohkem võimalusi annate neile peatuda ja kaaluda, mida nad teevad, seda rohkem võimalusi annate neile öelda “ei”.

Sa tahad, et teie nupud annaksid neile mulje, et nad peavad tegutsema kohe. Sa tahad julgustada neid otsuste langetamiseks kohe. Kuigi see ei toimi iga üleskutse nupu puhul (eriti need, mis ostavad kõrge hinnaga pilte), on odav või tasuta toimingute puhul soovitav, et külastajad klõpsaksid vähe ettevaatusega..

Mõned juhised:

Julgusta oma külastajaid kohe tegutsema
Ära anna külastajatele mingit põhjust peatada
Kuigi kiireloomulisus on oluline, ärge oma külastajaid mingil viisil eksitage

Esitage lisateavet

Vajaduse korral kasutage oma helistamisnuppe, et anda külastajatele lisateavet selle kohta, mida nad kavatsevad nupule klõpsates saada. See on kõige sagedamini nähtav prooviklahvide või allalaadimisnuppude abil. Lisateabe tavalised näited hõlmavad tasuta prooviperioodi kestust või faili allalaadimise pikkust. Samuti on sageli näha versiooniteavet.

Lisateabe lisamisel pidage meeles, et peate keskenduma tegelikule üleskutsele. Veenduge, et keele köitev tekst, mis meelitab külastajaid tegutsema, on kõige silmapaistvam, muu teave on palju vähem nähtav.

Mõned juhised:

Lisage ainult lisateavet, kui see kasutaja kogemust lisab
Täiendav teave on asjakohane ainult teatud tüüpi helistamisnuppudele, eelkõige allalaadimis- või proovivõtupunktidele
Veenduge, et peamine üleskutse on teie nupu kõige silmapaistvam tekst

Prioriteetide seadmine

Kui teil on rohkem kui üks, on oluline oma lehel toimuva helistamisnupu prioriteet. Seda saab teha mitmel viisil, kuid kõige tavalisemad on värvi ja suuruse kasutamine.

Kasutage värvi, et esile tõsta lehekülje kõige olulisemat nuppu või muuta vähem tähtsad need vähem nähtavaks. Või kasutage suurust, et teha kõige olulisem nupp paistma (muutes selle suuremaks) ja vähemtähtsaid.

Ikoonid ja pildid

Visuaalsete märkide lisamine oma kõnede tegemise nuppudesse võib samuti suurendada konversioonimäärasid. Ostukorvi ikoon “Lisa ostukorvi” nupp või näiteks nupp allalaadimisnupul on mõlemad head näited. Mõtle ka unikaalsetele ikoonidele, mida soovite kasutada, kuid veenduge, et ikoon lisab kasutajakogemust, selgitades, milline on nupp, ja ei lisa segadust.

Mõned juhised:

Veenduge, et teie kasutatavad ikoonid annavad oma nupu tähenduse selgemaks, mitte segadusse
Lihtsalt tunnustatud ikoonid võivad teie külastajatele kohe tähendada
Ärge kartke kasutada vähemkasutatavaid ikoone, kui nende tähendus on endiselt selge

Näited

Siin on mõned näiteid suurest helistamisklahvist. Kuigi nad kõik ei vasta ülaltoodud juhistele, vastavad nad piisavalt kriteeriumidele, mida tuleb pidada suureks.

Otseülekanne - Nuppude "osta nüüd" (tasuliste valikute puhul) ja "registreerumise" (tasuta valikud) eristamine on hea strateegia.

Windows 7 - Suur, roheline nupp "Get Windows7" on külastajatele lihtne.

Fileshare'i peakorter - Siin on erkroheline nupp tõesti valge taustaga.

Püügipäevik - Erinevate värvide kasutamine nuppude "Laadi alla" ja "Osta" abil eristab neid ja annab eelistuse nupule "Osta".

TasteBook - See nupp kasutab ikooni suurepäraselt ja kasutab suurema, rasvase teksti väljapaistmiseks.

GoodBarry - Teine hele roheline helistamisnupp.

Lifetree Creative - Sama kirjatüübi jätmine keha koopiast üleskutse nupule loob ühtekuuluvustunde.

Resumator - Sinise taustaga paistab silmatorkav helepunane helistamisnupp.

Notepod - Hea näide lisateabe lisamisest üleskutse nupule.

Inkd - Suurepärane näide nuppude prioriseerimisest suurusega.

Elegantsed teemad - Teine suurepärane näide värvi kasutamisest, et silma paista ilma ümbritsevate disainielementidega kokku puutumata.

ZenDesk - Teine suurepärane näide nupu tegemisest paistab silma värvi abil.

Storenvy - Ümmargune nupp on ootamatu ja paistab silma, eriti kui seda ümbritseb valge äär.

Bara'Mail - Mõnikord töötab teie üldise veebilehe kujunduses parem nupp, eriti kui tegu on vähem kiireloomuline.

Rohkem ressursse

Tegevusnupud: näited ja parimad tavad - Smashing Magazine'ist
Hea helistamisnupud - UX Boothilt
Tegevusnuppudele helistamine: kas suurus tähendab? - Get Elasticist
10 Tõhusa tehnika “Tegevuskutse” - Boagworldist
5 näpunäiteid tõhusa helistamise nupu loomiseks - SitePointist