Bursa Görüklen 14 pöydän kampuskahvila laski mobiilin poistumisprosenttinsa 18%:sta 11%:iin korvaamalla pyörivän spinnerin shimmer-skeletonilla digitaalisessa valikossaan. Sama data, samat kuvat, sama 3G-verkko.
Nielsen Norman 2023 tutkimus
Nielsen Norman Groupin 2023 tutkimus osoittaa, että skeleton-näytöt vähentävät koettua latausaikaa 38%, kun taas klassiset spinnerit lisäävät sitä 12%. Aivot hyväksyvät paremmin luonnostellun rakenteen kuin animoidun tyhjyyden.
Ravintolan valikolle tämä on ratkaisevaa. Asiakas istuu pöydässä, puhelin kädessä, haluaa päättää nopeasti. Kaksi sekuntia valkoista ruutua kylvää epäilyn — "onko verkko poikki?". Skeleton poistaa sen heti.
thMenun oletus: shimmer-skeleton
thMenu käyttää CSS gradient shimmer -animaatiota tuotekorteille, kategoriavälilehdille ja kuvapaikkamerkeille. Kuvien latautuessa näkyy blur-up placeholder plus skeleton-kehys.
- Kategoriavälilehdet: 5 harmaata pilleriä, shimmer 1,5s
- Tuotekortti: kuva + 2 tekstiriviä + hinta
- Ostoskori: rivit skeletonina spinnerin sijaan
Milloin spinner?
Toiminnan vahvistukseen — "Lähetetään tilausta", "Käsitellään maksua", "Kutsutaan tarjoilijaa" — pieni inline-spinner toimii paremmin. Tässä odotetaan tulosta, ei sisältöä.
Sääntö: skeleton datalle, spinner toiminnoille. thMenu näyttää inline-spinnerin 200ms kuluessa "Lisää koriin" -napautuksesta ja sitten onnistumistoastin.
UKK
Voiko hidas skeleton-animaatio haitata? Kyllä. Yli 2 sekunnin syklit ärsyttävät. Optimaalinen 1,2-1,8s; thMenussa 1,5s.
Riittääkö skeleton hyvin huonolla yhteydellä? Skeleton + toast 8+ sekunnin jälkeen + service worker offline fallback.
Onko skeleton saavutettava? Kyllä, aria-busy="true" ja aria-label="Valikko latautuu".
Oliko tästä hyötyä? Jaa se.
Aiheeseen liittyvät artikkelit
12 konkreettista hyötyä QR-menüistä (oikeilla tiedoilla)
Nolla tulostuskustannuksia, asiakaskohtainen kulutus kasvaa 31 %, automaattinen …
Miksi menuvalokuvat lisäävät myyntiä: ravintolaopas
Valokuvin varustetut annokset saavat jopa 30 % enemmän tilauksia. Tässä on tiede…
Miksi Apple Pay -kayttajat odottavat 12 sekuntia vahemman kuin Chip+PIN ravintoloissa
Visa 2024 kenttatieto: chip+PIN 25.3s, Apple Pay 13.1s. 32 poydan brasseriessa 4…