Pagrindinis » UI / UX » 5 patarimai, kaip sukurti „Pirkimo mygtuką“

    5 patarimai, kaip sukurti „Pirkimo mygtuką“

    Jei esate dizaineris arba internetinis pardavėjas arba tiesiog atsidursite svetainėje, kur bandote parduoti kažką, tam tikru momentu turėsite sukurti tinkamą „pirkimo mygtuką“. Ir tada jūs greitai sužinosite, kad tik išleidžiate “pirkti dabar” mėlynajame stačiakampyje esantis tekstas yra nepakankamas, jei tikitės gauti gerų rezultatų.

    Laimei, tinkamo „pirkimo mygtuko“ sukūrimas nėra toks sunkus, kai susipažinsite su pagrindinėmis žiniomis. Čia eina.

    Visų pirma, jūsų mygtuko tekstas yra svarbiausias dalykas, tačiau yra keletas kitų funkcijų, kurias reikia spręsti. Kodėl sakau, kad tekstas yra svarbiausias? Įsivaizduokite tai - ką turėtumėte turėti gražiai suprojektuotą mygtuką, jei jame yra tekstas “Eik velniop!”? Byla baigta. Geras egzempliorius yra ten, kur yra atliekami pinigai.

    Šiandieniniame straipsnyje aptariame 5 esminiai bruožai tinkamo „pirkti“ mygtuko. Pažiūrėkime!

    1. Bendras stilius

    Tai yra # 1 taškas šiame sąraše ne be priežasties, nes tai yra svarbiausias bruožas.

    Tu nori pasukite mygtuką į violetinę karvę. Tai yra koncepcija, kurią populiarina Seth Godin. Trumpai tariant, jūs norite, kad jis būtų puikus; nepaprastai aš turiu omenyje tai, ko negalima pamiršti. Kažkas panašaus į violetinę karvę ganyklų viduryje.

    Kai kurie dizaineriai šiuo požiūriu nėra ypač geri. Tai viliojanti sukurti mygtuką, kuris puikiai susietų su svetainės spalvomis ir stiliumi. Iš pradžių ji atrodo labai gera idėja, tik tai nėra.

    Problema ta, kad toks mygtukas toli gražu nėra puikus. Jūs nenorite, kad jūsų mygtukas įsilietų; norite, kad jis išsiskirtų. Todėl jis turėtų būti sukurtas kaip visiškai atskiras elementas, kuris tiesiog atsitinka tam tikroje svetainėje, o ne kaip kažkas, kuri turi būti suderinta su šia svetaine.

    Leiskite man duoti jums puikų raudonos karvės panašaus mygtuko pavyzdį.

    Mozilla Firefox

    Štai kaip atrodo „Firefox“ atsisiuntimo puslapis. Noriu, kad pastebėtumėte vieną dalyką. Kairėje pusėje esantis mygtukas, atsisiuntimo mygtukas, atrodo, nieko panašaus į tą puslapį. Tai vienintelis žalias dalykas. Tai vienintelė vieta, kurioje pateikiamas „Firefox“ logotipas. Tai vienas didžiausių elementų. Jis yra virš viršaus.

    Visi šie požymiai daro šį mygtuką labai matomą. Tai violetinė karvė. Jei sakote, kad nematote, jūs tiesiog bandote nustebinti ką nors.

    Trumpai tariant: Tikslas turėti puikų mygtuką.

    2. Išvaizda

    Pradėkime nuo spalva.

    Jei norite būti puikus, naudokite spalvą, kuri nebuvo naudojama kitur puslapyje. Kaip ir „Firefox“ vaikinai savo svetainėje. Galite naudoti įrankį, pvz., Spalvų schemos dizainerį, jei norite rasti spalvą, kuri gerai atrodo su dabartine jūsų svetainės spalvų schema, bet vis dar labai skiriasi.

    Ir “skiriasi” yra raktinis žodis čia. Jei jūsų svetainė dažniausiai yra mėlyna, nenorite pirkti mėlynojo pirkimo mygtuko. Jūs nenorite mėlynos spalvos. Nenorite nieko, kas atrodo melsva. Norite rožinės arba oranžinės spalvos ir tt Aš tikiu, kad jūs gaunate tašką.

    Dar vienas triukas. Oranžinė yra žinoma kaip labiausiai matoma spalva po raudonos spalvos. Bet tai neiškelia visų neigiamų emocijų, kurios yra raudonos (pvz., “sustabdyti”, “saugokis!”, ir “pavojus”). Populiariausią naršyklės mygtuką internete galima rasti amazon.com.

    Kitas dalykas, kurį reikia sutelkti, yra mygtuko dydis. Na, ką galiu pasakyti, tai turi būti BIG. Kuo didesnis, tuo geriau. (Vėlgi, „Firefox“ pavyzdys.)

    “Ar galiu padaryti jį dar didesnį?” yra geras klausimas, kurį reikia užduoti projektavimo etapo metu. Padarykite tai daug.

    Ar tai turėtų būti paprasta ar blizgus? Mygtukas negali būti pernelyg baisus. Dar kartą peržiūrėkite „Firefox“ mygtuką. Tai baisus. Jame yra oranžinė lapė, tačiau ji vis dar atrodo kaip mygtukas. Ir tai yra riba, kurią negalite kirsti. Jei jūsų mygtukas neatrodo kaip niekas niekada nepaspaudžia.

    Štai kodėl nėra paprasto atsakymo, kuriam geriau - blizgus ar paprastas. Jums tereikia sužinoti apie save. Visada perskirstykite testą. Sukurkite du mygtukus, vieną blizgančią ir vieną paprastą. Naudokite abu juos vienu metu ir pažiūrėkite, kuris iš jų yra geresnis. „Google“ svetainių optimizavimo priemonė padės jums tai padaryti.

    Tiesiog greito paprasto mygtuko pavyzdys.

    ThemeFuse

    Kaip matote, mygtukas nenaudoja jokių apelsinų lapių, bet jis vis dar labai matomas. Tiesą sakant, „ThemeFuse“ (aukščiausios kokybės „WordPress“ temų parduotuvė, kurią aš esu dalis) suteikia šiek tiek kažką, vadinamą trumpais kodais. Be kitų dalykų, šie trumpieji kodai tikrai leidžia sukurti gražius ieškomus mygtukus.

    Pavyzdžiui, su tik viena eilute:

    [button link = "domain.com"] Spustelėkite čia norėdami nusipirkti savo nuostabų produktą! [/ button]

    Gaunu šį rezultatą:

    3. Šriftas

    Sans-serif šriftas yra visų rūšių mygtukų standartas. Taip yra todėl, kad sans-serif šriftai yra lengvai įskaitomi kiekvienam internetiniam naudojimui. („Flip side“ serifiniai šriftai yra geriau spausdintiems leidiniams.)

    Norite, kad jūsų mygtuko kopija būtų kuo aiškesnė, nes tai yra svarbiausias puslapio tekstas. „All-cap“ nėra gera idėja. Mišrus atvejis veikia daug geriau. Mišriu atveju aš turiu galvoje, kad pirmasis kiekvieno žodžio raidė yra didžiosios raidės simbolis. (Išskyrus tokius žodžius kaip “dėl”, “”, “ir”, ir tt)

    (Vaizdo šaltinis: Gomediazine)

    Kai kurie saugūs šriftai, kuriuos galite naudoti, yra: „Arial“, „Helvetica“, „Franklin“ gotika, „Myriad“ arba bet kuris kitas klasikinis „sans-serif“ šriftas, tikrai.

    Dabar ką apie spalvą. Kopija, žinoma, turi būti labai kontrastinga su mygtuko spalva. Jūs nenorite pilkos spalvos. Norite juodos ant baltos spalvos arba mėlynos spalvos oranžinės spalvos.

    Vėlgi, tekstas turi būti lengvai įskaitomas.

    4. Vieta

    Geriausia vieta priklauso nuo jūsų svetainės dizaino, o tai tikriausiai nenuostabu. Tačiau vis dar yra keletas taisyklių, kurių verta laikytis.

    Įdėkite jį į akivaizdžiausia vieta. Nebandykite būti kūrybingais čia. Vieta klientui / vartotojui turėtų būti aiški.

    Kiekvieną kartą, kai kas nors apsilanko svetainėje, jie tikisi, kad tam tikrose vietose jie matys tam tikrus dalykus. Panašūs dalykai: logotipas viršutiniame kairiajame kampe, pirkinių krepšelio santrauka viršutiniame dešiniajame kampe, autorių teisių išnaša kojoje, ir tt Jūsų darbas yra pabandyti išsiaiškinti, kas yra pati akivaizdiausia vieta pirkti mygtukui ir tiesiog įdėti jį ten.

    Žinoma, tuo pačiu metu ji turi būti labiausiai matoma vieta. Tai reiškia du dalykus:

    1. Tai visiškai turi būti patalpinta virš kartos, ir
    2. Nebijokite erdvės. „Whitespace“ yra kiekvieno gero žiniatinklio dizainerio draugas. Atminkite, kad nesvarbu, kiek dalykų galite įdėti į svetainę, svarbiausia yra tai, kiek dalykų galite pašalinti iš jo.

    Galite įdėti steroidų išdėstymo strategiją paspaudę mygtuką ir įdėdami jį į puslapio apačią. Tokiu būdu, kai kas nors perskaito visą puslapį, jie vis dar gali imtis veiksmų jos apačioje.

    5. Papildomi elementai

    Tai yra tortas. Papildomi elementai dar labiau padidina jūsų mygtuko matomumą. Elementų pavyzdžiai: rodyklės, pirkinių vežimėliai, didinamieji stiklai, plius ženklai arba įvairūs prekės ženklo elementai.

    Mano mėgstamiausias pavyzdys - „Firefox“ pavyzdys - naudoja vieną tikrai vėsią papildomą elementą - apelsinų lapę (dar žinomas kaip jų logotipas).

    Nykščio taisyklė yra naudoti papildomus elementus pabrėžti mygtuko paskirtį. Pavyzdžiui, dvi rodyklės, nukreipiančios žemyn, puikiai tinka atsisiuntimo mygtukui. Prekių krepšelio piktograma puikiai veikia su mygtuku „Add to to cart“ (aukščiau pateiktas „Amazon“ pavyzdys). Didinamasis stiklas puikiai tinka su paieškos mygtuku. Ir taip toliau.

    Taip pat galite naudoti kai kuriuos prekės ženklo elementus. Pavyzdžiui, tokie dalykai kaip: standartinė RSS piktograma su prenumeratos-užvedimo mygtuku, paukščių piktograma su sekančiu „Twitter“ mygtuku, oranžinė lapė su parsisiuntimo-firefox mygtuku, jūsų logotipas su „buy-my-“ mygtukas.

    Štai keletas pavyzdžių:

    Wakeinteractive

    Commercialiq

    Mediatemple

    Atrakinimas.com

    Sofasurfer.eu

    Įkelti

    „Nemokama“ galia

    Dar vienas triukas yra galingiausių žodžių vartojimas anglų kalba - NEMOKAMAI. Kai kažkas reklamuojama kaip laisva, žmonės pradeda veikti nuspėjamai neracionaliai (patikrinkite puikią knygą Dan Ariely, „Neracionalumo pakilimas“, kad išsiaiškintumėte, ką aš turiu galvoje.)

    Daugiau pavyzdžių:

    Freshbooks

    Wufoo

    Freeagent.com

    Kas toliau?

    Jei esate patyręs „Photoshop“ ar kitos panašios programinės įrangos, galite tiesiog eiti į priekį ir sukurti gražią mygtuką dabar. Kitas būdas - tapti laimingu bet kurios „ThemeFuse“ „WordPress“ temos savininku, kaip minėjau anksčiau šiame pranešime.

    Koks jūsų patarimas, kaip sukurti puikų pirkimo mygtuką? Norėčiau atnaujinti šį įrašą su jūsų nuomonėmis.