Skeleton Screen Nedir? Yükleniyor Hissini Azaltan İskelet Ekran Tasarımı

Bu rehberde Talha Aslan ve ekibi olarak skeleton screen tasarımını baştan sona anlatıyoruz. Spinner (dönen yükleme simgesi) ile farkını, hangi sayfalarda işe yaradığını, CLS sorununa nasıl yol açmayacağını ve erişilebilirlik tarafını ele alıyoruz. Ayrıca sahada en sık gördüğümüz kötü örnekleri ve bir kontrol listesini paylaşıyoruz. Amacımız teori değil; yarın kendi sitenizde uygulayabileceğiniz net kararlar vermek.

Kısa bir not: skeleton screen bir hız optimizasyonu değildir. Sayfanız yine aynı sürede gelir. Ancak bekleme süresini daha net ve daha az sinir bozucu hale getirir. Bu ayrımı baştan bilmek, yanlış beklentiyle tasarım yapmanızı engeller.

Skeleton screen ile spinner arasındaki fark nedir?

Spinner, "bir şeyler oluyor, bekleyin" der ama neyin geleceğini söylemez. Skeleton screen ise "şu düzende bir içerik geliyor" der. Yani ilki yalnız durum bildirir, ikincisi hem durum hem yapı bildirir. Bu fark küçük durur; oysa ziyaretçinin bekleme sırasında zihninde kurduğu tabloyu tamamen değiştirir.

Nielsen Norman Group'un skeleton screen rehberi bu ayrımı net çizer. Rehbere göre iskelet ekranlar tam sayfa yüklemelerinde, spinner ise tek bir modülün (örneğin bir video kutusunun veya panel kartının) yüklenmesinde daha uygundur. Ayrıca uzun süren işlemlerde, örneğin dosya yüklemede, ilerleme çubuğunu öne çıkarır.

Tablodaki son satır ayrı bir tartışma konusudur. Tam ekran yükleme perdesinin ne zaman zarar verdiğini preloader kullanmalı mı yazımızda ayrıntılı anlattık; burada yalnız iskelet tarafına odaklanıyoruz.

Algılanan performans neden önemlidir?

Algılanan performans, sayfanın ölçülen hızından bağımsız olarak kullanıcının hissettiği hızdır. Örneğin iki sayfa aynı sürede yüklenebilir; ancak biri boş ekranda bekletir, diğeri hemen bir yapı gösterir. İkincisi çoğu ziyaretçiye daha hızlı gelir, çünkü bekleme anı belirsiz değildir.

Belirsiz bekleme can sıkar. Ziyaretçi sayfanın donup donmadığını, bağlantının kopup kopmadığını bilemez ve geri tuşuna yönelir. Skeleton screen bu belirsizliği azaltır. Böylece ziyaretçi gözünü içeriğin geleceği yere çevirir ve okumaya hazır olur.

Öte yandan algılanan performans ölçülen hızın yerini tutmaz. Google'ın sıralama sinyallerinden biri olan Core Web Vitals ölçümleri gerçek kullanıcı verisine dayanır. Bu ölçümlerin genel çerçevesini Core Web Vitals rehberimizde bulabilirsiniz. Kısacası iskelet ekran, hızlı bir siteyi daha da akıcı gösterir; yavaş bir siteyi kurtarmaz.

Skeleton screen hangi durumlarda işe yarar?

Kural basit: içerik bir düzene sahipse ve yüklenmesi belirgin bir süre alıyorsa iskelet düşünün. Nielsen Norman Group rehberi bekleme süresi bir saniyenin altındaysa hiçbir göstergenin gerekmediğini, hatta kısa süreli yanıp sönmenin rahatsız edici olabileceğini belirtir. Uzun işlemler için ise ilerleme çubuğunu ve süre tahminini önerir.

Sahada en çok işe yaradığı yerler şunlardır:

