Ghid de proiectare a butoanelor: Cum să proiectați butoane care convertesc

De ce să scrieți un ghid de proiectare a butoanelor? Sunt atât de importante butoanele? De ce să cheltuim atât de multă energie pe o parte atât de mică a interfeței cu utilizatorul?

În timp ce butoanele sunt foarte frecvente în designul web și par simple, importanța lor nu trebuie subestimată. Sunt elemente vitale ale site-ului care îndeplinesc sarcini foarte importante.

Mai ales ca apeluri principale la acțiune și pe site-urile de comerț electronic, butoanele influențează literalmente linia de jos. Cu toate acestea, și ca butoane de partajare socială, butoanele de înscriere prin e-mail și de trimitere a formularelor sunt elemente esențiale pentru succesul unui site web.

Din acest motiv, în acest articol doriți să vorbiți în detaliu despre acest element de design adesea neglijat și despre cum să creați butoane cu conversie ridicată pentru site-urile web WordPress. În timp ce accentul va fi pus pe CTA (îndemnuri la acțiune), vom vorbi, de asemenea, despre o mulțime de sfaturi generale atunci când vine vorba de proiectarea butoanelor.

Acest subiect ți-a apăsat butonul? Apoi continuați să citiți.

Înainte de a începe, un cuvânt rapid despre testarea A / B

Mai jos, vom trece în revistă câteva linii directoare clare pentru crearea și utilizarea butoanelor. Aceste principii vă vor ajuta să vă gândiți prin design, poziționare și alte atribute importante ale oricăror butoane de pe site-ul dvs.

Cu toate acestea, în același timp, este important să rețineți că aceasta reprezintă doar baza pentru îmbunătățirea ratei de conversie. Principiile de proiectare vă permit să presupuneți cu atenție ce va funcționa, totuși să știți cu adevărat ce tip de buton deține cheia pentru a converti vizitatorii în abonați, cumpărători sau altceva se află în testare. Rularea testelor A / B vă permite să vă dați seama ce funcționează cu adevărat pentru site-ul dvs., culorilor butoanelor, copierii, poziției și altor markeri la care răspund cel mai bine vizitatorii.

Pentru că totul contează. Chiar și cea mai mică modificare poate avea un efect surprinzător de mare asupra ratelor de conversie - atât pozitive, cât și negative. Treceți peste aceste exemple pentru a înțelege despre ce vorbesc.

Deci, în timp ce ghidul nostru de proiectare a butoanelor vă va ajuta să înțelegeți cele mai bune practici, cel mai bine este completat cu experimente sănătoase pentru a găsi combinația câștigătoare a succesului site-ului dvs.

Cum să proiectați butoane pe care utilizatorii fac efectiv clic

După această avertizare, ne întoarcem acum la ceea ce se întâmplă în elaborarea butoanelor performante pentru apeluri mai bune la acțiune și rate de conversie crescute. Bucurați-vă!

Proiectați-le pentru a se potrivi mărcii sau site-ului dvs.

Înainte de a intra în designul funcțional, este important să vă gândiți la contextul în care vor apărea butoanele. Nu are rost să creezi butonul perfect dacă îți încurcă site-ul.

Din acest motiv, deși ghidurile de mai jos sunt importante, contează, de asemenea, ca rezultatul acestora să se integreze bine cu contextul în care apare. Asta înseamnă că butoanele dvs. se potrivesc paletei de culori a site-ului, stilului și liniilor directoare generale de proiectare.

În timp ce doriți ca butoanele să iasă în evidență pentru a determina acțiunea, scopul este ca acestea să iasă în evidență într-un mod pozitiv. Asta înseamnă unul care este în armonie cu designul general și nu îl distruge.

În același timp, nu vă fie teamă să experimentați puțin. Uneori, un buton cu o culoare contrastantă este exact ceea ce este necesar pentru a condimenta un design altfel fad.

Faceți butoanele să arate ca butoanele

Primul pas pentru a crea butoane pe care se face clic este să le faceți să arate ca butoane. Apelurile la acțiune și opțiunile de partajare nu sunt bune pentru nimic dacă utilizatorii nu înțeleg că ar trebui să profite de ele.

Utilizatorii au anumite așteptări atunci când vine vorba de designul butoanelor. Dacă nu le îndeplinești deloc, vor întâmpina cu greu acțiunea dorită. Prin urmare, este important să includeți indicii vizuale care să îi ajute să înțeleagă.

Primul indiciu este forma. Cea mai comună formă pentru butoane este dreptunghiulară sau dreptunghiulară cu colțuri rotunjite. Utilizatorii de computere au fost expuși la acest design de mult timp și, prin urmare, sunt foarte familiarizați cu acesta.

Sursa: Wikipedia Folosit cu permisiunea Microsoft

Desigur, sunt posibile și alte forme, inclusiv pătrate, cercuri, triunghiuri sau chiar forme personalizate. De fapt, există multe exemple de butoane ciudate și neobișnuite, de exemplu, pe dribling

