Datavisning
Sorterbar datatabel
En sorterbar datatabel præsenterer store, strukturerede datasæt i rækker og kolonner med sortering, kolonnestyring og sidevisning. Området er overvejende design-vejledning frem for hårde effektmålinger — her er, hvad de autoritative kilder anbefaler, og hvor der faktisk findes data.
Definition
En sorterbar datatabel giver kontrol over rækkefølge, synlige kolonner og sidevisning af strukturerede data.
Hvorfor det virker
Gode tabeller designes ud fra fire konkrete brugeropgaver: at finde poster efter kriterier, at sammenligne data, at se/redigere en enkelt rækkes data, og at handle på poster. At designe efter opgaverne frem for bare at »vise data« er kerne-rationalet — det er vejledning, ikke en måling.1
Klæbrige (frosne) overskrifter bevarer konteksten: uden dem er det let at miste overblikket over, hvad tabellen viser, når den er større end skærmen.2
Scanbarhed er et målt problem: i Baymards test var 50% af webshops’ specifikations-tabeller svære at scanne — 23% grupperede ikke i sektioner, 20% brugte et forvirrende fler-kolonne-layout, og 23% brugte ingen visuelle hjælpemidler som skiftevis rækkefarve eller linjer.4
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Data er tabulære og skal kunne sammenlignes på tværs.
- Brugere har brug for at sortere efter forskellige kolonner.
- Datasættet er for stort til at vise på én gang.
Hvornår du bør undgå det
- Indholdet er redaktionelt og passer bedre som kort.
- Der er så få rækker, at en simpel liste rækker.
Best practices
Højrestil tal, venstrestil tekst
Højrestillede tal justeres efter decimal og bliver lette at sammenligne kolonnevis. (En bred konvention, der understøtter sammenligningsopgaven — ikke et direkte NN/g-citat.)1
Frys header-række og identifikatorkolonne
Når tabellen er større end skærmen, holder frosne overskrifter og første kolonne konteksten under scroll.2
Gør sorterbare kolonner tilgængelige med aria-sort
Sæt aria-sort ("ascending"/"descending") på den aktuelt sorterede kolonne, pak header-teksten i en button, og skjul rene sorterings-ikoner for skærmlæsere med aria-hidden.6
Brug korrekt tabel-markup
Brug th til header-celler og td til data, scope="col"/"row" for retning, og en caption der navngiver tabellens emne.5
Foretræk paginering frem for uendelig scroll
Brugere af datatabeller skal finde, sammenligne og vende tilbage til poster — paginering (eller »load more«) giver landemærker og en følelse af færdiggørelse.3
Giv brugeren kontrol over kolonnerne
Gør det let at skjule og omarrangere kolonner — især på små skærme, hvor kun en delmængde kan ses.2
Byg desktop-tabellen først, oversæt så til mobil
Lav først en brugbar tabel, og oversæt den til lille skærm via låste overskrifter, fast identifikatorkolonne, brugervalgt kolonne-delmængde og synlige scroll-signaler.2
Typiske fejl
Uendelig scroll i stedet for paginering
Fjerner landemærker og gør det svært at vende tilbage til en post i find-/sammenlign-tunge tabeller.
Manglende semantisk markup
Uden th, scope og caption bryder skærmlæser-navigationen, og WCAG »Info and Relationships« fejler.
Sortér-knap uden aria-sort
Seende brugere ser sorteringen, men skærmlæser-brugere får ikke tilstand og handling kommunikeret.
Rene ikon-tegn læst op af skærmlæser
Sorterings-pile (▲▼) uden aria-hidden bliver læst op som meningsløst indhold.
Dårligt grupperet fler-kolonne-layout
Et layout, der forveksles med en sammenligning og er svært at scanne (et målt problem hos ~20–23% af sites).
Eksempler i praksis
Konfigurerbare produkt-/spec-tabeller
Ofte fremhævet: sites, der lader brugeren vælge, hvilke specifikationer/kolonner der vises — særligt nyttigt på lille skærm.
Enterprise-lister (issues, analytics, databaser)
Sorterbare, filtrerbare lister med kolonnestyring og paginering er det klassiske enterprise-tabelmønster. Bekræft konkret adfærd mod live UI før citat.
Ofte stillede spørgsmål
Hvornår skal jeg bruge en datatabel frem for kort eller lister?
Brug en tabel, når brugerne skal finde poster efter kriterier, sammenligne værdier på tværs af rækker, eller redigere/handle på enkeltposter i et stort, struktureret datasæt — de fire kerneopgaver, NN/g beskriver.
Skal jeg bruge paginering eller uendelig scroll?
Til datatabeller anbefales paginering (eller »load more«), fordi brugerne typisk skal finde noget bestemt, sammenligne og vende tilbage til poster — opgaver, hvor uendelig scroll fjerner landemærker.
Hvordan gør jeg sorterbare kolonner tilgængelige?
Pak header-teksten i en button, sæt aria-sort ("ascending"/"descending") på den aktuelt sorterede kolonne, og skjul rene sorterings-ikoner for skærmlæsere med aria-hidden.
Hvorfor skal tal højrestilles?
Højrestillede tal justeres efter decimal og bliver dermed langt lettere at sammenligne kolonnevis — det understøtter direkte brugerens sammenligningsopgave.
Hjælper zebra-striber reelt?
Skiftevis rækkefarve, lette linjer og hover-fremhævning hjælper øjet med at følge en række på tværs af brede tabeller. Baymards test viser samtidig, at manglende visuelle hjælpemidler er et udbredt scanbarheds-problem.
Hvordan viser jeg en stor tabel på mobil?
Byg først en brugbar desktop-tabel, og oversæt den med låst overskrift, fast identifikatorkolonne, brugervalgte kolonner og tydelige scroll-signaler frem for at presse alle kolonner ind.