Kategoriadskillere: Linjer, Hvidrum eller Farveblokke?

Et meze-hus med 26 borde i Cesme, Izmir, erstattede de tynde adskillelseslinjer mellem menukategorier med 24 pixel hvidrum — opholdstiden steg 22%, og scrolladfaerden blev mearkbart mere organiseret. Vi gennemgar, hvornar hvilken stil virker.

Tre Adskillertyper

Menuer benytter typisk tre teknikker: linjer (1-2px solid), hvidrum (16-32px) og farveblokke. Linjer er letteste, men trotter ojet hurtigst. Hvidrum foles mest naturlig. Farveblokken skaber starkest hierarki.

Material Design 3 er klart: hvidrum er den starkeste adskiller. Linjer hgrer til tabelindhold (allergenliste). Farveblokke til opmaerksomhedsforankring kokkens special, begrnset tilbud.

Hvorfor Hvidrum Vinder

I Cesme blev 1px #E5E7EB-linjen byttet med 24px lodret afstand. Brugere opfattede hver kategori som egen blok, ojet fulgte naturligt F-monster, scroll-heatmaps viste jaevne pauser. Med linjer opfattede brugerne dem som forhindringer.

Hvidrum giver typografi luft: kontrasten mellem overskrift og brodtekst stiger af sig selv. Pa mobil endnu mere kritisk lille skarm, hver pixel taller.

Hvornar Bruge Farveblokke

Tre scenarier: (1) kampagnekategori (Ugens Tilbud), (2) staerk brand-layout med tintband bag overskriften, (3) meget lange menuer (50+ items) med hovedsektioner.

• Kontrastforhold min 4.5:1 for WCAG AA.
• Maetning 15-25%, fulde farver trotter.
• Max to forskellige farveblokke per side.

FAQ

Er linjer ubrugelige? Nej i naerings- eller allergentabeller hjaelper en 1px linje. Undgas kun mellem kategorier.

Hvor meget hvidrum mobil? 16-24px ideelt. Over 32px bliver siden for lang, under 16px fornemmes brudet ikke.

Skader blokke SEO? Nej Lighthouse maler kontrast og brugbarhed, ikke baggrunden. CSS endrer ikke HTML-semantik.

Var dette nyttigt? Del det.