5 nõuandet võitnud “osta nupu” loomiseks

Kui olete disainer või online-turundaja või kui sul on lihtsalt veebisait, kus üritate midagi müüa, siis mingil hetkel peate kujundama õige nupu osta. Ja siis sa saad kiiresti teada, et lihtsalt paned “osta kohe” sinist ristkülikut sisaldav tekst ei ole lihtsalt piisav, kui loodate headele tulemustele.

Õnneks ei ole õige nupu ostmine keeruline, kui saate teada põhiteadmisi. Siin läheb.

Esiteks, teie nupu tekst on kõige olulisem asi, kuid on veel mõned funktsioonid, millega tuleb tegeleda. Miks ma ütlen, et tekst on kõige olulisem? Kujutage ette seda - milline on mõte, millel on kaunilt kujundatud nupp, kui selle tekstis on kirjas “Mine põrgusse!”? Juhtum suletud. Hea koopia on raha paigutamise koht.

Tänases artiklis räägime 5 olulist omadust õige nupu ostmine. Vaatame!

1. Üldine stiil

See on selle loendi # 1 punkt ilma põhjuseta, sest see on kõige olulisem tunnus.

Sa tahad keerake oma nuppu lilla lehmaks. See on kontseptsioon, mida Seth Godin populariseerib. Lühidalt, sa tahad, et see oleks tähelepanuväärne; märkimisväärse tähendusega mõtlen midagi, mida ei saa tähelepanuta jätta. Midagi lilla lehma keset karjamaad.

Mõned disainerid ei ole eriti head. See on ahvatlev luua nupp, mis seob ilusti selle veebisaidi värvide ja stiiliga. Alguses tundub, et see on väga hea idee, ainult see pole.

Probleem on selles, et selline nupp ei ole kaugeltki tähelepanuväärne. Sa ei taha, et teie nupp sulaks; sa tahad seda silma paista. Seetõttu tuleks see luua täiesti eraldi elemendina, mis lihtsalt juhtub, et istuda mõnel veebilehel, mitte kui sellist, mis peab olema selle veebisaidiga kooskõlas..

Las ma annan teile suurepärase näite lilla-lehma nagu nupp.

Mozilla Firefox

Seda näeb välja Firefoxi allalaadimisleht. Ma tahan, et te märkaksite üht asja. Vasakul olev nupp, allalaadimisnupp, ei näe sellel lehel midagi muud. See on ainus roheline asi. See on ainus koht, kus esitatakse Firefoxi logo. See on üks suurimaid elemente. See asub klapi kohal.

Kõik need omadused muudavad selle nupu äärmiselt nähtavaks. See on lilla lehm. Kui sa ütled, et sa ei näe seda, siis püüad mul lihtsalt muljet avaldada.

Lühidalt: Eesmärgiks on tähelepanuväärne nupp.

2. Välimus

Alustame värvi.

Kui soovite olla tähelepanuväärne, kasutage värvi, mida pole mujal lehel kasutatud. Just nagu Firefoxi poisid teevad oma veebilehel. Võite kasutada tööriista nagu värviskeemi disainer, et leida värvi, mis on teie veebisaidi praeguse värvilahendusega hea, kuid on siiski väga erinev.

Ja “erinev” on märksõna siin. Kui teie veebisait on enamasti sinine, siis sa ei soovi sinise ostu nuppu. Sa ei taha sinise tooni. Sa ei taha midagi, mis näeb välja sinakas. Sa tahad roosa või oranž jne.

Veel üks trikk. Oranž on tuntud kui kõige nähtavam värv kohe pärast punast. Aga see ei tõsta kõiki negatiivseid emotsioone, mida punane teeb (sellised asjad nagu “peatus”, “Vaata ette!”, ja “oht”). Internetis on kõige populaarsem oranž nupp amazon.com.

Järgmine asi on keskenduda nupu suurus. Noh, mida ma võin öelda, see peab olema suur. Mida suurem see on parem. (Jällegi, Firefoxi näide.)

“Kas ma saan selle veelgi suuremaks muuta?” on hea küsimus küsida projekteerimisetapis. Tehke seda palju.

Kas see peaks olema lihtne või toretsev? Nupp ei saa olla liiga toretsev. Vaata veelkord Firefoxi nuppu. See on toretsev. Sellel on oranž rebas, kuid see on ikka veel nupp. Ja see on piir, mida te ei saa ületada. Kui teie nupp ei tundu nagu keegi ei kliki kunagi.

Sellepärast pole lihtsat vastust, milleks on parem - toretsev või lihtne. Sa pead lihtsalt ise teada saama. Jaotage test alati. Looge kaks nuppu, üks toretsev ja üks lihtne. Kasutage mõlemat korraga ja vaadake, milline neist parem. Google'i veebisaidi optimeerija aitab teil seda teha.

Lihtsalt lihtsa nupu kiire näide.

ThemeFuse

