Kategorie-Trennzeichen: Linien, Leerraum oder Farbblock?

Ein Meze-Restaurant mit 26 Tischen in Cesme ersetzte duenne Trennlinien zwischen Menue-Kategorien durch 24 Pixel Leerraum — die Verweildauer stieg um 22%, das Scroll-Verhalten wurde deutlich geordneter. Welcher Trenner wann funktioniert, klaeren wir hier datenbasiert.

Drei Trenner-Typen im Vergleich

Im Menue-Design dominieren drei Techniken: Linien (1-2px solid), Leerraum (16-32px Abstand) und Farbblock (gefuellter Kategorie-Hintergrund). Linien sind am leichtesten, ermueden das Auge aber schnell. Leerraum wirkt natuerlich. Farbblock erzeugt die staerkste Hierarchie.

Material Design 3 sagt klar: Leerraum ist der staerkste Trenner. Linien gehoeren in tabellarische Inhalte wie Allergen-Listen. Farbbloecke sind fuer Aufmerksamkeitsanker da — Chef's Special, limitierte Aktion.

Warum Leerraum gewinnt

In Cesme wurde die 1px #E5E7EB-Linie gegen 24px vertikalen Abstand getauscht. Nutzer empfanden jede Kategorie als eigenen Block, die Augenbewegung fiel ins natuerliche F-Muster, Scroll-Heatmaps zeigten gleichmaessige Pausen. Mit Linien hatten Nutzer diese als Hindernisse wahrgenommen und schneller drueber gescrollt.

Leerraum gibt der Typografie Luft: der Kontrast zwischen Headline und Body wird automatisch staerker. Auf Mobilgeraeten besonders kritisch — kleiner Bildschirm, jeder Pixel zaehlt.

Wann Farbbloecke richtig sind

Farbbloecke passen in drei Szenarien: (1) Aktionskategorien ("Diese Woche reduziert"), (2) markenstarke Layouts mit Tinted-Band hinter der Kategorie-Headline, (3) sehr lange Menues (50+ Items), wo Hauptsektionen klare Trennung brauchen.

• Kontrastverhaeltnis mindestens 4.5:1 fuer WCAG AA.
• Saettigung 15-25%, voll gesaettigte Farben ermueden.
• Maximal zwei verschiedene Farbbloecke pro Seite.

FAQ

Sind Linientrenner nie sinnvoll? Doch — in Naehrwert- oder Allergentabellen verbessert eine 1px-Linie die Lesbarkeit. Nur bei Kategoriewechsel meiden.

Wie viel Leerraum mobil? 16-24px ist optimal. Ueber 32px wird die Seite zu lang, unter 16px ist der Bruch nicht spuerbar.

Schaden Farbbloecke der SEO? Nein — Lighthouse bewertet Kontrast und Usability, nicht den Hintergrund. CSS-Bloecke veraendern HTML-Semantik nicht.

Hilfreich? Teilen Sie es.