A UI design leginkább csak tipográfia?

Spoiler alert: A UI design többről szól. Az viszont tény, hogy a képernyőkön 95%-ban szöveg alapú információt látunk. Ez pedig azt jelenti, hogy egy termék használta közben kialakuló élményeinket döntően befolyásolják maguk a betűk is.

A tipográfia a weben ennek ellenére kissé elhanyagolt terület, egyesek szerint pedig a UI designnak erről kellene szólnia. A címben megfogalmazott erőteljes kérdést  a “Why UI web design is all about typography” című cikk ihlette.

Az abban leírt vad állítások ellenére is a cikk tartalmazott hasznos gondolatokat a tipográfiáról, ebből  kiindulva kezdtem írni a témáról, de végül egy átfogóbb, “a tipográfia alapszabályai product designereknek” típusú iromány lett belőle.

A tipográfia jelentősége

A UI egyik meghatározó célja, hogy a terméken lévő információkat értelmezhető módon rendezze, és ahogyan említettem a legtöbb információ szöveg alapú. Nézd meg például, hogyan néz ki a Slack landing oldala szöveggel és nélküle:

Viszont a tipográfiában közel sem áll akkora mozgástér rendelkezésünkre, mint például a képek esetében. A fotóknál tudsz játszani többek között a kontraszttal, a színekkel, az expozícióval etc, az attribútumok sokasága szinte végtelen variációkat tesz lehetővé.

A szöveg formázásánál jóval kevesebb az opció, körülbelül ezek állnak rendelkezésre:

  • Maga a font választás
  • Weight
  • Betűk közötti távolság
  • Sorok közötti távolság
  • Rendezés

Sokan nem nagyon feccölnek erőfeszítést még ezeknek sem a beállításába és a tipográfia kimerül a font kiválasztásában, pedig ettől jóval többre van szükség.

A tipográfia hatása az érzelmekre

Ha megtekinted az alábbi két fotót, a rajtuk lévő szövegek is egészen máshogyan fognak hangzani a fejedben:

Az érzelmi különbséget a képek mellett a betűtípus választása is okozza.

Ugyanakkor az érzelmi hatás mellett a font megválasztása funkcionális célokat is szolgál, ugyanis hatással van:

  • Az olvashatóságra
  • Az akadálymentességre
  • A használhatóságra
  • A vizuális egyensúlyra

Ezen elemekből jön létre lényegében az érthető vizuális kommunikáció.

A mintafelismerés fontossága

Betűtípus kiválasztására bárki képes, aki tud olvasni és tudja használni az internetet. Azonban nem mindenki képes a szöveget a vizuális kommunikáció eszközeként használni.

Magyarul a tipográfia nem csak a fontok válogatásból áll. Az egyik design kurzusban, amit használtam valami hasonló definíció szerepet: a betűkkel kapcsolatos vizuális elemek tudatos kombinálása az optimális olvasási élmény és a megfelelő érzelmi hatás kiváltása céljából.

Az emberek a különböző betűkészletbe tartozó betűket a mintafelismerés révén azonosítják. Hogyan lehetséges, hogy az itt látható H betűket felismerjük?

Nem arról van szó, hogy memorizáltuk a H összes formáját, hanem kialakítottunk egy emlékmintát a H betűről, mint formáról. Ugyanezzel magyarázható, hogy minél absztraktabb formát választunk, annál nehezebb a felismerés, az utolsó betűnél már ez történik.

A szokatlan betűtípusok megzavarják a mintafelismerést, és lassítják az olvasást. Ha egy fontot nehezen tudunk elolvasni, azt az érzést ráadásul átvisszük a szöveg jelentésére is, és úgy ítéljük meg, hogy a tartalmát nehéz megérteni, vagy rosszabb esetben a feladatot nehéz végrehajtani.

A mintafelismerés következménye egyébként az is, hogy nincs különbség a talpas (serif) és a talp nélküli (sans serif) betűk olvashatósága között.

Szöveg-igazítás

Nézd meg az alábbi két szöveget, a bal oldali balra zárt, a jobb oldali pedig sorkizárt szöveg-igazítási stílusban jelenik meg. Melyiket könnyebb és gyorsabb olvasni? A képen szándékosan jelölve van a sorok eleje:

