Design & Grafika

CTA button design

Vizuální podoba tlačítka s výzvou k akci – barva, velikost a text zásadně ovlivňují míru kliknutí

(Call to Action Button)

Co je CTA button design

CTA button design je vizuální podoba tlačítka s výzvou k akci: jeho velikost, tvar, kontrast vůči okolí, umístění na stránce a text, který na něm stojí. Rozhoduje o tom, jestli návštěvník klikne, nebo tlačítko vůbec nezaregistruje.

Kontrast, ne konkrétní barva

Kolem barev tlačítek koluje spousta nesmyslů a nejotravnější je ten o červené, která prý zvyšuje konverze. Žádná barva sama o sobě nic nezvyšuje. Funguje odlišení od okolí: tlačítko musí být barevně jinde než pozadí, text i všechno ostatní kolem. Na webu, kde je zelené úplně všechno, bude zelené tlačítko neviditelné, i kdyby zelená byla sebelepší značková barva. Vedle toho musí obstát i kontrast textu vůči podkladu, jinak si nápis nepřečtou lidé se slabším zrakem.

Aby tlačítko vypadalo jako tlačítko

Ploché designy zašly občas tak daleko, že se z tlačítek staly bezbarvé obdélníky nebo jen podtržený text. Člověk pak hádá, co je vlastně klikatelné. Vyplněná plocha, dostatečná velikost a viditelná reakce na najetí myší nebo dotyk stojí pár minut práce a ušetří spoustu nedokončených objednávek. Na mobilu k tomu přidejte pohodlný dosah palcem, protože tlačítko blízko spodního okraje obrazovky se mačká líp než to schované mezi odstavci.

Text je půlka úspěchu

  • Konkrétní sloveso místo obecného „Odeslat“. Rozdíl mezi „Odeslat“ a „Chci nezávaznou nabídku“ je v tom, že druhá varianta říká, co se stane potom.
  • První osoba často zabírá líp než rozkaz.
  • Krátce, ať se nápis na mobilu nezlomí do dvou řádků a tlačítko neztratí tvar.
  • Žádné překvapení za kliknutím. Když tlačítko slibuje ceník a otevře se formulář na jméno a telefon, důvěru jste právě utratili.

Dřív než odstín tlačítka

Než začnu ladit odstín tlačítka, ověřím dvě nudnější věci: jestli je vidět bez scrollování a jestli má kolem sebe dost volného prostoru. Většina případů, kdy mi vstupní stránka z placené kampaně nekonvertuje, stojí na tomhle. A když už podobu tlačítka testuju, měním jednu věc a čekám na dost dat, protože při pár desítkách konverzí měsíčně se rozdíl nedá odlišit od náhody.

Časté otázky

Jaká barva tlačítka nejvíc konvertuje?

Žádná. Rozhoduje kontrast vůči zbytku stránky a to, aby se stejná barva nepoužívala pro nic jiného než pro akce. Univerzální vítězná barva je mýtus, který přežívá z pár starých testů vytržených z kontextu.

Kolik tlačítek může být na jedné stránce?

Hlavní akce by měla být jedna, klidně zopakovaná na delší stránce vícekrát. Vedlejší volby nechte vizuálně slabší, třeba jako obrys nebo textový odkaz. Dvě stejně křiklavá tlačítka vedle sebe nutí návštěvníka rozhodovat se místo klikat.

Má smysl A/B testovat podobu tlačítka?

Na webech s vyšší návštěvností ano. U malých projektů se rozdíl statisticky neprokáže a přinese víc přepsat text tlačítka a uvolnit kolem něj místo než hledat rozdíl mezi dvěma odstíny.