5 savjeta za izradu pobjedničkog gumba

Ako ste dizajner, ili online marketer, ili ste upravo dogoditi da posjedujete web stranicu na kojoj pokušavate prodati nešto, u nekom trenutku ćete morati dizajnirati odgovarajuće "kupiti gumb". I onda, brzo ćete saznati da je samo stavljanje “Kupi sada” tekst na plavom pravokutniku jednostavno nije dovoljan ako se nadate dobrim rezultatima.

Srećom, dizajniranje odgovarajućeg "gumba za kupnju" nije tako teško kada upoznate osnovna znanja. Evo ga.

Prije svega, tekst na vašem gumbu je najvažnija stvar, ali postoje neke druge značajke koje treba riješiti. Zašto kažem da je tekst najvažniji? Zamislite ovo - u čemu je smisao lijepo dizajniranog gumba ako tekst na njemu piše “Idi k vragu!”? Slučaj zatvoren. Dobra kopija je mjesto gdje se vrši novac.

U današnjem članku raspravljamo 5 presudnih osobina pravog "gumba za kupnju". Pogledajmo!

1. Ukupni stil

Ovo je točka broj 1 na ovom popisu ne bez razloga, jer je to najvažnija osobina.

Želiš pretvorite svoj gumb u ljubičastu kravu. To je koncept koji je Seth Godin popularizirao. Ukratko, želite da bude izvanredno; mislim na nešto što se ne može previdjeti. Nešto kao grimizna krava usred pašnjaka.

Neki dizajneri nisu osobito dobri u tome. Primamljivo je stvoriti gumb koji se lijepo veže uz boje i stil web-lokacije na kojoj se nalazi. Isprva se čini kao vrlo dobra ideja, samo što nije.

Problem je u tome što je takav gumb daleko od izvanrednog. Ne želite da se vaš gumb uklopi; želiš da se ističe. Stoga bi trebao biti stvoren kao potpuno odvojen element koji se jednostavno događa na nekoj web-lokaciji, a ne kao nešto što treba biti u skladu s tom web-lokacijom..

Dopustite mi da vam dam izvrstan primjer gumba poput ljubičaste krave.

Mozilla Firefox

Tako izgleda stranica za preuzimanje Firefoxa. Želim da primijetite jednu stvar. Gumb s lijeve strane, gumb za preuzimanje, ne izgleda kao ništa drugo na toj stranici. To je jedina zelena stvar. To je jedino mjesto koje predstavlja logotip Firefoxa. To je jedan od najvećih elemenata. Nalazi se iznad poklopca.

Sve ove osobine čine ovaj gumb iznimno vidljivim. To je ljubičasta krava. Ako kažeš da ga ne vidiš, samo pokušavaš impresionirati nekoga.

U suštini: Cilj je imati izvanredan gumb.

2. Izgled

Počnimo od boja.

Ako želite biti izvanredni, upotrijebite boju koja se ne koristi nigdje drugdje na stranici. Baš kao i Firefox dečki rade na svojoj web stranici. Pomoću alata kao što je Color Scheme Designer možete pronaći boju koja izgleda dobro s trenutnom shemom boja vaše web-lokacije, ali je još uvijek vrlo različita.

I “različit” ovdje je ključna riječ. Ako je Vaša web stranica uglavnom plava, ne želite plavi gumb za kupnju. Ne želite nijansu plave. Ne želite ništa što izgleda plavičasto. Želite ružičastu ili narančastu, itd. Siguran sam da ste shvatili.

Još jedan trik. Naranča je poznata kao najvidljivija boja odmah nakon crvene boje. Ali, to ne podiže sve negativne emocije crvene boje (stvari poput “Stop”, “pazi!”, i “opasnost”). Najtraženiji narančasti gumb na internetu možete pronaći na amazon.com.

Sljedeća stvar na koju se treba usredotočiti jest veličinu gumba. Pa, što mogu reći, to mora biti VELIKO. Što je veća, to je bolje. (Opet, primjer Firefoxa.)

“Mogu li to učiniti još većim?” je dobro pitanje za vrijeme projektne faze. Učinite to mnogo.

Trebao bi biti jednostavan ili jeftin? Gumb ne može biti previše blistav. Ponovno pogledajte gumb Firefox. To je nevjerojatno. Na njemu je narančasta lisica, ali ipak izgleda kao gumb. A to je granica koju ne možete prijeći. Ako vaš gumb ne izgleda kao da ga nitko nikada neće kliknuti.

Zato nema jednostavnog odgovora na koji je bolje - neobično ili jednostavno. Samo morate sami otkriti. Uvijek podijeljen test. Napravite dva gumba, jedan jeftin i jedan jednostavan. Koristite ih oboje u isto vrijeme, i pogledajte koji je bolji. Google Optimizator web mjesta pomoći će vam u tome.

Samo kratak primjer jednostavnog gumba.

ThemeFuse

