5 sfaturi pentru proiectarea unui câștigător Buy Button

Dacă sunteți un designer sau un comerciant online, sau pur și simplu se întâmplă să dețineți un site unde încercați să vindeți ceva, într-un anumit moment va trebui să creați un buton de cumpărare propriu-zis. Și apoi, veți afla rapid că doar punerea a “cumpară acum” textul pe un dreptunghi albastru nu este suficient dacă sperați pentru rezultate bune.

Din fericire, proiectarea unui buton de cumpărare propriu-zis nu este atât de dificilă odată ce cunoașteți câteva cunoștințe de bază. Aici merge.

În primul rând, textul pe butonul dvs. este cel mai important lucru, dar există și alte caracteristici care trebuie abordate. De ce spun că textul este cel mai important? Imaginați-vă acest lucru - care este scopul de a avea un buton frumos proiectat în cazul în care textul de pe el spune “Du-te dracu!”? Caz inchis. Copia bună este locul în care sunt făcute banii.

În articolul de astăzi, discutăm 5 trăsături cruciale a unui buton de cumpărare propriu-zis. Hai să aruncăm o privire!

1. Stilul general

Acesta este primul punct pe această listă, fără nici un motiv, deoarece este cea mai importantă trăsătură.

Doriți să transforma butonul într-o vacă purpurie. Acesta este un concept popularizat de Seth Godin. Pe scurt, vrei să fie remarcabil; prin remarcabil spun ceva ce nu poate fi trecut cu vederea. Ceva ca o vacă purpurie în mijlocul unei pășuni.

Unii designeri nu sunt deosebit de buni la asta. Este tentant să creezi un buton care să lege frumos culorile și stilul site-ului pe care se află. La început se pare că este o idee foarte bună, dar nu este.

Problema este că un astfel de buton este departe de a fi remarcabil. Nu doriți ca butonul dvs. să se amestece; vrei să iasă în evidență. Prin urmare, ar trebui să fie creat ca un element complet separat care se întâmplă doar să stea pe un site web, nu ca ceva care trebuie să fie congruent cu site-ul respectiv.

Permiteți-mi să vă dau un exemplu minunat de buton de vacă purpuriu.

Mozilla Firefox

Aceasta este ceea ce arată o pagină de descărcare Firefox. Vreau să observați un lucru. Butonul din stânga, butonul de descărcare, nu arată nimic ca pe altceva pe acea pagină. E singurul lucru verde. Este singurul loc care prezintă logo-ul Firefox. Este unul dintre cele mai mari elemente de acolo. Se află deasupra pliului.

Toate aceste trăsături fac acest buton extrem de vizibil. Este o vacă purpurie. Dacă spui că nu o vezi, încerci doar să impresionezi pe cineva.

Pe scurt: Urmăriți un buton remarcabil.

2. Aspect

Sa incepem cu culoarea.

Dacă doriți să fiți remarcabil utilizați o culoare care nu a fost folosită în altă parte a paginii. La fel ca tipii Firefox pe site-ul lor. Puteți utiliza un instrument precum Color Scheme Designer pentru a găsi o culoare care arată bine cu schema actuală de culoare a site-ului dvs. web, dar este încă foarte diferită.

Și “diferit” este cuvântul cheie aici. Dacă site-ul dvs. este în cea mai mare parte albastru, nu doriți un buton albastru de cumpărare. Nu vrei o nuanță de albastru. Nu vrei nimic care să arate albastru. Vrei roz, portocaliu, etc. Sunt sigur că înțelegi.

Încă un truc. Orange este cunoscut ca cea mai vizibilă culoare imediat după roșu. Dar, nu ridică toate emoțiile negative roșii (lucruri ca “Stop”, “atenție!”, și “Pericol”). Cel mai popular buton portocaliu de pe internet poate fi găsit pe amazon.com.

Următorul lucru pe care trebuie să vă concentrați este dimensiunea butonului. Ei bine, ce pot să spun, trebuie să fie mare. Cu cât este mai mare cu atât este mai bine. (Din nou, exemplu Firefox.)

“Pot face chiar și mai mare?” este o întrebare bună în timpul fazei de proiectare. Fă-o foarte mult.

Ar trebui sa fie simplu sau sclipitor? Un buton nu poate fi prea strălucitor. Uită-te din nou la butonul Firefox. Este luminoasă. Ea are o vulpe portocalie pe ea, dar totusi arata ca un buton. Și aceasta este o limită pe care nu o poți trece. Dacă butonul dvs. nu arată ca unul pe care nimeni nu îl va da vreodată clic pe el.

De aceea nu există un răspuns simplu la care cineva este mai bun - blând sau simplu. Trebuie doar să afli singur. Verificați întotdeauna testul. Creați două butoane, una clară și una simplă. Folosiți-le pe ambele în același timp și vedeți care dintre ele se comportă mai bine. Google Website Optimizer vă va ajuta în acest sens.

Doar un exemplu rapid al unui buton simplu.

ThemeFuse

