Separatory kategorii w menu: linie, biala przestrzen czy bloki koloru?

Meze house z 26 stolikami w tureckim Cesme rozdzielal kategorie cyfrowego menu cienkimi szarymi liniami. Po zamianie ich na 24 piksele bialej przestrzeni czas na stronie wzrosl o 22 procent, a przewijanie stalo sie wyraznie spokojniejsze. Wybor separatora bezposrednio wplywa na sredni rachunek.

Trzy typy separatora i ich psychologia

Linia wyglada minimalistycznie, ale mozg czyta ja jako bariere i robi mikro-pauze. Biala przestrzen daje oddech i grupuje przez bliskosc. Bloki koloru sa najsilniejszym sygnalem i powinny pozostac rzadkie.

Material Design 3 rezerwuje linie dla gestych tabel danych; w menu domyslem powinno byc 16 do 32 pikseli bialej przestrzeni.

Ktory separator do ktorej kategorii?

Przy jednej kuchni wystarczy biala przestrzen. Przy kilku kuchniach lub hierarchii pomagaja bloki koloru — maks. trzy tony.

• Biala przestrzen 24-32 px: w obrebie tej samej kategorii.
• Wlosowa linia 1 px nieprzezroczystosc 0.1: dla podgrup.
• Blok koloru: wylacznie dla glownych kategorii.

Dane A/B i wzorce scrollowania

W czterotygodniowym tescie A/B wariant z biala przestrzenia mial 18 procent wieksza glebokosc scrolla, sredni czas sesji 52 -> 64 sekund, a add-to-cart wzrosl o 9 procent.

Kawiarnia w Karakoy zmniejszyla bounce o 14 procent dzieki subtelnym tematycznym blokom koloru. Z umiarem bloki dzialaja.

FAQ

Czy mozna laczyc wszystkie trzy? Tak, z hierarchia: blok na gorze, przestrzen w srodku, linia na najnizszym poziomie.

A w dark mode? Trzymaj nieprzezroczystosc linii w 0.08-0.12.

A dostepnosc? Kontrast WCAG AA 4.5:1 i dodatkowa wskazowka inna niz kolor.

Czy to było pomocne? Udostępnij.