Tlačítka „Výzva k akci“ Pokyny, osvědčené postupy a příklady

Tlačítka výzev k akci na webových stránkách jsou často opomíjena. Designéři někdy nechápou přesně, co dělá dobré volání k akci tlačítko nad rámec atraktivní a montáž do celkového designu. Tlačítka volání k akci jsou však příliš důležitá na to, aby mohla být navržena bez jakéhokoliv chápání toho, co je činí účinnými. Koneckonců, hlavním bodem tlačítka volání k akci je dostat návštěvníky dělat něco.

Je důležité získat alespoň základní znalosti o tom, jak barva, měřítko, jazyk a další faktory ovlivňují míru konverze tlačítka volání na akci. Pojmy zde nejsou komplikované, ale zabývají se trochu přemýšlením a plánováním vytvořit co nejefektivnější volání do akčních tlačítek v daném designu. Další informace o každém z těchto bodů a další informace naleznete zde.

Účel tlačítek "Výzva k akci"

Tlačítka volání na akci mohou sloužit mnoha funkcím. Po všem, “výzva k akci” je opravdu trochu vágní. To znamená, že hlavním účelem je dostat návštěvníka na vaše stránky dělej něco. To by mohlo být přidávání produktu do nákupního košíku, stahování, vyžádání informací nebo něco jiného.

Vzhledem k tomu, že volání na akční tlačítka má takové rozmanité účely, je třeba se zabývat tím, čeho má tlačítko dosáhnout. Typ webu, cílový trh a požadovaná akce mohou hrát roli v tom, jak nejlépe navrhnout tlačítko výzvy k akci.

Typy tlačítek "Výzva k akci"

Existuje několik různých typů volání na tlačítka akce. Zatímco každý typ má za cíl přimět návštěvníky k provedení určité akce, tato akce se může značně lišit. Níže jsou uvedeny nejčastější typy tlačítek volání na akci, založené na akci, kterou chcete přijmout.

1. Přidat do košíku Tlačítka

Webové stránky elektronického obchodu obvykle používají řadu tlačítek volání na akci, ale nejrozšířenější je web “přidat do košíku” tlačítko. Tato tlačítka se obvykle zobrazují na jednotlivých stránkách produktu. Jejich účelem je lákat zákazníky k nákupu položky. Společné konstrukční prvky přidat do košíku tlačítka obsahují jednoduché znění (například “Přidat do košíku” nebo “Přidat do batohu” nebo “Kup nyní“) a používání ikon (obvykle pytel nebo vozík).

2. Stáhnout tlačítka

Tlačítka pro stahování jsou podobná jako tlačítka pro přidávání do košíku, v nichž se snaží navléct návštěvníka, aby převzal položku. V případě tlačítek ke stažení se mnozí návrháři rozhodnou zahrnout více informací než jiné typy tlačítek (například informace o verzi nebo velikost stahování).

3. Zkušební tlačítka

Některé stránky se snaží přilákat své návštěvníky, aby vyzkoušeli své nabídky, obecně formou bezplatné zkoušky. To může být zdarma ke stažení nebo zdarma účet, v závislosti na konkrétním místě. Některé weby používají “méně je více” filosofii a udržet jazyk na svých knoflících na minimu, zatímco jiní rádi nabízejí více informací o tom, co proces obsahuje.

4. Další informace Tlačítka

Další informace o tlačítkách se obvykle používají na konci bloku informací o upomínkách (často na domovské stránce). Tato tlačítka jsou obvykle jednoduchá, ale často přitahují pozornost návštěvníků.

5. Tlačítka pro přihlášení

Tlačítka pro registraci se nejčastěji objevují ve dvou různých verzích. První typ je obvykle přímo spojen s registračním formulářem. Druhý typ se obvykle používá podobným způsobem “přidat do košíku” tlačítka, jako způsob, jak mohou uživatelé nakupovat nebo registrovat službu nebo účet dříve, než skutečně získají formulář pro přihlášení.

Existují i ​​jiné typy tlačítek volání na akce, ale ty jsou nejčastější. Pokyny, které se vztahují k výše uvedeným pokynům, se budou pravděpodobně vztahovat i na jakýkoli jiný typ tlačítka výzvy k akci, které můžete navrhovat.

Efektivní využití negativního prostoru

