Menü "Loading State" Tasarımı — Skeleton vs Spinner Karşılaştırması

Bursa Görükle'de 14 masalı bir kampüs kafesi, müşteri menüsünde dönen spinner'ı kaldırıp shimmer-skeleton'a geçtiğinde mobil bounce rate'i %18'den %11'e düştü. Aynı veriler, aynı görseller, aynı 3G hızı — değişen tek şey "boş bekleme" değil, "yapı önizlemesi" göstermesiydi.

Nielsen Norman 2023 verisi: skeleton vs spinner

Nielsen Norman Group'un 2023 araştırması, skeleton ekranların algılanan yükleme süresini %38 azalttığını, klasik dönen spinner'ların ise %12 artırdığını gösteriyor. Sebebi basit: insan beyni "neyin yükleneceğini" görünce, gerçek süreyi daha kısa algılıyor. Spinner sadece "bir şey oluyor" mesajı verir; skeleton ise "kart başlığı buraya, fiyat şuraya gelecek" haritası çizer.

Restoran menüsü için bu fark kritik. Müşteri masada oturmuş, telefon elinde, hızlı karar vermek istiyor. 2 saniyelik bir boş ekran bile "internet yok mu?" tereddüdü yaratır. Skeleton bu tereddüdü ortadan kaldırır çünkü layout zaten orada, sadece içerik dolacak.

thMenu'da varsayılan: shimmer-skeleton

thMenu, müşteri menüsünde (menu.thmenu.com) ürün kartları, kategori sekmeleri ve resim placeholder'ları için CSS gradient shimmer animasyonu kullanır. Ürün resmi yüklenirken bile blur-up placeholder + skeleton çerçeve gösterilir. Bu, özellikle 3G/4G şebekede oturan müşteri için fark yaratıyor.

• Kategori sekmeleri: 5 adet 80px gri pill, 1.5s shimmer
• Ürün kartı: resim + 2 satır metin + fiyat placeholder'ı
• Cart drawer: "Sepetiniz yükleniyor..." yerine satır skeleton'u

Spinner ne zaman doğru tercih?

Skeleton her yerde değil. Eylem onayı bekleyen durumlarda — "Sipariş Gönderiliyor", "Ödeme İşleniyor", "Garson Çağrılıyor" — küçük bir inline spinner daha iyi. Çünkü burada layout zaten kullanıcı bilgisi; beklenen şey "işlem sonucu". Spinner buradaki belirsizliği iletir.

Kural basit: veri yükleniyorsa skeleton, eylem işleniyorsa spinner. thMenu'da "Sepete Ekle" butonu tıklandığında 200ms içinde inline spinner görünür, başarıdan sonra toast bildirimi gelir. Bu mikro-feedback müşteriye "tık kayboldu mu?" sorusunu sormatmaz.

FAQ

Skeleton animasyonu çok yavaş olursa zarar verir mi? Evet. 2 saniyeden uzun shimmer ciklusları irrite eder. Ideal 1.2-1.8s aralığı; thMenu varsayılan 1.5s.

Düşük ağ bağlantılarında skeleton yeterli mi? Skeleton + "Bağlantı yavaş, biraz bekleyin" toast'u 8+ saniye sonra gösterilir. thMenu service worker offline fallback da sunar.

Skeleton accessibility ile uyumlu mu? Evet, aria-busy="true" ve aria-label="Menü yükleniyor" ekleyin. Screen reader'lar "yükleniyor" mesajını okur, ekran boşken kullanıcı bilgi alır.

Faydalı buldunuz mu? Paylaşın.