Nagu näete, ei kasuta nupp apelsini rebaseid, kuid see on ikka veel hästi nähtav. Tegelikult pakub ThemeFuse (lisatasu WordPressi teemapood, mis olen osa sellest) vähe midagi, mida nimetatakse lühikoodideks. Muuhulgas muudavad need lühikesed koodid ilusate nuppude loomise väga lihtsaks.

Näiteks ainult ühe reaga:

[button link = "domain.com"] Kliki siia, et osta oma fantastiline toode! [/ button]

Ma saan selle tulemuse:

3. Font

Sans-serif font on standard igasuguste nuppude jaoks. Seda seetõttu, et sans-serif-fonte on iga veebikasutuse jaoks väga loetavad. (Flip-poolel on serif-fondid trükiväljaannete jaoks paremad.)

Sa tahad, et teie nupu koopia oleks võimalikult loetav, kuna see on lehekülje kõige olulisem tekst. All-cap ei ole hea mõte. Segavereline toimib palju paremini. Segatüübi all mõeldakse iga sõna esimest tähte, mis on suurtäht. (Välja arvatud sõnad nagu “jaoks”, “the”, “ja”, jne.)

(Pildiallikas: Gomediazine)

Mõned turvalised fondid, mida saate kasutada, on: Arial, Helvetica, Franklin Gothic, Myriad või mõni muu klassikaline sans-serif font, tõesti.

Aga värvi kohta. Koopia peaks loomulikult olema kontrastsena nupu värviga. Sa ei taha hall-hall-hall. Sa tahad mustvalget või oranžit.

Jällegi peab tekst olema väga loetav.

4. Paigutus

Parim paigutus sõltub teie veebisaidi kujundusest, mis ei ole ilmselt üllatav. Kuid on veel mõningaid eeskirju, mida tuleb austada.

Asetage see kõige ilmsem koht võimalik. Ärge proovige siin olla loominguline. Paigutus peaks olema kliendile / kasutajale ilmne.

Iga kord, kui keegi külastab veebisaiti, ootavad nad teatud kohtades teatud asju. Asjad: logo üleval vasakus nurgas, ostukorvide kokkuvõte üleval paremas nurgas, autoriõiguse klausel jaluses jne. Sinu ülesanne on proovida välja selgitada, mis on ostunupu kõige ilmsem koht ja lihtsalt pange see sinna.

Loomulikult peab see olema samal ajal kõige nähtavam koht. See tähendab kahte asja:

1. See absoluutselt tuleb paigutada klapi kohal, ja
2. Ära karda tühikut. Whitespace on iga hea veebidisaineri sõber. Pidage meeles, et ei ole oluline, kui palju asju võite veebisaidile paigutada, kui oluline on see, kui palju asju saate sellest eemaldada.

Saate oma paigutusstrateegia steroididele panna nupu kopeerimise ja selle asetamisega lehe allosas. Sel moel, kui keegi loeb läbi kogu lehe, võivad nad siiski selle allosas tegutseda.

5. Täiendavad elemendid

See on kooki jäätumine. Täiendavad elemendid suurendavad teie nupu nähtavust veelgi. Elementide näited: nooled, ostukärud, suurendusklaasid, plussmärgid või erinevad kaubamärgielemendid.

Minu lemmik näide - Firefoxi näide - kasutab ühte väga jahedat ekstra elementi - oranž rebast (aka nende logo).

Pisipilt on kasutada täiendavaid elemente rõhutada nupu eesmärki. Näiteks kaks noolt, mis osutavad allapoole tööle, on suurepärased allalaadimisnupu jaoks. Ostukorvi ikoon toimib suurepäraselt, kui lisate ostukorvi (ülaltoodud hämmastav näide). Suurendusklaas sobib suurepäraselt otsingunupuga. Ja nii edasi.

Võite kasutada ka mõningaid brändi elemente. Näiteks asjad nagu: standardne RSS-ikoon tellimuse-to-nuppu nupuga, linnuvaik, millele järgneb nupp-on-twitter nupp, oranž rebas koos allalaadimis-Firefoxi nupuga, oma logo osta-minu- kraami nupp.

siin on mõned näidised:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Üleslaadimine

"Vaba" võimsus

Veel üks trikk on kõige võimsama sõna kasutamine inglise keeles - TASUTA. Kui midagi reklaamitakse vabana, hakkavad inimesed tegutsema prognoositavalt irratsionaalselt (vaadake läbi suur raamat Dan Ariely, "Irratsionaalsuse tõus", et teada saada, mida ma mõtlen.)

Veel näiteid:

Freshbookid

Wufoo

Freeagent.com

Mis järgmiseks?

Kui olete Photoshopi või mõne muu sarnase tarkvara valdaja, saate lihtsalt minna ja luua kohe naljakas nupp. Teine võimalus on saada ThemeFuse'i mis tahes WordPressi teema õnnelikuks omanikuks, nagu ma olen seda postitust juba varem maininud.

Milline on teie nõu suure nupu kujundamisel? Ma tahaksin seda postitust teie arvamustega värskendada.