• Ürün listeleri ve kategori sayfaları: kart ızgarası önceden belli olduğu için iskelet çok doğal durur.
• Haber ve blog akışları: başlık, özet ve küçük görsel tekrarlayan bir kalıp oluşturur.
• Profil sayfaları: avatar dairesi, ad satırı ve bilgi bloklarını kolayca taklit edersiniz.
• Panel ve hesap ekranları: veri sunucudan geldiği için birkaç saniyelik bekleme sıktır.
• Arama sonuçları: sonuç satırlarının sayısı ve biçimi önceden bellidir.

Buna karşılık statik bir kurumsal sayfada, metin zaten HTML ile birlikte geliyorsa iskelete gerek yoktur. Bu nedenle önce içeriğin gerçekten geç gelip gelmediğini ölçün, sonra karar verin.

Liste, kart ve profil sayfasında iskeleti nasıl çizersiniz?

Her sayfa tipinin kendine özgü bir iskeleti vardır. Ortak ilke şudur: iskelet, gerçek içeriğin sade bir gölgesi olmalıdır. Ne fazlası ne eksiği.

Liste sayfasında her satır için solda kare bir görsel alanı, sağda iki veya üç yatay çubuk çizersiniz. İlk çubuk başlığı temsil eder ve daha kalındır. Alttakiler özet satırlarıdır ve son satır biraz kısa kalır, çünkü gerçek paragraflar da genellikle tam satırla bitmez.

Kart ızgarasında ise kartın tamamını çizersiniz: üstte görsel oranında bir blok, altta başlık çubuğu, fiyat veya tarih için kısa bir çubuk. Örneğin gerçek kart görseli 4:3 oranındaysa iskelet bloğu da 4:3 olmalıdır.

Profil sayfasında avatar için daire, ad için orta uzunlukta bir çubuk, altında istatistik kutuları yer alır. Böylece ziyaretçi, bilgiler gelmeden önce sayfanın nasıl okunacağını anlar.

Skeleton screen CLS sorununa yol açar mı?

Doğru kurulursa hayır; yanlış kurulursa evet, hem de ciddi şekilde. CLS (Cumulative Layout Shift, kümülatif düzen kayması), sayfa öğelerinin beklenmedik şekilde yer değiştirmesini ölçer. web.dev'in CLS açıklamasına göre 0,1 ve altındaki değer iyi kabul görür.

Sorun şuradan doğar: iskeleti bir ölçüde çizersiniz, gerçek içerik başka bir ölçüde gelir. Örneğin iskelet kartı 200 piksel yüksekliğindedir, gerçek kart 320 pikselle gelir. O anda altındaki her şey aşağı kayar ve ziyaretçinin okuduğu satır kayar. Dolayısıyla iskelet, kaymayı önlemek yerine kaymanın sebebi olur.

CLS'nin teknik ayrıntılarını ve diğer kaynaklarını CLS nedir yazımızda anlattık. Burada yalnız iskelete özgü kısmı ele alıyoruz: ölçü eşleşmesi.

İskelet ölçüsü gerçek içerikle nasıl eşleşir?

Altın kural: iskelet, gerçek içeriğin kaplayacağı alanı birebir rezerve etmelidir. Bunun için birkaç pratik yöntem kullanırız.

1. Görsel alanlarına sabit en boy oranı verin. Böylece görsel geldiğinde kutu büyümez.
2. Metin çubuklarının yüksekliğini gerçek satır yüksekliğine eşitleyin. Örneğin yazı tipi boyutu ve satır aralığı neyse çubuk ile boşluk toplamı da o olmalıdır.
3. Liste uzunluğunu tahmin edin. Sunucu genellikle 12 ürün döndürüyorsa 12 iskelet kartı çizin, 4 değil.
4. Değişken uzunluktaki içeriğe minimum yükseklik tanımlayın. Ancak bu yüksekliği gerçek verinin ortalamasına göre seçin.
5. İskeleti ayrı bir bileşen yerine gerçek bileşenin bekleme hali olarak kurun. Böylece tasarım değiştiğinde iskelet de kendiliğinden değişir.

Son madde en çok gözden kaçan noktadır. Ayrı tasarlanan iskeletler zamanla gerçek bileşenden uzaklaşır. Üç ay sonra ekip kartı yeniden tasarlar, iskelet eski ölçüde kalır ve kayma başlar.

