Před začátkem Vánočních svátků jsme s v rámci UX v Cimpress zamysleli nad tím, co můžeme udělat se stávající typografií. Už nějakou dobu jsme cítili, že to není to pravé ořechové. Zároveň jsme věděli, že se s ní vlastně nikdy nic nedělalo.
Aktuálně je vše postavené nad CSS framework Bootstrap. Bez nějakých větších úprav. Takže v podstatě nedefinuje nic dalšího kromě velikostí fontů, výšky řádků, atp. I když je to fajn základ, pro nás to není dostačující.
Mrkli jsme se na to, jak typografii zlepšit a získat tak nejen hezčí a čitelnější výstupy, ale zároveň jak bychom si mohli usnadnit práci při návrhu a vývoji. A jak vlastně ji tak standardizovat napříč platformou, kterou vyvíjíme.
Nekonzistence a žádná pravidla
Že nám stávající typografie nevyhovuje jsme už nějakou dobu cítili. Vedli nás k tomu důvody, že například:
- Obsahové stránky postrádají lepší vizuální hierarchii, odsazení, atd.
- Využití elementů napříč platformou je různé – někdo jako hlavní nadpis použije H1, někdo H4.

My vlastně nemáme žádná pravidla o tom, co a jak používat. Jako designéři s tím bojujeme, protože i sami volíme různé prvky (na základně vlastních preferencí). Některé týmy, které nemají dedikované UX lidi, si to také řeší naprosto po svém.
S kolegy jsme typografii diskutovali už od prázdnin. Dívali jsme se, jak to mají jinde, například jaké mají:
- Velikosti fontů pro různé obsahové prvky,
- Písma,
- Velikosti řádků.
Většina návrhu tak končila pouze s definovanou škálou pro jednotlivé velikosti nadpisů či různé verze odstavců a dalších obsahových prvků.

Osobně jsem měl stále problém právě s danou škálou. Ta byla víceméně převzata z konkrétních Design Systémů Nebo Style guides bez jakéhokoliv hlubšího přemýšlení (alespoň mám ten pocit). Takže například název stránek (H1) byl pak zbytečně velký i přes to, že jinde tento element používali v jiném kontextu.
Typografie není jen o prvcích, ale i jejich využití
Na řešení typografie jsem si vyhradil trochu času a podíval se na ní trochu jinak. Zajímal jsem se primárně o to:
- Jak jednotlivé prvky vypadají.
- Jaká pravidla využití se k jednotlivým prvkům váží.
Sepsal jsem různé problémy, které jsem v našich aplikacích objevil. Například, že:
- Využíváme různé elementy pro stejnou věc, takže to vypadá (a působí) odlišně.
- Nemáme žádný unifikovaný styl a pravidla pro často využívané prvky – například seznamy nebo méně výrazné typografické prvky.
Než jsem se pustil do hrátek s typografií, sepsal jsem že svého pohledu pár základních pravidel o typografii a o tom, jak lidé aplikace využívají. Dal jsem dohromady například, že:
- Lidé využívají Cimpress aplikace především na počítačích, velice vzácně na mobilech. Využívají je také v různých prostředích, včetně továren. Vysoký kontrast a dobrá čitelnost je tedy zásadní – což ale neznamená, že text musí zabírat spoustu vertikálního místa.
- Je nutné mít jasnou a jednoduchou hierarchy pro rozlišení různých částí obsahu.
- Mít dost místa pro vytvoření smysluplných obsahových skupin v rámci obsahu pomůže lidem pochopit různé sekce, kapitoly a význam.
Poté jsem si prošel náš „inventář“ používaných vzorů, šablon a i samotné aplikace. Snažil jsem se identifikovat případy využití typografických elementů, tedy:
- O co se jedná.
- K čemu daný prvek slouží.
- Jaké vlastnosti aktuálně má.

Z toho jsem „vyextrahoval“ opakující se vzory, které jsem použil jako základ pro experimenty a návrh pravidel. Mezi vzory jsem tak vložil například využití pro:
- Application name,
- Introduction / Display Title,
- Page Title,
- Section Header,
- Subsection.
A mnohé další, viz následující obrázek.

Tento seznam jsem prošel s kolegy a shodli jsme se na tom, že to dává smysl a že s tím můžeme dál pracovat.
Ve Sketch to bylo na dlouho
Přiznám se, že jsme docela přemýšlel nad tím, jak snadno vyzkoušet a prozkoumat různé možnosti. Prvně jsem začal ve Sketch (kvůli sdílení a spolupráci s kolegy), ve kterém jsem si hrál s různými:
- Velikosti písma,
- Fonty,
- Škálami odsazení.
A tak dále. Samozřejmě s tím, že jsem mezi sebou porovnával různé možnosti.
Bylo to ale velice pracné a zdlouhavé. Nestačilo totiž jen měnit styly, potřeboval jsem zároveň porovnávat výsledky v různých případech/aplikacích napříč různými nástroji, které máme. (Což jsem dělal pomocí fragmentů z návrhů kolegů.)
Na můj vkus to ale trvalo moc dlouho. Především proto, že:
- Ve Sketch je pracné změnit styly pro všechny prvky, ať už s využitím Styles nebo Components.
- Určité možnosti jsou omezené a trochu přes ruku – například různé velikosti odsazení.
- Vykreslení ve Sketch je přeci jen trochu odlišné než v prohlížeči.
Sepsal jsem si tedy bokem vytvořené možnosti a Sketch jsem odložil. Místo něj jsem si naprogramoval jednoduchý webový nástroj, ve kterém jsem mohl s typografií snadno experimentovat.

