Karuseller için en iyi uygulamalar

Karusel, içeriği slayt gösterisi benzeri bir şekilde görüntüleyen bir UX bileşenidir. Döngüler “otomatik olarak oynatılabilir” veya kullanıcılar tarafından manuel olarak gezinilebilir. Karuseller başka yerlerde kullanılabilse de, çoğunlukla ana sayfalarda resimleri, ürünleri ve promosyonları görüntülemek için kullanılırlar.

Bu makalede, döngüler için performans ve kullanıcı deneyimiyle ilgili en iyi uygulamalar ele alınmaktadır.

Verim #

İyi uygulanmış bir karuselin kendi başına performans üzerinde çok az etkisi olmalı veya hiç etkisi olmamalıdır. Ancak döngüler genellikle büyük medya varlıkları içerir. Büyük varlıklar, bir döngüde veya başka bir yerde görüntülenmelerinden bağımsız olarak performansı etkileyebilir.

• LCP (En Büyük İçerikli Boya)

  Büyük, ekranın üst kısmındaki döngüler genellikle sayfanın LCP öğesini içerir ve bu nedenle LCP üzerinde önemli bir etkiye sahip olabilir. Bu senaryolarda, döngüyü optimize etmek LCP’yi önemli ölçüde iyileştirebilir. Karuseller içeren sayfalarda LCP ölçümünün nasıl çalıştığına dair ayrıntılı bir açıklama için bkz. Karuseller için LCP ölçümü bölüm.

• FID (İlk Giriş Gecikmesi)

  Döngüler minimum JavaScript gereksinimlerine sahiptir ve bu nedenle sayfa etkileşimini etkilememelidir. Sitenizin carousel’inde uzun süre çalışan komut dosyaları olduğunu keşfederseniz, carousel araçlarınızı değiştirmeyi düşünmelisiniz.

• CLS (Kümülatif Düzen Kaydırma)

  Şaşırtıcı sayıda atlıkarınca, CLS’ye katkıda bulunabilecek, karmakarışık, birleştirilmemiş animasyonlar kullanır. Otomatik oynatılan döngülere sahip sayfalarda bu, sonsuz CLS’ye neden olma potansiyeline sahiptir. Bu tip CLS tipik olarak insan gözü tarafından görülmez, bu da sorunun gözden kaçmasını kolaylaştırır. Bu sorunu önlemek için, birleştirilmemiş animasyonları kullanmaktan kaçının döngünüzde (örneğin, slayt geçişleri sırasında).

En iyi performans uygulamaları #

Dönen içeriği HTML kullanarak yükleyin #

Karusel içeriği, sayfa yükleme işleminin başlarında tarayıcı tarafından keşfedilebilmesi için sayfanın HTML işaretlemesi yoluyla yüklenmelidir. Döngü içeriğinin yüklenmesini başlatmak için JavaScript kullanmak, döngüleri kullanırken kaçınılması gereken en büyük performans hatası olabilir. Bu, görüntünün yüklenmesini geciktirir ve LCP’yi olumsuz etkileyebilir.

div class="slides">
img src="https://example.com/cat1.jpg">
img src="https://example.com/cat2.jpg">
img src="https://example.com/cat3.jpg">
&LT/div>

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Gelişmiş döngü optimizasyonu için, ilk slaydı statik olarak yüklemeyi ve ardından gezinme kontrollerini ve ek içeriği içerecek şekilde aşamalı olarak geliştirmeyi düşünün. Bu teknik, bir kullanıcının uzun süreli dikkatinin olduğu ortamlar için en uygun olanıdır; bu, içeriğin yüklenmesi için ek süre sağlar. Kullanıcıların yalnızca bir veya iki saniye takıldığı ana sayfalar gibi ortamlarda yalnızca tek bir resim yüklemek benzer şekilde etkili olabilir.

Düzen değişikliklerinden kaçının #

Slayt geçişleri ve gezinme kontrolleri, karusellerdeki en yaygın iki yerleşim düzeni kaynağıdır:

• Slayt geçişleri: Slayt geçişleri sırasında oluşan düzen kaymalarına genellikle DOM öğelerinin mizanpaja neden olan özelliklerinin güncellenmesi neden olur. Bu özelliklerden bazılarının örnekleri şunları içerir: left, top, widthVe marginTop. Düzen kaymalarını önlemek için bunun yerine CSS’yi kullanın transform bu öğeleri geçiş özelliği. Bu gösteri nasıl kullanılacağını gösterir transform temel bir atlıkarınca oluşturmak için.