Skeleton screen animasyonu nasıl olmalı?

İskeletin üzerinde soldan sağa geçen hafif bir parıltı veya yavaşça nabız gibi atan bir ton değişimi yaygındır. Bu animasyon "hâlâ geliyor, takılmadım" mesajını güçlendirir. Ancak Nielsen Norman Group, animasyonun ölçülü kullanılmasını, aksi halde dikkat dağıtabileceğini ve erişilebilirlik sorunu yaratabileceğini vurgular.

Biz şu dengeyi öneriyoruz:

• Parıltı yavaş ve düşük kontrastlı olsun; göz yormasın.
• Tüm kartlar aynı anda aynı ritimde parlasın; dağınık ritim huzursuzluk yaratır.
• Kullanıcı işletim sisteminde hareketi azaltma tercihini açtıysa animasyonu durdurun, sabit gri kutu bırakın.
• Animasyon için yalnız GPU dostu özellikleri (dönüşüm ve opaklık) kullanın; düzeni yeniden hesaplatan özelliklerden kaçının.

Son madde performansla ilgilidir. Ağır bir animasyon ana iş parçacığını meşgul eder ve sayfanın tepki süresini uzatabilir. Yani bekleme hissini azaltmak için eklediğiniz şey, etkileşimi yavaşlatmamalıdır.

Skeleton screen erişilebilirlik açısından nelere dikkat etmeli?

Görme engelli bir kullanıcı ekran okuyucuyla gezerken gri kutuları görmez. Dolayısıyla iskeletin ona bir şey anlatması için ek bilgi gerekir. Aksi halde ekran okuyucu ya hiçbir şey söylemez ya da anlamsız boş öğeleri tek tek okur.

Burada aria-busy kavramı devreye girer. MDN'deki aria-busy açıklamasına göre bu durum özelliği, bir öğenin hâlâ değiştiğini yardımcı teknolojilere bildirir; böylece yardımcı teknoloji değişiklikleri duyurmak için yükleme bitene kadar bekler. Yükleme sürerken bölgeyi meşgul olarak işaretlersiniz, içerik gelince işareti kaldırırsınız.

Ayrıca şu adımları uygularız:

• Dekoratif iskelet kutularını yardımcı teknolojilerden gizleyin; tek tek okunmasınlar.
• Bölgeye kısa ve yalnız ekran okuyucunun duyacağı bir "içerik geliyor" metni ekleyin.
• İçerik geldiğinde odak noktasını zorla taşımayın; kullanıcı nerede kaldıysa orada kalsın.
• İskelet renginin arka planla kontrastı hafif olsun, ama gerçek içerikle karışacak kadar koyu olmasın.

Erişilebilirliğin genel standartlarını merak ediyorsanız web erişilebilirliği ve WCAG yazımıza göz atabilirsiniz.

WCAG hareketli içerik kuralı iskeletleri etkiler mi?

Kısmen etkiler. W3C'nin Duraklat, Durdur, Gizle açıklaması otomatik başlayan, beş saniyeden uzun süren ve diğer içerikle birlikte gösterilen hareketli içerik için durdurma imkânı ister. Aynı belge, sayfadaki tek içerik olan bir yükleme animasyonunun bu kapsamın dışında kalabileceğini belirtir.

Ancak iskeletler çoğu zaman sayfanın yalnız bir bölümünü kaplar. Örneğin üst menü ve başlık hazırdır, alttaki ürün listesi iskelet halinde parlar. Bu durumda animasyon diğer içerikle yan yana durur. Bu nedenle yükleme uzarsa parıltıyı durdurmak veya sabit kutuya geçmek güvenli bir tercihtir.

Pratikte uyguladığımız kural şudur: animasyon birkaç saniye içinde ya biter ya da sabit kalır. Böylece hem kullanıcıyı yormazsınız hem de standarda yakın kalırsınız.

Skeleton screen hangi kötü örneklerde ters teper?

Yıllar içinde denetlediğimiz sitelerde iskelet ekranın işe yaramadığı, hatta zarar verdiği örneklerle sık karşılaşıyoruz. En yaygın hataları sıralıyoruz:

