M.AIM.AISoloLabsUI Sözlüğü · Geri bildirim

← UI Sözlüğü

İskelet yükleme skeleton

bilinen diğer adları skeleton · skeleton screen · yer tutucu yükleme · shimmer

Böyle diyorsan: "içerik gelmeden görünen gri kutular" · "yüklenirken çıkan taslak" → bunun adı i̇skelet yükleme.

İçerik gelmeden önce yerini tutan gri taslak kutular; boş beyaz ekranı önler.

İskelet yükleme, içerik gelmeden önce onun ŞEKLİNİ çizer: başlığın olacağı yere gri bir çubuk, görselin olacağı yere gri bir kutu. Spinner'dan üstün olduğu yer bilgi miktarıdır — kullanıcı ne geleceğini önceden görür, sayfanın yapısını okumaya başlar ve bekleme daha kısa hissedilir. Ama tek bir şartla işe yarar: iskelet, gerçek içerikle AYNI ölçüde olmalıdır. Boyu tutmayan iskelet, içerik gelince yerleşimi zıplatır ve o an kullanıcı tıklamak üzere olduğu şeyi kaçırır; bu durumda iskelet, sorunu çözmek yerine yeni bir sorun üretmiş olur.

Kapsam: Bu madde gelecek içeriğin yerini tutan yükleme desenini kapsar. Süresi bilinmeyen tek bir işlem için Spinner, ölçülebilir bir iş için İlerleme Çubuğu kullanılır. Veri gelmiş ama BOŞ çıkmışsa gösterilecek şey iskelet değil Boş Durum'dur.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Liste yüklenirken skeleton göster: gerçek satır bileşeniyle AYNI boyutlarda 5 iskelet satırı (avatar + değişken genişlikte 2 çubuk), hafif pulse animasyonlu; veri 200ms'den hızlı gelirse iskeleti hiç gösterme, gelince fade ile değiştir; hata durumunda iskelet sonsuza kadar kalmasın — hata durumuna geçsin.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Skeleton'ım huysuz; klasikleri sırayla ele: (1) iskelet gerçek içerikten FARKLI boyda — veri gelince her şey zıplıyor (amacın tam tersi); (2) hızlı yüklemede 80ms'lik iskelet FLAŞI göze batıyor; (3) istek hata verince iskelet sonsuz kalıyor (hata durumu bağlanmamış); (4) tüm satırlar aynı genişlikte — yapaylık sırıtıyor; (5) animasyon reduce-motion'ı yok sayıyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Yer tutucu bloklargri şekiller

    Gelecek içeriğin silueti: avatar yuvarlağı, başlık çubuğu, metin satırları.

  • 2Boyut eşleşmesigerçekle birebir

    İskeletin TEK görevi: içerik gelince HİÇBİR ŞEYİN zıplamaması. Boylar gerçek bileşenle aynı olmalı.

  • 3Parıltıpulse/shimmer

    Hafif soluklaşma animasyonu 'yükleniyor' der; satır genişlikleri değişken olursa doğal durur.

  • 4Geçişfade + min süre

    Veri gelince yumuşak geçiş; 200ms'den kısa yüklemede iskelet HİÇ gösterilmez (flaş önleme).

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AGösterilmiyoreşik altı

    Veri çok hızlı geldi. Kısa beklemelerde iskelet gösterip hemen kaldırmak ekranı çakıştırır; küçük bir gecikme eşiği koy.

  • BGösteriliyoraria-busy="true"

    Yapı çizili, içerik yolda. Bölge güncellenmekte olarak işaretlenmeli ki ekran okuyucu yarım içeriği okumaya çalışmasın.

  • CParıldıyorshimmer

    Hareketli parlama beklemenin sürdüğünü söyler. Şart değildir; prefers-reduced-motion açıkken durdurulmalıdır.

  • Dİçerik geldideğişim

    İskelet gerçek içerikle yer değiştirir. Ölçüler tutuyorsa hiçbir şey zıplamaz; tutmuyorsa iskeletin bütün faydası burada kaybolur.

  • EVeri boş geldiboş durum

    İş bitti ama sonuç yok. İskeleti sonsuza kadar döndürme; boş durum ekranına geç ve ne yapılabileceğini söyle.

KODDAKİ ADLARI
UXgerçek bileşenle boy eşleşmesizıplama sıfır
ReactSuspense fallbackdoğal bağlama noktası
UXmin-gösterim eşiği (~200ms)flaş önleme
ERİŞİLEBİLİRLİK & SIK HATA
  • Yükleme bölgesini aria-busy="true" ile işaretle; aksi hâlde ekran okuyucu anlamsız yer tutucu kutuları okumaya çalışır.
  • İskelet kutularını ekran okuyucudan gizle (aria-hidden): bunlar görsel bir vaattir, okunacak içerik değildir.
  • Ölçüleri gerçek içerikle eşleştir. Zıplayan yerleşim yalnız estetik sorun değildir; tıklamak üzere olan kullanıcı yanlış öğeye basar.
  • Parıltı animasyonunu prefers-reduced-motion açıkken durdur (WCAG 2.2.2).
  • Sonsuz iskelet gösterme: istek başarısız olduysa hata durumuna, veri boş geldiyse boş duruma geç. Sürekli parıldayan gri kutular kullanıcıya arayüzün donduğunu düşündürür.
SIK KARIŞTIRILANLAR

Spinner'dan farkı. İskelet 'ne geleceğini' gösterir, spinner yalnız 'bekle' der. Yapı biliniyorsa iskelet daha çok bilgi verir ve bekleme daha kısa hissedilir. Ama yapı bilinmiyorsa iskelet uydurmak zararlıdır: gelmeyecek bir düzeni vaat etmiş olursun ve içerik geldiğinde ekran baştan kurulur.

Dönen yükleyici sayfasına git →

Boş durumdan farkı. İskelet 'veri YOLDA' der, boş durum 'veri YOK' der. İkisi karıştırıldığında ortaya en sinir bozucu arayüzlerden biri çıkar: sonsuza kadar parıldayan gri kutular. Veri geldi ve boşsa iskeleti bırakıp boş duruma geçmek zorundasın — bekleme bitmiştir, söylenecek şey değişmiştir.

Boş durum sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Dönen yükleyici spinner / loaderİlerleme çubuğu progress barBoş durum empty stateKart card

AYNI AİLEDE · GERI BILDIRIM