Instrucțiuni privind butoanele Apel la acțiune, cele mai bune practici și exemple

Butoanele de apelare la acțiune pe site-uri web sunt deseori neglijate. Designerii uneori nu înțeleg exact ceea ce face un buton de apel bun la acțiune, dincolo de a fi atrăgător și de a se încadra în designul general. Dar butoanele de chemare la acțiune sunt prea importante pentru a fi proiectate fără o înțelegere a ceea ce le face eficiente. La urma urmei, punctul principal al unui buton de chemare la acțiune este de a atrage vizitatorii do ceva.

Este important să obțineți cel puțin o înțelegere de bază a modului în care culoarea, scara, limbajul și alți factori influențează rata de conversie a unui buton de apel la acțiune. Conceptele de aici nu sunt complicate, dar au o preocupare și intenționează să creeze cele mai eficiente butoane de apel la acțiune într-un anumit design. Citiți mai departe pentru mai multe informații despre fiecare dintre aceste puncte și multe altele.

Scopul butoanelor "Apel la acțiune"

Tastele de apel pentru acțiune pot servi la o varietate de funcții. Dupa toate acestea, “apel la acțiune” este într-adevăr un pic vag. Tot ce inseamna este ca scopul principal este de a obtine un vizitator la site-ul dvs. Fă ceva. Că ceva ar putea fi adăugarea unui produs la coșul de cumpărături, descărcarea de ceva, solicitarea de informații sau doar despre orice altceva.

Deoarece butoanele pentru apelurile la acțiune au scopuri atât de variate, trebuie luate în considerare aspectele pe care butonul vizează să le atingă. Tipul site-ului, piața țintă și acțiunea dorită pot juca un rol în modul cel mai potrivit de a proiecta un buton de chemare la acțiune.

Tipuri de butoane "Apel la acțiune"

Există câteva tipuri diferite de butoane de apel pentru acțiune. În timp ce fiecare tip își propune să facă vizitatori să efectueze o anumită acțiune, acea acțiune poate varia considerabil. Mai jos sunt cele mai frecvente tipuri de butoane pentru apeluri, pe baza acțiunii pe care doresc să o faceți.

1. Adăugați în butonul de comandă

În general, site-urile de comerț electronic utilizează un număr de butoane de apel pentru acțiune, dar cea mai utilizată este cea “adaugă în coș” buton. Aceste butoane apar în general pe paginile individuale ale produselor. Scopul lor este acela de a atrage clienții să cumpere un element. Elementele de design comune care sunt adăugate în butoanele căruciorului includ o formulă simplă (cum ar fi “Adaugă în coș” sau “Adăugați în sac” sau “Cumpară acum“) și utilizarea icoanelor (de obicei o pungă sau un cărucior).

2. Descărcați butoanele

Butoanele de descărcare sunt similare cu cele ale butoanelor cu căsuțe, în sensul că încearcă să atragă un vizitator pentru a lua în posesie un element. În cazul butoanelor de descărcare, mulți designeri preferă să includă mai multe informații decât alte tipuri de butoane (cum ar fi informații despre versiuni sau dimensiune de descărcare).

3. Butoane de încercare

Unele site-uri încearcă să-și atragă vizitatorii pentru a încerca ofertele lor, în general sub forma unui proces gratuit. Aceasta ar putea fi o descărcare gratuită sau un cont gratuit, în funcție de site-ul respectiv. Unele site-uri folosesc “mai puțin este mai mult-” filozofia și păstrați limbajul pe butoanele lor la un nivel minim, în timp ce alții preferă să ofere mai multe informații despre ceea ce conține procesul.

4. Aflați mai multe butoane

Aflați mai multe butoane sunt în general utilizate la sfârșitul unui bloc de informații teaser (de multe ori pe pagina de pornire). Aceste butoane sunt de obicei simple, dar adesea supradimensionate pentru a atrage atenția vizitatorilor.

5. Butoanele de înscriere

Butoanele de înscriere apar cel mai frecvent în două versiuni diferite. Primul tip este, de obicei, asociat direct cu un formular de înscriere. Cel de-al doilea tip este de obicei folosit într-o manieră similară cu “adaugă în coș” butoane, ca o modalitate prin care utilizatorii pot achiziționa sau se înscriu pentru un serviciu sau un cont, înainte de a ajunge la un formular de înscriere.

Există și alte tipuri de butoane de apel pentru acțiune, dar acestea sunt cele mai comune. Regulile care se aplică celor de mai sus se vor aplica, de asemenea, oricarui tip de buton de apelare la acțiune pe care ați putea să îl proiectați.

Utilizarea spațiului negativ eficient

