7+1 tipp, hogy jól olvasható legyen a weboldalad szövege

Egy férfi színes ingben, a szemei előtt két polifoam cső, ezekbe néz bele.

Másnak is megmutatnád? Oszd meg!

Biztosan te is sokat gondolkodtál a weboldalad szövegén és szeretnéd, ha minél többen elolvasnák azt. Ahhoz, hogy ez így legyen, olyan formában kell tálalnod a mondanivalódat, ami megkönnyíti a látogatók számára az olvasási élményt. Tanulmányok alapján ugyanis képernyőn nehezebb olvasni, mint papíron. Az emberek lassabban és kevésbé pontosan olvasnak és kevesebbet is jegyeznek meg egy weboldalon lévő szövegből. Becslések szerint ráadásul a tartalom mindössze 25%-át olvassák el, és ezt az arányt tovább csökkenti, ha bármilyen tényező rontja az olvashatóságot.

Ha tehát azt szeretnéd, hogy a látogatók több időt töltsenek a weboldaladon és ezáltal nagyobb eséllyel váljon belőlük ügyfél vagy vásárló, érdemes ellenőrizned a következőket.

1. Megfelelő nagyságú betűméret

Az emberek koruktól, látásuktól és személyes preferenciáiktól függően különböző betűméretet tartanak jól olvashatónak. Tehát lehet, hogy a weboldaladon lévő betűméret számodra teljesen megfelelő, de egy idősebb számára már nem jól látható. Gondolj mindig a célközönségedre és hozzájuk igazítsd a betűméretet.

Azt is tartsd szem előtt, hogy a látogatók a legkülönbözőbb méretű és felbontású eszközökön tekintik meg a weboldaladat. Az a címsor, ami még jól néz ki egy laptopon, telefonon már valószínűleg túl nagy lesz. A betűméretet tehát hozzá kell igazítani az eszközök méretéhez.

Általános szabály nincs arra, hogy mekkora az optimális betűméret, de 16px-nél semmiképp se legyen kisebb. Ez függ a használt betűtípustól is. Az alábbi ábrán lévő mindhárom sor ugyanakkora betűmérettel lett írva, mégis különböző nagyságban jelennek meg attól függően, hogy milyen a betűtípusuk.

Mindhárom sor ugyanakkora betűmérettel íródott, mégis különböző nagyságban jelennek meg az eltérő betűtípus miatt.

2. Jól olvasható betűtípus

A márkádhoz passzoló, ugyanakkor jól olvasható betűtípust kiválasztani nem könnyű, hiszen csak a Google betűtípusaiból is több száz van, nem beszélve az egyéb betűforrásokról. Van azonban egy általános recept, amit alkalmazni tudsz:

  • Címsorok esetében, mivel azok nagyobbak, rövidebbek és kevesebb van belőlük, választhatsz egy kicsit nehezebben olvasható, de érdekesebb, látványosabb betűtípust.
  • A hosszabb szövegekhez a legjobb választás egy talpatlan, unalmasabb betűtípus, mivel ez sima, könnyed olvasási élményt nyújt. Kifejezetten képernyőn történő olvasásra lett tervezve például a Verdana, de a gyakran használt betűtípusok közé tartozik az Open Sans, a Roboto, a Lato és még hosszan lehetne sorolni.
  • A menü megjelenítéséhez az előző kettő közül válaszd ki az egyiket.

A weboldalon 2, maximum 3 betűtípust használj. Ha ennél többfélét használsz, az már zavarossá teszi a megjelenést.

Csupa nagybetűvel csak rövidebb szövegeket, például a menüpontokat, címkéket, címsorokat jelenítsd meg. Ha hosszabb szövegek jelennek meg így, az már nehezen olvasható.

3. Kellően nagy kontraszt

Minél nagyobb a kontraszt a betű színe és a háttérszín között, annál jobb az olvashatóság. Vigyázni kell azonban, mert hiába különbözik eléggé két szín – például a piros és a kék, még nem biztos, hogy elég nagy a kontrasztjuk.

