Menu-kategorioiden jakajat: viivat, tyhja tila vai varilohko?

Turkin Cesmessa toimiva 26-poytainen meze-ravintola erotti digitaalisen ruokalistan kategoriat ohuilla harmailla viivoilla. Kun viivat korvattiin 24 pikselin tyhjalla tilalla, sivulla viipymisaika nousi 22 prosenttia ja vieritys oli huomattavasti rauhallisempaa. Jakajan valinta vaikuttaa keskilaskuun.

Kolme jakajatyyppia ja niiden psykologia

Viiva nayttaa pelkistetylta mutta aivot lukevat sen esteena, mika tuottaa mikrotauon. Tyhja tila antaa hengittavyytta ja ryhmittaa Gestalt-laheisyyden mukaan. Varilohko on vahvin signaali ja sen pitaa pysya harvoin kaytettyna.

Material Design 3 varaa viivat tiiviille datatauluille; ruokalistalla oletuksen pitaisi olla 16-32 pikselin tyhja tila.

Mika jakaja mihinkin kategoriaan?

Yksi keittio: pelkka tyhja tila riittaa. Useita keittioita tai hierarkia: varilohkot auttavat — enintaan kolme savya.

• Tyhja tila 24-32 px: saman kategorian ruokien valilla.
• Ohut viiva 1 px lapinakyvyys 0.1: alaryhmille.
• Varilohko: vain paa-kategorioille.

A/B-data ja vierityskaavat

Nelja viikkoa kestanyt A/B-testi nayttaa: tyhjan tilan variantilla 18 prosenttia syvempi scroll; istunto 52 -> 64 sekuntia, add-to-cart +9 prosenttia.

Karakoyn kahvila laski bouncea 14 prosenttia hillityilla teemavarilohkoilla.

FAQ

Voiko kayttaa kaikkia kolmea? Voi, hierarkialla: lohko ylimpana, tyhja tila keskella, viiva syvimmalla tasolla.

Entaa dark mode? Pida viivan lapinakyvyys 0.08-0.12.

Saavutettavuus? WCAG AA 4.5:1 -kontrasti ja vari-riippumaton lisavihje.

Oliko tästä hyötyä? Jaa se.