Kategorie-Trenner im Menudesign: Linien, Weissraum oder Farbblock?

Ein Mezehaus mit 26 Tischen im tuerkischen Cesme trennte seine digitalen Menue-Kategorien mit duennen grauen Linien — bis sie diese durch 24 Pixel Weissraum ersetzten. Die Verweildauer stieg um 22 Prozent und das Scrollverhalten wurde deutlich ruhiger. Der Trenner entscheidet mit, wie viel vom Menue Gaeste wirklich sehen.

Drei Trennerarten und ihre Wirkung

Linien wirken minimalistisch, das Gehirn liest sie aber als Barriere — bei jeder Linie entsteht eine Mikropause. Weissraum schafft Atmung; gemaess Gestaltgesetz der Naehe gruppieren sich Elemente von selbst. Farbbloecke sind das lauteste Signal und sollten sparsam bleiben.

Die Material Design 3 Richtlinie empfiehlt Linien nur in dichten Datentabellen; in Menues sollte 16 bis 32 Pixel Weissraum Standard sein.

Welcher Trenner fuer welche Kategorie?

Bei nur einer Kueche reicht Weissraum. Bei mehreren Kuechen oder Mehrebenen-Hierarchie helfen Farbbloecke — maximal drei Farbtoene.

• Weissraum 24 bis 32 px: zwischen Items derselben Kategorie.
• Haarlinie 1 px Opazitaet 0.1: fuer Untergruppen wie "Kalte Mezes / Warme Mezes".
• Farbblock: ausschliesslich fuer Hauptkategorien.

A/B-Daten und Scrollmuster

Im A/B-Test ueber vier Wochen zeigte die Weissraum-Variante 18 Prozent mehr Scrolltiefe; die durchschnittliche Sitzungsdauer stieg von 52 auf 64 Sekunden. Adds-to-cart legten um 9 Prozent zu.

Ein Cafe in Karakoy reduzierte mit Farbbloecken die Absprungrate um 14 Prozent. Mit Mass eingesetzt zahlen sich Farbbloecke aus.

FAQ

Darf ich alle drei mischen? Ja, mit klarer Hierarchie: Farbblock oben, Weissraum mittig, Linie auf der tiefsten Ebene.

Gilt das auch im Darkmode? Ja, Linienopazitaet zwischen 0.08 und 0.12 halten.

Was ist mit Barrierefreiheit? WCAG-AA-Kontrast 4.5:1 und ein nicht-farbliches Zusatzsignal verwenden.

Hilfreich? Teilen Sie es.