A bal oldali oszlopban nem elég nagy a kontraszt a betű színe és a háttérszín között, ezért nehezen olvasható a szöveg. Jobb oldalon sokkal nagyobb a kontraszt, így az olvasás sem megerőltető.

A színek közötti kontraszt nagyságát te is le tudod ellenőrizni. Erre több online eszköz is van, az egyik a Contrast Checker, ahová a színek kódját beírva láthatod, hogy a kombináció átmegy-e teszten. Ha nem tudod a weboldaladon szereplő színek kódját, egy ingyenes bővítmény, a Colorzilla segítségével kiderítheted.

Az sem mindegy, hogy világos háttéren van sötét betű, vagy fordítva. Ha sötét a háttér, még megfelelő kontraszt mellett is fárasztóbb a szöveg olvasása, mintha fordítva lenne. Ezért ebben az esetben a betűméretet meg kell növelni ahhoz, hogy az olvashatóság ugyanolyan legyen.

Ha sötét háttérre kerül világos felirat, meg kell növelni a betűméretet ahhoz, hogy ugyanolyan olvasási élményt nyújtson, mint fordított esetben.

Ha a szövegben lévő linkeket eltérő színnel jelölöd, ne feledkezz meg róla, hogy a kontraszt itt is ugyanolyan fontos.

Sok weboldalon lehet találkozni olyan megoldással, hogy a szöveget egy képre helyezik. Arra, hogy ebben az esetben is jól olvasható maradjon a felirat, több megoldás is létezik. Erről részletesen olvashatsz egy korábbi cikkünkben.

4. Nem túl rövid, nem túl hosszú sorok

Weben való olvasásnál az is lényeges szempont, hogy milyen hosszúak a sorok. Ha túl hosszúak, nehezebb átfutni és nehezebb megtalálni a következő sor elejét, és a szemnek is többet kell mozognia, hogy minden szót befogadjon. Az ilyen szövegek elolvasásához tehát nagyobb erőfeszítés kell, ami miatt nagyobb valószínűséggel ugranak át rajta a látogatók. Ezzel szemben a túl rövid sor sem szerencsés, mivel túl gyakran kell a következő sorra ugrani és elképzelhető, hogy még végig sem olvasnak rendesen egy sort, már ugranak is a következőre.

Az optimális sorhosszúságra nincs pontos érték, de kutatások szerint valahol 50 és 75 karakter között van. Természetesen ez függ az alkalmazott betűmérettől is.

Hasonlítsd össze az alábbi szövegeket! Ugye, hogy a második sokkal könnyebben befogadható? Pedig ugyanazzal a betűmérettel és betűtípussal íródtak.

Ha a szöveg túl széles, nehezebb átfutni és befogadni.
A keskenyebb szöveghasáb sokkal átláthatóbb és emészthetőbb.

5. Sorok igazítása

A szöveget tudod balra, jobbra, középre vagy sorkizártra igazítani. De ezek közül melyiket érdemes alkalmazni egy weboldalon?

Alapvetően a balra igazítottat, mivel ezt a legkönnyebb olvasni. A középre igazítás csak 2-3 soros szövegeknél működhet, például címsoroknál. Az ennél hosszabbat már nehéz elolvasni, mivel minden sor máshol kezdődik és plusz energiát igényel a megtalálásuk. Ugyanez igaz a jobbra igazított szövegekre is. A sorkizárás pedig weben egyszerűen nem mutat jól és nehezebb is olvasni, ha az egyes szavak közötti szóköz nem ugyanakkora.

Középre igazított, illetve sorkizárt szöveg. Mindkettőt nehéz olvasni a weben.
A középre igazított szöveget fárasztó olvasni, mivel minden sor máshol kezdődik. A sorkizárt szövegben eltérő a szóközök nagysága, ezért különösen megerőltető az olvasása.

6. Tagolás, üres tér