• Gezinme kontrolleri: Karusel gezinme denetimlerini DOM’dan taşımak veya eklemek/kaldırmak, bu değişikliklerin nasıl uygulandığına bağlı olarak düzen kaymalarına neden olabilir. Bu davranışı sergileyen döngüler, bunu genellikle kullanıcının fareyle üzerine gelmesine yanıt olarak yapar.

Karuseller için CLS ölçümüyle ilgili bazı yaygın kafa karışıklığı noktaları şunlardır:

• Otomatik oynatma döngüleri: Slayt geçişleri, döngüyle ilgili düzen kaymalarının en yaygın kaynağıdır. Otomatik oynatma olmayan bir döngüde, bu düzen kaymaları tipik olarak bir kullanıcı etkileşiminden sonraki 500 ms içinde gerçekleşir ve bu nedenle Kümülatif Düzen Kaymasına (CLS) sayılmaz. Bununla birlikte, otomatik oynatılan döngüler için, bu düzen değişiklikleri potansiyel olarak CLS’ye sayılmakla kalmaz, aynı zamanda süresiz olarak tekrarlanabilir. Bu nedenle, bir otomatik oynatma bandının bir düzen kayması kaynağı olmadığını doğrulamak özellikle önemlidir.

• kaydırma: Bazı döngüler, kullanıcıların döngü slaytları arasında gezinmek için kaydırmayı kullanmasına izin verir. Bir öğenin başlangıç ​​konumu değişirse ancak kaydırma ofseti (yani, scrollLeft veya scrollTop) aynı miktarda (ancak ters yönde) değişir, bu, aynı çerçevede meydana gelmeleri koşuluyla bir düzen kayması olarak kabul edilmez.

Düzen kaymaları hakkında daha fazla bilgi için bkz. Düzen kaymalarında hata ayıklama.

Modern teknolojiyi kullanın #

Birçok site, döngüleri uygulamak için üçüncü taraf JavaScript kitaplıklarını kullanır. Halihazırda daha eski döngü araçlarını kullanıyorsanız, daha yeni araçlara geçerek performansı artırabilirsiniz. Daha yeni araçlar, daha verimli API’ler kullanma eğilimindedir ve jQuery gibi ek bağımlılıklar gerektirme olasılığı daha düşüktür.

Ancak, oluşturduğunuz döngünün türüne bağlı olarak JavaScript’e hiç ihtiyacınız olmayabilir. Yeni Kaydırma Yapış API, yalnızca HTML ve CSS kullanarak döngü benzeri geçişler gerçekleştirmeyi mümkün kılar.

İşte kullanımıyla ilgili bazı kaynaklar scroll-snap yararlı bulabileceğiniz:

Döngü içeriğini optimize edin #

Döngüler genellikle bir sitenin en büyük resimlerinden bazılarını içerir, bu nedenle bu resimlerin tamamen optimize edildiğinden emin olmak için zaman ayırmaya değer olabilir. Bir görüntü CDN’si kullanarak doğru görüntü biçimini ve sıkıştırma düzeyini seçme ve birden çok görüntü sürümü sunmak için srcset kullanma görüntülerin aktarım boyutunu azaltabilecek tekniklerdir.

Performans ölçümü #

Bu bölümde, döngülerle ilgili olduğu için LCP ölçümü ele alınmaktadır. Döngüler, LCP hesaplaması sırasında diğer herhangi bir UX öğesinden farklı şekilde ele alınmasa da, otomatik oynayan döngüler için LCP’yi hesaplama mekaniği yaygın bir kafa karışıklığı noktasıdır.

Karuseller için LCP ölçümü #

Karuseller için LCP hesaplamasının nasıl çalıştığını anlamanın kilit noktaları şunlardır:

