5 tipů pro návrh výherního tlačítka „Koupit“

Pokud jste designér, nebo on-line marketingu, nebo jste právě náhodou vlastní webové stránky, kde se snažíte něco prodat, v určitém okamžiku budete muset navrhnout správné "koupit tlačítko". A pak rychle zjistíte, že právě dáváte “kup nyní” text na modrém obdélníku nestačí, pokud doufáte v dobré výsledky.

Naštěstí navrhování správného "tlačítka nákup" není tak těžké, jakmile se seznámíte s některými základními znalostmi. Tady jde.

Především text na vašem tlačítku je nejdůležitější věc, ale existují některé další funkce, které je třeba řešit. Proč říkám, že text je nejdůležitější? Představte si to - jaký je smysl mít krásně navržené tlačítko, pokud text na něm říká “Jdi do pekla!”? Případ uzavřen. Dobrá kopie je tam, kde jsou peníze.

V dnešním článku diskutujeme 5 klíčových rysů řádného "nákupního tlačítka". Podívejme se na to!

1. Celkový styl

Toto je # 1 bod na tomto seznamu ne bez důvodu, protože to je nejdůležitější rys.

Chceš otočte knoflík do fialové krávy. Toto je koncept popularizovaný Sethem Godinem. Stručně řečeno, chcete, aby to bylo pozoruhodné; pozoruhodným myslím něco, co nelze přehlédnout. Něco jako fialová kráva uprostřed pastviny.

Někteří designéři v tom nejsou příliš dobří. Je lákavé vytvořit tlačítko, které se krásně spojí s barvami a stylem webové stránky, na které se nachází. Zpočátku to vypadá jako velmi dobrý nápad, jen to není.

Problém je v tom, že takové tlačítko není zdaleka pozoruhodné. Nechcete, aby se vaše tlačítko míchalo; chcete, aby to vyčnívalo. Proto by měl být vytvořen jako zcela oddělený prvek, který se právě stane, že sedí na některých webových stránkách, nikoli jako něco, co musí být v souladu s touto webovou stránkou..

Dovolte mi, abych vám dal skvělý příklad tlačítka fialové krávy.

Mozilla Firefox

Jak vypadá stránka pro stahování Firefoxu. Chci, abyste si všiml jedné věci. Tlačítko vlevo, tlačítko pro stažení, na této stránce nevypadá nic jiného. Je to jediná zelená věc. Je to jediné místo, které představuje logo Firefoxu. Je to jeden z největších prvků. Nachází se nad záhybem.

Všechny tyto vlastnosti činí toto tlačítko mimořádně viditelným. Je to fialová kráva. Jestli říkáš, že to nevidíš, snažíš se na někoho zapůsobit.

Ve zkratce: Zaměřte se na pozoruhodné tlačítko.

2. Vzhled

Začněme s barva.

Pokud chcete být pozoruhodní, použijte barvu, která nebyla nikde jinde na stránce použita. Stejně jako kluci Firefoxu dělají na svých webových stránkách. Pomocí nástroje, jako je Color Scheme Designer, můžete najít barvu, která vypadá dobře s aktuálním barevným schématem vašich webových stránek, ale stále je velmi odlišná..

A “odlišný” je klíčové slovo zde. Pokud jsou vaše webové stránky většinou modré, nechcete modré tlačítko koupit. Nechcete odstín modré. Nechcete nic, co by vypadalo jako namodralé. Chceš růžovou nebo oranžovou, atd. Jsem si jistý, že to máš pravdu.

Ještě jeden trik. Oranžová je známa jako nejviditelnější barva hned po červené barvě. Ale nezvyšuje všechny negativní emoce, které dělá červená (věci jako “stop”, “pozor!”, a “nebezpečí”). Nejoblíbenější oranžové tlačítko na internetu lze nalézt na amazon.com.

Další věc, na kterou se musíme zaměřit, je velikost tlačítka. No, co mohu říci, musí být BIG. Čím větší je, tím lépe. (Znovu, příklad Firefoxu.)

“Můžu to ještě zvětšit?” Je to dobrá otázka, kterou byste se měli ptát ve fázi návrhu. Udělej to hodně.

Mělo by to být jednoduché nebo honosné? Tlačítko nemůže být příliš honosné. Ještě jednou se podívejte na tlačítko Firefox. Je to honosné. Má na sobě oranžovou lišku, ale přesto vypadá jako tlačítko. A to je hranice, kterou nelze překročit. Pokud tlačítko nevypadá, nikdo na něj nikdy neklikne.

To je důvod, proč neexistuje žádná jednoduchá odpověď, která je lepší - honosná nebo jednoduchá. Musíš se sám zjistit. Vždy dělený test. Vytvořte dvě tlačítka, jedno honosné a jedno jednoduché. Použijte oba z nich najednou a zjistěte, který z nich funguje lépe. Optimalizátor webových stránek Google vám s tím pomůže.

