Datavisning
Blok-layout
Blok-layout bygger en side af modulære, fuldbredde-sektioner stablet oven på hinanden — hero, billede+tekst, citat, feature-blok, CTA — så de tilsammen fortæller én historie fra top til bund. Det handler om komposition og hierarki, ikke om at gentage ens kort. Her er evidensen, best practices og de typiske faldgruber.
Definition
Et blok-layout (modulært sektions-layout) sammensætter en side af hele, fuldbredde indholdsblokke, der stables lodret: hero, billede+tekst-rækker, citater, feature-sektioner og call-to-action. Modsat et kort-grid, der viser mange ensartede, sidestillede enheder (se kortbaseret-layout), er blokkene heterogene og forskelligt formede, og deres rækkefølge bærer mening. Målet er klar visuel hierarki og let skanning, mens siden reflow’er pænt til én kolonne på mobil.
Hvorfor det virker
Folk læser sjældent en side ord for ord — de skimmer. Når hver blok har en tydelig, beskrivende overskrift, skanner brugeren i et såkaldt lagkage-mønster (fikseringer på overskrifter med lejlighedsvise nedslag i teksten imellem). Nielsen Norman Group dokumenterede mønsteret i et studie fra 2004 og kalder det et af de mest effektive måder at skanne en side på: det hjælper brugeren med at finde det, de leder efter, hvis det er der. Uden struktur falder folk tilbage på et mindre effektivt F-mønster og misser store dele af indholdet.1
Modulære blokke gør det let at give hvert afsnit sin egen vægt — men de kan også få siden til at se færdig ud, før den er det. Fænomenet kaldes »illusionen om fuldstændighed« (begrebet stammer fra Bruce Tognazzini, 1998): en stor hero eller for meget luft signalerer en falsk bund. I et af NN/g’s usability-studier opdagede seks ud af otte testdeltagere ikke, at de kunne scrolle på en side med en fuldskærms-hero-video, og 75% blev frustrerede over det. Hierarkiet mellem blokke skal altså både guide og invitere videre.2
Billede+tekst-rækker (og de populære »zigzag«-layouts, hvor billedet skifter side for hver række) virker kun, når billederne bærer information. NN/g’s eyetracking viser, at når billederne er meningsfulde, skanner folk lige effektivt i både ensrettet og skiftende layout — men er billederne dekorative, opfører de sig i et zigzag-layout »som forhindringer for øjet« og gør skanningen langsommere. Billedets rolle betyder altså mere end selve mønstret.3
Et velbygget blok-layout falder sammen af sig selv på lille skærm: blokkene stables til én kolonne. Det er også et tilgængeligheds-krav — WCAG 1.4.10 (Reflow) kræver, at indhold kan vises uden tab af information eller funktion i én kolonne ned til 320 CSS-pixel bredde (svarende til 400% zoom på et 1280 px-vindue). God blok-struktur og god tilgængelighed trækker samme vej.5
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Forsider, landingssider og længere indholdssider, hvor du fortæller en prioriteret historie fra top til bund.
- Når indholdet er heterogent — hero, feature-blok, billede+tekst, citat, CTA — og hvert afsnit har sin egen form og vægt.
- Når du vil styre læserækkefølgen og lede øjet nedad gennem klart adskilte sektioner med egne overskrifter.
Hvornår du bør undgå det
- Når du viser mange ensartede, sidestillede enheder (produkter, artikler, profiler) — brug et kort-grid (kortbaseret-layout) i stedet.
- Når brugeren primært skal sammenligne, sortere eller filtrere en liste — en tabel eller et grid er mere effektivt end stablede fortælleblokke.
Best practices
Giv hver blok en tydelig, beskrivende overskrift
Overskrifter er skanne-ankre. Når de skiller sig visuelt ud (størrelse, vægt, farve) og faktisk beskriver indholdet nedenunder, kan brugeren hoppe direkte til den rigtige blok — lagkage-skanning i stedet for at misse indhold i et F-mønster.1
Undgå den falske bund
Lad indhold titte frem over folden, så brugeren ser, at der er mere. Brug ikke en fuldskærms-hero eller så meget luft, at en blok ligner sidens slutning. Små signaler — afskåret tekst, en halv næste blok — inviterer til at scrolle.2
Brug billeder, der bærer information — ikke pynt
Informative billeder (produktfotos, diagrammer, skærmbilleder) får opmærksomhed; rent dekorative billeder overses. Vælg billedet ud fra, hvad blokken skal formidle, før du gør det stort.3
Vær varsom med lange zigzag-rækker
Skiftende billede+tekst ser dynamisk ud, men på en lang side gør dekorative billeder, der hopper fra side til side, skanningen mindre effektiv. Hold dekorative billeder på samme side ned gennem siden; zigzag gør kun lille skade ved 2–3 rækker.3
Grupper med luft, ikke med kasser
Afstand alene binder en blok sammen (nærhedsprincippet) og holder det visuelle roligt. Gem rammer og baggrundsflader til de steder, hvor luft ikke er nok — og pas på: for meget luft mellem sektioner er selv en kilde til falske bunde.2
Stabl blokkene i en meningsfuld kilderækkefølge
Når layoutet reflow’er til én kolonne på mobil, skal blokkene læses i en rækkefølge, der stadig giver mening. Lad DOM-/kilderækkefølgen matche den visuelle, så intet vigtigt havner et forkert sted for tastatur- og skærmlæser-brugere. Undgå CSS-tricks (order, row-reverse), der flytter det visuelle uden at flytte kilden.5
Skriv alt-tekst efter billedets rolle
Et informativt blok-billede skal have en kort, beskrivende alt-tekst, der formidler dets pointe. Er billedet rent dekorativt, giv det tom alt="" så skærmlæsere springer det over i stedet for at læse et støjende filnavn op.4
Typiske fejl
Fuldskærms-hero uden scroll-signal
En hero, der fylder hele skærmen uden at antyde mere nedenunder, skaber en falsk bund. En målbar andel af brugerne opdager ikke, at de kan scrolle.
Dekorative billeder i lange zigzag-rækker
Når pynte-billeder hopper fra side til side ned gennem en lang side, snubler øjet over dem og skanningen bliver langsommere. Ret dekorative billeder ind på samme side.
Blokke uden overskrifter
En stak af billede+tekst uden tydelige overskrifter giver ingen skanne-ankre. Brugeren mangler indgange og misser indhold, fordi øjet ikke ved, hvor det skal lande.
Visuel rækkefølge, der ikke matcher kilden
Hvis blokke er placeret visuelt i én orden, men ligger i en anden i koden, stables de forkert på mobil og læses i en meningsforstyrrende rækkefølge af skærmlæsere.
Eksempler i praksis
Apple (ofte fremhævet)
Apples forsider komponeres typisk af fuldbredde-blokke — en stor produktvisning efterfulgt af skiftevis billede+tekst-sektioner — hvor billederne bærer konkret information om produktet frem for ren dekoration. Det er blok-komposition, ikke et kort-grid.
Stripe (ofte fremhævet)
Stripes landingssider fremhæves ofte som modulære blok-layouts: stablede sektioner med tydelige overskrifter, rigelig luft og informative illustrationer, der leder øjet nedad gennem en prioriteret historie.
Ofte stillede spørgsmål
Hvad er et blok-layout?
Det er en side sammensat af modulære, fuldbredde-sektioner stablet lodret — hero, billede+tekst, citat, feature-blok, CTA. Hver blok har sin egen form og vægt, og rækkefølgen fortæller en sammenhængende historie fra top til bund.
Hvad er forskellen på blok-layout og et kort-grid?
Blokke er heterogene fuldbredde-sektioner, hvor formen skifter, og rækkefølgen bærer mening. Et kort-grid (kortbaseret-layout) viser mange ensartede, sidestillede enheder i samme form, typisk til at browse eller sammenligne. Vælg blokke til at fortælle, kort til at liste.
Hvad er en »falsk bund«?
Det er, når en blok får siden til at se færdig ud, selv om der er mere nedenunder — ofte pga. en fuldskærms-hero eller for meget luft. Brugeren tror, siden slutter, og scroller ikke videre. Lad derfor indhold titte frem over folden.
Skal billede og tekst skifte side (zigzag)?
Kun med måde. NN/g’s eyetracking viser, at dekorative billeder i et zigzag-layout virker som forhindringer for øjet på lange sider. Hold dekorative billeder på samme side ned gennem siden; zigzag gør kun lille skade ved 2–3 rækker, og bærer billederne information, betyder mønstret mindre.
Hvordan gør jeg et blok-layout tilgængeligt?
Brug rigtige overskrifts-tags i en logisk orden, giv informative billeder beskrivende alt-tekst og dekorative billeder tom alt="", og sørg for at kilderækkefølgen matcher den visuelle, så blokkene stabler meningsfuldt til én kolonne (WCAG Reflow) på mobil.
Kilder
Relaterede mønstre
Udforsk videre
Kortbaseret layout
Skimbar oversigt hvor hvert kort er én selvstændig enhed.
Se mønster →Responsive og performante billeder
Billeder, der loader hurtigt og ikke rykker layoutet: reservér plads, lazy-load det, der er under skærmkanten, prioritér hero-billedet, og server moderne formater i den rigtige størrelse.
Se mønster →Produktgalleri, lightbox & zoom
Et produktgalleri, der viser nok billeder, flere vinkler, skala og zoom — uden auto-roterende karrusel og med tastaturvenlig lightbox.
Se mønster →