Datavisning
Kortbaseret layout
Et kortbaseret layout grupperer indhold i selvstændige, skimbare kort — hvert et kort, klikbart resumé af én enhed (en artikel, et produkt, en opgave) — arrangeret i et responsivt gitter. Mønstret er vejlednings-drevet: der findes ikke hårde tal for »kort vs. andre layouts«, så vurderingerne bygger på etableret UX-vejledning.
Definition
Et kortbaseret layout samler beslægtet information i afgrænsede kort, der er nemme at skimme og arrangere responsivt.
Hvorfor det virker
Kort samler beslægtet indhold i én fordøjelig enhed. Nielsen Norman Group definerer et kort som en beholder for få korte, relaterede stykker information — et link, kort resumé af en konceptuel enhed — og kanter, baggrund og skygge skaber den grupperede opfattelse.1
Et større klikmål gør kortet nemmere at ramme. Når hele kortet linker til detaljesiden, får både touch- og musebrugere en større klikzone — en fordel forankret i Fitts’ lov (NN/g angiver ingen kort-specifik effektstørrelse).1
Kort passer til, hvordan folk skimmer frem for at læse. Diskrete kort med en tydelig titel og et billede lader brugeren triagere hurtigt — i tråd med, at folk skimmer sider (fx F-mønsteret) i stedet for at læse hvert ord.4
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Hvert element har billede, titel og et par metadata.
- Brugere skimmer og sammenligner frem for at læse lineært.
- Layoutet skal flyde pænt på tværs af skærmstørrelser.
Hvornår du bør undgå det
- Data er tætte og tabulære (så er en tabel bedre).
- Elementerne har for lidt indhold til at fylde et kort.
Best practices
Én enhed per kort
Hvert kort bør indeholde indhold og handlinger om ét emne. At blande flere enheder bryder den mentale model.2
Gør den primære handling tydelig
Ofte er kortet selv den primære handling; kald eventuelle sekundære handlinger tydeligt frem med adskilte kontroller.2
Undgå indlejrede interaktive elementer
Et helt-klikbart kort, der også pakker links/knapper ind, giver ugyldig, utilgængelig HTML. Brug en CSS-overlay-teknik med adskilte elementer, så kortet er klikbart, og sekundære knapper stadig virker.1
Hold strukturen konsistent på tværs af kort
Ens placering af titel, billede og metadata understøtter skimning og sammenligning.1
Overfyld ikke kortet
Kort er indgange til mere detaljeret indhold — ikke stedet for alle detaljer. Sæt det vigtigste øverst, og undgå for meget tekst og for mange handlinger.2
Overhold minimum-målstørrelse
Klikbare elementer bør være mindst 24×24 CSS-pixels (WCAG 2.2, kriterium 2.5.8). Platform-anbefalinger er større (Apple 44pt, Material 48dp) — sigt højere på mobil.5
Brug ikke kort til tæt eller tabulært data
Kort nedtoner rangordning og er mindre skimbare end lister. Til sorterbart, sammenligneligt eller ensartet indhold er en liste eller tabel bedre.3
Typiske fejl
Kort som en »pænere liste«
Til ensartet indhold skader kort skimbarheden og spilder lodret plads, hvor en liste ville være hurtigere.
Indlejrede interaktive elementer
Et helt-klikbart kort, der pakker knapper/links ind, bryder skærmlæsere og tastatur-tabrækkefølge.
Overfyldte kort
For mange handlinger eller for meget tekst ophæver formålet: et fordøjeligt resumé og en indgang.
Inkonsistent kortstruktur
Uden ens placering kan brugeren ikke sammenligne eller forudsige, hvor informationen sidder.
For små klikmål på mobil
Kort og knapper, der er for trange, falder igennem WCAG 2.5.8 (24×24 CSS-pixels).
Eksempler i praksis
Masonry-gitter af billedkort (»pins«) i varierende højde — det kanoniske kort-collection-mønster, ofte krediteret for at popularisere kort.
Trello
Kanban-tavler af trækbare opgavekort, hvor hvert kort er en selvstændig enhed i sin kolonne.
Ofte stillede spørgsmål
Hvad er et kortbaseret layout?
Et layout, hvor indhold grupperes i selvstændige »kort« — hvert et kort, klikbart resumé af én enhed (fx en artikel, et produkt eller en opgave) — arrangeret i et responsivt gitter.
Hvornår bør jeg bruge kort frem for en liste eller tabel?
Brug kort til visuelt indhold af forskellig type og længde (billeder, blandet medie). Brug lister eller tabeller til ensartet, tæt eller sammenligneligt data, der skal sorteres og skimmes hurtigt — kort er mindre skimbare og nedtoner rangordning.
Skal hele kortet være klikbart?
Ofte ja — en større klikzone gør kortet nemmere at ramme (Fitts’ lov). Men undgå at pakke andre links/knapper ind i det klikbare kort, da indlejrede interaktive elementer bryder skærmlæsere og tastaturnavigation. Brug i stedet en CSS-overlay-teknik med adskilte elementer.
Hvor meget indhold må der være på ét kort?
Så lidt som muligt: ét emne per kort, med det vigtigste øverst. Kort er indgange til mere detaljeret indhold — ikke stedet for alle detaljer.
Hvor store skal klikbare elementer på et kort være?
Mindst 24×24 CSS-pixels ifølge WCAG 2.2 (kriterium 2.5.8, niveau AA). Platform-anbefalinger er større — Apple 44pt, Material 48dp — så sigt højere på mobil.
Er kort godt for tilgængelighed?
De kan være det, men kræver omtanke: undgå indlejrede interaktive elementer, giv billeder tekstalternativer, sørg for tilstrækkelig målstørrelse, og bevar en konsistent, forudsigelig struktur på tværs af kort.
Kilder
Relaterede mønstre
Udforsk videre
Sorterbar datatabel
Store datasæt med sortering, kolonnestyring og sidenavigation.
Se mønster →Skeleton-loading
Vis layout-pladsholdere mens indholdet hentes.
Se mønster →Blok-layout
Komponér siden af stablede fuldbredde-blokke — hero, billede+tekst, citat, CTA — med tydeligt hierarki og en skanbar rækkefølge, der guider øjet nedad.
Se mønster →