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

    Alza.hu UX Design szemmel: Vásárlás vagy Kihívás?

    2024. okt. 04. | 5 perc olvasás

    Egy gördülékeny vásárlás olyan, mint egy űrlény, aki fénysebességgel utazik. Gyors és hatékony. Az online vásárlás világában a felhasználói élmény (UX) kulcsfontosságú. A zökkenőmentes vásárlási folyamat...

    Mit és mit ne csináljunk ChatGPT-vel a UX designban

    2023. nov. 30. | 15 perc olvasás

    A digitális tervezés folyamatosan fejlődő világában a legújabb eszközök forradalmasítják a UX design megközelítését. Ezen eszközök közül kiemelkedik az OpenAI fejlesztett ChatGPT. De miért, és hogyan ...