5 nasvetov za oblikovanje uspešnega »gumba za nakup«

Če ste oblikovalec ali spletni tržnik, ali pa se zgodi, da imate lastno spletno stran, kjer poskušate nekaj prodati, boste na neki točki morali oblikovati pravi "gumb za nakup". In potem boste hitro ugotovili, da je samo dajanje a “kupi zdaj” besedilo na modrem pravokotniku ni dovolj, če upate na dobre rezultate.

Na srečo oblikovanje ustreznega "gumba za nakup" ni tako težko, ko spoznate nekaj osnovnega znanja. Tukaj gre.

Prvič, besedilo na vašem gumbu je najpomembnejša stvar, vendar obstajajo še nekatere druge značilnosti, ki jih je treba obravnavati. Zakaj pravim, da je besedilo najpomembnejše? Predstavljajte si to - kaj je smisel imeti lepo oblikovan gumb, če je v besedilu napisano “Pojdi k vragu!”? Primer zaključen. Dobra kopija je, kje so denar.

V današnjem članku razpravljamo 5 ključnih značilnosti pravilnega "gumba za nakup". Poglejmo!

1. Splošni slog

To je točka št. 1 na tem seznamu ne brez razloga, saj je to najpomembnejša lastnost.

Ti hočeš obrnite gumb v vijolično kravo. To je koncept, ki ga je Seth Godin populariziral. Skratka, želite, da je izjemen; z izjemnim mislim nekaj, kar ni mogoče spregledati. Nekaj ​​kot vijolična krava sredi paše.

Nekateri oblikovalci pri tem niso posebej dobri. Vabljivo je ustvariti gumb, ki se lepo ujema z barvami in slogom spletne strani, na kateri se nahaja. Sprva se zdi kot zelo dobra ideja, samo da ni.

Težava je v tem, da takšen gumb še zdaleč ni izjemen. Ne želite, da se vaš gumb zliva; hočeš, da izstopa. Zato je treba ustvariti kot popolnoma ločen element, ki se zgodi, da sedi na neki spletni strani, ne kot nekaj, kar mora biti skladno s to spletno stranjo..

Dovolite mi, da vam dam odličen primer gumba, kot je vijolična krava.

Mozilla Firefox

Tako izgleda stran za prenos Firefoxa. Želim, da opazite eno stvar. Gumb na levi strani, gumb za prenos, na tej strani nima ničesar podobnega. To je edina zelena stvar. To je edino mesto, ki predstavlja logotip Firefoxa. To je eden največjih elementov. Nahaja se nad pregibom.

Zaradi vseh teh lastnosti je ta gumb izjemno viden. To je vijolična krava. Če praviš, da tega ne vidiš, samo poskušaš navdušiti nekoga.

Na kratko: Cilj je imeti izjemen gumb.

2. Videz

Začnimo s tem barva.

Če želite biti izjemni, uporabite barvo, ki ni bila uporabljena nikjer drugje na strani. Tako kot fantje Firefox delajo na svoji spletni strani. S pomočjo orodja, kot je Color Scheme Designer, lahko poiščete barvo, ki izgleda dobro s trenutno barvno shemo spletnega mesta, vendar je še vedno zelo drugačna.

In “drugačen” tukaj je ključna beseda. Če je vaša spletna stran večinoma modra, ne želite modrega gumba za nakup. Ne želite modrega odtenka. Nočeš ničesar, kar izgleda modrikasto. Hočeš rožnato ali oranžno itd. Prepričan sem, da si dobil smisel.

Še en trik. Oranžna barva je znana kot najbolj vidna barva takoj po rdeči. Ampak ne poveča vseh negativnih čustev, ki jih ima rdeče (stvari, kot so “stop”, “pazi!”, in “nevarnosti”). Najbolj priljubljena oranžna tipka na internetu je na voljo na amazon.com.

Naslednja stvar, na katero se moramo osredotočiti, je velikost gumba. No, kaj naj rečem, mora biti BIG. Večji kot je boljši. (Ponovno: primer Firefoxa.)

“Lahko naredim še večji?” je dobro vprašanje, ki ga je treba zastaviti med fazo oblikovanja. Naredi veliko.

Bi moralo biti preprosta ali neokusna? Gumb ne more biti preveč bleščeč. Ponovno poglejte gumb Firefox. To je neokusno. Na njej je oranžna lisica, vendar še vedno izgleda kot gumb. In to je meja, ki je ne morete prečkati. Če vaš gumb ne zgleda, ga nihče ne bo nikoli kliknil.

Zato ni preprostega odgovora na to, kdo je boljši - neokusen ali preprost. Samo sami morate ugotoviti. Vedno razdeli test. Ustvarite dva gumba, eno nežno in eno preprosto. Uporabite oboje ob istem času in si oglejte, kateri je boljši. Pri tem vam bo pomagal Googlov orodje za optimiziranje spletnih mest.

Preprost primer preprostega gumba.

ThemeFuse

Kot lahko vidite, gumb ne uporablja nobenih oranžnih lisic, vendar je še vedno zelo viden. Dejstvo je, da ThemeFuse (premium WordPress tematska trgovina, v kateri delam) ponuja nekaj, kar se imenuje kratke kode. Med drugim te kratke kode zelo olajšajo ustvarjanje lepih gumbov.

Na primer, z eno samo vrstico:

[button link = "domain.com"] Kliknite tukaj za nakup mojega odličnega izdelka! [/ gumb]

Dobim ta rezultat:

3. Pisava

Sans-serif pisava je standard za vse vrste gumbov. To je zato, ker so pisave sans-serif zelo berljive za vsako spletno uporabo. (Na nasprotni strani so serifne pisave boljše za tiskane publikacije.)

Želite, da je kopija na vašem gumbu čim bolj berljiva, saj je najpomembnejši del besedila na strani. Vse kape niso dobra ideja. Mešano ohišje deluje veliko bolje. S kombiniranim primerom mislim na prvo črko vsake besede, ki je velik. (Razen besed “za”, “”, “in”, itd.)

(Vir slike: Gomediazin)

Nekatere varne pisave, ki jih lahko uporabite, so: Arial, Helvetica, Franklin Gothic, Myriad ali katera koli druga klasična pisava sans-serif..

Kaj pa barva. Kopija mora biti seveda v visokem kontrastu z barvo gumba. Ne želite sive barve. Želite črno-belo ali modro-oranžno.

Tudi besedilo mora biti zelo berljivo.

4. Umestitev

Najboljša postavitev je odvisna od oblikovanja vaše spletne strani, kar verjetno ni presenetljivo. Vendar še vedno obstajajo nekatera pravila, ki jih je vredno spoštovati.

Postavite ga v najbolj očiten možen prostor. Ne poskušajte biti ustvarjalni. Namestitev mora biti očitna za stranko / uporabnika.

Vsakič, ko nekdo obišče spletno stran, pričakujejo nekatere stvari na določenih mestih. Stvari, kot so: logotip v zgornjem levem kotu, povzetek nakupovalne košarice v zgornjem desnem kotu, klavzula o avtorskih pravicah v nogi itd. Vaša naloga je, da poskusite ugotoviti, kaj je najbolj očitno mesto za gumb za nakup in ga samo postavite.

Seveda mora biti najbolj vidno mesto ob istem času. To pomeni dve stvari:

1. To absolutno namestiti nad pregibom, in
2. Ne bojte se presledka. Whitespace je prijatelj vsakega dobrega spletnega oblikovalca. Ne pozabite, ni pomembno, koliko stvari lahko postavite na spletno mesto, kar je pomembno, koliko stvari lahko odstranite iz njega.

Svojo strategijo umestitve lahko postavite na steroide, tako da podvojite gumb in ga položite na dno strani. Na ta način, ko nekdo prebere celotno stran, lahko še vedno ukrepa na dnu.

5. Dodatni elementi

To je glazura na torti. Dodatni elementi še dodatno izboljšajo vidnost vašega gumba. Primeri elementov: puščice, nakupovalni vozički, povečevalna stekla, plus znaki ali različni elementi blagovne znamke.

Moj najljubši primer - primer Firefox - uporablja resnično kul dodatni element - oranžno lisico (imenovan tudi njihov logotip).

Pravilo palca je, da uporabite dodatne elemente poudarite namen gumba. Na primer, dve puščici navzdol delujeta odlično za gumb za prenos. Ikona nakupovalne košarice odlično deluje z gumbom za dodajanje v košarico (primer amazon zgoraj). Povečevalno steklo odlično deluje z gumbom za iskanje. In tako naprej.

Uporabite lahko tudi nekatere elemente blagovne znamke. Na primer stvari, kot so: standardna ikona RSS z gumbom za naročanje na vnos, ptičja ikona z gumbom za spremljanje na Twitterju, oranžna lisica z gumbom download-firefox, vaš lastni logotip z nakupom-my- gumb za stvari.

Tu je nekaj primerov:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Moč "prostih"

Še en trik je uporaba najmočnejše besede v angleškem jeziku - BREZPLAČNO. Kadarkoli se nekaj reklamira kot svobodno, ljudje začnejo delovati predvidljivo iracionalno (poglejte si veliko knjigo Dan Ariely, "Navzven iracionalnosti", da ugotovite, kaj mislim.

Več primerov:

Sveže knjige

Wufoo

Freeagent.com

Kaj je naslednje?

Če ste nekako usposobljeni v Photoshopu ali drugi podobni programski opremi, lahko takoj nadaljujete in ustvarite lep gumb. Drug način je, da postanete srečen lastnik katerekoli WordPress teme s ThemeFuse, kot sem že omenil na tem mestu.

Kakšen je vaš nasvet o oblikovanju velikega gumba za nakup? Rad bi posodobil to objavo z vašim mnenjem.