Kategoriaerottimet: Viivat, Tyhja Tila vai Varilohkot?

Cesmessa, Izmirissa, 26-poytainen meze-ravintola vaihtoi menukategorioiden valilla olleet ohuet erotinviivat 24 pikselin tyhjaan tilaan — sivulla viipymisaika nousi 22%, ja vieritysk kayttaytyminen muuttui huomattavasti jarjestyneemmaksi. Kaymme lapi, milloin mikakin tyyli toimii.

Kolme Erotintyyppia

Ruokalistat tukeutuvat kolmeen tekniikkaan: viivat (1-2px solid), tyhja tila (16-32px) ja varilohkot. Viiva on kevyin mutta uuvuttaa silman nopeimmin. Tyhja tila tuntuu luonnollisimmalta. Varilohko luo vahvimman hierarkian.

Material Design 3 sanoo selvasti: tyhja tila on tehokkain erotin. Viivat kuuluvat taulukkomuotoiseen sisaltoon (allergeenitaulukko). Varilohkot huomionkohtia varten kokin erikoinen, rajoitettu tarjous.

Miksi Tyhja Voittaa

Cesmessa 1px #E5E7EB-viiva vaihdettiin 24px pystysuoraan valiin. Kayttajat nakivat jokaisen kategorian omana lohkonaan, silma seurasi luonnollista F-kuviota, vieritys-lammokartoissa nakyivat tasaiset tauot. Viivoja kayttajat pitivat esteina.

Tyhja tila antaa typografialle ilmaa: otsikon ja leipatekstin kontrasti nousee itsestaan. Mobiilissa viela kriittisempaa pieni naytto, jokainen pikseli ratkaisee.

Milloin Kayttaa Varilohkoja

Kolme skenaariota: (1) kampanjakategoria (Viikon Tarjoukset), (2) brandivahva layout, jossa savynauha otsikon takana, (3) hyvin pitkat menut (50+ tuotetta), joissa paaosastojen erot.

• Kontrastisuhde vah 4.5:1 WCAG AA:lle.
• Kyllaisyys 15-25%, taydet varit uuvuttavat.
• Max kaksi eri varilohkoa sivulla.

FAQ

Ovatko viivat hyodyttomia? Eivat ravintosisalto- tai allergeenitaulukoissa 1px viiva auttaa luettavuutta. Vain kategorioiden valilla valta.

Paljonko tyhjaa tilaa mobiilissa? 16-24px ihanteellinen. Yli 32px sivu venyy liikaa, alle 16px taukoa ei tunneta.

Vahingoittavatko lohkot SEO ta? Eivat Lighthouse mittaa kontrastia ja kaytettavyytta, ei taustaa. CSS ei muuta HTML-semantiikkaa.

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