Kısa cevap
CLS, beklenmeyen yerleşim kaymalarının sayfa deneyimi boyunca oluşturduğu görsel kararsızlığı ölçer.
Nerede işine yarar?
Boyutu ayrılmayan görsel, geç gelen içerik veya yazı tipi değişimi kaymaya yol açabilir. Kullanıcının bir düğmeye basmak isterken başka öğeye basması deneyimi bozabilir. Görsel alanlarının baştan ayrılması ve içerik değişimlerinin dikkatle tasarlanması yararlıdır.
Tanımdan uygulamaya, kendi denemene.
Bir cümlede uygulaması
Bir kart görseli yüklenmeden önce genişlik ve yükseklik oranını ayırmak.
Neyle karıştırılmamalı?
CLS kaymanın ne kadar sürdüğünü değil, yerleşimdeki beklenmeyen değişimin etkisini ölçer.
Tam dokunacakken yer değiştiren düğme.
Bir yazıyı okurken aşağıdaki bağlantıya dokunmak üzeresin. Üstteki görsel sonradan açılıyor, paragraf aşağı itiliyor ve parmağın başka bir bağlantıya denk geliyor. CLS, bu tür beklenmedik yerleşim hareketlerini değerlendirmek için kullanılan görsel kararlılık ölçüsüdür. Sorun yalnız estetik değildir. Kullanıcının gözle takip ettiği satır, dokunacağı hedef ve sayfaya duyduğu güven aynı anda etkilenebilir. Hızlı açılan ama sürekli yer değiştiren bir sayfa rahat bir deneyim sunmaz.
Yaygın başlangıç noktası medyaya yer ayrılmamasıdır. Tarayıcı görselin boyutunu öğrenene kadar boşluğu hesaplayamazsa sonraki içerik yanlış konumda çizilebilir. Genişlik ve yükseklik bilgisi ya da doğru oranlı bir kapsayıcı bu alanın önceden kurulmasına yardım eder. Ancak her görsele sabit yükseklik vermek de çözüm değildir; farklı ekranlarda kırpma, oran ve içerik ihtiyacı tasarımla birlikte ele alınmalıdır.
Font değişimi, üstten eklenen bildirimler, sonradan gelen reklamlar veya boyutu bilinmeyen gömülü içerikler de düzeni hareket ettirebilir. Örneğin bir rezervasyon alanı başlangıçta tek satırken veri geldikten sonra üç satıra dönüşebilir. Tasarım yalnız dolu ve ideal durumu çizmişse yüklenme anı hesaba katılmamıştır. İçeriğin yokluğu, yüklenmesi, başarısızlığı ve uzun hâli aynı yerleşim kararının parçalarıdır.
Her hareket kötü değildir ve her animasyon CLS üretmez. Kullanıcının bir bölümü açmasıyla beklediği genişleme ile sebepsiz bir sıçrama aynı deneyim değildir. Yine de bir hareketin ölçüme dahil olmaması otomatik olarak rahat olduğu anlamına gelmez. Uzun animasyonlar, yanlış odak yönetimi veya ekrandan kaçan bir düğme ayrı sorunlar yaratabilir. Ölçünün sınırlarını bilmek, tasarım sorumluluğunu ölçünün içine sıkıştırmamak demektir.
Bir içerik kartının yüklenme iskeleti de gerçek karta yakın bir alan kullanmalıdır. İki satırlık başlık için tasarlanmış dar bir yer tutucu, gerçek dört satırlık başlık geldiğinde komşularını itebilir. Ancak bütün kartlara aşırı büyük boşluk vermek de sayfanın ritmini bozar. Gerçek içerik dağılımına bakarak oran, minimum alan ve metin akışını birlikte seçmek daha dengeli olur. Kullanıcının yazı boyutunu artırdığı durumda alanların genişleyebilmesi gerekir. Kararlılığı içerik keserek elde etmeye çalışmak erişilebilirlik sorununu gizler; amaç görünür bilgiyle birlikte sakin bir yerleşim kurmaktır.
Açılmak başka, ansızın sıçramak başka.
Beklenen değişim
Kullanıcı içindekiler düğmesine basar ve menü kontrollü biçimde açılır. Tetikleyici ile sonuç arasında anlaşılır bir ilişki vardır; odak ve okuma sırası korunur. Böyle bir etkileşimde bile panelin hedefi ekran dışına sürüklememesi ve hareket azaltma tercihine uyması gerekir. Beklenebilirlik tasarımın bir özelliğidir.
Beklenmeyen kayma
Kullanıcı herhangi bir işlem yapmadan üstte yeni alan belirir ve dokunmak istediği hedef yer değiştirir. Bu, kişinin kurduğu konumsal hafızayı bozar. Sonradan gelen içerik için alan planlamak veya bildirimi akışı daha az bozan bir yerde sunmak gerekebilir. Çözüm yalnız animasyon süresini değiştirmek değildir.
İçerik yüklenirken yerini korumak
CLS, beklenmeyen yerleşim hareketlerini incelemeye yardımcı olur. Görseller için alan ayırmamak, sonradan üstten eklenen içerik veya yazı tipi değişimi sayfayı kaydırabilir. Kullanıcının okumakta olduğu bölgenin hareket etmesi yalnız estetik sorun değil, yanlış tıklama sebebi de olabilir.
- Görsel ve video için başlangıçtan itibaren alan ayır.
- Geç gelen duyuru ve bileşenleri mevcut içeriği itmeden yerleştir.
- Yazı tipi değişiminde satır kırılmalarını kontrol et.
CSS transform CLS oluşturur mu?
Transform normal belge akışını değiştirmediği için yerleşim kaymasıyla aynı mekanizma değildir. Yine de büyük veya beklenmedik hareket kullanıcıyı rahatsız edebilir. Bir ölçümün düşük olması bütün hareketlerin iyi tasarlandığı anlamına gelmez.
İşin içinde sorulacaklar.
CLS için iyi değer ne anlama gelir?
Core Web Vitals kapsamında iyi CLS eşiği 0,1 ve altıdır; değerlendirmede ziyaretlerin yüzde 75'lik dilimi kullanılır. Bu bir saniye değeri değildir. Ölçüm, kaymanın ekrandaki etkisi ve uzaklığıyla ilgili puanlardan oluşur. Tek bir kısa kaydın temiz çıkması bütün ziyaretlerde sorun olmadığını göstermez. Özellikle geç yüklenen alanları ve uzun sayfa kullanımını ayrıca düşünmek gerekir.
Bütün içerikleri sabit yüksekliğe kilitlemek gerekir mi?
Hayır. Sabit yükseklik uzun metni kesebilir, mobilde taşma yaratabilir veya erişilebilir yazı boyutlarında içeriği gizleyebilir. Amaç uygun alanı önceden tahmin etmek ve değişken içeriği taşıyan bir düzen kurmaktır. Görsel oranları, makul minimum yükseklikler ve gerçek veriye göre tasarlanmış durumlar farklı araçlardır. Hangi aracın kullanılacağı içeriğin niteliğine bağlıdır; tek bir CSS kuralı bütün alanlara uygulanmaz.
Font seçimi kararlılığı etkiler mi?
Evet, farklı fontların harf genişlikleri ve satır ölçüleri değişebilir. Başlangıçta kullanılan yazı tipi sonradan gelen fontla farklı satırlara kırılıyorsa çevredeki alanlar hareket edebilir. Font yükleme stratejisi kadar uygun fallback ölçüleri ve gerçek başlıklarla tasarım da önemlidir. Marka fontunu kaldırmadan önce hangi değişimin ne kadar yerleşim farkı yarattığını anlamak daha kontrollü bir karar sağlar.
CLS düşükse bütün hareketler doğru mu?
Hayır. Büyük bir görselin sürekli ölçeklenmesi, göz yoran arka plan hareketi veya düğmenin basınca küçülmesi başka kullanılabilirlik sorunları yaratabilir. Bunlar aynı ölçüyle bütünüyle açıklanmaz. Kararlı yerleşim, rahat hareket dili ve erişilebilir etkileşim birlikte düşünülür. Özellikle okuma yüzeyinde dekoratif hareketin içerikle yarışmaması gerekir. Bir metriğin iyi olması bütün tasarım kararlarının onaylandığı anlamına gelmez.
Okuma çizgisini koru.
Bir makale sayfasını kapak, başlık, yazı, öneriler ve footer olarak böl. Her bölüm için içerik gelmeden önceki alanı düşün. Kullanıcının gözünün ve parmağının hangi konumu beklediğini tarif et.
Kararlı bir sayfa, içeriğin nereye geleceğini önceden düşünür. Kullanıcı düğmenin peşinden koşmaz; tasarım, onun bıraktığı yerde kalır.
Bağlantılı kavramlar
- LCPLCP, sayfanın görünür alanındaki en büyük uygun içerik öğesinin gösterilme zamanını ölçen bir yükleme metriğidir.
- INPINP, bir sayfanın kullanıcı etkileşimlerine görsel yanıt verme gecikmesini değerlendiren etkileşim metriğidir.
- Responsive tasarımResponsive tasarım, arayüzün farklı ekran ölçülerinde içerik ve etkileşim önceliklerini koruyarak uyarlanmasıdır.