5 Vinkkejä voittavan “Osta-painikkeen” suunnitteluun
Jos olet suunnittelija tai online-markkinoija, tai jos vain omistat verkkosivuston, jossa yrität myydä jotain, sinun täytyy suunnitella oikea ostopainike jossain vaiheessa. Ja sitten saat nopeasti selville, että vain asetat “osta nyt” sinisen suorakulmion teksti ei vain riitä, jos toivot hyviä tuloksia.
Onneksi oikean "ostopainikkeen" suunnittelu ei ole niin vaikeaa, kun saat tietää joitakin perustietoja. Tässä tulee.
Ensinnäkin painikkeella oleva teksti on tärkein asia, mutta on olemassa joitakin muita ominaisuuksia, joita on käsiteltävä. Miksi sanon, että teksti on tärkein? Kuvittele tämä - mitä on tarkoitus ottaa kauniisti muotoiltu painike, jos tekstissä on sanottu “Mene helvettiin!”? Asia suljettu. Hyvä kopio on, missä rahat tehdään.
Tämän päivän artikkelissa keskustelemme 5 tärkeää ominaisuutta oikean "ostopainikkeen". Katsotaanpa!
1. Yleinen tyyli
Tämä on luettelon # 1 kohta ilman syytä, koska se on tärkein ominaisuus.
Sinä haluat käännä painiketta purppura lehmäksi. Tämä on Seth Godinin suosima käsite. Lyhyesti sanottuna haluat, että se olisi merkittävä; merkittävällä tavalla tarkoitan jotain, jota ei voida unohtaa. Jotain kuin violetti lehmä laidun keskellä.
Jotkut suunnittelijat eivät ole erityisen hyviä tässä. On houkuttelevaa luoda painike, joka sitoo kauniisti verkkosivuston värit ja tyylit. Aluksi se tuntuu erittäin hyvältä, vain se ei ole.
Ongelmana on, että tällainen painike ei ole kaukana merkittävästä. Et halua, että painike sulautuu; haluat sen erottuvan. Siksi se olisi luotava täysin erillisenä elementtinä, joka vain sattuu johonkin verkkosivustoon, ei sellaisenaan, joka on yhdenmukainen kyseisen sivuston kanssa.
Haluan vain antaa teille erinomaisen esimerkin purppura-lehmän kaltaisesta painikkeesta.
Mozilla Firefox
Näin Firefoxin lataussivu näyttää. Haluan, että huomaat yhden asian. Vasemmanpuoleinen painike, latauspainike näyttää mikään muu kuin tällä sivulla. Se on ainoa vihreä asia. Se on ainoa paikka, jossa esitellään Firefox-logo. Se on yksi suurimmista elementeistä. Se sijaitsee taittuman yläpuolella.
Kaikki nämä ominaisuudet tekevät tästä painikkeesta erittäin näkyvän. Se on violetti lehmä. Jos sanot et näe sitä, yrität vain tehdä vaikutuksen joku.
Pähkinänkuoressa: Tavoitteena on merkittävä painike.
2. Ulkonäkö
Aloitetaan väri.
Jos haluat olla merkittävä, käytä väriä, jota ei ole käytetty muualla sivulla. Aivan kuten Firefoxin kaverit tekevät sivustollaan. Voit etsiä värin, joka näyttää hyvältä sivustosi nykyisen värimallien avulla, mutta voit käyttää värimallien suunnittelijan kaltaista työkalua..
Ja “eri” on avainsana täällä. Jos sivustosi on enimmäkseen sininen, et halua sinistä ostopainiketta. Et halua sinistä sävyä. Et halua mitään, joka näyttää sinertävältä. Haluat vaaleanpunaisen tai oranssin jne. Olen varma, että saat pisteen.
Vielä yksi temppu. Oranssi tunnetaan punaisena heti näkyvin väri. Mutta se ei herätä kaikkia negatiivisia tunteita, joita punainen tekee (kuten “Stop”, “Varo!”, ja “vaara”). Internetistä löytyy suosituin oranssi painike amazon.com.
Seuraava asia on keskittyä painikkeen koko. No, mitä voin sanoa, sen täytyy olla BIG. Mitä suurempi se on, sitä parempi. (Jälleen, Firefoxin esimerkki.)
“Voinko tehdä sen vielä suuremmaksi?” on hyvä kysymys kysyä suunnitteluvaiheessa. Tee se paljon.
Pitäisikö se olla yksinkertainen tai räikeä? Painike ei voi olla liian räikeä. Katso Firefox-painiketta uudelleen. Se on räikeä. Siinä on oranssi kettu, mutta silti se näyttää olevan painike. Ja se on raja, jota et voi ylittää. Jos painike ei näytä siltä, kukaan ei koskaan napsauta sitä.
Siksi ei ole olemassa yksinkertaista vastausta, johon on parempi - räikeä tai yksinkertainen. Sinun tarvitsee vain selvittää itse. Jaa testi aina. Luo kaksi painiketta, yksi räikeä ja yksi yksinkertainen. Käytä molempia samanaikaisesti ja katso, kumpi toimii paremmin. Google-sivuston optimoija auttaa sinua.
Vain nopea esimerkki yksinkertaisesta painikkeesta.
ThemeFuse
Kuten näette, painike ei käytä oransseja kettuja, mutta se on edelleen hyvin näkyvissä. Itse asiassa ThemeFuse (premium-WordPress-teemanmyymälä, johon olen osa) tarjoaa vähän lyhytkoodeja. Näiden lyhytkoodien avulla on helppo luoda mukavia näköisiä painikkeita.
Esimerkiksi vain yhdellä rivillä:
[button link = "domain.com"] Klikkaa tästä ostaaksesi mahtavan tuotteen! [/ button]
Saan tämän tuloksen:
3. Fontti
Sans-serif-fontti on standardi kaikentyyppisille painikkeille. Tämä johtuu siitä, että sans-serif-fontit ovat hyvin luettavissa jokaiselle online-käytölle. (Kääntöpuolella serif-kirjasimet ovat paremmin tulostusjulkaisuja varten.)
Haluatko painikkeen kopion olevan mahdollisimman luettavissa, sillä se on tärkein tekstiosa sivulla. All-capit eivät ole hyvä idea. Sekalaista toimii paljon paremmin. Sekoitustapauksella tarkoitan jokaista sanaa, joka on isot kirjaimet. (Lukuun ottamatta sanoja “varten”, “”, “ja”, jne.)
(Kuvan lähde: Gomediazine)
Jotkut turvalliset fontit, joita voit käyttää, ovat: Arial, Helvetica, Franklin Gothic, Myriad tai jokin muu klassinen sans-serif-fontti..
Entä sitten väri. Kopion tulisi luonnollisesti olla kontrastissa painikkeen värin kanssa. Et halua harmaa-harmaa. Haluatko mustavalkoisen tai oranssinvärisen.
Jälleen tekstin on oltava erittäin luettavissa.
4. Sijoitus
Paras sijoitus riippuu sivustosi suunnittelusta, mikä ei luultavasti ole yllättävää. Mutta joitakin sääntöjä kannattaa noudattaa.
Aseta se ilmeisin paikka mahdollista. Älä yritä olla luova täällä. Sijoituksen tulisi olla asiakkaalle / käyttäjälle selvää.
Joka kerta, kun joku vierailee verkkosivustolla, he odottavat tietyistä asioista tietyissä paikoissa. Asiat: logo vasemmassa yläkulmassa, ostoskorin yhteenveto oikeassa yläkulmassa, tekijänoikeuslauseke alatunnisteessa jne. Teidän tehtävänne on yrittää selvittää, mikä on näkyvin paikka ostopainikkeelle ja vain laittaa se sinne.
Tietenkin sen on oltava samanaikaisesti näkyvin paikka. Tämä tarkoittaa kahta asiaa:
- Se ehdottomasti on asetettava yläpuolella, ja
- Älä pelkää tyhjää tilaa. Whitespace on jokaisen hyvän web-suunnittelijan ystävä. Muista, että ei ole väliä, kuinka paljon tavaraa voit sijoittaa verkkosivustolle, mikä on tärkeää, kuinka paljon sitä voi poistaa.
Voit sijoittaa sijoitusstrategian steroideihin kopioimalla painikkeen ja sijoittamalla sen sivun alaosaan. Siten, kun joku lukee koko sivun, he voivat silti ryhtyä toimiin sen alareunassa.
5. Lisäelementit
Tämä on kakku. Lisäelementit lisäävät painikkeen näkyvyyttä entisestään. Esimerkkejä elementeistä: nuolet, ostoskärryt, suurennuslasit, plusmerkit tai erilaiset tuotemerkin elementit.
Suosikkini esimerkki - Firefox-esimerkki - käyttää yhtä todella viileää lisäelementtiä - oranssia kettua (nimeltään niiden logo).
Nyrkkisääntö on käyttää ylimääräisiä elementtejä korostaa painikkeen tarkoitusta. Esimerkiksi kaksi nuolta, jotka osoittavat alaspäin, toimivat hyvin latauspainikkeelle. Ostoskorin kuvake toimii erinomaisesti add-to-cart -painikkeella (yllä oleva amazonin esimerkki). Suurennuslasi toimii hyvin hakupainikkeella. Ja niin edelleen.
Voit myös käyttää joitakin tuotemerkin elementtejä. Esimerkiksi: tavallinen RSS-kuvake, jossa on tilaus-syöttö -painike, lintukuvake, jossa on seuranta-twitter-painike, oranssi kettu, jossa on lataus-firefox-painike, oma logo, jossa on my-my- painike.
Seuraavassa on muutamia esimerkkejä:
Wakeinteractive
Commercialiq
MediaTemple
Unlocking.com
Sofasurfer.eu
Uploadify
"Vapaan" teho
Vielä yksi temppu on tehokkaimman sana englannin kielellä - ILMAINEN. Aina kun jotain mainostetaan vapaaksi, ihmiset alkavat toimia ennustettavasti irrationaalisesti (tarkista hyvä kirja Dan Ariely, "Irrationaalisuus" selvittääksesi mitä tarkoitan.)
Lisää esimerkkejä:
Freshbooks
Wufoo
Freeagent.com
Mitä seuraavaksi?
Jos olet taitava Photoshopissa tai muussa vastaavassa ohjelmistossa, voit vain mennä eteenpäin ja luoda mukavan painikkeen juuri nyt. Toinen tapa on tulla kaikkien WordPress-teeman onnekas omistaja ThemeFuse, kuten olen aiemmin maininnut tässä viestissä.
Mikä on neuvoja suuren ostopainikkeen suunnittelussa? Haluaisin päivittää tämän viestin mielipiteesi mukaan.
