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ı.

Kaynaklar ve ileri okuma

W3C — Slider Pattern
Web tasarım & geliştirmeBu hizmeti konuşalım