1. Uyumsuz düzen: İskelet üç sütunlu kart gösterir, gerçek sayfa tek sütunlu liste olarak gelir. Ziyaretçi iki farklı düzen görür ve kafası karışır.
2. Sonsuz iskelet: İstek hata verir ama iskelet ekranda kalır. Ziyaretçi sonsuza kadar bekler, hata mesajı hiç gelmez.
3. Kısa yüklemede yanıp sönme: İçerik çok hızlı gelir, iskelet bir an görünüp kaybolur ve göz kırpması gibi rahatsız eder.
4. Her şeyi iskelete çevirmek: Menü, logo ve altbilgi gibi zaten hazır öğeler de gri kutuya döner. Sayfa gereksiz yere boş kalır.
5. Agresif parıltı: Yüksek kontrastlı, hızlı ışık dalgası göz yorar.
6. Yanlış sayı: Ekranda sekiz iskelet kartı belirir, iki ürün gelir; sayfa birden kısalır.

Bu hataların çoğu tasarım aşamasında değil, geliştirme sonrasında ortaya çıkar. Dolayısıyla iskeleti mutlaka yavaş bağlantı simülasyonuyla test edin.

Çerçeve gösteren iskelet neden zayıf bir tercihtir?

Nielsen Norman Group üç iskelet türünden söz eder: statik içerik ve görsel taklidi, animasyonlu iskelet ve yalnız çerçeveyi gösteren iskelet. Son türde yalnız üst bilgi, alt bilgi ve arka plan yer alır; içeriğin yapısı hiç ipucu vermez.

Bu türü önermiyoruz, çünkü iskeletin asıl değeri olan yapı bilgisini sunmaz. Üstelik bekleme uzarsa sayfa bozuk izlenimi verir. Ziyaretçi ortası boş bir şablonla karşılaşır ve sitenin çöktüğünü düşünebilir.

Bunun yerine içerik alanında en azından birkaç satırlık gerçekçi bir taslak gösterin. Böylece ziyaretçi neyi beklediğini bilir.

Skeleton screen ne kadar süre ekranda kalmalı?

İskelet, içerik gelene kadar ekranda kalır; ama iki uçta dikkat isteyen durumlar vardır. Birincisi çok kısa yüklemelerdir. İçerik birkaç yüz milisaniyede geliyorsa iskeleti hiç göstermemek veya kısa bir gecikmeyle göstermek daha iyidir. Aksi halde yanıp sönme oluşur.

İkincisi uzun yüklemelerdir. İstek beklenenden uzun sürerse iskeletin yanına küçük bir durum mesajı eklemek veya bir süre sonra hata durumuna geçmek gerekir. Örneğin sayfa belirli bir süreden sonra "İçerik yüklenemedi, yeniden deneyin" mesajı göstermelidir.

Süre eşiklerini sabit bir rakama bağlamıyoruz, çünkü sitenizin gerçek verisine göre karar vermelisiniz. Gerçek kullanıcı ölçümlerinize bakın ve iskeletin ortalama ne kadar ekranda kaldığını görün.

Görseller ve lazy load ile iskelet nasıl birlikte çalışır?

Görseller çoğu zaman sayfanın en geç gelen parçasıdır. Bu nedenle görsel alanı iskeletin en önemli bileşenidir. Sabit oranlı bir kutu, görsel gelene kadar yeri tutar; görsel gelince kutu dolar ve hiçbir şey kaymaz.

Tembel yükleme (lazy load) kullanılan sayfalarda ekran dışındaki görseller kullanıcı kaydırdıkça gelir. Burada da aynı mantık geçerlidir: görsel alanına önceden ölçü vermek gerekir. Lazy load'un SEO ve hız etkisini lazy load nedir yazımızda ele aldık.

Öte yandan sayfanın en büyük görselini, yani genellikle üstteki ana görseli tembel yüklemeye bırakmayın. Bu görsel geç gelirse iskelet uzun süre ekranda kalır ve en büyük içerik boyaması da gecikir.

