Ondřej Ilinčev na CopyCampu: Vliv písma a grafiky na konverze

Článek byl editován 5. 10. 2019 u příležitosti vystoupení Ondřeje Ilinčeva na CopyCampu 2019. Původní datum vydání  bylo 09. 12. 2017.

CRO a UX specialista Ondřej Ilinčev měl v rámci letošního CopyCampu velmi zajímavou přednášku, na které sdílel konkrétní tipy pro tvorbu a prezentaci textu, aby na čtenáře působil co nejlépe. Že je to okrajové téma, které vás nemusí zajímat? Podívejte se, jak nepřesvědčivě by vypadala stránka alza.cz bez jakéhokoliv textu. 

Samo se to nepřečte: Vliv písma a grafiky na konverze

Častým tématem debat je, zda se lépe čte patkové či bezpatkové písmo. K překvapení mnoha účastníků konference uvedl Ondřej Ilinčev, že se dosud nepodařilo prokázat, že by se jedno z uvedených typů písem četlo lépe než druhé.

Další zajímavou studii realizovaly The New York Times. Tyto noviny uveřejnily celkem šest fontů a zjišťovaly, které z nich jsou nejvíce důvěryhodné a které naopak nejméně. Který z uvedených fontů na obrázku níže na vás působí nejlépe?

Ze zmíněné studie vyplynulo, že nejdůvěryhodněji působí písmo Baskerville, které je už 250 let staré. Coby nejméně důvěryhodné bylo označeno písmo Comic Sans, druhé nejméně důvěryhodné písmo bylo překvapivě Helvetica.

5 pravidel typografie

V rámci své přednášky Ondřej Ilinčev představil základní pravidla typografie, mezi která patří: velikost písma, délka řádky, výška řádky, typografická škála a kontrast.

Velikost písma

Minimální velikost písma, která by se měla používat je v současné době 14 px. Tato velikost je určena pro mobilní zařízení. V případě, že se text zobrazuje na notebooku, mělo by se jednat o 16 – 18 px. Platí pravidlo, že čím větší obrazovka, tím by mělo být i větší písmo.

Je zajímavé, jak velikost písma působí na uživatele. Na webu jedné firmy byla u produktu uvedena informace, že daný výrobek způsobuje poleptání kůže. Tento text je ovšem menší než ostatní text na webu a na uživatele působil přesně opačným dojmem. Vyvolal v nich pocit, že před nimi firma něco skrývá a o to více se na daný úryvek zaměřili.

Délka řádky

Dalším parametrem, který je potřeba brát v úvahu, je délka řádky. Tento faktor je důležitý, protože standardně nečteme jednotlivá písmenka, ale skáčeme očima po tzv. sakádách. Těchto skoků dokážeme na jedné řádce udělat 5 až 6. Pokud je ovšem řádka příliš dlouhá, na jejím konci máme problém „skočit” na další řádek, a tak se stává, že ji čteme stále dokola a nemůžeme ji dokončit. Optimální délka řádky je 80-100 znaků.

Ondřeje Ilinčev sám přiznal, že je příslovečnou kobylou, co chodí bosa. Jako špatný příklad uvedl vlastní blog, na kterém jsou jednotlivé řádky příliš dlouhé.

Naopak dobrým příkladem je následující web Matěje Latina, který se přímo specializuje na typografii.

Výška řádky

Výška řádky je ideální v případě, kdy se jedná o 1,5 násobek velikosti samotného písma. Pokud je výška menší či větší, písmo se hůře čte.

Negativním příkladem je Shoptet, který má recenze příliš textově nahuštěné. Naopak společnost Bonami zvolila na svém webu takovou výšku řádky, díky které text působí příjemně a dobře se čte.

Typografická škála

Dalším důležitým prvkem je tzv. typografická škála. „Typografická škála je poměr velikosti nadpisů, podnadpisů, úvodu (perexu) a běžného textu. Hlavní, na co byste měli myslet je to, že jednotlivé prvky by měly být tak různě veliké, abyste je od sebe poznali, i pokud stojí samostatně. Takže budete vědět, zda je to hlavní nadpis (v html H1), nebo podnadpis (H2, H3, H4), či běžný text,” uvedl Ilinčev.

Špatným příkladem použité typografie je web Idnes.cz, na kterém vypadá vše velmi podobně.

Dobrou ukázkou je naopak web Hlídací pes.

Kontrast

Kontrast je prvek, na který se relativně často zapomíná. Pokud máte starší publikum a nebudete využívat kontrast, pak může mít problém text vůbec přečíst. Ukázkou špatně použitého kontrastu je například web počítačů Mac.

Na závěr přednášky zmínil Ondřej Ilinčev designéra Dietera Ramse, autora 10 principů dobrého designu. Jejich pojetí si můžete prohlédnout níže, jak jistě sami poznáte, design na levé straně je špatný a naopak ten na pravé straně, je povedený.

Uznáváme, je to špatně vidět. Pro plnou velikost klikněte na obrázek. Případně se podívejte na jednotlivé verze ve webové podobě: špatná varianta (vlevo), dobrá verze (uprostřed), další dobrá verze (vpravo).

Díky zde zmíněným argumentům můžete nyní lépe uspět v diskusi s grafiky a web designéry a dosáhnout výsledků, které uvítají hlavně vaši uživatelé.

Zdroj obrázků: Prezentace Ondřeje Ilinčeva

Tip redakce:

Ondřej Ilinčev vystoupí již ve čtvrtek 10. října na CopyCampu 2019, kde bude mluvit o tom, jak využít přirozené instinkty lidí v textech na webu. Nenechte si ujít výběr toho nejlepšího z copywriterských hroznů a buďte u toho.