Jak jsme hledali nová typografická pravidla

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.