Bir sayfayı izlemeye başladığınızda ilk günler her şey yolundadır. Sonra ilk yanlış alarm gelir: saat göstergeci. Bir dakika sonra stok sayacı. Sonra "ilgili yazılar" bloğu.
Üç alarmdan sonra sisteme güvenmeyi bırakırsınız. Bu yazı, o üç alarmın neden geldiğini ve sistemin neden susturulmadan ayakta kalacağını anlatıyor.
Neden dinamik içerik görsel testi bozar?
Görsel karşılaştırma iki an arasındaki her farkı bulur. Metin değişikliğini değil, konum değişikliğini de, renk tonunu da bulur.
Bu, doğru davranıştır — ama yalnızca sayfa statikse. Bir sayfada saat varsa, sayfa her saniye değişir. Sistem bunu bir hata olarak raporlar, çünkü teknik olarak gerçekten değişmiştir.
Yani sorun, sistemin yanlış çalışması değil. Sorun, karşılaştırılan şeyin değişmemesi gereken bir sayfa seçmiş olmanız.
En sık karşılaşılan dinamik alanlar
Zaman ve tarih. Saat, tarih, geri sayım. En yaygın ve en önce çözülmesi gereken.
Sayaçlar. Ürün görüntülenme sayısı, yorum sayısı, stok adedi.
Kişiselleştirme. "Hoş geldiniz, [ad]" veya konuma göre değişen içerik. Bunu fark etmek zordur, çünkü siz giriş yapmamışken aynı sayfayı görüyorsunuz.
Reklam ve üçüncü taraf. Döngüsel reklam, rastgele içerik widget'ı, sosyal medya gömmesi.
En son yazılar / ilgili içerik. Bunlar sürekli yeni içerik eklediğiniz sürece değişir.
Oturum durumuna bağlı her şey. Çerez banner'ı, abonelik durumu, giriş menüsü.
Çözüm: maskeleme
Maskeleme, "bu bölgedeki değişiklikleri karşılaştırmaya katma" demektir. Saat göstergecinin bulunduğu dikdörtgeni işaretler, sisteme "buraya bakma" dersiniz.
Pratikte üç yaklaşım var:
1. Sabit bölge maskeleme. Değişen öğenin bulunduğu alanı işaretleyip dışarıda bırakmak. Basit, anlaşılır, çoğu durumda yeterli.
Zorluk: alan zamanla yer değiştirirse maske kayar. Yeni bir öğe eklediyseniz, maskeyi güncellemeniz gerekir.
2. Değişken metin maskeleme. Tüm sayfada belirli bir kelime ya da kalıbı maskelemek. Örneğin herhangi bir yerde geçen bir tarih kalıbını.
Zorluk: eşleşme yanlışsa gerçek bir değişikliği de gizlemiş olursunuz.
3. Sürüm bazlı maskeleme. Öğenin bir kimliği varsa, o kimliği izleyip değeri maskelemek. Üçüncü taraf widget'larında genellikle mümkün.
Zorluk: en çok kurulum gerektiren yöntem.
Seçim: hangisi, ne zaman
| Durum | Yöntem |
|---|---|
| Tek bir saat alanı | Sabit bölge |
| Birkaç sayaç | Sabit bölge + değişken metin |
| Üçüncü taraf widget | Sürüm bazlı, mümkünse |
| Kişiselleştirilmiş içerik | Kimliğe göre |
Bir sayfada beşten fazla maske gerekiyorsa, bu bir ipucudur: sayfa yanlış seçilmiştir. Yeni nesil ürün listeleri gibi statik bir sayfayı izlemek, her sayfada maske tutmaktan daha iyidir.
Bu, sık yapılan bir hatadır. "Bu sayfayı izleyeyim de maske tutayım" yaklaşımı, sitenin en dinamik sayfasını izlemeye çalışmak demektir; sistem gürültü üretir ve kullanılmaz.
Maskelemeden başka bir yol: tolerans
Bazen tüm alanı maskelemek istemezsiniz. Bir butonun renginin değişmediğinden emin olmak istersiniz, ama içindeki "Sepette 3 Ürün" yazısı sürekli "4 Ürün" olur. Butonu maskelerseniz, butonun rengini de göremezsiniz.
Bunun yerine tolerans kullanılır: "şu kadar pikselden küçük farkları yok say." Pratikte iki ayrı mekanizma var ve ikisi farklı sorunları çözer.
Renk toleransı. Eşleşmesi gereken renkler küçük farklar gösterebilir — aynı renk farklı ekranlarda farklı piksel değerleri üretir. Karşılaştırmada bu farkı yok sayan bir eşik ayarlanır.
Anti-aliasing yumuşatma. Metin kenarları, eğik çizgiler ve ince çizgiler tarayıcıdan tarayıcıya farklı yumuşatılır. Aynı metin, iki farklı makinede birebir aynı pikselleri üretmez. Bu, metin içeren her karşılaştırmada küçük ama sürekli bir fark üretir.
İkisi birlikte çalışır: renk toleransı malzeme farklarını, anti-aliasing yumuşatma ise metin kenarlarını yakalar. Ancak burada bir uyarı var:
Tolerans, gerçek bir değişikliği de gizleyebilir. Küçük bir renk değişikliği (bir butonun sarıdan açık sarıya dönmesi) sizin için önemsiz görünebilir ama marka için önemli olabilir. Toleransı ayarlarken, neyi kasten görmemeyi seçtiğinizi bilin.
Pratikte tolerans, maskeden daha az iş ister. Ama tek başına yeterli değildir: saat gibi sürekli değişen bir alanı toleransla bastıramazsınız, çünkü fark her seferinde eşiği aşar.
Maskelemenin riski
Burada dürüst olmak gerekiyor. Maskeleme, aynı zamanda görmek istemediğiniz değişiklikleri görmenizi de engeller.
Örnek: bir sayfada hem saat hem de fiyat var. Saati maskelerseniz, maske kayarsa ve fiyatın üzerine biner, fiyat değişikliklerini de kaçırırsınız.
Bu gerçek bir risktir ve iki şekilde yönetilir:
- Maskeleri sayfa değiştiğinde gözden geçirin. İçerik güncellendiğinde maske haritasını da güncelleyin.
- Maskesiz bir tarama yapın. Dönem dönem, maskeleri kaldırıp tam karşılaştırma yapın. Ne olduğunu görün, sonra maskeleri geri koyun.
İkinci adım kolay atlanır ve tam da o atlandığında gerçek bir kırılma sessizce kalır.
Kararlı bekleme
Maskeleme, sayfanın "sakin olduğu" anı yakalamaz. Buna ek olarak, tarama zamanlaması önemlidir.
Sayfa tam yüklenmeden karşılaştırmayın. Sayfa yüklenirken alınan bir görüntü, bir saniye sonrakiyle karşılaştırıldığında fark gösterir — gerçek bir değişiklik olmasa bile.
Yeterli bekleyin, ama fazla değil. Çok kısa bekleme, yüklenmemiş görselleri kaydeder. Çok uzun bekleme, her taramayı yavaşlatır ve siteyi gereksiz yükler.
Aynı saati karşılaştırmayın. Saat 14:00'te alınan iki görüntü arasında on iki saat vardır. Gece yarısı gelen bir banner'ı, öğlen alınan görüntüyle karşılaştırmak yanlış alarm üretir.
Bu sorun neden her yerde oluyor?
Çünkü modern web siteleri statik değil. On yıl önce bir sayfanın görüntüsü büyük ölçüde sabitti; bugün her sayfa bir veri kaynağından besleniyor.
Bu, görsel testin geçersiz olduğu anlamına gelmiyor. Ama şu anlama geliyor: izleme kararı, teknik değil editoryal bir karardır. "Bu sayfa izlenmeye değer mi" sorusu, "değişiklik önemli mi" sorusundan önce gelir. Ve cevap çoğu zaman hayır.
Pratik kural: bir sayfayı izlemek için, o sayfada sizin için değişmesi önemli bir şey olmalı. Olmayan sayfayı izlemek, maske tutmaktan daha çok iş çıkarır ve daha az bilgi verir.
Bu, çoklu müşteri izlemede aynı kuralın izleme tarafındaki karşılığıdır. Karşılaştırmanın teknik tarafı için görsel regresyon testi nedir? yazısına bakın.