Kategoriavdelare: Linjer, Vitrymd eller Fargblock?

En meze-restaurang med 26 bord i Cesme, Izmir, ersatte de tunna skiljelinjer mellan menykategorier med 24 pixlar vitrymd — tiden pa sidan okade 22% och rullbeteendet blev markbart mer organiserat. Vi gar igenom nar varje stil fungerar.

Tre Avdelartyper

Menyer anvander tre tekniker: linjer (1-2px solid), vitrymd (16-32px) och fargblock. Linjen ar lattaste men trottar ogat snabbast. Vitrymden kanns mest naturlig. Fargblocket skapar starkaste hierarkin.

Material Design 3 ar tydligt: vitrymd ar den starkaste avdelaren. Linjer hor till tabellinnehall (allergenlista). Fargblock for att forankra uppmarksamhet kockens special, begransat erbjudande.

Varfor Vitrymd Vinner

I Cesme byttes 1px #E5E7EB-linjen mot 24px vertikalt avstand. Anvandare uppfattade varje kategori som eget block, ogat foljde naturligt F-monster, scroll-heatmaps visade jamna pauser. Med linjer behandlade anvandare dem som hinder.

Vitrymden ger typografin luft: kontrasten mellan rubrik och brodtext stiger av sig sjalv. Pa mobil annu mer kritiskt liten skarm, varje pixel raknas.

Nar Anvanda Fargblock

Tre scenarier: (1) kampanjkategori (Veckans Erbjudanden), (2) brand-stark layout med tintband bakom rubriken, (3) mycket langa menyer (50+ items) med huvudsektioner.

• Kontrastforhallande min 4.5:1 for WCAG AA.
• Mattnad 15-25%, fulla farger trottar.
• Max tva olika fargblock per sida.

FAQ

Ar linjer onyttiga? Nej i narings- eller allergentabeller hjalper en 1px linje. Undviks bara mellan kategorier.

Hur mycket vitrymd pa mobil? 16-24px idealt. Over 32px blir sidan for lang, under 16px markss inte brottet.

Skadar block SEO? Nej Lighthouse mater kontrast och anvandbarhet, inte bakgrund. CSS andrar inte HTML-semantik.

Var detta hjälpsamt? Dela det.