A weboldaladon ne zsúfolj mindent össze, hiszen nem fog elfogyni a „papír”. Minden elem, így a szöveg körül is hagyj üres részt, így sokkal könnyebb lesz elolvasni.

A szöveget bontsd viszonylag rövid bekezdésekre, a bekezdéseket pedig távolítsd el egymástól, ahogy például ebben a cikkben is látod. Használhatsz pöttyözött vagy számozott felsorolást is. A lényeg, hogy a szöveg ne egy nagy egybefüggő tömb legyen, hanem kisebb, könnyen átlátható darabokból álljon, amiket gyorsan át lehet futni.

Próbálj meg figyelni a sormagasságra, azaz az egyes sorok között lévő üres rész nagyságára is. Ha a sorok egymásra csúsznak, sokkal nehezebb elolvasni a szöveget. Ha viszont túl távol vannak egymástól, nehéz megtalálni a következő sor elejét. Nincs rá szabály, hogy mekkora az ideális sormagasság, mindig a használt betűtípushoz és betűmérethez kell igazítani.

Egymásra csúszott, illetve egymástól túl távol lévő sorok. Mindkettőt nehéz elolvasni.
Ha túl közel vannak egymáshoz a sorok, sokkal nehezebb elolvasni a szöveget. Ha túl távol vannak, nehéz megtalálni a következő sor elejét.

7. Kiemelések visszafogott használata

A kiemelések alatt azt értjük, hogy egy szövegrészlet valamiben eltér a környezetétől, például vastag- vagy dőlt betűs, esetleg színes. Ha egy bekezdésen belül túl sok ilyen kiemelt részlet van, akkor pont az ellenkező hatást fogod elérni. A látogatók ilyenkor kísértésbe esnek, hogy csak a kiemelt szavakat olvassák el, a többit pedig átugorják.

Ha tehát azt szeretnéd, hogy a teljes szöveget elolvassák, bánj csínján a kiemelésekkel. Ha mindenképp szeretnéd valamire jobban felhívni a figyelmet, akkor is csak egy-egy kulcsszót emelj ki, ami segít a látogatóknak a gyors áttekintésben.

Na, segített valamiben az ebben a fejezetben lévő sok vastagbetű?

Plusz egy tipp: érthető, tömör fogalmazás

Az olvasóid általában lusták és csak meg akarják találni a választ arra, amit kerestek. Nem akarnak hosszú körítéseket és nem törődnek a nyelvezettel sem. Ezért igyekezz úgy megfogalmazni a mondanivalódat, hogy az tömör és lényegre törő legyen.

Hacsaknem egy másik szakértő az ideális ügyfeled, tartózkodj a szakszavak használatától is, különben nem fogják érteni és csak elijeszted az olvasókat. Próbáld meg inkább köznapi nyelven elmagyarázni ugyanazt. Gondolj mindig a célközönségedre! A lényeg, hogy ők megértsék a mondanivalódat.

Ne legyen fárasztó az olvasás!

Ha a látogatóknak „munkát” adsz azzal, hogy elolvassák a weboldaladon lévő szöveget, akkor hamar be fogják zárni és továbblépnek valami kevésbé megterhelőre. Ha megfogadod a fenti tanácsokat, sokkal könnyebben meg tudod fogni az olvasókat és tovább meg tudod tartani a figyelmüket, hiszen könnyebben átlátják és megértik az információkat. És nagyobb valószínűséggel válik belőlük ügyfél…

Az olvashatóság milyensége befolyásolja azt is, hogy a látogatók mennyire tekintik hitelesnek a weboldaladat, illetve téged. Ellenőrizd, hogy a te weboldalad mennyire hiteles a design, a megjelenés szempontjából! Töltsd le ingyenes ellenőrzőlistánkat! Ehhez csak az alábbi űrlapot kell kitöltened és már kezdheted is.

Másnak is megmutatnád? Oszd meg!

* * * * * * * *

Legyen még szuperebb a weboldalad! Hasonló bejegyzéseket a Blogban találsz!