Skeleton Screen: Ne Zaman İşe Yarar, Ne Zaman Düzeni Kaydırır

Skeleton ekran, veri gelmeden önce sayfanın düzenini gri kutularla taklit eden bir bekleme katmanıdır. Beklemeyi kısaltmaz, kısa hissettirir. Yanlış yerde kullanıldığında ise içerik geldiği anda düzeni kaydırır ve spinner'dan daha kötü bir sonuç üretir.

Tek bir koşulda işe yarar

Skeleton ekranın çalışması için nihai düzenin önceden biliniyor olması gerekir. Kart ızgarası, sabit yükseklikli liste satırları, makale sayfası. Bunlarda kutuların yeri ve boyu bellidir, gerçek içerik geldiğinde hiçbir şey oynamaz.

Sonuç sayısı ya da satır yüksekliği önceden bilinmiyorsa iskelet yalan söylemeye başlar. Üç satırlık bir iskelet çizersiniz, cevap on bir sonuçla gelir, sayfa zıplar. Kullanıcı tam o sırada bir şeye tıklamak üzereyse yanlış öğeye basar. Bunun ölçüsü de var: Lighthouse'un layout kayması (CLS) değeri, iskeletli ve iskeletsiz halin farkını gösterir. Değer iskeletle birlikte yükseliyorsa iskelet orada zarar veriyordur.

Skeleton'ı genelde kart ve liste satırlarında kullanırım; tek bir düğmenin bekleyişini düğmenin kendi içine yerleşen küçük bir göstergeyle çözerim. Düğme yerinde kalır, metni değişir, sayfada hiçbir şey oynamaz.

Spinner, skeleton, ilerleme çubuğu

Üçü aynı problemi çözmez. Ayrım bekleme süresine ve beklenenin ne olduğuna göre yapılır. Nielsen'in yanıt süresi eşikleri bu bölmeyi hâlâ iyi tarif ediyor: bir saniyenin altındaki gecikme kesintisiz sayılır, on saniyeden sonra kullanıcının dikkati başka yere gider.

• Bir saniyenin altındaki beklemelerde gösterge koymayın. İskelet bir anlığına yanıp sönerse bekleme kısalmaz, ekran titremiş gibi görünür. Gerekirse göstergeyi 300 milisaniye geciktirin, veri o süre içinde gelirse hiç göstermeyin.
• Yapısı bilinen sayfa yüklemelerinde skeleton, tek bir modülün ya da satır içi bir işlemin beklemesinde spinner.
• Dosya yükleme, dışa aktarma, toplu işlem gibi ilerleyen süreçlerde ilerleme çubuğu. Bunlarda iskeletin anlamı yok, çünkü ortada dolacak bir düzen değil, bitecek bir iş var.

Sadece üst çubuğu ve kenarları gösteren, içerik alanını boş bırakan iskeletler ise faydasız. Kullanıcı orada bir yapı değil, bozulmuş bir sayfa görür.

Ekran okuyucu iskeleti görmez

Gri kutular görsel bir vaattir ve ekran okuyucuya hiçbir şey söylemez. Kullanıcı sayfanın çalıştığını bilmez, çünkü okunacak metin yoktur. Bekleyen bölgeye aria-busy="true" verin, veri gelince kaldırın; sonucu bildiren kısa bir canlı bölge (aria-live="polite") eklerseniz içerik geldiğinde "11 sonuç listelendi" gibi bir bilgi duyurulur. İskelet kutularının kendisi ise aria-hidden ile gizlenmeli, yoksa okuyucu boş öğeleri tek tek dolaşır.

Parıltı animasyonu

Soldan sağa kayan parıltı, sistemin çalıştığını hissettirmek için eklenir. Ölçüsü kaçtığında ekranın kendisi bir yükleme animasyonuna dönüşür ve gözü içerikten çeker. İki kural yeterli: hareket yavaş ve düşük kontrastlı olsun, bir de prefers-reduced-motion tercihinde tamamen dursun. Vestibüler duyarlılığı olan kullanıcılar için bu tercih bir incelik değil, gereklilik.

Animasyonun bir maliyeti daha var. Parıltı, sayfanın en yoğun olduğu anda, veri işlenip DOM kurulurken çalışır. Düşük donanımlı telefonlarda bu iki işin aynı anda yapılması gerçek yavaşlamaya yol açar. Efekti transform ve opacity üzerinden kurun, arka plan konumunu her karede değiştiren çözümler her yeniden boyamada düzeni yeniden hesaplattırır.

Uygulamada dikkat edilecekler

• İskelet kutusunun yüksekliği, yerine gelecek içeriğin gerçek yüksekliğiyle aynı olsun. Yaklaşık değer kayma üretir.
• Bilinen sayıda öğe yoksa iskelet satır sayısını sabit tutup listenin altına yer ayırın, böylece fazlalık aşağıya eklenir ve üstteki içerik oynamaz.
• Mobilde ve masaüstünde farklı düzen varsa iskelet de iki düzeni ayrı ayrı taklit etmeli.
• Hata durumunu unutmayın. İstek başarısız olduğunda iskelet sonsuza kadar parıldamamalı, yerini bir hata mesajına ve tekrar deneme seçeneğine bırakmalı.

İskelet bir performans çözümü değil

Skeleton ekran, iki saniyelik bir beklemeyi iki saniye olmaktan çıkarmaz. Yaptığı şey, o iki saniyeyi belirsiz olmaktan çıkarmaktır. Bu yüzden asıl iş hâlâ isteği hızlandırmakta: gereksiz veriyi çağırmamak, ilk ekranda görünen kısmı önce göndermek, önbelleği doğru kullanmak. İskelet bunların üstüne konan ince bir katmandır. Altta duran yavaşlık gerçekten büyükse, ne kadar zarif bir iskelet çizerseniz çizin kullanıcı sekmeyi kapatır.