Doriți ca butoanele dvs. de apel pentru acțiune să iasă în evidență de conținutul înconjurător și să comandați atenția vizitatorilor site-ului dvs. În acest scop, trebuie să utilizați spațiul negativ în jurul acestor butoane. Includeți spațiu liber între conținutul dvs. și butonul de chemare la acțiune. În timp ce acest lucru este mai puțin important (și mai puțin frecvent) pe unele butoane, cum ar fi adăugarea în butoanele căruciorului, cu alții, cum ar fi cele pentru a afla mai multe, lucrați mai bine cu mai mult spațiu.

Este important să echilibrați spațiul negativ pe care îl aveți în jurul butoanelor cu dimensiunea propriilor butoane. E vorba de proporție. Doriți ca butonul dvs., spațiul din jurul acestuia și conținutul înconjurător să pară toți ca și cum ar merge împreună, chiar și cu discrepanțe în dimensiune. Este posibil să fiți nevoiți să vă jucați cu lucrurile puțin, pentru a le face să se uite drept.

Unele linii directoare:

Asigurați-vă că există suficient spațiu în jurul butonului dvs. pentru a nu se simți aglomerat
Luați în considerare principiile, cum ar fi regula treimilor sau raportul de aur atunci când stabiliți cât spațiu trebuie inclus
Spațiul negativ dă camerei de butoane pentru a ieși din celălalt conținut și îl diferențiază

Dimensiune și Culoare

Cât de mare sunt butoanele pentru apelul la acțiune este foarte importantă. Un buton prea mare va depăși totul în jurul lui. Un buton care este prea mic se va pierde în shuffle-ul întregului conținut de pe o pagină. Doriți ca butonul dvs. să fie suficient de mare pentru a ieși fără să copleșească designul.

Culoarea poate fi utilizată cu efect mare pentru a ajuta la echilibrarea dimensiunii butoanelor. Pentru butoanele mai mari, alegeți o culoare mai puțin proeminentă în cadrul designului dvs. (dar rămâne în continuare fundalul din nou). Pentru un buton mai mic, poate doriți să alegeți o culoare mai strălucitoare, contrastantă pentru a face cu adevărat butonul pop. În ambele cazuri, asigurați-vă că culoarea pe care o utilizați setează butonul în afară, fără a se ciocni cu designul general al site-ului.

Unele linii directoare:

Butoanele dvs. de apel pentru acțiune ar trebui să fie, în mod ideal, cele mai mari butoane de pe o anumită pagină
Utilizați culori contrastante pentru a face mai mici butoanele să iasă mai mult
Utilizați culori mai puțin distincte pentru a face mai bine butoanele supradimensionate
Apelați la butoanele de acțiune trebuie să comandați atenția fără a vă copleși designul

Limba

Formula exactă pe care o alegeți să o utilizați în butoanele de apel pentru acțiune poate avea un efect enorm asupra conversiei. Comparaţie “Cumpară acum” cu “Adaugă în coș“. Una este mult mai urgentă decât cealaltă. Sau ce zici “Încearcă-o gratuit” cu “Încercare gratuită“? Una este mult mai puternică decât cealaltă și se evidențiază mai mult.

Limba pe care o utilizați în butoanele de apel pentru acțiune trebuie să fie cât mai simplă și mai simplă. Doriți ca vizitatorii să știe doar cu o privire exact ce vor obține atunci când faceți clic pe un buton. Dacă pun la îndoială, înseamnă că au întrerupt, ceea ce poate duce la rate de conversie mai mici.

Nu uitați și dimensiunile fontului. Textul de pe butonul de chemare la acțiune trebuie să fie mare și îndrăzneț, potrivit în mod corespunzător dimensiunii și culorii butonului însuși. Asigurați-vă că există un contrast suficient și că textul este ușor de citit.

Unele linii directoare:

Utilizați limbajul simplu, direct
Utilizați un font mare și îndrăzneț pe butonul pentru textul principal
Asigurați-vă că limba în mod clar solicită o acțiune specifică

Creați urgență

Doriți vizitatorilor de pe site-ul dvs. să efectueze acțiunile dorite cu cât mai puține gânduri posibil. În timp ce nu doriți să vă înșelați vizitatorii, cu atât mai multe oportunități pe care le oferiți acestora să se oprească și să ia în considerare ceea ce fac, cu atât mai multe oportunități pe care le oferiți acestora “Nu”.

Vrei ca butoanele tale să le dea impresia că trebuie să acționeze imediat. Vreți să-i încurajați să ia decizia imediat, pe urmele momentului. Deși acest lucru nu va funcționa pentru fiecare buton de chemare la acțiune (în special pentru cei care cumpără articole de înaltă valoare), pentru acțiuni cu costuri reduse sau gratuite, având în vedere că vizitatorii dau clic cu puțină preconcepție este de dorit.

Unele linii directoare:

Încurajați-i pe vizitatori să acționeze imediat
Nu oferiți vizitatorilor vreun motiv să vă întrerupeți
În timp ce urgența este importantă, nu înșelați vizitatorii în nici un fel

Furnizați informații suplimentare

