Létezik egy különleges csészefajta, a Jóhen Tenmoku, aminek a különlegessége az, hogy mindössze 3 maradt fenn az eredeti változatokból. Az elkészítésének pontos módját bizonyos homály fedi. Létezik azonban olyan japán fazekasmester, aki egész életét feltette arra hogy minél tökéletesebben lemásolja az eredeti csészék receptjét. Ezt a fajta elköteleződést a japánban úgy hívják kodavari.
A kodavari szónak nincs megfelelő magyar fordítása, olyan típusú elköteleződést jelent egy szakma, szenvedély iránt, ami néha már nevetségesnek tűnő finomhangolást is okoz. Saját szavakkal úgy fogalmaznám meg, hogy a tökéletesség felé tartó út, ami nem stresszel és önfeladással, hanem éppen az önbeteljesüléssel van kikövezve.
Ha érted mi is ennek a lényege, akkor valóban hasznát fogod venni írásunknak, ahol összeszedtük a weboldal olvashatóságának legfontosabb elemeit.
A modern webdesignban a tipográfia és a tartalom tördelés kulcsszerepet játszik abban, hogy a felhasználó mennyire könnyen tudja feldolgozni az információt.
A weboldal szövege nemcsak információt közöl, hanem irányítja is a látogatót. Ha a szöveg nehezen olvasható, a látogatók egyszerűen továbbállnak. Ez akkor is igaz, ha a tartalom egyébként értékes lenne. A jó olvashatóság ezért nem csak esztétikai kérdés, hanem közvetlenül befolyásolja a felhasználói élményt és a konverziókat is. Nézzük meg, milyen alapelveket érdemes követni.
A cikkben előforduló kifejezésekről rövid szótárat találsz a cikk végén.
1. Megfelelő betűméret használata
A túl kicsi betűméret az egyik leggyakoribb hiba a weboldalakon. Bár egy grafikai tervben jól nézhet ki a kisebb szöveg, a valós használat során nehezen olvashatóvá válik, különösen mobilon.
A törzsszöveg méretét a szakmában body text size‑nak nevezik. Általános kiindulópontként a 16–18 px (11-12 pt) körüli érték számít jó gyakorlatnak.
2. Figyelj a sorhosszra
Ha a sorok túl hosszúak, az olvasó könnyen elveszíti a következő sor elejét. Ez megtöri az olvasás ritmusát.
A tipográfiában a sorhossz measure vagy line length néven ismert. A legtöbb szakmai ajánlás szerint az ideális sorhossz 50–75 karakter között van. Ennél hosszabb sorok rontják az olvashatóságot, mert a szem nehezebben talál vissza a következő sor elejére.
Fontos azonban, hogy ez az érték nem minden képernyőn ugyanaz.
3. Mobilon a sorhossz drasztikusan csökken
Mobilon a rendelkezésre álló képernyőszélesség sokkal kisebb, ezért a sorhossz jelentősen lecsökken. Ami egy asztali monitoron 60–75 karakter hosszú sor, az mobilon gyakran csak 35–40 karakter lesz.
Ez teljesen természetes jelenség. A jó tipográfia nem azt jelenti, hogy minden eszközön ugyanazt a tördelést használjuk, hanem azt, hogy a szöveg alkalmazkodik a kijelzőhöz.
Ezért fontos a reszponzív tipográfia. A betűméret, a sortávolság és a margók is változhatnak a különböző képernyőméreteken, hogy a szöveg minden eszközön könnyen olvasható maradjon.
4. Használj megfelelő sortávolságot
A túl sűrű sorok vizuálisan összeolvadnak, ami fárasztóvá teszi az olvasást.
A sortávolság szakmai neve line height vagy leading. Weboldalakon általában az 1.4–1.7 közötti érték ad jó eredményt.
5. Kerüld a rossz kontrasztot
A szöveg és a háttér közötti különbséget color contrast‑nak nevezik.
A designtrendek gyakran világos szürke szöveget használnak fehér háttéren, ami látványos lehet, de olvasni nehéz. A megfelelő kontraszt nem csak esztétikai kérdés: a webes hozzáférhetőség egyik alapelve is.
6. Miért ne használj a weboldaladon sorkizárást?
A sorkizárt szöveg könyvekben jól működik, weboldalakon azonban sokszor rontja az olvashatóságot.
A jelenséget az okozza, hogy a böngésző automatikus szóköz‑elosztást végez. Ez gyakran egyenetlen whitespace‑t hoz létre a sorokban.
Ezek az úgynevezett „rivers of white space” jelenségek, amikor a szóközök függőleges csatornákat hoznak létre a szövegben. Ezek megtörik az olvasás ritmusát és nehezebbé teszik a szöveg követését.
Ezért a legtöbb modern weboldal balra zárt szöveget használ. Ez stabilabb tipográfiát és jobb olvashatóságot biztosít különböző képernyőméreteken.
7. Használj jól tagolt bekezdéseket
A webes olvasás eltér a könyvolvasástól. A felhasználók gyakran nem lineárisan olvasnak(scanning behavior).
A látogatók gyorsan végignézik a tartalmat, és csak az érdekes részeket olvassák el.
Ezért a hosszú, tömör bekezdések helyett érdemes rövidebb blokkokra bontani a tartalmat.
8. Használj alcímeket és listákat
Az alcímek fontos szerepet játszanak az információs hierarchia kialakításában.
A jól felépített címszerkezet segíti az olvasót abban, hogy gyorsan átlássa az oldal tartalmát. A listák pedig csökkentik a kognitív terhelést.Ugyanakkor megfelelő hierarchia kialakítása a keresőoptimalizálás egyik alappippére is.
9. Egyszerű, könnyen olvasható betűtípus választása
A betűtípus kiválasztása a webes tipográfia egyik alapvető döntése.
A digitális felületeken gyakran felmerül a Serif és Sans‑serif betűtípusok kérdése. A Serif betűk talpasak, vagyis a karakterek végén kis díszítő vonalak találhatók. A Sans‑serif betűk talpatlanok és egyszerűbb formájúak.
Hagyományosan a nyomtatott szövegekben a Serif betűtípusok voltak elterjedtek, míg a digitális felületeken sokáig a Sans‑serif betűk domináltak a jobb képernyős olvashatóság miatt.
A modern kijelzőkön azonban mindkét típus jól működhet. A fontos az, hogy a választott betűtípus jól olvasható legyen hosszabb szövegek esetében is, és következetesen legyen használva az oldalon.
10. Kerüld a túl bonyolult mondatszerkezeteket
A webes tartalmak esetében fontos a szövegérthetőség.
A túl hosszú vagy bonyolult mondatok növelik a mentális terhelést. A rövidebb, egyértelmű mondatok segítik az információ gyors feldolgozását.
11. Használj médiaelemeket
A képek, grafikonok és egyéb vizuális elemek segítenek megtörni a hosszú szövegblokkokat.
A vizuális hierarchia segít a felhasználónak eligazodni a tartalomban, és kiemeli a fontos információkat.
A jól olvasható weboldal nem véletlenül jön létre. A megfelelő tipográfia, a logikus tördelés és az átgondolt szövegszerkesztés mind hozzájárulnak ahhoz, hogy a látogatók könnyen feldolgozzák a tartalmat.
Ha ezekre az alapelvekre figyelsz, jelentősen javíthatod a weboldalad webes olvashatóságát, ami a felhasználói élmény és az üzleti eredmények szempontjából is kulcsfontosságú.
Fogalommagyarázat
- Web readability – webes olvashatóság; azt jelenti, hogy a felhasználó milyen könnyen tudja elolvasni és megérteni a weboldalon található szöveget.
- UX (User Experience) – felhasználói élmény; a felhasználó teljes élménye egy weboldal vagy digitális termék használata során.
- Measure / line length – sorhossz; az egy sorban megjelenő karakterek száma.
- Leading / line height – sortávolság; a sorok közötti függőleges távolság.
- Color contrast – színkontraszt; a szöveg és a háttér közötti vizuális különbség.
- Whitespace – üres tér; a szöveg és az elemek közötti szabad felület.
- Rivers of white space – szóközfolyamok; a sorkizárt szövegben kialakuló függőleges szóközcsatornák.
- Scanning behavior – pásztázó olvasás; amikor a felhasználó gyorsan végignézi az oldalt, és csak a fontos részeket olvassa el.
- Information hierarchy – információs hierarchia; a tartalom logikus, vizuálisan is érzékelhető struktúrája.
- Cognitive load – mentális terhelés; az az erőfeszítés, amelyre az információ feldolgozásához szükség van.
- Responsive typography – reszponzív tipográfia; a tipográfia alkalmazkodása különböző képernyőméretekhez.
- Serif / Sans‑serif – talpas illetve talpatlan betűtípusok.