Skeleton screen SEO'yu etkiler mi?

Dolaylı olarak etkileyebilir. İskeletin kendisi bir sıralama faktörü değildir. Ancak yanlış kurulumu CLS'yi bozar; CLS de sayfa deneyimi ölçümlerinden biridir.

Daha önemli bir risk içerik görünürlüğüdür. Bazı sitelerde içeriğin tamamı tarayıcıda JavaScript ile sonradan gelir ve ilk HTML yalnız iskeletten oluşur. Bu yapıda arama motoru botu sayfayı işlerken içeriğe ulaşmakta zorlanabilir. Dolayısıyla önemli metinleri sunucu tarafında üretmek, iskeleti yalnız gerçekten geç gelen parçalar için kullanmak daha sağlam bir yoldur.

Kısacası skeleton screen kullanıcı deneyimi aracıdır. SEO tarafında yapmanız gereken, iskeletin içeriği gölgelememesini ve düzeni kaydırmamasını sağlamaktır.

Skeleton screen ile boş durum ekranı nasıl ayrışır?

İskelet "içerik geliyor" der; boş durum ekranı ise "burada henüz içerik yok" der. İkisini karıştırmak sık rastladığımız bir hatadır. Örneğin kullanıcının sepeti boşsa, sunucu yanıtı gelince iskeleti kaldırıp net bir boş durum mesajı göstermelisiniz.

Aksi halde ziyaretçi gri kutulara bakmaya devam eder ve hâlâ bir şey beklediğini sanır. Bu da sonsuz iskelet hatasının bir türüdür. Bu nedenle her iskelet için üç çıkış tanımlayın: içerik geldi, içerik yok, hata oluştu.

• İçerik geldi: İskelet yerini gerçek içeriğe bırakır, düzen kaymaz.
• İçerik yok: İskelet kaybolur, kısa bir açıklama ve bir sonraki adım için buton belirir.
• Hata oluştu: İskelet kaybolur, sade bir hata mesajı ve yeniden deneme seçeneği çıkar.

Bu üç durumu tasarım dosyasında baştan çizmek, geliştirme sırasında unutulan senaryoları ortadan kaldırır. Üstelik ekip içinde "iskelet ne zaman biter?" sorusunu da netleştirir.

İskelet ekran metin yoğunluğunu nasıl yansıtmalı?

Metin çubuklarının uzunluğu küçük ama etkili bir ayrıntıdır. Tüm satırları aynı uzunlukta çizerseniz iskelet yapay durur. Gerçek metinde satırlar farklı yerlerde biter; dolayısıyla iskelette de son satırı kısa tutmak daha doğal bir görüntü verir.

Başlık çubuklarını gövde çubuklarından kalın ve kısa tutun. Örneğin bir kart başlığı genellikle tek veya iki satırdır; özet ise iki üç satır sürer. İskelet bu oranı yansıtırsa ziyaretçi içerik gelmeden hiyerarşiyi okur.

Öte yandan çok fazla ayrıntıdan da kaçının. Her ikon, her rozet, her küçük etiket için ayrı gri kutu çizmek iskeleti kalabalıklaştırır. Ana blokları gösterin, küçük süsleri atlayın. Kısacası iskelet bir taslaktır, kopya değil.

Renk tonunda da aynı sadelik geçerli. Tek bir nötr gri ve onun bir ton açığı çoğu tasarıma yeter. Koyu temalı sitelerde ise arka plandan biraz açık bir ton seçin; böylece iskelet her iki temada da okunur kalır.

Sayfa geçişlerinde iskelet nasıl davranmalı?

Tek sayfa uygulaması mantığıyla çalışan sitelerde kullanıcı bir bağlantıya tıkladığında sayfa yeniden açılmaz; yalnız içerik bölümü değişir. Bu geçişte iskelet çok işe yarar, çünkü kullanıcı tıklamasının karşılık bulduğunu hemen görür.

