Félsz, amikor rájössz, hogy a következő projektedben egy összetett és reszponzív adattáblát kell tervezned? 😨
Nem vagy egyedül, láttam néhány nagyszerű tervezőt reszketni a csizmájukban a probléma megoldásának gondolatától. De nem kell félni! Nemrégiben én is nekivágtam ennek a tervezési kihívásnak, és most itt vagyok, hogy megosszam veled néhány tippet, amelyek segítettek abban, hogy olyan dizájnnal álljak elő, amelyet a felhasználóink imádnak.
Egy csomó különböző lehetőség van arra, hogyan tervezz táblázatokat, nem beszélve arról, hogyan teheted őket reszponzívvá. Az oszlopok és sorok áthelyezhetők, átméretezhetők, összecsukhatók, minimalizálhatók vagy akár el is tűnhetnek, ha a böngészőablak szűkül.
Mint minden tervezési megoldásnál, a legjobb kialakítás attól függ, hogyan fogják az olvasók használni az adatokat. A projekt elején lefuttattunk néhány felhasználói kutatást, hogy irányt mutassunk, és megállapítottuk, hogy a mi projektünk esetében:
- Ez a táblázatos információ egyformán használható lenne asztali, táblagépes és mobil eszközökön egyaránt.
- Ezek a táblázatok sok oszlopnyi szabad szöveget és számokat is tartalmazhatnak.
- Az egyes fontos információrészleteknek mindig láthatónak kell maradniuk.
A felhasználóinktól kapott ezen meglátások alapján a következőkkel foglalkoztam a szöveges adattáblák tervezési rendszerének kialakításakor.
Először is, határozzuk meg, hogy milyen típusú táblázatról van szó. Összehasonlító táblázatról van szó, ahol az olvasó több oszlopon keresztül hasonlítja össze az adatokat, vagy tartalomtábláról, ahol az adathalmazok egymástól függetlenek?
A táblázatom inkább tartalomtábla, mint összehasonlító táblázat. Ennek korai felismerése segített megérteni, hogy a keskeny képernyőméretben milyen információknak kell közel maradniuk egymáshoz.
Mobile first
Az első verzió, amit terveztem, a keskeny képernyős változat volt. Szándékosan ezt néztem meg a széles képernyős változat előtt, mivel a táblázatok mobilon való megtekintése fontos a felhasználóink számára. Ezért meg kellett találnom a módját annak, hogy az összetett és nem lineáris információkat függőleges formátumba illesszem.
Tudtam, hogy sokkal könnyebb lesz felfelé méretezni a dizájnt, amikor rengeteg vízszintes hely áll rendelkezésre, mint egy gyönyörű táblázatot tervezni asztali számítógépre, és megküzdeni azzal, hogy mobilon is olvasható maradjon. Ez azt is jelentette, hogy már a kezdetektől fogva szem előtt tartottam az érintés célméreteit, és nem támaszkodtam az olyan műveletekre, mint a lebegtetés az információk feltárásában.
Úgy döntöttem, hogy a tartalmat inkább listaként kezelem a keskeny nézetekben, hogy a fontos információk jól láthatóak és átolvashatóak maradjanak.
Konzisztens stílus
A soroknak a képernyőméret változásakor át kell helyezkedniük, ezért a stílus használatával segítettem megtartani a köztük lévő kapcsolatot. Ha például az oszlopok fejlécei félkövér betűsek, szürke háttérrel, ugyanezt a stílust használjuk a keskeny nézetben is. Ez segíteni fogja az olvasókat abban, hogy a cellák újraelosztását újra hozzárendeljék.
A tipográfia a barátod
Könnyű megfeledkezni a tipográfiai elveidről, amikor sok a megkötés, de ha tudatosan döntesz az olvashatóság optimalizálása mellett, az nagy segítség lesz az olvasóknak, különösen egy olyan projektben, mint az enyém, ahol a táblázatokban sok a szöveg.
A tipográfia azért van, hogy tisztelje a tartalmat. ~ Robert Bringhurst
Szkennelés
Megkönnyíti a gyors szkennelést azáltal, hogy az olvasás folyamata egyszerű és világos. Úgy döntöttem, hogy a szöveg minden oszlopban ugyanarra a szélre lógjon, hogy az olvasó lineárisan szkennelhesse a szöveget.
Sorhossz
Próbáld meg nem kompromittálni a szöveg sorhosszát azzal, hogy sok oszlopot szorítasz szűk helyre, különben lelassul az olvasási sebesség. A folyamatos szöveg oszlopainak minimális szélességét állítom be.
Címkék
Gondolja át, hol helyezze el a címkéket, hogy ne foglaljanak túlzottan nagy területet, de mégis adjanak némi kontextust az információknak.
A listámban a címkéket minden egyes cellatartalom fölé helyeztem, ahol kevesebb helyet foglalnak, nem pedig oldalra. És így az információt is könnyebb volt beolvasni. A címkéket másképp stilizáltam, hogy könnyen meg lehessen különböztetni a fix címke és a változó tartalom közötti különbséget.