• LCP, sayfa öğelerini çerçeveye boyandıkları şekliyle dikkate alır. LCP öğesinin yeni adayları, kullanıcı sayfayla etkileşime geçtiğinde (dokunma, kaydırma veya tuşlara basma) artık dikkate alınmaz. Bu nedenle, otomatik oynatılan bir döngüdeki herhangi bir slayt nihai LCP öğesi olma potansiyeline sahipken, statik bir döngüde yalnızca ilk slayt potansiyel bir LCP adayı olabilir.
• Eşit boyutta iki görüntü oluşturulursa, ilk görüntü LCP öğesi olarak kabul edilir. LCP öğesi yalnızca LCP adayı mevcut LCP öğesinden daha büyük olduğunda güncellenir. Bu nedenle, tüm döngü öğeleri eşit boyuttaysa, görüntülenen ilk resim LCP öğesi olmalıdır.
• LCP adaylarını değerlendirirken, LCP “görünür boyutu veya gerçek boyutu, hangisi daha küçükse” dikkate alır. Bu nedenle, otomatik oynatılan bir döngü, görüntüleri tutarlı bir boyutta görüntüler, ancak değişen boyutlarda görüntüler içerirse içsel boyutlar görüntü boyutundan daha küçük olanlar için, yeni slaytlar görüntülendikçe LCP öğesi değişebilir. Bu durumda, tüm görüntüler aynı boyutta gösteriliyorsa, en büyük gerçek boyuta sahip görüntü LCP öğesi olarak kabul edilecektir. LCP’yi düşük tutmak için, otomatik oynatılan bir döngüdeki tüm öğelerin aynı iç boyutta olmasını sağlamalısınız.

Chrome 88’de döngüler için LCP hesaplamasında yapılan değişiklikler #

itibariyle krom 88, daha sonra DOM’dan kaldırılan görüntüler, potansiyel olarak en büyük içerikli boyalar olarak kabul edilir. Chrome 88’den önce, bu resimler değerlendirme dışı bırakıldı. Otomatik oynatma döngülerini kullanan siteler için, bu tanım değişikliğinin LCP puanları üzerinde ya nötr ya da pozitif bir etkisi olacaktır.

Bu değişiklik, tepki olarak yapıldı. gözlem birçok site, önceden görüntülenen görüntüyü DOM ağacından kaldırarak karusel geçişleri uygular. Chrome 88’den önce, her yeni slayt sunulduğunda, önceki öğenin kaldırılması bir LCP güncellemesini tetikliyordu. Bu değişiklik yalnızca otomatik oynatılan döngüleri etkiler – tanım gereği, potansiyel olarak en büyük içerikli boyamalar, yalnızca bir kullanıcı sayfayla ilk kez etkileşime girmeden önce gerçekleşebilir.

Diğer hususlar #

Bu bölümde, döngüleri uygularken aklınızda bulundurmanız gereken kullanıcı deneyimi ve en iyi ürün uygulamaları ele alınmaktadır. Döngüler, işletme hedeflerinizi ilerletmeli ve içeriği gezinmesi ve okunması kolay bir şekilde sunmalıdır.

Navigasyonla ilgili en iyi uygulamalar #

Öne çıkan gezinme kontrolleri sağlayın #

Dönen gezinme kontrolleri, tıklaması kolay ve yüksek oranda görünür olmalıdır. Bu, nadiren iyi yapılan bir şeydir – çoğu döngüde hem küçük hem de incelikli gezinme kontrolleri bulunur. Tek bir rengin veya gezinme denetimi stilinin her durumda nadiren işe yarayacağını unutmayın. Örneğin, koyu bir arka planda açıkça görülebilen bir oku açık bir arka planda görmek zor olabilir.

Navigasyon ilerlemesini göster #

Karusel gezinme kontrolleri, toplam slayt sayısı ve kullanıcının bunlarda ilerlemesi hakkında bağlam sağlamalıdır. Bu bilgi, kullanıcının belirli bir slayda gitmesini ve hangi içeriğin daha önce görüntülendiğini anlamasını kolaylaştırır. Bazı durumlarda, yaklaşan içeriğin önizlemesini sağlamak (ister bir sonraki slaydın bir alıntısı isterse küçük resimler listesi olsun) da yardımcı olabilir ve etkileşimi artırabilir.

Mobil hareketleri destekleyin #

Mobil cihazlarda, geleneksel gezinme kontrollerine (ekran düğmeleri gibi) ek olarak kaydırma hareketleri desteklenmelidir.

Alternatif gezinme yolları sağlayın #

Çoğu kullanıcının tüm döngü içeriğiyle etkileşimde bulunması olası olmadığından, döngü slaytlarının bağlantı verdiği içeriğe diğer gezinme yollarından erişilebilir olmalıdır.

