Categoriescheidingen: Lijnen, Witruimte of Kleurblokken?

Een meze-huis met 26 tafels in Cesme, Izmir, verving de dunne scheidingslijnen tussen menucategorieen door 24 pixel witruimte — de verblijftijd steeg met 22% en het scrollgedrag werd merkbaar ordelijker. We bekijken wanneer elke stijl werkt.

Drie Scheidingstypen

Menukaarten gebruiken drie technieken: lijnen (1-2px solid), witruimte (16-32px) en kleurblokken. Lijnen zijn het lichtst maar vermoeien snel. Witruimte voelt het natuurlijkst. Kleurblok creeert de sterkste hierarchie.

Material Design 3 is duidelijk: witruimte is de krachtigste scheiding. Lijnen horen in tabelinhoud (allergeenraster). Kleurblokken voor aandachtsankers chefspecials, beperkte promo.

Waarom Witruimte Wint

In Cesme werd de 1px #E5E7EB-lijn vervangen door 24px verticale ruimte. Gebruikers zagen elke categorie als apart blok, het oog volgde het natuurlijke F-patroon, scroll-heatmaps toonden gelijkmatige pauzes. Met lijnen werden deze als obstakels behandeld.

Witruimte geeft de typografie lucht: het contrast tussen kop en lopende tekst stijgt vanzelf. Op mobiel nog kritischer klein scherm, elke pixel telt.

Wanneer Kleurblokken

Drie scenario's: (1) promocategorie (Aanbiedingen deze Week), (2) brand-sterk layout met tintband achter de kop, (3) zeer lange menu's (50+ items) met hoofdsecties.

• Contrastratio minstens 4.5:1 voor WCAG AA.
• Verzadiging 15-25%, volle kleuren vermoeien.
• Maximaal twee verschillende kleurblokken per pagina.

FAQ

Zijn lijnen nutteloos? Nee in voedingstabellen of allergeenrasters helpt een 1px-lijn. Alleen tussen categorieen vermijden.

Hoeveel witruimte mobiel? 16-24px ideaal. Boven 32px wordt de pagina te lang, onder 16px voel je de breuk niet.

Schaden blokken SEO? Nee Lighthouse meet contrast en bruikbaarheid, niet de achtergrond. CSS verandert HTML-semantiek niet.

Was dit nuttig? Deel het.