web.dev'in CLS açıklaması da bu noktaya değinir: kullanıcı etkileşiminden hemen sonra gelen ve beklenen değişiklikler sorun sayılmaz; hatta bir istek bittiğinde içeriği kaydırmak yerine hemen bir yükleme göstergesi göstermek daha iyidir. Yani tıklamanın hemen ardından iskeleti göstermek, düzen açısından güvenli bir yoldur.

Ancak geçişte eski içeriği silip iskelete dönmek her zaman doğru değildir. Örneğin filtre değiştiğinde mevcut ürünleri soluklaştırıp üzerine küçük bir gösterge koymak, sayfayı tamamen griye çevirmekten daha az sarsıcıdır. Bu tercihi sayfanın kullanım biçimine göre yapın.

Tasarım sisteminde iskelet bileşenini nasıl belgelersiniz?

Birden fazla sayfa tipi olan sitelerde iskeleti her ekip üyesinin kendi yorumuna bırakmak tutarsızlık yaratır. Bu nedenle iskeleti tasarım sisteminizde ayrı bir durum olarak belgelemenizi öneriyoruz. Her bileşenin yanında "yükleme hali" de tanımlı olmalı.

Belgede şu bilgilere yer verin:

• İskelet rengi, açık ve koyu tema için ayrı değerler.
• Köşe yuvarlaklığı: gerçek bileşenle aynı.
• Metin çubuğu yüksekliği ve satır aralığı.
• Animasyonun hızı, yönü ve hareket azaltma tercihinde nasıl durduğu.
• Kaç adet iskelet öğesi çizileceği ve bu sayının nereden geldiği.
• İçerik yok ve hata durumlarında ekranda ne çıkacağı.

Böylece yeni bir sayfa eklendiğinde geliştirici iskeleti sıfırdan icat etmez; hazır kuralı uygular. Üstelik tasarım güncellendiğinde iskeletin de aynı belgeden güncellenmesi kolaylaşır. Örnek senaryo: bir blog sitesi yazı kartını yeniler ve belge sayesinde iskelet kartı da aynı gün yeni ölçüye geçer. Sonuçta kayma riski baştan ortadan kalkar.

Kısacası iskelet, sonradan eklenen bir süs değil, bileşenin bir yaşam evresidir. Onu bu şekilde ele aldığınızda bakım yükü de belirgin biçimde azalır.

Skeleton screen tasarımı için kontrol listesi nedir?

Yayına almadan önce şu listeyi tek tek işaretleyin:

• İskelet düzeni gerçek sayfa düzeniyle aynı mı?
• Görsel alanlarının en boy oranı sabit mi?
• Metin çubuklarının yüksekliği gerçek satır yüksekliğine eşit mi?
• İskelet kart sayısı sunucunun döndürdüğü ortalama sayıya yakın mı?
• Hata durumunda iskelet kayboluyor ve net bir mesaj geliyor mu?
• Çok kısa yüklemelerde yanıp sönmeyi engelliyor musunuz?
• Hareketi azaltma tercihine uyuyor musunuz?
• Yükleme bölgesi yardımcı teknolojiye meşgul olarak bildiriyor musunuz?
• Menü, logo gibi hazır öğeleri iskelete çevirmekten kaçındınız mı?
• Yavaş bağlantı simülasyonunda düzen kayması oluyor mu?

Bu listeyi geçen bir iskelet, ziyaretçiye gerçekten yardım eder. Listeden birkaç madde eksikse iskelet ekranı açmak yerine önce o maddeleri düzeltin.

Skeleton screen tasarımını kim kurmalı?

İskelet, tasarımcı ile geliştiricinin birlikte karar vermesi gereken bir bileşendir. Tasarımcı düzeni ve tonu belirler; geliştirici ölçüleri, durumları ve erişilebilirlik işaretlerini kurar. İki taraf ayrı çalışırsa yukarıda saydığımız uyumsuzluklar ortaya çıkar.

Örnek senaryo: bir e-ticaret sitesi kategori sayfasına iskelet eklemek istiyor. Tasarımcı Figma'da şık bir parıltı efekti çiziyor. Geliştirici ise iskeleti ayrı bir bileşen olarak kodluyor ve kart sayısını sabit dört yapıyor. Sonuçta sayfa açılırken dört kart beliriyor, ardından on iki kart gelip sayfayı uzatıyor. Ortak bir planla bu sorun baştan önlenebilirdi.

