İskelet Ekranlar: Döndürücüler Yerine Ne Zaman Kullanılmalı?
İskelet ekranların ne olduğu, ne zaman rakiplerini geride bıraktıkları, gerçek içerikle eşleşecek şekilde nasıl tasarlanacakları ve performansa ya da erişilebilirliğe zarar vermeden onları nasıl canlandıracakları.
Ana nokta
İskelet ekranı, içeriğin yüklenirken düzenini gösteren tel çerçeve benzeri bir yer tutucudur. Tahmin edilebilir bir şekle sahip tam sayfalar ve listeler için kullanın; küçük alanlar veya bilinmeyen içerikler için bir döndürücü, uzun görevler için ise gerçek ilerlemeyi kullanın. İçerik geldiğinde hiçbir şeyin atlamaması için iskeletin gerçek düzene uymasını sağlayın.
İskelet ekranı nedir
Nielsen Norman Group, iskelet ekranını tel çerçeve benzeri bir görselle düzeni taklit eden bir yükleme sayfası için yer tutucu olarak tanımlar. Tam sayfa yüklemeleri için kullanılır ve algılanan yükleme süresini azaltır çünkü insanlar boş bir alan yerine gelecek olanın yapısını görür.
Hangisi ne zaman kullanılmalı
Göstergeyi içerikle ve beklemeyle eşleştirin:
- İskelet: akışlar, kartlar ve profiller gibi düzenin bilindiği sayfa veya liste yüklemeleri.
- Döndürücü: şeklini tahmin edemediğiniz küçük alanlar, düğmeler veya içerik.
- İlerleme çubuğu: Yüklemeler ve dışa aktarmalar gibi ölçebileceğiniz uzun görevler.
- Hiçbir şey: Bir göstergenin yalnızca titreştiği çok hızlı tepkiler.
İyi bir iskelet tasarlamak
İçerik geldiğinde sayfanın kaymaması için gerçek bileşen boyutlarını kullanın; bu aynı zamanda Kümülatif Düzen Kaydırma puanınızı da korur. Şekilleri basit tutun (resimler için bloklar, metinler için çubuklar), düşük kontrastlı griler kullanın ve her şeyi beklemek yerine her yer tutucuyu hazır olur olmaz gerçek içerikle değiştirin.
İskeletlerin animasyonu
NN/g, bazı iskeletlerin sistemin hala çalıştığını belirtmek için titreşen veya parıldayan bir animasyon içerdiğini belirtiyor. Yavaş ve incelikli tutun, düzen özellikleri yerine opaklığa veya dönüşüme animasyon uygulayın ve azaltılmış hareket açıkken durdurun. Yükleme bölgesine "Yükleme sonuçları" gibi erişilebilir bir etiket verin.
Hatırlanacak temel ilkeler
- İskeletler gelen içeriğin düzenini gösterir ve algılanan beklemeyi azaltır
- Tahmin edilebilir sayfa ve liste yüklemeleri için bunları kullanın; küçük veya bilinmeyen alanlar için iplik makinaları
- Düzen değişikliğini önlemek için gerçek boyutları eşleştirin
- Parıltıyı hafif tutun ve hareketi azaltmak için durdurun
- Ekran okuyucular için etiket yükleme bölgeleri
Sık sorulan sorular
Kaynaklar
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev