Mobiilimenun suunnittelun 7 kultaista sääntöä

Mobiilimenu ei ole pieneksi kutistettu työpöytämenu. Pieni näyttö, usein hidas yhteys ja yhdellä kädellä käyttö vaativat omat suunnittelupäätökset. Nämä seitsemän sääntöä vaikuttavat suoraan keskiostokseen ja tyytyväisyyteen.

1. Leipäteksti ei alle 16 px

16 px (1 rem) on raja. Sen alapuolella käyttäjä zoomaa ja navigaatio hajoaa. Suositus: runko 16-18 px, tuotenimi 18-22 px, kategorianimi 22-28 px.

2. Kosketuskohteet vähintään 44 × 44 px

Apple HIG ja Google Material vaativat 44 × 44. Pienempi = 15-23% enemmän virhepainalluksia. Välilehtien välissä vähintään 8 px.

3. Hierarkia F-kuviona

Mobiilin luku on pystysuoraa. Suositukset aivan ylimmäksi, kategoriapalkki sticky. Jos vieras ei hahmota logiikkaa 5 sekunnissa, takaisin-painike voittaa.

4. WebP/AVIF ja lazy loading

WebP on 30% kevyempi kuin PNG. AVIF on vielä 15-20% pienempi. Kuvat ladataan vasta kategoriaa avattaessa — <img loading="lazy">.

5. Kolmen sekunnin sääntö

LCP alle 3 s. Testaa rajoitetulla 3G:llä — kahvilan Wi-Fi on harvoin parempi. JS-bundle alle 150 KB.

6. Enintään 4-5 väriä

Brändiväri + toissijainen + korostus + musta + valkoinen. Allergeeni-ikonit muodolla JA värillä — 1 mies 12:sta on puna-vihreä-värisokea.

7. Yhden käden testi

Kriittiset toiminnot alaosaan — peukaloalueen sääntö. Mobile-first-alustat kuten thMenu noudattavat näitä oletuksena.

Hyvin viritetty mobiilimenu nostaa tilauksia 12-18%. Huonosti viritetty palauttaa asiakkaan tarjoilijalle ja mitätöi digitaalisen edun.

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