Jen rychlý příklad jednoduchého tlačítka.

ThemeFuse

Jak vidíte, tlačítko nevyužívá žádné oranžové lišky, ale je stále velmi viditelné. Jako ve skutečnosti, ThemeFuse (prémie WordPress téma obchod, který jsem součástí) poskytuje něco, co se nazývá shortcodes. Tyto zkratky mimo jiné činí opravdu snadné vytvořit pěkně vypadající tlačítka.

Například pouze s jedním řádkem:

[button link = "domain.com"] Klikněte zde pro nákup mého úžasného produktu! [/ button]

Mám tento výsledek:

3. Písmo

Sans-serif písmo je standardem pro všechny druhy tlačítek. To proto, že sans-serif fonty jsou velmi čitelné pro každé online použití. (Na flipu jsou patkové fonty lepší pro tiskové publikace.)

Chcete, aby kopie na vašem tlačítku byla co nejvíce čitelná, protože je to nejdůležitější část textu na stránce. All-caps nejsou dobrý nápad. Mix-case funguje mnohem lépe. Smíšeným případem myslím první písmeno každého slova, které je velká. (Kromě slov jako “pro”, “”, “a”, atd.)

(Zdroj obrázku: Gomediazin)

Některá bezpečná písma, která můžete použít, jsou: Arial, Helvetica, Franklin Gothic, Myriad, nebo jakýkoli jiný klasický sans-serif font, opravdu.

A co ta barva. Kopie by samozřejmě měla být ve velkém kontrastu s barvou tlačítka. Nechcete šedo-šedé. Chcete černo-bílou nebo modro-oranžovou.

Text musí být opět velmi dobře čitelný.

4. Umístění

Nejlepší umístění závisí na designu vašich webových stránek, což pravděpodobně není překvapující. Stále však existují určitá pravidla, která stojí za to dodržovat.

Umístěte ho do možné. Nesnažte se být kreativní. Umístění by mělo být zřejmé zákazníkovi / uživateli.

Pokaždé, když někdo navštíví webovou stránku, očekává, že na určitých místech uvidí určité věci. Věci jako: logo v levém horním rohu, přehled nákupního košíku v pravém horním rohu, klauzule o autorských právech v zápatí, atd. Vaším úkolem je pokusit se zjistit, co je nejzřetelnějším místem pro tlačítko Koupit a jednoduše ho tam umístit.

Samozřejmě to musí být zároveň nejviditelnější místo. To znamená dvě věci:

1. To Absolutně musí být umístěna nad záhybem, a
2. Nebojte se mezer. Mezerník je přítel každého dobrého web designera. Nezapomeňte, že nezáleží na tom, kolik věcí můžete umístit na webové stránky, na čem záleží, kolik věcí z něj můžete odstranit.

Můžete umístit své umístění strategie na steroidy duplikováním tlačítka a také umístění v dolní části stránky. Tímto způsobem, když někdo čte celou stránku, může stále jednat na jejím konci.

5. Extra prvky

To je poleva na dortu. Další prvky zlepšují viditelnost vašeho tlačítka ještě více. Příklady prvků: šipky, nákupní vozíky, zvětšovací skla, plus nápisy nebo různé prvky značky.

Můj oblíbený příklad - příklad Firefoxu - používá jeden opravdu skvělý extra prvek - oranžovou fox (aka jejich logo).

Pravidlem je použít další prvky, které zdůraznit účel tlačítka. Například dvě šipky směřující dolů fungují skvěle pro tlačítko ke stažení. Nákupní košík ikona funguje skvěle s add-to-cart tlačítko (příklad Amazon výše). Zvětšovací sklo funguje skvěle pomocí tlačítka pro vyhledávání. A tak dále.

Můžete také použít některé prvky značky. Například věci jako: standardní ikona RSS s tlačítkem pro přihlášení k odběru, ikona ptáka s tlačítkem následného stahování, oranžová liška s tlačítkem pro stahování, vaše logo s logem buy-my- věci tlačítko.

Zde jsou nějaké příklady:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Nahrát

Síla "svobodného"

Další trik je použití nejsilnějšího slova v anglickém jazyce - FREE. Kdykoliv je něco inzerováno jako volné, lidé začnou jednat předvídatelně iracionálně (podívejte se na skvělou knihu Dan Ariely, "Vzkříšení Iracionality" zjistit, co tím myslím.)

Další příklady:

Freshbooks

Wufoo

Freeagent.com

Co bude dál?

Pokud jste tak trochu zdatní ve Photoshopu nebo jiném podobném softwaru, můžete si právě teď vytvořit pěkné tlačítko. Dalším způsobem je stát se šťastným vlastníkem jakéhokoli tématu WordPress od ThemeFuse, jako jsem se zmínil dříve v tomto příspěvku.

Jaká je Vaše rada při navrhování skvělého nákupního tlačítka? Rád bych tento příspěvek aktualizoval s vašimi názory.