Dacă este cazul, utilizați butoanele de apel pentru acțiune pentru a oferi vizitatorilor informații suplimentare despre ceea ce vor obține dacă dau clic pe buton. Acest lucru este cel mai frecvent observat cu butoanele de încercare sau cu butoanele de descărcare. Exemple comune de informații suplimentare includ durata de timp în care va dura o încercare gratuită sau dimensiunea unei descărcări de fișier. Informațiile despre versiuni sunt, de asemenea, văzute frecvent.

Când includeți informații suplimentare, amintiți-vă că trebuie să vă concentrați asupra apelului la acțiune. Asigurați-vă că textul pentru limba care îi atrage pe vizitatori să acționeze este cel mai proeminent, cu alte informații mult mai puțin vizibile.

Unele linii directoare:

Doar includeți informații suplimentare atunci când acestea adaugă experiența utilizatorului
Informații suplimentare sunt potrivite numai pentru anumite tipuri de butoane de apel, în special butoane de descărcare sau de încercare
Asigurați-vă că apelul principal pentru acțiune este în continuare cel mai proeminent text al butonului

Prioritizarea

Este important să acordați prioritate butoanelor apelului la acțiune pe pagina dvs. dacă există mai multe. Acest lucru se poate face într-o serie de moduri, dar cele mai frecvente sunt prin utilizarea de culoare și mărime.

Utilizați culoarea pentru a evidenția cel mai important buton dintr-o pagină sau pentru a face ca cele mai puțin importante să pară mai puțin proeminente. Sau utilizați mărimea pentru a face ca cel mai important buton să se evidențieze (făcându-l mai mare) și de a sublinia cele mai puțin importante.

Icoane și imagini

Includerea indicativelor vizuale în butoanele de apel pentru acțiune poate, de asemenea, să contribuie la creșterea ratelor de conversie. O pictogramă a unui coș de cumpărături pe un “adaugă în coș” de exemplu, sau o săgeată de pe butonul de descărcare sunt amândouă exemple bune. Gândiți-vă la pictogramele unice de utilizat, de asemenea, dar asigurați-vă că pictograma adaugă la experiența utilizatorului clarificând ce este pentru buton și nu adaugă nici o confuzie.

Unele linii directoare:

Asigurați-vă că pictogramele pe care le utilizați vă ajută să clarificați sensul butonului dvs., mai degrabă decât să îl confundați
Pictogramele ușor recunoscute pot indica imediat vizitatorilor dvs. înțelesul
Nu vă fie frică să utilizați icoane mai puțin folosite, atâta timp cât semnificația lor este încă clară

Exemple

Iată câteva exemple de butoane de apel de acțiune. Deși nu se conformează perfect direcțiilor de mai sus, aceștia îndeplinesc suficiente criterii pentru a fi considerate excelente.

Transmitere live - Diferențierea butoanelor "cumpărați acum" (pentru opțiunile plătite) și "înscrieți-vă" (pentru opțiunile gratuite) este o strategie bună.

Windows 7 - Butonul mare, verde "Get Windows7" este ușor pentru vizitatori la fața locului.

Sisteme de distribuire a fișierelor - Butonul verde stralucitor de aici se deosebește de fundalul alb.

Jurnal de bord - Folosind culori diferite pentru butoanele "Descărcare" și "Cumpărați" le distinge și acordă prioritate butonului "Cumpărați".

TasteBook - Acest buton face o mare utilizare a unei pictograme și folosește un text mai mare, îndrăzneț pentru a iesi în evidență.

GoodBarry - Un alt buton verde deschis pentru acțiune.

Lifetree Creative - Continuarea aceleiași caractere de la copia corporală la butonul de chemare la acțiune creează un sentiment de coeziune.

Resusitorul - Un buton roșu aprins de acțiune, cu un tip aldin, se deosebește de fundalul albastru.

Notepod - Un bun exemplu de includere a informațiilor suplimentare într-un buton de chemare la acțiune.

Inkd - Un exemplu excelent de prioritizare a butoanelor cu dimensiune.

Teme elegante - Un alt exemplu excelent de utilizare a culorii pentru a iesi in evidenta fara a se contrazice cu elementele de design din jur.

ZenDesk - Un alt exemplu excelent de a face un buton să iasă în evidență folosind culoarea.

Storenvy - Un buton rotund este neașteptat și se evidențiază, mai ales când este înconjurat de o margine albă.

Bara'Mail - Uneori, un buton care se amestecă funcționează mai bine în designul general al site-ului dvs., mai ales atunci când acțiunea este mai puțin urgentă.

Mai multe resurse

Butoane de apel la acțiune: exemple și bune practici - de la revista Smashing
Butoane de chemare la acțiune - de la cabina UX
Butoane de apel la acțiune: Are dimensiunea problemei? - De la Elastic
10 Tehnici pentru o eficiență “Apel la acțiune” - De la Boagworld
5 sfaturi pentru crearea unui buton eficient de apel la acțiune - de la SitePoint