5 tipov na navrhovanie víťazného Kúpiť tlačidlo

Ak ste dizajnér alebo on-line obchodník, alebo ste len vlastné webové stránky, kde sa pokúsite predať niečo, v určitom okamihu budete musieť navrhnúť správne tlačidlo "Kúpiť". A potom budete rýchlo zistiť, že len uvedenie a “kúpte teraz” text na modrom obdĺžniku nestačí len vtedy, keď dúfate na dobré výsledky.

Našťastie, navrhovanie správneho "tlačidla nákupu" nie je tak ťažké, keď sa zoznámite s niektorými základnými poznatkami. Tu ide.

Po prvé text na tlačidle je najdôležitejšia vec, ale existujú aj niektoré ďalšie funkcie, ktoré je potrebné riešiť. Prečo hovorím, že text je najdôležitejší? Predstavte si to - aký má zmysel mať krásne navrhnuté tlačidlo, ak sa na ňom hovorí text “Choď do pekla!”? Prípad uzavretý. Dobrá kópia je miesto, kde sa vytvárajú peniaze.

V dnešnom článku diskutujeme 5 kľúčových čŕt správneho "tlačidla nákupu". Pozrime sa!

1. Celkový štýl

Toto je prvý bod v tomto zozname, a to bez nejakého dôvodu, pretože je to najdôležitejší znak.

Chceš otočte tlačidlo do fialovej kravy. Toto je koncept popularizovaný Sethom Godinom. Stručne povedané, chcete, aby to bolo pozoruhodné; pozoruhodným myslím niečo, čo nemožno prehliadnuť. Niečo ako fialová krava uprostred pastviny.

Niektorí dizajnéri nie sú v tejto oblasti mimoriadne dobrí. Je lákavé vytvoriť tlačidlo, ktoré krásne spája s farbami a štýlom webových stránok, na ktorých sedí. Spočiatku to vyzerá ako veľmi dobrý nápad, len to nie je.

Problém je v tom, že takéto tlačidlo nie je ďaleko pozoruhodné. Nechcete, aby sa vaše tlačidlo miešalo; chcete, aby vynikla. Preto by mal byť vytvorený ako úplne samostatný prvok, ktorý sa jednoducho stáva na niektorých webových stránkach, nie ako na niečo, čo musí byť v súlade s touto webovou stránkou.

Dovoľte mi, aby som vám dal skvelý príklad tlačidla fialovej kravy.

Mozilla Firefox

To je to, čo vyzerá stránka sťahovania prehliadača Firefox. Chcem, aby si všimol jednu vec. Tlačidlo na ľavej strane, tlačidlo na prevzatie, nevyzerá nič podobne ako na inej stránke na tejto stránke. Je to jediná zelená vec. Je to jediné miesto, ktoré predstavuje logo Firefoxu. Je to jeden z najväčších prvkov. Nachádza sa nad záhybom.

Všetky tieto vlastnosti robia toto tlačidlo veľmi viditeľné. Je to fialová krava. Ak hovoríte, že to nevidíte, len sa snažíte niekoho zapôsobiť.

Stručne: Zamerajte sa na pozoruhodné tlačidlo.

2. Vzhľad

Začnime s farba.

Ak chcete byť pozoruhodné, použite farbu, ktorá nebola použitá nikde inde na stránke. Rovnako ako kluci Firefox robia na svojich stránkach. Môžete použiť nástroj ako Color Scheme Designer na nájdenie farby, ktorá vyzerá dobre s aktuálnym farebným plánom vašich webových stránok, ale stále je veľmi odlišná.

a “rozdielny” je kľúčové slovo tu. Ak je vaša webová stránka väčšinou modrá, nechcete, aby bolo tlačidlo modrej nákupu. Nechcete odtieň modrej. Nechcete, aby sa niečo zdalo modrasté. Chcete ružovú, oranžovú, atď. Som si istý, že dostanete bod.

Ďalší trik. Oranžová je známa ako najviditeľnejšia farba hneď po červenej farbe. Ale to nezvyšuje všetky negatívne emócie červené robí (veci ako “prestať”, “dávaj pozor!”, a “nebezpečenstvo”). Najpopulárnejšie oranžové tlačidlo na internete môžete nájsť na amazon.com.

Ďalšia vec, na ktorú sa zameriame, je veľkosť tlačidla. No, čo môžem povedať, musí to byť BIG. Čím väčšia je to lepšia. (Opäť Firefox príklad.)

“Môžem to ešte väčšie?” je dobrá otázka, ktorú by ste sa mali pýtať počas projektovej fázy. Robte to veľa.

Ak by to bolo jednoduché alebo oslnivé? Tlačidlo nemôže byť príliš oslnivé. Pozrite sa na tlačidlo Firefox ešte raz. Je úžasné. Má na ňom oranžovú líšku, ale stále to vyzerá ako tlačidlo. A to je hranica, ktorú nemôžete prekročiť. Ak vaše tlačidlo nevyzerá ako jeden, nikto na ňu nikdy nebude kliknúť.

To je dôvod, prečo nie je jednoduchá odpoveď, na ktorú je človek lepší - oslnivý alebo jednoduchý. Musíte to zistiť len pre seba. Vždy rozdeľte test. Vytvorte dve tlačidlá, jednu farebnú a jednu jednoduchú. Použite obaja súčasne a zistite, ktorý z nich je lepší. Optimalizátor webových stránok Google vám s tým pomôže.

