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

19. 12. 2017 | Milada Zemanová
Web je z 95 % tvořen písmem. Aby vaše texty měly co největší účinek, soustřeďte se nejen na velikost písma, na výšku a délku řádky a kontrast. Dokonce i zvolený font rozhoduje, jak zapůsobíte na čtenáře.

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 Linčev vystoupí již v úterý 22. 5. na konferenci Performance 2020. Na ní podrobně vysvětlí, co udělat, aby vaše vstupní stránky nebyly zároveň i výstupní. Zjistíte, co odlišuje dobré a špatné vstupní stránky. Včetně obvyklých konverzních bariér, ozkoušených frameworků, tipů pro analýzu, přesvědčivou textařinu a příkladů před a po. Po přednášce budete vědět, co říct, jak to říct a jak to poskládat na vstupní stránce tak, aby vám opravdu fungovala a vydělávala.



Mimo toho vám budou představeny nejaktuálnější trendy, jako je lokální vyhledávání, propojení online a offline kanálů, mobilní reklama nebo měření ROPO efektu. 


Kdy: 22. května
Kde: Národní dům na Vinohradech
Registrujte se zde.

Čtenáři Marketing Journalu mají možnost využít zlevněné vstupné. Při nákupu lístku zadejte kód: perf2020-m-journal. Lístek pak získáte místo za 4900 Kč jen za  3900 Kč.

Štítky dokumentu: Reportáže
Sdílejte tento článek:
Podobné články:
Tento web používá soubory cookie k poskytování služeb, personalizaci reklam a k analýze návštěvnosti. Používáním tohoto webu s tím souhlasíte.