Okunabilirlik en iyi uygulamaları #

Otomatik oynatmayı kullanma #

Otomatik oynatmanın kullanılması neredeyse paradoksal iki sorun yaratır: ekrandaki animasyonlar kullanıcıların dikkatini dağıtma ve gözleri daha önemli içerikten uzaklaştırma eğilimindedir; aynı anda, kullanıcılar genellikle animasyonları reklamlarla ilişkilendirdiğinden, otomatik olarak oynatılan döngüleri yok sayarlar.

Bu nedenle, otomatik oynatmanın iyi bir seçim olduğu nadirdir. İçerik önemliyse, otomatik oynatmayı kullanmamak içeriğin görünürlüğünü en üst düzeye çıkarır; Dönen içerik önemli değilse, otomatik oynatmanın kullanılması daha önemli içerikten uzaklaşacaktır. Ek olarak, otomatik olarak oynatılan döngüleri okumak zor (ve can sıkıcı) olabilir. İnsanlar farklı hızlarda okur, bu nedenle bir döngünün farklı kullanıcılar için sürekli olarak “doğru” zamanda geçiş yapması nadirdir.

İdeal olarak, slayt gezintisi, gezinme kontrolleri aracılığıyla kullanıcı tarafından yönlendirilmelidir. Otomatik oynatmayı kullanmanız gerekiyorsa, kullanıcı fareyle üzerine geldiğinde otomatik oynatma devre dışı bırakılmalıdır. Ek olarak, slayt geçiş hızı, slayt içeriğini hesaba katmalıdır – bir slayt ne kadar çok metin içeriyorsa, ekranda o kadar uzun süre görüntülenmelidir.

Metin ve görselleri ayrı tutun #

Karusel metin içeriği, HTML işaretlemesi kullanılarak ayrı ayrı görüntülenmek yerine genellikle karşılık gelen görüntü dosyasına “işlenir”. Bu yaklaşım erişilebilirlik, yerelleştirme ve sıkıştırma oranları açısından kötüdür. Aynı zamanda, varlık yaratma konusunda herkese uyan tek bir yaklaşımı teşvik eder. Bununla birlikte, aynı görüntü ve metin biçimlendirmesi, masaüstü ve mobil biçimlerde nadiren eşit şekilde okunabilir.

özlü ol #

Bir kullanıcının dikkatini çekmek için yalnızca saniyenin çok küçük bir kısmı var. Kısa, isabetli metin, mesajınızın karşı tarafa ulaşma olasılığını artıracaktır.

Ürünle ilgili en iyi uygulamalar #

Döngüler, ek içeriği görüntülemek için ek dikey alan kullanmanın bir seçenek olmadığı durumlarda iyi çalışır. Ürün sayfalarındaki döngüler genellikle bu kullanım durumunun iyi bir örneğidir.

Ancak, döngüler her zaman etkili bir şekilde kullanılmaz.

• Karuseller, özellikle promosyon içeriyorlarsa veya otomatik olarak ilerliyorlarsa, kolayca yanılmış kullanıcıların reklamları için. Kullanıcılar, reklamları görmezden gelme eğilimindedir; bu, afiş körlüğü.
• Döngüler genellikle birden fazla departmanı yatıştırmak ve iş öncelikleri hakkında karar vermekten kaçınmak için kullanılır. Sonuç olarak, atlıkarıncalar, etkisiz içerikler için kolaylıkla bir çöplük alanına dönüşebilir.

Varsayımlarınızı test edin #

Karusellerin, özellikle ana sayfalardakilerin ticari etkisi değerlendirilmeli ve test edilmelidir. Dönen tıklama oranları, bir döngünün ve içeriğinin etkili olup olmadığını belirlemenize yardımcı olabilir.

alakalı ol #

Döngüler, net bir bağlamla sunulan ilginç ve alakalı içerik içerdiklerinde en iyi sonucu verir. İçerik, bir kullanıcıyı bir döngünün dışında meşgul etmiyorsa, onu bir döngüye yerleştirmek daha iyi performans göstermesini sağlamaz. Bir döngü kullanmanız gerekiyorsa, içeriğe öncelik verin ve her slaydın, kullanıcının bir sonraki slayda tıklamak isteyeceği kadar alakalı olduğundan emin olun.