6 megoldási javaslat reszponzív táblázatokra

Ha felületeket tervezünk, amelyeket szeretnénk azonos adattartalommal és funkcionalitással megjeleníteni mobilon és asztali gépen is, akkor a táblázatok megjelenítése komoly fejfájást is okozhat nekünk. Mielőtt azonban elkezdünk vívódni azon, hogy miképp jelenjen meg táblázatunk mobilon, célszerű átgondolni, hogy biztos kell nekünk egy táblázat?

Nézzük, mik a táblázat előnyei a kártyás megjelenítéssel szemben?

  • Egyes adatsorok összehasonlíthatóak (ár, súly) és akár könnyedén összeadhatóak is
  • Túl kevés vagy túl sok adat esetén a táblázatok kisebb helyet foglalnak, mint a kártyák
  • Rendezhető
  • A kevésbé érdekes adatok könnyedebben mellőzhetők. Ha a táblázat végére helyezzük a másodlagos adatokat, akkor elég csak a táblázat elejére fókuszálnunk és látjuk a lényeget
  • Kevesebb szöveggel ugyanannyi adattartalmat tudunk megjeleníteni táblázatban, mivel kártyák esetén az egyes adatcellák címkéit ismételgetnünk kell

Ha ezeket a szempontokat figyelembe vettük, akkor az alábbi megoldásaink lehetnek:

1. Görgetős megjelenítés

A táblázatunk egyes sorait beakasztjuk, míg a többi görgetni lehet. Nem igazán előnyös megoldás, de bizonyos esetekben, ahol a táblázat jelleget őrizni akarjuk a táblázatosság értékei miatt, lehet, hogy nincs más választásunk. A megoldás nem feltétlenül olyan rémisztő, ha elforgatjuk a telefonunk.

2. Kártyákra tördelés

Habár vélhetőleg az adattartalom miatt nem a legideálisabb a kártyás megoldás, mobilon többnyire ez a legigényesebb megjelenítési mód.

600-x-300-orig

A megoldás működés közben

3. Grafikonná alakítás

A táblázat tartalmát grafikus módon mutatjuk meg. Ezt akár úgy is alkalmazhatjuk, hogy álló helyzetben kártyákat, elforgatva grafikont mutatunk.

600-x-369-responsivetabletochart

4. Elrejtjük a táblázatot

Ha táblázatunk inkább csak értékes háttérinformációkat tartalmaz, akkor dönthetünk annak az elrejtése mellett is, amit egy gombnyomásra előhívhatunk. Ne feledjük, ilyenkor a többi megoldás közül kell választanunk egyet a megjelenítésre.

5. Kevésbé fontos oszlopok elrejtése

Ha táblázatunk oszlopainak tartalma nem egyformán hangsúlyos, akkor dönthetünk úgy is, hogy csak annak bizonyos részleteit mutatjuk meg, és egy gombnyomásra lenyílva vagy egy külön oldalon mutatjuk meg ezeket a részleteket.

6. Felhasználó dönt az elrejtésről

Hasonlóan az előző megoldáshoz szintén elrejtünk oszlopokat, de ezúttal a felhasználó választja ki, hogy mit akar rögtön és mit a részletekben látni.

Oszd meg velünk véleményed

Kérem írd be üzenetedet

Kérem írd be email címed!

Kérem írd be üzenetedet

Küld

Website-okat, mobil applikációkat és szoftvereket tervezünk, hogy segítsünk megvalósítani üzleti céljaidat!

Csapatunk

Kapcsolat

Kedves Ergo,

A nevem
. Az email címem
. Üzenetem:

ajánlott
cikkek

Tudj meg többet a témáról

Top UI design trendek 2025-ben: merre fejlődnek a digitális felületek?

2025. ápr. 29. | 19 perc olvasás

A UI design területén 2025-ben is az egyszerűség, a kifinomultság és a technológia közti egyensúly keresése folyik. A minimalizmus továbbra is alap, miközben a kifinomultabb, mégis funkcionális esztétikai...

Hogyan javítja az ügyfélélményt és a digitális átalakulást a Customer Journey Map?

2025. ápr. 08. | 16 perc olvasás

A mai, nagyon kompetitív digitális környezetben, amikor szó szerint csak egy kattintás, hogy egy másik terméket vagy szolgáltatást válasszunk, kulcsfontosságú, hogy a márkák ki tudják-e szolgálni az egyre...