Kao što možete vidjeti, gumb ne koristi narančaste lisice, ali je i dalje vrlo vidljiv. Zapravo, ThemeFuse (premium WordPress tematska trgovina, u kojoj sam dio) pruža nešto što se naziva kratki kodovi. Između ostalog, ti kratki kodovi olakšavaju stvaranje lijepih gumba.

Na primjer, sa samo jednim retkom od:

[button link = "domain.com"] Kliknite ovdje da biste kupili moj izvrstan proizvod! [/ button]

Dobivam ovaj rezultat:

3. Font

Font bez serifa je standard za sve vrste gumba. To je zato što su fontovi bez serifa vrlo čitljivi za svaku online upotrebu. (Sa druge strane, serif fontovi su bolji za tiskane publikacije.)

Želite da kopija na vašem gumbu bude što je više moguće čitljiva, jer je to najvažniji dio teksta na stranici. Sve kape nisu dobra ideja. Mješoviti slučaj radi mnogo bolje. Pod mješovitim slučajem mislim na prvo slovo svake riječi koje je veliko slovo. (Osim riječi poput “za”, “”, “i”, itd)

(Izvor slike: Gomediazine)

Neki sigurni fontovi koje možete koristiti su: Arial, Helvetica, Franklin Gothic, Myriad, ili bilo koji drugi klasični sans-serif font, stvarno.

Što je s bojom. Kopija bi, naravno, trebala biti u visokom kontrastu s bojom gumba. Ne želite sivo-na-sivo. Želite crno-bijelo ili plavo-na-narančasto.

Ponovno, tekst mora biti vrlo čitljiv.

4. Položaj

Najbolji položaj ovisi o dizajnu vaše web-lokacije, što vjerojatno nije iznenađujuće. Ali još uvijek postoje neka pravila koja vrijedi poštovati.

Stavite ga u najočitije moguće mjesto. Ne pokušavajte biti kreativni ovdje. Položaj bi trebao biti očigledan za korisnika / korisnika.

Svaki put kad netko posjeti web-lokaciju očekuju određene stvari na određenim mjestima. Stvari kao što su: logotip u gornjem lijevom kutu, sažetak košarice u gornjem desnom kutu, klauzula o autorskom pravu u podnožju, itd. Vaš je zadatak da pokušate otkriti što je najočitije mjesto za gumb za kupnju i samo ga stavite tamo.

Naravno, to mora biti najvidljivije mjesto u isto vrijeme. To znači dvije stvari:

1. To apsolutno mora biti postavljen iznad poklopca, i
2. Nemojte se bojati razmaka. Whitespace je prijatelj svakog dobrog web dizajnera. Zapamtite, nije bitno koliko stvari možete postaviti na web-lokaciju, bitno je koliko stvari možete ukloniti iz nje.

Strategiju položaja možete staviti na steroide tako da duplicirate gumb i stavite ga na dno stranice. Na taj način, kada netko pročita cijelu stranicu, oni i dalje mogu djelovati na dnu.

5. Dodatni elementi

Ovo je šlag na torti. Dodatni elementi dodatno povećavaju vidljivost vašeg gumba. Primjeri elemenata: strelice, kolica za kupovinu, povećala, plus znakovi ili različiti elementi marke.

Moj omiljeni primjer - primjer Firefoxa - koristi jedan stvarno cool dodatni element - narančastu lisicu (tzv. Njihov logotip).

Pravilo je da se koriste dodatni elementi naglasite svrhu gumba. Na primjer, dvije strelice okrenute prema dolje izvrsno funkcioniraju za gumb za preuzimanje. Ikona košarice izvrsno funkcionira s gumbom add-to-cart (primjer iznad Amazon). Povećalo sjajno radi s gumbom za pretraživanje. I tako dalje.

Također možete koristiti neke elemente marke. Na primjer, stvari kao što su: standardni RSS ikona s gumbom za pretplatu na feed, ikona za ptice s gumbom za praćenje na Twitteru, narančasta lisica s gumbom za preuzimanje Firefox, vlastiti logotip s kupnjom gumb gumba.

Evo nekoliko primjera:

Wakeinteractive

Commercialiq

MediaTemple

Unlocking.com

Sofasurfer.eu

Uploadify

Snaga "slobodnog"

Još jedan trik je korištenje najmoćnije riječi na engleskom jeziku - BESPLATNO. Kad god se nešto oglašava kao besplatno, ljudi počinju djelovati predvidljivo iracionalno (pogledajte veliku knjigu Dan Ariely, "Naopako iracionalnosti" kako bi saznali na što mislim.

Više primjera:

FreshBooks

Wufoo

Freeagent.com

Što je sljedeće?

Ako ste iskusni u Photoshopu ili nekom drugom sličnom softveru, možete upravo sada kreirati lijep gumb. Drugi način je da postane sretan vlasnik bilo koje WordPress teme ThemeFuse, kao što sam spomenuo ranije u ovom postu.

Što je vaš savjet o dizajniranju velikog gumba za kupnju? Volio bih ažurirati ovaj post s vašim mišljenjem.