Yükleme sırasında kartların kayması çoğu zaman yavaşlıktan değil, yer ayrılmamasından kaynaklanır. İskelet ekran tasarımı boş veri ekranından ayrıdır; veri gelirken yerleşimi kilitler. Bu rehber iskelet, dönen ikon ve kademeli görseli ne zaman seçeceğinizi netleştirir.
Sayfa açıldığında kartlar aşağı kayıyor, başlık bir anda uzuyor, düğme parmağınızın altından kaçıyorsa sorun çoğu zaman ham hız değil, eksik bir iskelet ekran tasarımıdır. Yerleşim, içerik oturana kadar sabitlenmemiştir.
İskelet ekran tasarımı, veri henüz gelmeden bloğun kaplayacağı alanı rezerve eder ve beklerken düzeni kilitler. Gri dikdörtgenler süs değildir; gerçek kartın yüksekliğini, aralığını ve hizasını önceden tutar.
Bu yazı boş veri ekranını konu dışına bırakır. Odak, yükleme sırasında iskelet, dönen ikon ve kademeli görsel arasında seçim yaparak zıplamayan bir arayüz kurmaktır.
Boş veri ekranı bekleyen ekran değildir
İki durum sık karışır. Biri istek hâlâ yoldayken oluşur. Diğeri istek bitmiş, kayıt yokken oluşur. Karışıklık hem yanlış mesaj üretir hem düzeni zıplatır.
Bekleyen ekranda yapı bellidir: ürün ızgarası, yorum listesi, sipariş özeti. Kullanıcıya “şimdi dolacak bir yer” göstermek gerekir. Boş veri ekranında ise yapı dolmaz; sepet boştur, arama sonuçsuzdur, henüz proje eklenmemiştir. Orada sonraki adım vardır, yer tutucu blok yoktur.
Yanlış sıra şöyledir: istek sürmesine rağmen “ürün bulunamadı” yazmak, ardından kartların birden belirmesi. Kullanıcı önce yokluk okur, sonra yerleşim kayar. Doğru sıra terstir. Önce iskelet, veri gelince gerçek içerik; kayıt yoksa iskeleti kaldırıp boş duruma geçmek.
Hata da boş durum değildir. Zaman aşımı veya sunucu cevabı gelmezse iskeleti sonsuza bırakmayın. Kısa bir açıklama ve yeniden dene eylemi, belirsiz gri bloklardan daha dürüsttür.
Düzen neden zıplar
Zıplama, sonradan büyüyen veya sonradan eklenen bir kutudan doğar. Yükleme göstergesi bu kutuyu küçültürse sorun çözülmez, taşınır.
- En ve boy oranı ayrılmamış görsel veya video, metni aşağı iter.
- İskelet tek satırdır, gerçek başlık iki satıra kırılır.
- Rozet, kargo notu veya kampanya çubuğu içerikten sonra görünür.
- Yazı tipi geç gelince satır sonları değişir, düğmeler kayar.
Bu yüzden “iskelet koyduk” demek yetmez. İskelet gerçek içerikten kısa veya dar kalırsa kullanıcı yine aynı kaymayı yaşar. Amaç süslemek değil, nihai kutunun ölçüsünü erken tutmaktır.
Ölçü ve konum kararları burada görsel hiyerarşi ile aynı işi görür. Başlık, görsel ve eylem alanı yüklerken de aynı ağırlıkta durmalıdır. Hiyerarşi ancak içerik gelince kurulursa, göz ve parmak o ana kadar yanlış yere alışır.
İskelet, dönen ikon ve kademeli görsel
Üç araç aynı işi yapmaz. Biri yerleşimi kilitler. Biri tek bir işlemin sürdüğünü söyler. Biri görselin kendisini kademeli doldurur. Seçimi moda değil duruma göre yapın.
| Durum | Ne gösterin | Asıl işi |
|---|---|---|
| Liste veya kart düzeni belli, veri yolda | İskelet | Yükseklik, ızgara ve hizayı sabitlemek |
| Tek işlem, yapı yok: kaydet, öde, gönder | Dönen ikon veya düğme içi durum | Beklemeyi o eyleme bağlamak |
| Metin hazır, görsel ağır | Oran kutusu ve kademeli görsel | Metni oturtup görseli sonradan doldurmak |
| İstek bitti, kayıt yok | Boş durum | Sonraki adımı göstermek |
| İstek başarısız | Hata ve yeniden dene | İskeleti durdurmak |
Tam sayfa dönen ikon, yapıyı siler. Kullanıcı nereye bakacağını kaybeder; içerik gelince her şey bir anda yerleşir. Kısa bir kaydetme için bu kabul edilebilir. Ürün ızgarası, pano veya profil gibi tanıdık bir sayfada ise iskelet daha doğru bir vaattir.
Kademeli görsel iskeletin rakibi değildir. Fotoğrafın kutu içine oturması ayrı, listenin satır yüksekliğinin tutulması ayrı karardır. İkisini aynı sayfada birlikte kullanmak çoğu vitrinde daha sakin durur.
Yerleşimi kilitleyen iskelet ekran tasarımı
İyi bir iskelet, nihai bileşenin silüetidir. Yuvarlak avatar gerçekte de yuvarlaktır. Fiyat satırı gerçekte de sağa yaslıdır. Üç sütunlu ızgara yüklerken iki sütuna düşmez.
KepezWeb işlerinde yükleme halini yayından sonra eklenen bir katman gibi ele almıyoruz. Kartın iç boşluğu, başlık satır sayısı ve düğme yüksekliği tasarım kararının parçasıdır; iskelet bu kararın kopyasıdır.
Aynı ızgara, aynı boşluk
Gerçek listede kartlar arasında 16 birim varsa iskelette 8 birim bırakmayın. Üst menü ve filtre çubuğu içerikle birlikte zıplıyorsa iskelet yalnız içeriği değil, o çubuğun yüksekliğini de tutmalıdır.
Kaç öğe göstereceğinizi abartmayın. Tek bir ince çubuk, ardından yirmi kartın belirmesi yine kayma üretir. Ekranda gerçekten duracak kadar yer tutucu koyun. Masaüstünde bir ızgara satırı, telefonda iki üç kart çoğu vitrin için yeterlidir. Kalanı kaydırınca gelir; ilk bakışta düzen oturmuş olmalıdır.
Gerçek metne yakın blok yüksekliği
Başlık iki satıra açılacaksa iskelet başlığı da iki satır yer kaplasın. Tek satırlık ince bir çizgi, uzun ürün adında mutlaka büyür.
Açıklama metnini üç satır gösterip gerçekte sekiz satır basmak da aynı hatadır. İskelet, ortalama gerçek uzunluğa yakın olsun. Aşırı uzun metinler zaten tasarımda satır sınırına alınmalıdır; yükleme bunu gizlemez, erteler.
Düğme ve fiyat gibi sabit yükseklikli parçaları bire bir kopyalayın. İnce bir çubuğun yerine dolu bir düğme gelirse parmak hedefi kayar. Mobilde bu kayma yanlış tapaya kadar gider.
İskeleti küçülten animasyondan kaçının
Parıltı yatay aksın, kutunun kutusunu değiştirmesin. Ölçeklenen, yükseklik animasyonu yapan veya içeriği “yukarı açan” iskelet, kilitlediğini sandığınız düzeni tekrar bozar.
İçerik geldiğinde de patlatmayın. Opaklık ile geçiş çoğu zaman yeterlidir. Yeni blokların yukarıdan kayarak girmesi, altındaki her şeyi iter.
İskelet içeriğin kendisi değil, içeriğin oturacağı yerdir. Yer içerikten küçükse kullanıcı yine zıplar.
Görselleri kademeli doldurun, metni zıplatmayın
Görsel gecikmesi metin gecikmesinden ayrı yönetilmelidir. Başlık, fiyat ve düğme metin olarak erken gelebilir. Fotoğraf hâlâ yoldayken bu metinlerin yeri oynamamalıdır.
Kutu için en-boy oranını baştan verin. Kare vitrin kare kalsın, yatay kahraman yatay kalsın. Oran yoksa tarayıcı görseli okuyana kadar yüksekliği sıfır kabul eder; sonra sayfa açılır.
Kademeli görsel üç sakin yoldan biri olabilir: düz bir zemin rengi, çok küçük bir bulanık önizleme veya düşük ayrıntılı bir ilk katman. Hangisini seçerseniz seçin, kutu boyu değişmesin. Renk, fotoğrafın ortalama tonuna yakınsa geçiş daha az sıçrar; yine de spekülatif bir “marka rengi şart” kuralı yoktur, ürün fotoğrafına bakarak karar verin.
Ürün detay sayfasında galeri bu işin sık kırıldığı yerdir. Ana görsel kutusu sabit kalmazsa başlık, varyant ve sepete ekle alanı sürekli kayar. Küçük önizlemeler de aynı oranı paylaşsın; biri dikdörtgen biri kare olursa seçim anında düzen titrer.
İkon yer tutucuyu fotoğrafın üstüne dönen bir tekerlek olarak koymak ancak tek ve büyük bir görselde, süre belirsizken anlamlıdır. On iki ürün kartının her birinde ayrı tekerlek, ızgarayı gürültüye çevirir. Kartta sessiz bir zemin, sayfada bir iskelet yeter.
Dönen ikonu tam sayfa perdesi yapmayın
Dönen ikon bir işlem göstergesidir. “Bu düğmeye bastınız, iş sürüyor” der. Sayfanın bütün yapısını silip ortada döndürmek, yerleşimi kilitlemez; gizler.
Şu anlarda ikon daha temiz durur:
- Form gönderimi ve ödeme onayı gibi tek hamle.
- Kısa süren bir süzme veya kayıt işlemi, mevcut listenin üstünde.
- Modal içinde, arka plan zaten kilitliyken.
Şu anlarda ikon zarar verir:
- Kullanıcının tanıdığı bir liste veya pano yenilenirken.
- İlk açılışta tüm sayfayı beyaza boyayıp bekletirken.
- İskelet zaten varken üstüne ikinci bir bekleme bindirirken.
İkisini üst üste kullanmayın. Tam sayfa perde, ardından iskelet, ardından içerik üç ayrı bekleyiştir. Tek geçiş seçin: yapı belliyse iskelet; yapı yoksa ikon.
Düğmede metni “kaydediliyor” diye değiştirmek, ayrı bir tekerlek şovundan daha nettir. Metin kaybolmasın, durum metne eklensin. Böylece hem ne olduğu okunur hem düğme boyu zıplamaz.
Geçiş, hareket ve erişilebilirlik
Yerleşimi kilitlemek görsel bir iş gibi durur; aslında okuyucu ve klavye kullanıcısı için de bir vaattir. Bekleme boyunca odak kaybolmamalı, gizli bir katman tıklamayı yutmamalıdır.
Ekran okuyucuya “içerik yükleniyor” demeden yalnız gri blok bırakmak, görsel kullanıcıya verdiğiniz bilgiyi diğerine vermemek olur. Kısa, bir kez duyulan bir durum metni yeter. İçerik oturunca aynı bölge meşgul olmaktan çıksın. Ayrıntılı odak ve etiket kararları için erişilebilir web tasarımı rehberindeki klavye ve odak ilkeleri yükleme anına da uygulanır.
Hareketi azaltmayı tercih edenlerde parıltıyı kapatın. Statik blok, kilit işini yine görür. Sürekli kayan ışık hem dikkat dağıtır hem de bazı kullanıcılarda rahatsız eder. Animasyon varsa kutu ölçüsüne dokunmasın.
Gri on gri kontrastı da yoklamadan geçmeyin. İskelet arka plandan ayırt edilmiyorsa yerleşim kilitli olsa bile sayfa boş sanılır. Çok koyu bir zeminde biraz daha açık bir blok, açık zeminde biraz daha koyu bir blok yeter; dekoratif gradyan şart değildir.
Yayına almadan önce şu listeyi bir kez yürütün:
- İskelet, gerçek kartla aynı ızgara ve iç boşluğu kullanıyor mu?
- Başlık ve fiyat blokları gerçek satır sayısına yakın mı?
- Görsel kutularında oran var mı, metin görseli bekliyor mu?
- Kayıt yoksa iskelet kalkıp boş duruma geçiyor mu?
- Hata halinde iskelet sonsuza kalıyor mu?
- Tam sayfa ikon ile iskelet aynı anda mı dönüyor?
- Hareket azaltma açıkken parıltı duruyor mu?
- Bekleme bir kez duyuruluyor, içerik gelince kapanıyor mu?
Sıkça Sorulan Sorular
İskelet ekran tasarımı her sayfada gerekir mi?
Hayır. Sunucudan tam metin ve düzenle gelen sade bir tanıtım sayfasında iskelet çoğu zaman gereksizdir. Liste, pano, arama sonucu, sepet özeti gibi veri sonradan oturan yüzeylerde yerleşimi kilitlemek için gerekir.
İskelet ne kadar süre görünsün?
Sabit bir saniye hedefi koymayın. Bölümün gerçek içeriği yerini alınca iskelet kalksın. Uzun sürüyorsa tüm sayfayı bekletmek yerine hazır olan bloğu gösterin; görseli kademeli doldurun. Süre uydurmak, yavaş cevabı gizlemez.
Parıltılı animasyon şart mı?
Değil. Asıl iş ölçü ve orandır. Parıltı, kutu doğruysa isteğe bağlı bir ipucudur. Kutu yanlışsa parıltı kaymayı daha fark edilir kılar.
Boş sonuçta iskelet bırakılır mı?
Bırakılmaz. İstek bittiğinde ya içerik, ya boş durum, ya hata vardır. Gri blok ancak yolculuk sürerken durur. Aksi halde kullanıcı hâlâ yüklendiğini sanır ve sonraki adımı göremez.
Dönen ikon ile iskeleti ne zaman birlikte kullanırım?
Aynı yüzeyi ikisiyle örtmeyin. İskelet sayfa veya listenin yerini tutar. İkon tek bir eylemin yerini tutar. Filtre uygulanırken liste iskelete dönebilir; filtre düğmesinin kendisinde kısa bir durum metni yeter, ikinci bir tam sayfa tekerlek eklemeyin.
Sonuç ve Sonraki Adım
Yükleme halini sonradan yapıştırılan bir süs gibi bırakmayın. Web tasarım işinde iskelet, ikon ve görsel dolumu baştan aynı düzenin parçası olmalıdır. KepezWeb ile sayfanızın beklerken nasıl duracağını netleştirmek için teklif alabilirsiniz; mevcut akışı birlikte bakıp zıplamayan bir yerleşim planlarız.