A merge cu o formă mai puțin tradițională poate avea sens pentru a menține designul site-ului dvs. congruent. Totuși, așa cum s-a dovedit iOS-ul Apple cu pătratele rotunjite, asta nu înseamnă că nu funcționează.

Imagine de Ienjoyeverytime / shutterstock.com.

Orice ai alege, te asigură că rămâi consecvent. Evitați să folosiți modele diferite pentru butoane diferite. Acest lucru nu numai că face o interfață de utilizare mult mai bună, dar asigură și faptul că utilizatorii vor putea identifica butoane pe întregul site.

Un alt indiciu important de design sunt umbrele și luminile. Umbrele au devenit un indiciu universal pentru a arăta că elementele pot fi făcute clic sau pot fi atinse. Chiar și altfel, designul plat le folosește ca semnal pentru funcționalitate.

Sursa: Material.io

Furnizați etichete clare

Pe lângă designul de bază, etichetele clare sunt, de asemenea, importante pentru utilizarea butoanelor. Fără o etichetă, utilizatorii nu pot stabili ce fac.

Etichetele nu trebuie neapărat să fie scrise, icoanele funcționează și ele (vezi butoanele de partajare socială). Utilizarea ambelor împreună este o altă posibilitate, în special pe butoanele legate de comerțul electronic.

Imagine de Prixel Creative / shutterstock.com.

Ceea ce este important este că utilizatorul poate înțelege ce efect va avea acțiunea lor de a face clic pe un buton. În caz contrar, ar putea evita acest lucru în primul rând.

Iată câteva linii directoare pentru etichete clare:

• Fii descriptiv și specific
• Folosiți verbe de acțiune, de exemplu, Înscrieți-mă , Trimiteți formularul , Creați un cont
• Adresați-vă direct utilizatorului
• Creați un sentiment de urgență cu cuvinte precum Acum sau Astăzi
• Păstrați-l simplu și clar

Etichetele au o importanță deosebită atunci când vine vorba de CTA-uri. Schimbarea a doar câteva cuvinte poate avea un impact mare asupra performanței butoanelor. De exemplu, Unbounce a înregistrat o creștere de 90% a ratei de clic prin simpla schimbare a copiei butonului de la „Începeți perioada de încercare gratuită de 30 de zile” la „Începeți perioada de încercare gratuită de 30 de zile”.

Da, așa poate fi puterea unui cuvânt.

Puneți butoane unde utilizatorii le pot găsi

Acesta este cu adevărat o nebunie. Dacă utilizatorii dvs. nu vă pot găsi butoanele, va fi greu apăsat pe ele. Din acest motiv, un alt factor pentru eficacitatea lor este localizarea.

Există câteva convenții. De exemplu, principalul CTA poate fi, de obicei, plăcut deasupra pliantei. Acest lucru are sens și este anticipat de utilizatori.

Sursa: Netflix

Același lucru este valabil și pentru alte tipuri de butoane în care utilizatorii au fost instruiți să se aștepte la anumite locații. De exemplu, butoanele pentru precedent și următor sunt de obicei comandate unul la altul la stânga și la dreapta.

Întrucât acest lucru este atât de înrădăcinat în conștiința publică, inversarea ordinii ar putea frustra vizitatorii și îi va determina să plece. Și acesta este ultimul lucru pe care îl dorești.

Totuși, și pentru butoanele care au locații mai flexibile, de ex. Butoane de partajare socială, gândirea unde să le pună este primordială. De exemplu, ați putea crede că plasarea butoanelor sociale la sfârșitul articolelor dvs. este o idee bună. În acest fel, utilizatorii pot partaja postarea după ce au terminat-o, nu?

Cu toate acestea, majoritatea cititorilor nici nu ajung la sfârșitul postărilor dvs. În consecință, o idee mai bună este să plasați butoane unde pot fi accesate în orice moment al experienței de lectură. Un astfel de exemplu este bara laterală plutitoare Monarch:

Când aveți dubii, o regulă bună pentru amplasarea butoanelor este să vă întrebați unde vor urmări utilizatorii. Proiectarea ar trebui să ghideze utilizatorul pe drumul său, astfel încât butoanele pot fi concluzia logică a drumului lor pe site.

Acordați atenție dimensiunii și spațiului

Acum ajungem la un subiect care este deosebit de important în designul mobil. Persoanele care interacționează cu site-ul dvs. prin atingere sunt mai puțin precise în acțiunile lor decât cele care folosesc un mouse. Din acest motiv, trebuie să le permiteți să utilizeze și să atingă butoanele fără nicio problemă sau pericolul de a atinge butonul greșit.

Sursa: Apple

Primul pas este să vă asigurați că butoanele dvs. sunt suficient de mari. Varful mediu al degetului uman este de 8-10 mm mare. În consecință, Apple sugerează să creeze elemente care să fie utilizate prin atingere cel puțin 44 px cu 44 px (utilizați puncte în loc de pixeli pentru afișajele retinei). Recomandările altor producători se învârt, de asemenea, în jurul marcajului de 10 mm. Desigur, dimensiunea poate fi ușor scăzută pentru designul web care vizează utilizarea desktopului.