A legtöbb esetben a válasz a balra zárt lesz. Minden egyes sor ugyanis ugyanattól a ponttól kezdődik. Amint ezt a mintát felismeri az agy, az olvasás könnyen és gyorsan fog történni.

A sorkizártnál a sor kezdés mindig más ponton történik, az agyunknak dolgoznia kell, hogy megtalálja a következő sort, több munkát kell végeznie

Kerning és leading

A betűk közötti távolság a kerning, aminek rendkívül fontos szerepe van az olvashatóságban, ezáltal pedig az érthetőségben is.

A leading pedig a sorok közötti távolságot jelenti, vagyis a sorközt. A sorköz növelése általánosságban növeli az olvashatóságot és a megértési sebességet.

A tipográfia alapszabályai

Van néhány egyszerű szabály, amelyek betartásával sokat tehetünk a tipográfiáért, ezáltal pedig jelentős hatással lehetünk a felhasználói élményre is.

Legfeljebb 2 betűtípus használata

Legfeljebb két fajta fontot célszerű használni, amelyek hasonló szélességűek és magasságúak, valamint lehetőleg jól kiegészítik egymást.

Például az Avenir és a Georga hasonló szélességűek, ugyanakkor a karakterek közötti távolság is hasonló, ami vizuális harmóniát teremt:

Limitáld a sorszélességet

Ha a sorok túlságosan hosszúak, a szemnek nehezebb lesz megtalálni újra a következő sor elejét. Ilyenkor fordul elő az is, hogy az ember hajlamos véletlenül elolvasni többször ugyanazt a sort, mert a szeme nem találja a következőt.

A javasolt sorhosszúság maximum 60 karakter, de mobilon kevesebb, csupán 30-40 karakter soronként.

Az olvashatóság nem mellőzhető

Az összes UI-on használt szöveges elemnek – címek és alcímek, body, gomb szövegek, labelek etc – könnyedén olvashatónak kell lennie. Különösen, hogy a felhasználóid különböző eszközökön, különböző méretben és felbontáson fogják használni az oldalad.

Ugyanide kapcsolódik az is, hogy a betűk megkülönbözetők legyenek egymástól. Egyes betűtípusoknál az “L” és az “I” nagyon hasonlóan néznek ki, ami rontja az olvashatóságot.

A bekezdések között space legyen

A szünetek a bekezdések között lehetőséget adnak a szemnek a pihenésre, ami végső soron gyorsítja a megértést. A megfelelően használt white spacek akár 20%-kal is képesek növelni a megértést. Magam is eléggé figyelek ennek a szabálynak a betartására a blogon, de akár ezen a példán keresztül is érthető lesz, hogy a szemnek mennyi lehetősége van a pihenésre a bekezdések között:

Következetes szövegigazítás

Azt már láttuk, hogy melyik szövegigazítás a legpraktikusabb, de végül bármelyikre is essen a választás, lehetőleg azt használd következetesen egy oldalon belül. Még ha az egyes szövegegységek nem is kapcsolódnak egymáshoz, akkor is egyszerűbb az oldal feltérképezése, ha hasonló szövegigazítással jelenek meg.

Ez alól kivételt képez, ha a szöveg elrendezésével az adott egységnek nagyobb figyelmet akarsz biztosítani, ahogyan én is teszem a következő boxban:

A font stílusokkal differenciálhatod a tartalmat

Egy fontkészletnek legalább 3 stílusa van: regular, italic + bold.

Ezekkel tudod a tartalmi elemeket elkülöníteni egymástól, például a címet és bekezdést. Igazság szerint számos esetben ezek lehetővé teszik, hogy egyetlen betűtípusból építs fel egy oldalt, ahogyan ebben a példában is látszik:

A tipográfia segítheti a jó olvashatóságot, a megértést és ezáltal a teljes élményt. A tipográfia optimalizálásával lényegében a user interfacet optimalizálod, így a UI designban betöltött jelentősége vitathatatlan.

Referenciák

Az illusztrációk egy része a Design Rules nevű kurzusból származik, ami egy eléggé penge tanfolyam, alaposan kitér a tipográfiára is.

Habár még nem olvastam, de ígéretes kiadványnak tűnik témában az On Web Typography című kézikönyv.

Boros Norbert

Innovation Designer | Experience Research Leader in Finance

Üzleti problémák megoldásában segítek designeri gondolkodásmóddal.

Vélemény, hozzászólás?