Kategoriavskiljare i menyn: linjer, vit yta eller fargblock?

Ett meze hus med 26 bord i turkiska Cesme separerade sina digitala menykategorier med tunna graa linjer. Nar de byttes ut mot 24 pixlar vit yta okade tiden pa sidan med 22 procent och scrollbeteendet blev markbart lugnare. Valet av avskiljare paverkar genomsnittsnotan direkt.

Tre avskiljartyper och deras psykologi

Linjer ser minimalistiska ut, men hjarnan laser dem som barriaer, vilket ger mikropaus. Vit yta ger andning och grupperar via Gestalt-narhet. Fargblock ar starkaste signalen och maaste hallas sallsynt.

Material Design 3 reserverar linjer for tata datatabeller; i menyer bor 16 till 32 pixlar vit yta vara standard.

Vilken avskiljare for vilken kategori?

Med ett kok racker vit yta. Med flera kok eller hierarki hjalper fargblock — max tre toner.

• Vit yta 24-32 px: mellan ratter i samma kategori.
• Tunn linje 1 px opacitet 0.1: for undergrupper.
• Fargblock: endast for huvudkategorier.

A/B-data och scrollmonster

Den fyra veckor langa A/B-testen visade 18 procent djupare scroll pa vit-yta-varianten; sessionstid 52 -> 64 sekunder, add-to-cart +9 procent.

Ett kafe i Karakoy minskade bounce med 14 procent via diskreta tematiska fargblock.

FAQ

Kan jag blanda alla tre? Ja, med hierarki: block overst, vit yta i mitten, linje pa djupaste niva.

Och dark mode? Hall linjeopaciteten i 0.08-0.12.

Och tillganglighet? WCAG AA 4.5:1 kontrast och en icke-farg-ledtrad till.

Var detta hjälpsamt? Dela det.