Jednoduchý príklad jednoduchého tlačidla.

ThemeFuse

Ako vidíte, tlačidlo nepoužíva žiadne oranžové líšky, ale je stále veľmi viditeľné. Ako v skutočnosti, ThemeFuse (prvotriedny obchod WordPress, ktorý som súčasťou) poskytuje trochu niečo nazývané shortcodes. Tieto krátke kódy okrem iného umožňujú vytvárať pekne vyzerajúce tlačidlá.

Napríklad len s jedným riadkom:

[button link = "domain.com"] Kliknite tu pre nákup môjho úžasného produktu! [/ button]

Mám tento výsledok:

3. Písmo

Sans-serif font je štandard pre všetky druhy tlačidiel. Je to preto, že sans-serif písma sú veľmi čitateľné pre každú online použitie. (Naopak, písma pre servery sú lepšie pre tlačené publikácie.)

Chcete, aby kópia na vašom tlačidle bola čo najviac čitateľná, pretože je to najdôležitejšia časť textu na stránke. Všetky čiapky nie sú dobrý nápad. Zmiešaný prípad funguje oveľa lepšie. Podľa zmiešaného prípadu mám na mysli prvé písmeno každého slova, ktoré je veľké. (Okrem slov ako “pre”, “”, “a”, atď.)

(Zdroj obrázku: Gomediazine)

Niektoré bezpečné fonty, ktoré môžete použiť, sú: Arial, Helvetica, Franklin Gothic, Myriad alebo akékoľvek iné klasické písmo sans serif, naozaj.

A čo farba. Kopírovanie by malo byť samozrejme vo vysokom kontraste s farbou tlačidla. Nechcete šedo-šedú farbu. Chcete černo-biele alebo modro-oranžové.

Opäť text musí byť vysoko čitateľný.

4. Umiestnenie

Najlepšie umiestnenie závisí od návrhu webových stránok, čo pravdepodobne nie je prekvapujúce. Ale stále existujú určité pravidlá, ktoré stojí za to zachovať.

Vložte ho do priečinka čo je najviditeľnejšie miesto. Nesnažte sa byť kreatívny tu. Umiestnenie by malo byť zrejmé pre zákazníka / používateľa.

Zakaždým, keď niekto navštívi webové stránky, očakáva, že na určitých miestach uvidia určité veci. Veci ako: logo v ľavom hornom rohu, zhrnutie nákupného košíka v pravom hornom rohu, doložka o autorských právach v zápätí atď. Vašou úlohou je pokúsiť sa zistiť, čo je najzrejmejšie miesto pre tlačidlo nákupu a stačí ho umiestniť.

Samozrejme, musí to byť najviditeľnejšie miesto súčasne. To znamená dve veci:

1. to absolútne musí byť umiestnená nad záhybom, a
2. Nebojte sa medzery. Whitespace je priateľom každého dobrého web dizajnéra. Pamätajte, že nezáleží na tom, koľko vecí môžete umiestniť na webovú stránku, čo je dôležité, aké veci môžete odstrániť z nej.

Stratégiu umiestnenia môžete umiestniť na steroidy duplikovaním tlačidla a umiestnením do dolnej časti stránky. Týmto spôsobom, keď niekto číta celú stránku, môže naďalej konať v spodnej časti.

5. Ďalšie prvky

Toto je čerešňa na tortu. Ďalšie prvky zlepšujú viditeľnosť vášho tlačidla ešte ďalej. Príklady prvkov: šípky, nákupné vozíky, zväčšovacie sklá, značky a rôzne značky.

Môj obľúbený príklad - príklad Firefoxu - používa jeden naozaj cool extra element - oranžovú líšku (aka ich logo).

Jedným z pravidiel je použitie ďalších prvkov zdôraznite účel tlačidla. Napríklad dve šípky smerujúce nadol fungujú skvelo pre tlačidlo preberania. Ikonka nákupného košíka funguje skvele pomocou tlačidla na pridanie do košíka (príklad v službe Amazon). Zväčšovacie sklo funguje skvele pomocou tlačidla vyhľadávania. A tak ďalej.

Môžete tiež použiť niektoré prvky značky. Príklady napríklad: štandardná ikona RSS s tlačidlom prihlásenia na odber, ikona vtáka s tlačidlom "follow-me-on-twitter", oranžová líška s tlačidlom download-firefox, vlastné logo s nápisom buy-my- tlačidlo.

Tu sú niektoré príklady:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Sila "zadarmo"

Ďalším trikom je použitie najsilnejšieho slova v anglickom jazyku - ZDARMA. Kedykoľvek sa niečo inzeruje ako bezplatné, ľudia začnú konať predvídateľne iracionálne (pozrite si skvelú knihu od Dan Ariely, "Upside irrationality", aby som zistil, čo myslím.)

Ďalšie príklady:

FreshBooks

Wufoo

Freeagent.com

Čo bude ďalej?

Ak ste trochu zručný v programe Photoshop alebo iný podobný softvér, môžete jednoducho pokračovať a vytvoriť pekné tlačidlo práve teraz. Ďalšou cestou je stať sa šťastným majiteľom ľubovoľnej témy WordPress od ThemeFuse, ako som už spomenul v tomto príspevku.

Aké sú vaše rady pri navrhovaní skvelého tlačidla nákupu? Rád by som aktualizoval tento príspevok so svojimi názormi.