Önce–sonra görsellerinde sürgü mü, yan yana düzen mi?
Bir mekân yenilemesini tek kare üzerinde sürüklenen ayırıcıyla göstermek dikkat çekebilir. Ancak ziyaretçi iki görüntüyü uzun uzun kıyaslamak istediğinde sürgü sürekli bir tarafı kapatır. Buradaki karar, önce–sonra iddiasının doğruluğundan ayrı olarak, karşılaştırmanın hangi kontrolle kullanılacağıdır. Kapaktaki çizimler gerçek bir yenileme sonucu değil, iki arayüz seçeneğini tartışmak için üretilmiş örneklerdir.

Karşılaştırılacak ayrıntıyı önce belirleyin
Aynı duvarın kaplaması mı, odanın yerleşimi mi, yoksa küçük bir birleşim detayı mı değişti? Görüntüler aynı alanı benzer kadrajla gösteriyorsa örtüşen bir düzen işe yarayabilir. Açılar farklıysa ayırıcıyı hareket ettirmek anlamlı bir eşleşme üretmeyebilir. Bu durumda iki açıklamalı görüntüyü birlikte sunmak daha anlaşılırdır.
Birden fazla değişimi tek sürgüye yüklemeyin. Önce bakılacak detayı kısa bir cümleyle belirtin. Görselin hangi tarihe ve aşamaya ait olduğu açık olsun. Kanıt ve bağlam konusunu açıklamalı proje görselleri rehberimizde ayrı ele alıyoruz; burada amaç kontrolün kullanımını seçmek.
Sürüklemeyi tek kullanım yolu yapmayın
Sürgü tasarlanacaksa görünür bir tutacak, anlaşılır etiket ve klavye davranışı planlayın. W3C sürgü örüntüsü ok tuşlarıyla değer değişimini, Home ve End ile uç değerlere erişimi açıklar. Görsel üzerinde kontrol çizmek tek başına bu davranışları sağlamaz. Geliştirici mümkünse uygun yerel form kontrolünü temel alsın.
Etiket yalnızca “Sürgü” demek yerine neyin değiştiğini anlatsın: örneğin “Sonraki görünümün payı”. Başlangıç değeri iki tarafı da fark ettirmeli. Odak işareti arka planda kaybolmamalı; tutacak küçük olsa bile dokunulabilir alanı rahat kullanılmalı. Ürün için gerekli erişilebilirlik kontrolünü gerçek kullanımda tamamlayın.
Düzen seçimi için iki senaryo
Telefonda görüntüyü ve kaydırmayı birlikte deneyin
Yatay sürükleme ile sayfayı dikey kaydırma birbirine karışabilir. Kontrolü resmin her noktasına gizlemek yerine tutacağı görünür kılın. Ziyaretçinin sürgüyü keşfetmek için rastgele dokunmasını beklemeyin. Sayfanın akışı içinde bileşenin nerede başlayıp bittiği de anlaşılsın.
W3C, bazı dokunmatik yardımcı teknoloji birleşimlerinde özel sürgülerin sorun çıkarabileceğini belirtiyor. Bu yüzden yalnızca masaüstü klavye testine güvenmeyin. Gerçek telefon ve ilgili yardımcı teknolojiyle inceleyin. Her iki görsele ayrı bağlantı veya düğmeyle erişmek, karşılaştırmayı tek bir harekete bağımlı bırakmayan yararlı bir alternatiftir.
Sabit görünümü eşdeğer içerik olarak hazırlayın
Yan yana seçenek masaüstünde iki resmi aynı anda gösterebilir; telefonda alt alta geçebilir. Her görüntünün etiketi resimle ilişkili kalsın. Ekran daraldığında yazıyı resmin üstüne sıkıştırıp ayrıntıyı kapatmayın. Ziyaretçi karşılaştırılan noktayı iki görünümde de bulabilmeli.
Açıklamada değişimin ne olduğunu yazın; sadece “farkı gör” demek görüntüyü okuyamayan kişi için yeterli değildir. Hareketli bir otomatik tanıtım eklenirse inceleme kontrolünü ele geçirmemeli. Kullanıcı bıraktığı konumun kendi kendine değişmediğini görmeli. İki görünüm de yüklenmeden tamamlanmış karşılaştırma izlenimi vermeyin.
Onayı efekt üzerinden değil görev üzerinden verin
Bir kişiden iki görüntü arasındaki belirli ayrıntıyı bulmasını isteyin. Hangi kontrolü kullandığını, etiketleri anlayıp anlamadığını ve önceki görünüme dönebildiğini gözlemleyin. Uzun başlık, yavaş görsel yükleme ve büyütülmüş metin durumlarını da kontrol edin.
Proje portföyümüz gerçek iş sunumlarına ulaşma noktasıdır; bu yazıdaki çizimler müşterilerimizin önce–sonra kanıtı değildir. Web tasarım kapsamında sürgü, sabit alternatif, açıklama ve cihaz kontrolünü birlikte teslim edin. İyi bir efektin değeri, incelemeyi gerçekten kolaylaştırdığı ölçüde anlaşılır.
Sık sorulan sorular
Sürgü mutlaka daha etkileyici mi?
Görsel olarak dikkat çekebilir, ancak her karşılaştırmayı daha anlaşılır yapmaz. Kadraj ve incelenecek ayrıntı seçimi belirlemeli.
Mobilde yan yana düzeni korumalı mıyız?
Detaylar çok küçülüyorsa alt alta tam genişlikte görünümler daha iyi bir seçenek olabilir. Etiket ve karşılaştırma açıklaması korunmalı.