După cum puteți vedea butonul nu folosește vulpi portocalii, dar este încă foarte vizibil. Ca o chestiune de fapt, ThemeFuse (un magazin tematic WordPress premium, din care fac parte) oferă un mic nume numit shortcodes. Printre altele, acele coduri scurte fac foarte ușor crearea unor butoane frumoase.

De exemplu, cu o singură linie de:

[button link = "domain.com"] Click aici pentru a cumpara produsul meu minunat! [/ button]

Am obtinut acest rezultat:

3. Font

Sans-serif font este standard pentru toate tipurile de butoane. Aceasta deoarece fonturile sans-serif sunt foarte ușor de citit pentru fiecare utilizare online. (Pe de altă parte, fonturile serif sunt mai bune pentru publicațiile tipărite.)

Doriți ca copia de pe butonul dvs. să fie la fel de lizibilă, deoarece este cea mai importantă piesă de text de pe pagină. Tot-capacele nu sunt o idee bună. Funcțiile mixte funcționează mult mai bine. Prin caz mixt vreau să spun că prima literă a fiecărui cuvânt este un caracter mare. (Cu excepția unor cuvinte precum “pentru”, “”, “și”, etc)

(Sursa imaginii: Gomediazine)

Unele fonturi sigure pe care le puteți utiliza sunt: ​​Arial, Helvetica, Franklin Gothic, Myriad sau orice alt font clasic sans-serif, într-adevăr.

Acum, ce zici de culoare? Copia trebuie, desigur, să aibă un contrast ridicat cu culoarea butonului. Nu vrei gri-pe-gri. Vrei alb-negru sau albastru-pe-portocaliu.

Din nou, textul trebuie să fie foarte ușor de citit.

4. Plasarea

Cea mai bună plasare depinde de designul site-ului dvs., ceea ce probabil nu este surprinzător. Dar mai există încă câteva reguli care merită respectate.

Plasați-l în cel mai evident loc posibil. Nu încercați să fiti creativi aici. Plasarea trebuie să fie evidentă pentru client / utilizator.

De fiecare dată când cineva vizitează site-ul, se așteaptă să vadă anumite lucruri în anumite locuri. Lucruri precum: logo-ul din colțul din stânga sus, rezumatul coșului de cumpărături din colțul din dreapta sus, clauza privind drepturile de autor în subsolul dvs. etc. Treaba dvs. este să încercați să aflați care este cel mai evident loc pentru un buton de cumpărare și puneți-l acolo.

Desigur, trebuie să fie cel mai vizibil loc în același timp. Aceasta înseamnă două lucruri:

1. Aceasta absolut trebuie plasat deasupra ori, și
2. Nu vă fie teamă de spațiul alb. Spațiul alb este un prieten al fiecărui designer de web bun. Amintiți-vă, nu contează cât de multe lucruri puteți plasa pe un site Web, ceea ce contează este cât de multe lucruri puteți să le eliminați.

Puteți pune strategia de plasare pe steroizi duplicând butonul și plasându-l și în partea de jos a paginii. Astfel, atunci când cineva citește întreaga pagină, ei pot continua să acționeze în partea de jos a acesteia.

5. Elemente suplimentare

Acesta este cireașa de pe tort. Elementele suplimentare îmbunătățesc și mai mult vizibilitatea butonului. Exemple de elemente: săgeți, cărucioare de cumpărături, lupă, semne plus sau diverse elemente de branding.

Exemplul meu preferat - exemplul Firefox - folosește un element extraordinar de cool - vulpea portocalie (aka sigla lor).

O regulă de bază este de a utiliza elemente suplimentare care accentuați scopul butonului. De exemplu, două săgeți care arată în jos funcționează foarte bine pentru un buton de descărcare. O pictogramă de coș de cumpărături funcționează excelent cu un buton add-to-cart (exemplul Amazon de mai sus). Magnifierul funcționează excelent cu un buton de căutare. Si asa mai departe.

De asemenea, puteți utiliza anumite elemente de branding. De exemplu, lucruri precum: pictograma RSS standard cu un buton abonat la feed, o pictogramă de pasăre cu un buton follow-me-on-twitter, o vulpe portocalie cu un buton download-firefox, logo-ul propriu cu un buy- chestii de chestii.

Aici sunt cateva exemple:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Puterea "liberului"

Încă un truc este folosirea celui mai puternic cuvânt în limba engleză - GRATUIT. Ori de câte ori ceva este anunțat ca fiind gratuit, oamenii încep să acționeze previzibil și irațional (a verifica o carte excelentă de la Dan Ariely, "Upside de iraționalitate" pentru a afla ce vreau să spun.)

Mai multe exemple:

FreshBooks

Wufoo

Freeagent.com

Ce urmeaza?

Dacă sunteți un fel de expert în Photoshop sau alt software similar, puteți merge mai departe și de a crea un buton frumos chiar acum. O altă modalitate este de a deveni un proprietar norocos al oricărei teme WordPress de către ThemeFuse, așa cum am menționat mai devreme în acest post.

Care este sfatul dvs. cu privire la proiectarea unui buton de cumparare mare? Mi-ar plăcea să actualizez acest post cu opiniile dumneavoastră.