Skeleton Ekran ve Yükleme Durumu Tasarımı: Hangi Gösterge, Ne Zaman
Yükleme durumu, bekleme anında kullanıcıya sistemin çalıştığını ve neyin geleceğini gösterir. Skeleton, ilerleme çubuğu ve dönen simge arasında nasıl seçim yapılacağını öğrenin.
Bir bakışta
- Yükleme göstergesi bekleme algısını yönetir. Gerçek hızı artırmaz ama belirsizliği azaltır; hız iyileştirmesini tamamlar.
- Gösterge, süreye ve içerik yapısına göre seçilir. Bilinen yapı için iskelet, ölçülebilir iş için ilerleme çubuğu, kısa işler için küçük simge.
- Çok kısa beklemede gösterge göstermemek daha iyidir. Gecikmeli başlatma titremeyi önler; görününce asgari süre kalmalıdır.
- İskelet ekran gerçek yerleşimi yansıtır. Aynı ızgara ve boyutlar kullanılır; içerik gelince sayfa kaymaz.
- Yükleme, boş ve hata ayrı durumlardır. Zaman aşımı bir hata ekranına, yeniden dene yoluna bağlanmalıdır.
Yükleme durumu neden tasarlanır
Veri sunucudan gelirken ekranda ne görüneceği, çoğu zaman en son düşünülen tasarım kararıdır. Oysa kullanıcının arayüzle bir etkileşimdeki ilk deneyimi çoğunlukla bekleme anıdır. Boş beyaz ekran, kullanıcıya uygulamanın donduğunu ya da bozulduğunu düşündürür; yanıp sönen içerik ve sayfa atlamaları ise güveni zedeler.
Yükleme durumu iki iş yapar. Önce bilgilendirir: sistem çalışıyor, bir şey geliyor. Ayrıca bekleme algısını yönetir: aynı süre, belirsiz bir boşlukta beklemekten çok, ilerleme sezilen bir ekranda beklemekle daha kısa hissedilir. Bu iş hızı artırmaz, ama hızlı hissettirir; gerçek hız iyileştirmesinin yerini tutmaz, onu tamamlar.
Yükleme durumu tasarlarken sorulacak soru şudur: kullanıcı bu ekranda ne kadar bekleyecek, ve ne beklediğini biliyor mu? Cevap, hangi göstergenin uygun olduğunu belirler.
Doğru göstergeyi seçmek
Yükleme göstergelerinin yaygın biçimleri şunlardır: dönen simge (spinner), ilerleme çubuğu, iskelet ekran (skeleton) ve iyimser güncelleme. Her biri farklı bir bekleme türüne uyar.
Dönen simge, belirsiz sürede biten küçük işler içindir: bir düğmeye basıldı, işlem sürüyor. Süre uzadıkça belirsizlik rahatsız eder, çünkü kullanıcı ilerleme göremez. İlerleme çubuğu, süresi ya da ilerleyişi ölçülebilen işlerde (dosya yükleme, çok adımlı işlem) kullanılır; ilerlemeyi yalan söylemeyen bir çubuk güven verir. Çubuğun gerçek ilerlemeyle ilgisi yoksa, kullanıcı bunu fark eder ve güveni kaybedersiniz.
İskelet ekran, içeriğin şeklini önceden gösteren gri yer tutucu bloklardır. Sayfa yapısı biliniyorsa (liste, kart, profil, tablo) en iyi sonucu verir: kullanıcı neyin geleceğini ve nerede duracağını görür, içerik yerine oturur. İyimser güncelleme ise sonuç başarılı olacak varsayımıyla arayüzü hemen günceller (beğeni, mesaj gönderme); sunucudan hata dönerse geri alınır.
Bu seçimde belirleyici ölçütler şunlardır: beklemenin uzunluğu ve içerik yapısının önceden bilinip bilinmediği.
Gösterge, bekleme süresine ve içerik yapısının bilinirliğine göre seçilir
Gösterge seçimi
Bekleme süresine göre davranış
Çok kısa beklemelerde gösterge hiç göstermemek bile daha iyidir. Çok kısa sürecek bir işlem için iskelet ekranı parlatıp söndürmek, ekranın titremesine yol açar ve yavaş hissettirir. Bu yüzden göstergeyi kısa bir gecikmeyle başlatın; veri bu sürede gelirse hiç görünmesin. Gösterge göründüyse de çok kısa süre içinde kaybolmasın: asgari bir görünme süresi vermek titremeyi önler.
Orta uzunlukta beklemelerde iskelet ekran ya da dönen simge iş görür. Uzun beklemelerde ise belirsizlik tehlikelidir: kullanıcıya ne olduğunu, yaklaşık ne kadar süreceğini ve beklemeden çıkıp daha sonra dönebileceğini söyleyin. Çok uzun işler (rapor üretme, büyük içe aktarma) için sayfada bekletmek yerine arka planda çalıştırıp bitince bildirmek daha iyi bir deneyimdir.
Bekleme uzadıkça gösterge ve bilgilendirme de artar
Süreye göre davranış
- AnlıkGösterge yokGecikmeyle başlatılan gösterge hiç görünmez; geçiş titremez.
- Kısa beklemeİskelet ya da küçük simgeİçeriğin şekli ya da çalışan işlem gösterilir.
- Uzun beklemeİlerleme ve açıklamaNe olduğunu ve beklemeden ayrılıp dönülebileceğini söyle.
- Çok uzun işArka plana alBitince bildirim ver; kullanıcıyı sayfada tutma.
İyi bir iskelet ekran nasıl çizilir
İskelet ekranın işi gerçek içeriğin yerini ve ölçüsünü yansıtmaktır; kendi başına dikkat çekmesi gerekmez. Gerçek yerleşimle aynı ızgarayı ve boşlukları kullanın, başlık, görsel ve metin bloklarını gerçek boyutlarına yakın çizin. İçerik geldiğinde sayfa yerinden oynamıyorsa kullanıcı atlamayı fark etmez. Kaymayı önlemek için görsel ve kartlara önceden yer ayırın.
Blokları fazla ayrıntılı çizmeyin: ikon ve düğme şekilleri gibi her şeyi taklit etmek gereksizdir, gri dikdörtgenler yeter. Tek tip bir gri ton ve çok hafif bir ışıma ya da nabız animasyonu yaşam hissi verir. Animasyonu kullanıcının hareket azaltma tercihine uyarlayın: tercih açıksa animasyon durup sabit bir yer tutucu kalmalıdır.
Bilgiyi parça parça getirmek de mümkündür. Önce kabuk ve başlıklar, sonra ana içerik, en son ikincil bölümler gelirse kullanıcı beklerken bile çalışabilir. Bunu yaparken her bölümün kendi yükleme durumu olsun; tek bir büyük iskelet yerine bağımsız parçalar, sayfanın en yavaş parçasını beklemeden ilerlemeyi sağlar.
Yükleme, boş ve hata durumlarını ayırmak
Bu durumlar birbirine karıştırılmamalıdır. Yükleme, "içerik geliyor" anlamına gelir; boş durum, "yüklendi ve gösterecek bir şey yok" der; hata durumu ise "yüklenemedi" der. Yüklemeden doğrudan boş ekran gösterilirse, kullanıcı içeriğin olmadığını sanır; hata ekrana hiç yansımazsa iskelet sonsuza dek döner.
Zaman aşımı için bir üst sınır belirleyin. Veri belirli bir süre içinde gelmezse iskelet yerine bir hata mesajı ve yeniden dene düğmesi gösterin. Boş ve hata ekranlarının tasarımı için ilgili rehbere bakabilirsiniz. Yükleme sürerken kullanıcının yapabileceği bir şey varsa (iptal, geri dönmek, başka bir bölüme geçmek) bu seçenek engellenmemelidir.
Erişilebilirlik ve performans
Görsel olarak gri bloklar gören kullanıcı yükleme durumunu anlar; ekran okuyucu kullanıcısı için aynı bilgi metinsel olarak da verilmelidir. Yüklenen bölgeyi meşgul olarak işaretlemek ve yükleme bittiğinde içeriğin hazır olduğunu duyurmak, bu bilgiyi yardımcı teknolojilere taşır. Süslü iskelet blokların kendisi okunmamalı, yalnızca anlamlı bir durum mesajı duyurulmalıdır.
Hareketli göstergeler dikkat dağıtabilir ya da bazı kullanıcılarda rahatsızlık yaratabilir; sistemdeki hareket azaltma tercihine saygı gösterin. Dönen simge tek başına bir bilgi taşımaz: yanına kısa bir metin ("Yükleniyor" ya da yapılan işin adı) ekleyin.
İskelet ekran, gerçek performansın yerini tutmaz. Sayfa gereksiz yere yavaşsa, önce ağ isteklerini azaltmak, görselleri küçültmek ve veriyi önceden getirmek gerekir; iskelet bu iyileştirmeleri tamamlar.
Sık yapılan hatalar
Tekrarlayan hatalar: her bekleme için aynı dönen simgeyi kullanmak, gerçek içerikle uyuşmayan iskelet çizmek, içerik gelirken sayfanın kayması, çok kısa beklemelerde titreyen göstergeler, hata durumunu planlamamak, sonsuz süren yükleme ve animasyonları hareket tercihine bağlamamak.
Tasarım aşamasında her ekran için durumları (yükleniyor, boş, hata) ayrı ayrı çizin ve geliştiriciye birlikte teslim edin; bu, sonradan eklenen gelişigüzel çözümlerin önüne geçer. Bunları yavaş ağ koşulunda gerçek cihazda deneyin: hızlı bir bağlantıda fark edilmeyen sorunlar yavaş bağlantıda ortaya çıkar.
Mindset programlarında nerede çalışılır
Yükleme ve iskelet ekran tasarımı, UX/UI eğitimlerinde UI Tasarım Temelleri başlığında bileşen durumlarıyla birlikte ele alınır. Arayüz durumlarını eksiksiz düşünmesi gereken UX ve arayüz tasarımcıları, tasarımı geliştiriciye durum bazlı teslim etme alışkanlığı kazanır.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
Skeleton ekran her zaman spinner'dan mı iyidir?
Hayır. İçeriğin yapısı biliniyorsa iskelet daha bilgi vericidir, ancak yapının önceden belli olmadığı ya da çok kısa süren işlerde küçük bir dönen simge daha uygundur. Karar, beklemenin uzunluğuna ve içerik yapısına göre verilir; farklı göstergeler aynı sayfada farklı yerlerde de kullanılabilir.
İskelet ekranı animasyonlu mu yapmalıyım?
Hafif bir ışıma ya da nabız hareketi yaşam hissi verir, ama zorunlu değildir. Animasyon kullanırsanız kullanıcının hareket azaltma tercihine uyun; bu tercih açıksa sabit gri bloklar gösterin. Animasyon bilgiye değil, hissiyata hizmet eder.
Yükleme göstergesi ne kadar süre görünmeli?
Bir kural sabitlemek yerine şu davranışları uygulayın: göstergeyi kısa bir gecikmeyle başlatın ki hızlı gelen veriler için hiç görünmesin, görünürse de çok kısa parlayıp kaybolmasın diye asgari bir görünme süresi tanıyın. Kesin süreleri kendi ürününüzde kullanıcı testiyle belirleyin.
İskelet ekran erişilebilirliği nasıl etkiler?
Ekran okuyucu kullanıcıları gri blokları görmez; yükleme durumu metinsel olarak da iletilmelidir. Bölgeyi meşgul diye işaretleyip yükleme bittiğinde bildirmek yaygın bir yoldur. Süs niteliğindeki blokların okunmaması ve anlamlı kısa bir durum mesajının verilmesi gerekir.
Veri hiç gelmezse ne yapmalıyım?
İskeleti sonsuza dek tutmayın. Zaman aşımı sonrasında ne olduğunu açıklayan, yeniden denemeye izin veren bir hata durumu gösterin. Ağ yokken ya da sunucu hatası olduğunda mesaj farklı olabilir; bu durumlar ayrı tasarlanıp geliştiriciye birlikte teslim edilmelidir.