Chcete, aby vaše tlačítka volání na akci vyčnívaly z okolního obsahu a aby skutečně věnovaly pozornost návštěvníkům vašich stránek. K tomuto účelu musíte kolem těchto tlačítek použít negativní prostor. Zahrňte mezeru mezi svůj obsah a tlačítko volání na akci. I když je to méně důležité (a méně časté) na některých tlačítkách, jako je přidání tlačítek do košíku, ostatní, stejně jako další uživatelé, lépe pracují s větším prostorem.

Je důležité vyrovnat množství negativního prostoru, který máte kolem tlačítek s velikostí samotných tlačítek. Je to o proporci. Chcete, aby vaše tlačítko, prostor kolem něj a okolní obsah vypadaly, jako by šly spolu, a to i s rozdíly ve velikosti. Možná budete muset trochu pohrávat s věcmi, abyste je mohli vidět správně.

Některé pokyny:

• Ujistěte se, že je kolem tlačítka dostatek místa, takže se necítíte přeplněně
• Zvažte principy jako pravidlo třetin nebo Golden Ratio, když určujete, kolik prostoru zahrnout
• Negativní prostor dává vašemu volání akční tlačítko prostor vyniknout z vašeho ostatního obsahu a odlišuje ho

Velikost a barva

Jak velké je vaše volání na akční tlačítka je velmi důležité. Tlačítko, které je příliš velké, přemůže všechno kolem něj. Tlačítko, které je příliš malé, se ztratí v náhodném pořadí všech ostatních obsahů na stránce. Chcete, aby vaše tlačítko bylo dostatečně velké, aby vyčnívalo, aniž by byl ohromující design.

Barvu lze použít k velkému efektu, který pomáhá vyrovnat velikost tlačítek. Pro větší tlačítka vyberte barvu, která je méně promyšlená v rámci vašeho návrhu (ale stále stojí mimo pozadí). Pro menší tlačítko, můžete si vybrat jasnější, kontrastní barvu, aby se opravdu tlačítko pop. V obou případech se ujistěte, že použitá barva nastavuje tlačítko odděleně, aniž by došlo ke střetu s celkovým designem stránek.

Některé pokyny:

• Tlačítka volání na akce by měla být v ideálním případě největšími tlačítky na dané stránce
• Použijte kontrastní barvy, aby menší tlačítka vynikla více
• Použít méně odlišné barvy, aby se nadměrná tlačítka lépe zapadají
• Zavoláte k akčním tlačítkům, abyste věnovali pozornost bez toho, aby byl váš návrh ohromující

Jazyk

Přesné znění, které se rozhodnete použít pro volání na tlačítka akce, může mít obrovský vliv na konverzi. Porovnejte “Kup nyní” s “Přidat do košíku“. Jeden je mnohem naléhavější než ten druhý. Nebo co takhle “Vyzkoušejte zdarma” s “Zkušební verze zdarma“? Jeden je mnohem děsivější než ostatní a vyniká více.

Jazyk, který používáte při volání na tlačítka akce, by měl být co nejpřímější a nejjednodušší. Chcete, aby se návštěvníci na první pohled dozvěděli přesně to, co dostanou, když kliknete na tlačítko. Pokud to zpochybňují, znamená to, že se zastavili, což může vést k nižším mírám konverze.

Nezapomeňte také na velikost písma. Text na tlačítku výzvy k akci by měl být velký a tučný, vhodný pro velikost a barvu samotného tlačítka. Ujistěte se, že je dostatek kontrastu a že text je snadno čitelný.

Některé pokyny:

• Používejte jednoduchý, přímý jazyk
• Použijte velké, tučné písmo na tlačítko pro hlavní text
• Ujistěte se, že jazyk jasně vyžaduje konkrétní akci

Vytvořit naléhavost

Chcete, aby návštěvníci na vašich stránkách prováděli požadované akce s co nejmenší myšlenkou. I když nechcete své návštěvníky oklamat, více příležitostí, které jim dáte, aby zastavili a zvážili, co dělají, čím více příležitostí jim dáváte, “Ne”.

Chcete, aby vaše tlačítka dávala jim dojem, že musí jednat hned. Chcete je povzbudit k tomu, aby se okamžitě rozhodli, v podnětu okamžiku. I když to nebude fungovat pro každé tlačítko výzvy k akci (zejména pro nákup položek s vysokými lístky), pro levné nebo bezplatné akce, je žádoucí, aby návštěvníci klikli s malou předpovědí..

Některé pokyny:

• Povzbuzujte své návštěvníky k okamžitému jednání
• Nedejte svým návštěvníkům žádný důvod k pauze
• I když naléhavost je důležitá, nezavádějte návštěvníky žádným způsobem

Poskytněte další informace

Pokud je to vhodné, použijte tlačítka volání k akci, abyste návštěvníkům poskytli další informace o tom, co dostanou, když kliknou na tlačítko. To je nejčastěji vidět zkušební tlačítka nebo tlačítka pro stahování. Běžné příklady dodatečných informací zahrnují dobu, po kterou bude bezplatná zkušební verze trvat, nebo velikost stahování souboru. Informace o verzi je také běžně vidět.

Když přidáváte další informace, nezapomeňte, že je třeba se zaměřit na aktuální výzvu k akci. Ujistěte se, že text pro uživatele, který láká návštěvníky, je nejvýraznější a další informace jsou méně viditelné.

Některé pokyny:

• Zahrnout pouze další informace, pokud to přidá k uživatelské zkušenosti
• Další informace jsou vhodné pouze u některých typů volání na akční tlačítka, zejména tlačítka ke stažení nebo zkušební tlačítka
• Ujistěte se, že hlavní výzva k akci je stále nejvýraznějším textem na vašem tlačítku

Priorita

Je důležité upřednostnit tlačítka volání na akci na stránce, pokud je jich více. To lze provést několika způsoby, ale nejběžnější jsou pomocí barvy a velikosti.

Použijte barvu zvýraznit nejdůležitější tlačítko na stránce, nebo aby méně důležité ty vypadají méně prominentní. Nebo použít velikost, aby nejdůležitější tlačítko vyniknout (tím, že je větší) a de-zdůraznit méně důležité.

Ikony a obrázky

Zahrnutí vizuálních podnětů do tlačítek volání do akce může také pomoci zvýšit míru konverze. Ikona nákupního košíku na “přidat do košíku” Příkladem jsou například tlačítka nebo šipky na tlačítku stahování. Přemýšlejte o jedinečných ikonách, které chcete použít, ale ujistěte se, že ikona přidává do uživatelského prostředí vyjasnění toho, pro co je tlačítko určeno..

Některé pokyny:

• Ujistěte se, že ikony, které používáte, pomáhají vyjasnit význam vašeho tlačítka, místo toho, abyste jej zmatili
• Snadno rozpoznatelné ikony mohou okamžitě signalizovat svým návštěvníkům význam
• Nebojte se používat méně často používané ikony, pokud je jejich význam stále jasný

Příklady

Tady je pár příklady velkých volání na akční tlačítka. I když ne všechny dokonale odpovídají výše uvedeným pokynům, splňují dostatečná kritéria, aby byla považována za skvělou.

Živý přenos - Rozlišení tlačítek „buy now“ (pro placené možnosti) a „sign up“ (pro bezplatné možnosti) je dobrá strategie.

Windows 7 - Velké, zelené tlačítko "Get Windows7" ​​je pro návštěvníky snadné.

Fileshare HQ - Světle zelené tlačítko zde opravdu stojí proti bílému pozadí.

Lodní deník - Použití různých barev pro tlačítka "Download" a "Buy" je odlišuje a dává přednost tlačítku "Buy".

TasteBook - Toto tlačítko skvěle využívá ikony a vyniká větším tučným textem.

GoodBarry - Další zářivě zelené tlačítko k akci.

Lifetree Creative - Pokračování stejného písma z kopie těla na tlačítko volání na akci vytvoří pocit soudržnosti.

Resumator - Jasně červené volání k akci tlačítko s tučným typem vyniká na modrém pozadí.

Notepod - Dobrým příkladem zahrnutí dodatečných informací do tlačítka výzvy k akci.

Inkd - Skvělý příklad upřednostňování tlačítek s velikostí.

Elegantní motivy - Dalším vynikajícím příkladem použití barev k vyniknutí bez střetu s okolními prvky návrhu.

ZenDesk - Dalším skvělým příkladem vyniknutí tlačítka pomocí barvy.

Storenvy - Kulaté tlačítko je nečekané a vyniká, zejména když je obklopeno bílým okrajem.

Bara'Mail - Někdy tlačítko, které se mísí, funguje lépe ve vašem celkovém designu stránek, zejména pokud je akce méně naléhavá.

Další zdroje

• Tlačítka výzev k akci: Příklady a osvědčené postupy - Od časopisu Smashing
• Dobrá volání-k-akce tlačítka - od UX stánku
• Tlačítka výzev k akci: Má velikost hmoty? - Od Get Elastic
• 10 technik pro efektivní “Výzva k akci” - Z Boagworldu
• 5 tipů pro vytvoření efektivního tlačítka volání na akci - z webu SitePoint