Web siteniz tüm ürünleri sağlayabilir, ancak sayfalarınız yavaş yükleniyorsa bunların hiçbiri önemli değildir. Portent tarafından yapılan aramaya göre, yükleme süresinin her ek saniyesi ile dönüşüm oranları ortalama %4,42 düşüyor. İnsanlar sadece hız istemiyor – onu bekliyorlar.
Bu günlerde, hedef kitlenizin çoğu muhtemelen yüksek performanslı web siteleriyle (Facebook’larınız, YouTube’larınız, Instagram’larınız vb.) düzenli olarak etkileşime giriyor, bu da onların beklentilerinin ziyaret ettikleri herhangi bir web sitesi kadar yüksek olduğu anlamına geliyor.
Bu korkutucu görünebilir, ancak bir avantajı var: Web sitenizi daha hızlı hale getirmenin yanı sıra, kullanıcıların web sitenizi hızlı olmasa bile daha hızlı olduğunu düşünmelerini sağlamanın yolları var.
Bu yazıda, böyle bir yöntem olan iskelet ekranları ele alacağım. Ne olduklarını, neden işe yaradıklarını ve kullanıcıların ilgisini çekmek için ne zaman kullanacaklarını açıklayacağız.
Önerilen makale: sosyal medya siteleri hakkında bilgi almak ve güncel sosyal medya haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
“İskelet ekran” terimi, 2013 yılında ürün tasarımcısı Luke Wroblewski tarafından algılanan bekleme süresinin azaltılmasıyla ilgili bir blog gönderisinde tanıtıldı. Gönderide, sayfa içeriğinin kademeli olarak ortaya çıkarılmasının, kullanıcının dikkatini yüklenmekte olan içeriğe ve yükleme süresinin kendisine nasıl çevirdiğini açıklıyor. Wroblewski’nin ilk uygulamalarından biri olan Polar’da kullanılan bir iskelet ekran örneğini görebiliriz:
Bu ekranları soldan sağa doğru incelerken, bir tel kafesten farklı olarak, sayfanın temel yapısını önizleyen bir iskelet ekranla yükleme işleminin nasıl başladığını görüyoruz. Önce iskelet ekran görünür, ardından ekran, tam sayfa işlenene kadar yavaş yavaş içerikle dolar.
Orijinal gönderiden bu yana, Wroblewski’nin yaklaşımı büyük web siteleri, web uygulamaları ve mobil uygulamalar tarafından geniş çapta benimsendi.
Birkaç web sitesi örneğine daha bakalım. İşte YouTube’dan bir tane: Ana sayfaya girdiğinizde, önce bu iskelet ekranı görürsünüz:
Kısa bir süre sonra, son sayfa içeriği onun yerini alır:
İşte Facebook’tan başka bir örnek. Kullanıcıların bir sayfayı yüklediklerinde ilk gördükleri şey budur:
… ve işte tamamen oluşturulmuş sayfa:
Bazı iskelet ekranlar bir animasyon bileşeni de ekler. Bunun gibi soldan sağa hareket eden degradelere sahip iskelet ekranları görmek yaygın bir durumdur:
Animasyonlu bir iskelet ekranı kendiniz kodlamak için izleyebileceğiniz birkaç öğretici vardır. Bunu öneriyoruz:
İskelet ekranlar neden çalışır?
İskelet ekranlar, sayfaların gerçekten daha hızlı yüklenmesini sağlamaz. Bunun yerine, sayfaların daha hızlı yüklendiğini hissettirmek için tasarlanmıştır.
İskelet ekranlar, döndürücüler ve diğer yükleme animasyonları ile benzer bir işlev görür: kullanıcının içeriğin yüklenmesi için biraz beklemesi gerektiğine dair görsel bir işaret.
Bununla birlikte, eğiricilerin aksine, iskelet ekranlar bir ilerleme yanılsaması yaratır. Dönen animasyon, içerikle ilgisizdir ve bize daha ne kadar beklememiz gerekeceği konusunda hiçbir şey söylemez. İskelet ekranlarla, sanki içeriğin ortaya çıkmasını izliyormuşuz gibi. Sonuç olarak, kullanıcılar, bekleme süresi aynı olsa bile, yükleme sürelerini iskelet ekran gösterildiğinde, dönen veya boş ekran gösterildiğinden daha kısa olarak algılar.
Açıkça söylemek gerekirse, iskelet ekranlar biz farkında olmadan daha iyi bir kullanıcı deneyimi için bizi kandırır. Bir düşünün: Bu tekniğin daha önce kullanıldığını neredeyse kesinlikle gördünüz, ancak neler olduğunu biliyor muydunuz?
Sitenizde İskelet Ekranlar Nasıl Kullanılır?
İskelet ekranlar, daha kısa yükleme süreleri algısı vererek web sitenizdeki kullanıcı deneyimini iyileştirebilecek yöntemlerden biridir. Yine de, her yükleme senaryosu için mükemmel çözüm değiller.
Genel olarak, iskelet ekranlar en iyi şekilde çalışır:
Yoğun kaynak kullanan sayfalar: Örneğin, birden fazla arka plan komut dosyası gerektiren sayfaların yüklenmesi daha uzun sürer. Bu, eksiksiz bir sayfa oluşturmak için çeşitli kaynaklardan veri çeken web uygulamalarında yaygındır.
Görüntü ağırlıklı web sayfaları: Aynı anda birden çok görüntü yüklemeniz gerekiyorsa, iskelet ekran iyi bir yer tutucu olabilir. Bu sayfalar için önce, algılanan yükleme süresini azaltmak için benzer bir teknik olan yavaş yüklemeyi uygulamayı düşünün.
Ve bunlardan kaçınmanız gereken bazı durumlar şunlardır:
Düşük performansın yerine geçmesi için: İskelet ekranlar sonsuza kadar çalışmaz ve yükleme süreleri çok uzun uzadığında sonunda etkilerini kaybeder. İçeriği gerçekten daha hızlı yüklemek için web sitenizi daha da optimize edebiliyorsanız, her zaman önce bunu takip edin. Yükleme sürelerini düşürme konusunda yeniyseniz, Web Sitesi Performansı için Nihai Kılavuzumuz başlamak için harika bir yerdir.
Hızlı yüklenen sayfalarda: 500 milisaniyeden daha kısa sürede yüklenen sayfalar için, iskelet ekranlar muhtemelen deneyimde bir fark yaratmayacaktır.
Videolar: Kullanıcılar, video arabelleğe almayı hala döndürücülerle ilişkilendirir. Sayfanıza bir video yüklenirken her zaman iskelet ekranlardan kaçının.
Daha uzun işlemler: Yüklemeler, indirmeler, dosya dönüştürmeleri ve tamamlanması daha uzun süren diğer işlemler, ilerleme çubuğu gibi farklı bir görsel ipucu kullanmalıdır.
Oluşturulan içerikle eşleşmeyen iskelet ekranlar: İskelet ekranlarınızı boyut ve yerleşim açısından nihai içeriğe mümkün olduğunca yakın hale getirmeye çalışın. Kullanıcılar, mantıksal olarak takip etmeyen içeriğin ardından bir iskelet ekran gördüklerinde, bu onların beklentilerini alt üst eder ve herhangi bir faydayı ortadan kaldırır.
Son olarak, tüm UX optimizasyonlarında olduğu gibi, imkanınız varsa, iskelet ekranları ziyaretçileriniz üzerinde test etmenizi öneririz. Araştırmalar onları etkili bulsa da bu, hedef kitleniz üzerinde çalışacaklarının garanti edildiği anlamına gelmez. İskelet ekranlar kafa karışıklığına bile neden olabilir, ancak bunu bilmenin tek yolu onu kullanıcılarınızla test etmektir.
İskelet Ekranlar: Seslerinden Daha Az Ürkütücü
Yapabileceğiniz herhangi bir küçük UX iyileştirmesi, özellikle web sitenizin ne kadar hızlı çalıştığı söz konusu olduğunda, rakiplerinize karşı size avantaj sağlayacaktır. Diğer performans optimizasyonlarının yanı sıra, iskelet ekranlar, kullanıcıların içeriğinize yatırım yapmasını sağlamak için değerli bir taktiktir.
Oh, ve bir şey daha: İsimlerine rağmen, tüm yıl boyunca iskelet ekranları kullanabilirsiniz. Cadılar Bayramı’na kadar beklemenize gerek yok. 🎃
Pazarlama Uygulamaları 