Právě pro efektivní experimentování s typografií jsem do toho nástroje přidal:
- Jednotlivé styly, které jsem v rámci Desk Research získali z různých produktů, design systémů, atp.
- Několik našich textových stránek.
- Obrazovky z různých nástrojů a aplikací.
Svým designérským pohledem jsem poté porovnával různé možnosti a varianty tak, aby obsah napříč produkty a stránkami splňoval sepsaná pravidla (viz výše).

Jak jsem si hrál s různými možnostmi, sledoval jsem odlišnosti a jak by zapadly do naší platformy. Například jak:
- Bude do celkového stylu západ trochu širší font nebo písmo s větším rozestupem?
- By fungovala různá odsazení – zeshora, zespod?
- Využít existující HTML strukturu bez větších změn?
Vytvořil jsem tak několik možností, které jsem zdokumentoval a sdílel kolegům. Z mého pohledu to byl poměrně Byl to docela slušný základ Připravil jsem tak několik slibných variant, které mi dávaly smysl a vizuálně tvořily čitelný obsah.
Nechtěl jsem ale skončit u pocitu. Už od začátku jsem přemýšlel o tom, jak vytvořené varianty ověřit, abychom vybrali možnost, která opravdu lidem pomůže s používáním našich aplikací.
Pojďme zjistit, zda to dává smysl
Už při přípravách „hrátek“ s typografií jsem přemýšlel o tom, jaké další kroky podniknout s případnými výtvory. Nechtěl jsem, aby vše skončilo pouze papíře. Případně abychom pouze na základě našeho designérského citu (který je v týmu v podstatě u každého jiný) vybrali určitý formát. (I když jsem si říkal, že by mohlo být cokoliv lepšího než to, co máme teď.)
Přemýšlel jsem tedy na tím, jak vlastně typografii ověřit. A vlastně tedy zjistit, zda se lidem obsah:
- Lépe vizuálně zpracovává, čte a „skenuje“.
- Rozpoznají obsahovou hierarchii a strukturu.
- A zda by jej vizuálně lépe ohodnotili.
Vlastně aby jim více pomohla dosáhnout toho, kvůli čemu přišli – udělali nějaký úkol.
V tomto smyslu jsem přemýšlel tedy nad tím, na co se při případném bádání zaměřit. Dal jsem dohromady několik metrik, například:
- Task Completion Rate a Time,
- Conversion Rate.
Vlastně se zaměřit na to, zda lidem typografie pomůže rychleji dokončit nějaký úkol.
Na základě různých článků a dokumentů jsem také přemýšlel nad tím, zda nezkusit nechat lidi pouze přečíst nějaké články (s různou formou zpracování) a pomocí preferenčního testu a měření času zkusit změřit, které se jim lépe četly. (Pro náš případ by to ale bylo podle mě docela složité a možná drahé. Proto jsem to v první fázi raději vypustil.)
Přemýšlel jsem tedy nad využitím několika různých metod, například:
- AB nebo MV testování.
- Test preference.
- Testování použitelnosti.
Samozřejmě další otázkou je cena případně změny. A zda by se tedy vyplatilo investovat do předělání toho, co již máme.
Vše nám dávalo smysl. Problém ale nastal, když jsme řešili případnou implementaci. Dost věcí už je nějak naprogramovaných a jak jsem zmínil, využití elementů je napříč aplikacemi různé. Bylo by tedy dost náročné vše sjednotit (a možná i drahé). Řešíme tedy, co s tím a plánujeme další kroky.
Definovat základní pravidla už od začátku
Když bych dnes pracoval na novém produktu, snažil bych ale alespoň základní pravidla definovat už od začátku. Opravdu alespoň ta základní – jako kdy které prvky používat, jak a proč. Nejen že by mi to pomohlo s udržením konzistence, ale i v případě růstu týmu a složitosti produktu.
Zároveň si také myslím, že v případě typografie (hlavně u aplikací) nemůžeme nad prvky obsahu přemýšlet pouze jako o H1, H2 nebo odstavcem. U běžného obsahového webu to možná bude fungovat, ale aplikace jsou trochu specifické. A z vlastní zkušenosti tedy mohu říct, že je lepší o nich uvažovat v rámci kontextu, ve kterém jsou použity.