În același timp, trebuie să luați în considerare distanța dintre butoane. Nu doriți să frustrați utilizatorii, deoarece aceștia împing accidental lucruri pe care nu intenționau să le facă. Spațiul amplu face, de asemenea, elementele mai ușor de detectat, ceea ce contează pentru apelurile principale la acțiune.

Oferi feedback

Odată ce butoanele sau site-ul dvs. sunt identificabile ca atare și utilizabile, este timpul să vă gândiți la momentul în care sunt de fapt chemați la acțiune. Butoanele pot avea mai multe stări de existență:

• Normal - identificabil ca buton, semnale care pot fi făcute clic
• Focalizat - Schimbându-se la trecerea mouse-ului peste el, confirmarea pentru utilizator că acțiunea este posibilă
• Apăsat - Schimbare suplimentară pentru a recompensa utilizatorul pentru acțiuni și confirmă că se întâmplă ceva
• Ocupat - Când acțiunea are loc în fundal, butonul poate reflecta acest lucru
• Dezactivat - Arată că sunt posibile alte acțiuni, doar că nu în acest moment

Sursa: Material.io

Oferind feedback vizual utilizatorilor pentru utilizarea butoanelor, puteți face interacțiunea mai clară și mai plăcută. Pentru alte idei similare, consultați articolul despre microinteracțiuni.

Folosiți bine contrastul

Nu toate butoanele sunt create egale. În timp ce o pagină de destinație poate avea mai multe linkuri pe care să faceți clic, ar trebui să existe doar una care contează cu adevărat.

Instrumentele pentru a clarifica acest lucru vizitatorilor sunt culoarea, contrastul și locația. Folosiți-le eficient pentru a atrage atenția și a determina utilizatorii să facă clic.

Prin contrastarea butoanelor din restul interfeței, le faceți mai vizibile. În plus, evită ca aceștia să se piardă printre alte elemente.

Când vine vorba de culoare, nu există cea mai bună opțiune. Din nou, multe aici depind de propriul design. O regulă bună este să alegeți o culoare contrastantă și să o luați de acolo. Pentru mai multe informații despre acest subiect, consultați articolul nostru despre tehnicile de potrivire a culorilor.

În plus față de culoare, puteți utiliza diferite moduri de a introduce contrastul, inclusiv dimensiunea, tipografia și spațiul alb. Contrastul dintre culoarea butonului și textul poate îmbunătăți efectul și poate face copia mai lizibilă. Combinate cu o poziție proeminentă, acestea fac ca butoanele să apară cu adevărat.

Sursa: Prezi

Pentru a afla dacă este vizibilă îndemnul tău la acțiune, folosește vechiul „test de strabism”. Aplicați designul, faceți câțiva pași de pe ecran, strângeți ochii și vedeți dacă butonul dvs. iese în evidență. Știu, nu sună foarte profesionist, dar funcționează!

Îți testezi strabismul #CTA? Este cel mai bun mod de a afla dacă îndemnul tău la acțiune iese în evidență. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

- Design Pickle (@designpickle) 25 iulie 2015

Butoanele contrastante contează și pentru a stabili ordinea între ele. Atunci când vi se oferă două sau mai multe opțiuni, o culoare mai puternică poate însemna pe care ați prefera sau îi sfătuiește pe vizitatori să ia.

Sursa: Quicksprout

Rezumând

Butoanele sunt un element central, dar deseori neglijat al designului web. În mod nemeritat. Mai ales sub formă de apeluri la acțiune, acestea pot avea o influență extraordinară asupra conversiilor, ratele de clic și alte elemente importante de succes.

Din acest motiv, tema proiectării și plasării butoanelor nu trebuie luată cu ușurință. Pentru a recapitula, pentru a crea butoane eficiente:

• asigurați-vă că se potrivesc cu designul dvs. general
• asigurați-vă că utilizatorii le pot identifica ca butoane
• furnizați etichete clare
• plasați-le acolo unde utilizatorii le pot găsi
• fii atent la dimensiune și spațiu
• oferiți feedback atunci când sunt folosiți
• faceți-i să iasă în evidență de restul site-ului

Aceste linii directoare vă vor ajuta să configurați butoanele pe care utilizatorii dvs. nu pot să nu facă clic. Cu toate acestea, după cum sa menționat la început, aceste bune practici sunt menite a fi tratate ca un punct de plecare. Pentru a afla cu adevărat ce butoane funcționează pentru site-ul dvs. și cum puteți îmbunătăți conversiile, designul butoanelor ar trebui să meargă întotdeauna mână în mână cu testarea A / B aprofundată. Din fericire, avem și un articol pe această temă.

Care este experiența dvs. cu designul butoanelor? Ceva important de adăugat la cele de mai sus? Vă rugăm să ne anunțați în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului de către BerryCat / shutterstock.com