Sorhossz
A sorhossz azt mutatja meg, hány karakter fér egy szövegsorba. Túl hosszú soroknál nehezebb megtalálni a következő sor elejét, túl rövid soroknál pedig túl gyakori a sorváltás.
Röviden
A sorhossz azt mutatja meg, hány karakter fér egy szövegsorba. Túl hosszú soroknál nehezebb megtalálni a következő sor elejét, túl rövid soroknál pedig túl gyakori a sorváltás.
Vizuálisan
A sorhossz közvetlenül befolyásolja a szöveg követhetőségét
Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.
×
GYAKORI HIBA
A törzsszöveg végigér a teljes képernyőn
A túl hosszú soroknál a szemnek nagy távolságot kell visszaugrania a következő sor elejére. Egy korlátozott szövegoszlop nagy képernyőn is stabilabb olvasási ritmust ad.
Hosszú sor végéről nehezebb visszatalálni a következő sor elejére, ezért a nagy monitoron kihúzott bekezdés fárasztóbb.
✓
HELYES IRÁNY
A szövegoszlop olvasásra optimalizált
A túl hosszú soroknál a szemnek nagy távolságot kell visszaugrania a következő sor elejére. Egy korlátozott szövegoszlop nagy képernyőn is stabilabb olvasási ritmust ad.
A tartalom maximális szélességet kap, így nagy kijelzőn sem válik túl hosszúvá egy sor.
Mit jelent a sorhossz?
A sorhossz azt mutatja meg, hány karakter fér egy szövegsorba. Túl hosszú soroknál nehezebb megtalálni a következő sor elejét, túl rövid soroknál pedig túl gyakori a sorváltás.
Ezért cikkeknél és hosszabb magyarázó szövegnél gyakran jobb korlátozni a szövegoszlop szélességét, mint kihúzni a teljes rendelkezésre álló desktop térre.
A legfontosabb alapelvek
- Használj max-widthot a hosszú szöveghez.
- A fontméret és sorhossz együtt változik.
- Mobilon természetesen rövidebbek a sorok.
- A rövid UI-címkék más szabályt követnek, mint a cikkbody.
Gyakorlati példa
Egy 1440px széles oldalon a cikk törzsszövege lehet 640–760px körüli oszlopban, miközben a környező layout szélesebb marad.
Túl rövid, kényelmes és túl hosszú sor
rövid → kényelmes → túl hosszú sor
Gyakori hibák
- 100vw széles bekezdések desktopon.
- Túl keskeny desktop oszlop, ami minden néhány szó után törik.
- Kártyákban szükségtelenül több sorra tördelt címkék.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A sorhossz akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.
Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.
A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.
Hogyan teszteld a tipográfiát?
Ne csak Figma 100%-os zoomon nézd. Olvasd a valódi szöveget telefonon, laptopon és nagyobb kijelzőn is, lehetőleg normál használati távolságból. Figyeld, hol törik a sor, mennyi idő alatt találod meg a következő alcímet, és mennyire fárasztó több bekezdést egymás után elolvasni.
A tipográfiai rendszer akkor erős, ha kevesebb stílussal is egyértelmű marad a struktúra. Ha egy szint csak azért különül el, mert kapott még egy random font-size-ot, érdemes előbb a súlyt, spacinget, kontrasztot és tartalmi szerepet rendbe tenni.
- valós eszközön kényelmesen olvasható
- pásztázáskor gyorsan megtalálhatók a headingek
- zoom vagy hosszabb szöveg mellett is stabil marad
Gyakori kérdések
Miért fontos a sorhossz?
Ezért cikkeknél és hosszabb magyarázó szövegnél gyakran jobb korlátozni a szövegoszlop szélességét, mint kihúzni a teljes rendelkezésre álló desktop térre.
Mikor érdemes tesztelni?
Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.