Siteniz için bu bölümü baştan doğru kurmak isterseniz web tasarım hizmetimiz kapsamında iskelet durumlarını, hata ekranlarını ve ölçü sistemini birlikte planlıyoruz.

İskelet ekranı nasıl test edersiniz?

Test etmenin en kolay yolu tarayıcının geliştirici araçlarında ağ hızını yavaşlatmaktır. Böylece iskeleti saniyelerce görür ve gerçek içeriğe geçişi gözle izlersiniz. Geçiş anında herhangi bir öğe yer değiştiriyorsa ölçü uyuşmazlığı vardır.

Ayrıca şu testleri öneriyoruz:

1. Mobil ve masaüstü genişliklerde ayrı ayrı bakın; iskelet her kırılım noktasında doğru olmalı.
2. İsteği bilerek başarısız kılın ve hata durumunu kontrol edin.
3. Ekran okuyucuyla sayfayı açın ve neyin duyurulduğunu dinleyin.
4. İşletim sisteminde hareketi azaltma ayarını açıp animasyonun durduğunu doğrulayın.
5. Gerçek kullanıcı ölçümlerinde CLS değerini yayından önce ve sonra karşılaştırın.

Testleri tek kişiye bırakmayın. Tasarımcı düzenin doğruluğuna, geliştirici ölçü ve durumlara, içerik sorumlusu ise metin uzunluklarının gerçekçi olup olmadığına baksın. Örneğin ürün adları çoğu zaman tasarımdaki örnek addan uzundur; bu fark iskeletin yüksekliğini doğrudan etkiler. Dolayısıyla gerçek veriyle test etmek, örnek veriyle test etmekten her zaman daha güvenilir sonuç verir. Ayrıca farklı tarayıcılarda bir tur atmak, yazı tipi farklarından doğan küçük kaymaları da yakalar.

Bu testler birkaç saat sürer; ancak canlıda fark edilmeyen bir kaymanın haftalarca kullanıcıyı rahatsız etmesinden çok daha ucuzdur.

Skeleton screen her siteye uygun mu?

Hayır. Az içerikli, sunucu tarafında hızlı üretilen sayfalarda iskelet gereksiz bir katmandır. Örneğin tek sayfalık bir tanıtım sitesinde metin ve görseller zaten ilk yüklemeyle gelir. Burada iskelet eklemek yalnız kod ve bakım yükü getirir.

Buna karşılık veri ağırlıklı, sık güncellenen, kullanıcıya göre değişen sayfalarda iskelet çok değerlidir. Panel ekranları, ürün listeleri, mesaj kutuları ve arama sonuçları bu gruba girer.

Karar verirken şu soruyu sorun: ziyaretçi şu an bir şey bekliyor mu ve beklediği şeyin bir düzeni var mı? İki cevap da evetse iskelet düşünmeye değer. Arayüzdeki diğer sık hataları merak ediyorsanız arayüz UX hataları yazımız iyi bir başlangıçtır.

Sitenizde iskelet ekranı birlikte mi kuralım?

Skeleton screen küçük bir ayrıntı gibi durur; ama doğru kurulduğunda bekleme anını sakinleştirir, yanlış kurulduğunda sayfayı kaydırır ve güveni zedeler. Ölçü sistemi, hata durumu, animasyon dengesi ve erişilebilirlik birlikte düşünülmelidir. Bu dört başlık tek bir planın parçasıdır.

Talha Aslan ve ekibi olarak yeni sitelerde ve yenileme projelerinde yükleme durumlarını tasarımın baştan bir parçası olarak ele alıyoruz. Sitenizin liste, kart veya panel ekranlarında bu bölümü sizin yerinize kurmamızı isterseniz web tasarım hizmeti sayfamızdan teklif isteyebilirsiniz. Sayfa tiplerinizi inceleyip size uygun kapsamı ve süreyi içeren bir teklif hazırlıyoruz.