Menü Betöltési Állapotok: Skeleton vs Spinner — Legjobb Gyakorlatok

Egy 14 asztalos campus kávézó Bursa Görükle-ben 18%-ról 11%-ra csökkentette a mobil visszafordulási arányát úgy, hogy a digitális menüben a forgó spinnert shimmer-skeletonra cserélte. Ugyanazok az adatok, képek, ugyanaz a 3G hálózat.

Nielsen Norman 2023 kutatás

A Nielsen Norman Group 2023-as kutatása szerint a skeleton képernyők 38%-kal csökkentik az érzékelt betöltési időt, a klasszikus spinnerek pedig 12%-kal növelik. Az agy jobban elfogadja a felvázolt struktúrát, mint az animált űrt.

Egy étterem menünél ez döntő. A vendég asztalnál ül, telefon a kezében, gyorsan akar dönteni. Két másodperc fehér képernyő kétséget szül — "elment a háló?". A skeleton azonnal eloszlatja.

thMenu alapértelmezés: shimmer-skeleton

A thMenu CSS gradient shimmer animációt használ termékkártyákhoz, kategória-fülekhez és képhelyőrzőkhöz. Képek betöltése közben blur-up helyőrző és skeleton keret látható.

• Kategória-fülek: 5 szürke pilula, shimmer 1,5 mp
• Termékkártya: kép + 2 sor szöveg + ár
• Kosár fiók: sor-skeleton spinner helyett

Mikor jó a spinner?

Akció megerősítésre — "Rendelés küldése", "Fizetés feldolgozása", "Pincér hívása" — kis inline spinner jobban működik. Itt eredményre várnak, nem tartalomra.

Szabály: skeleton adatra, spinner akcióra. A thMenu a "Kosárba" érintés után 200ms-en belül inline spinnert mutat, majd sikertoast jön.

GYIK

A lassú skeleton animáció árthat? Igen. 2 másodpercnél hosszabb ciklusok idegesítenek. Optimum 1,2-1,8 mp; thMenu 1,5 mp.

Elég a skeleton nagyon rossz hálózaton? Skeleton + toast 8+ másodperc után + service worker offline fallback.

A skeleton akadálymentes? Igen aria-busy="true" és aria-label="Menü betöltése" attribútumokkal.

Hasznosnak találtad? Oszd meg.