Valikon Latausvaiheet: Skeleton vs Spinner — Parhaat Käytännöt

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.