Mobilde Carousel: Sıralı Erişimin Bedeli ve Tasarım Kararları

Carousel, dar ekranda çok içerik göstermenin bedava yolu gibi görünür. Yaptığı şey aslında aynı pikselleri sırayla kiralamaktır: ikinci slaytı yalnızca birinciyi geçen görür. Bu takas bazen mantıklı, çoğu zaman değil. Hangisi olduğu üç şeye bakar: kaç slayt var, kullanıcı devamı olduğunu anlıyor mu, ve döngü kendi kendine mi dönüyor.

Carousel bir gösterim değil, bir erişim yöntemidir

Bir listede on başlık varsa kullanıcı gözüyle tarar, aradığını bulur, dokunur. Bir carousel'de on slayt varsa aynı işi parmağıyla yapar. Fark burada başlar: liste rastgele erişim sunar, carousel sıralı erişim dayatır. Arayüzün geri kalanı ne kadar temiz olursa olsun bu kısıt değişmez.

Kısıtın maliyeti hesaplanabilir. n slaytlık bir döngüde k'ıncı slayta ulaşmak k-1 kaydırma ister; hedef slayt eşit olasılıkla herhangi biriyse ortalama kaydırma sayısı (n-1)/2 olur. Sekiz slayt için ortalama 3,5 kaydırma, on iki slayt için 5,5. Yani slayt eklemek kapasiteyi doğrusal artırırken erişim maliyetini de doğrusal artırır. Kazanç net değil, çünkü listeye eklenen on birinci öğe göz taramasına neredeyse hiçbir şey eklemezken carousel'e eklenen on birinci slayt herkesin ortalama yolunu uzatır.

Sondaki slaytlar neden görünmez

Otomatik dönen bir carousel'de bu hesap zamana çevrilir. Slayt başına 5 saniye ve 8 slayt, tam turun 40 saniye sürmesi demektir. Son slaytın görülmesi için kullanıcının sayfanın o bölümünde 40 saniye durması gerekir. Ana sayfa üstünde bu, gerçekleşmesi zor bir varsayım. Sonuncu slayt teknik olarak yayında, pratikte yok.

Buradan çıkan kural basit: carousel'i kapasite deposu gibi kullanma. Kurum içinde "bize de bir slayt" pazarlığı carousel'i büyütür ve büyüyen carousel kimseye yaramaz. Dört slaytı geçiyorsan sorun tasarımda değil, içerik önceliklendirmesinde çözülür.

Kullanıcı devamı olduğunu nasıl anlar

Sıralı erişimin ikinci sorunu keşfedilebilirlik. Kullanıcı devamı olduğunu bilmiyorsa kaydırmaz, kaydırmayınca da içeriğin yarısı boşa yazılmış olur. İpuçlarının etkisi eşit değil:

• Taşan içerik: Sonraki slaytın kenardan birkaç piksel görünmesi en güçlü sinyaldir, çünkü öğrenilmesi gerekmez. Kesilmiş bir görsel zaten devamı olduğunu söyler.
• Oklar: Yönü açıkça belirtir ama mobilde dokunma hedefi olarak küçük kalır ve görselin üstüne binerek kontrast kaybeder.
• Noktalar: Kaç içerik olduğunu söyler, nasıl geçileceğini söylemez. Tek başına en zayıf ipucudur.

Sıralamayı tersine kurmak yaygın bir hata: nokta koyup taşmayı kesmek, en zayıf sinyali tek sinyal yapmaktır. Taşmayı bırak, noktayı istersen üstüne ekle.

Otomatik dönme ve erişilebilirlik

Kendi kendine dönen carousel iki grubu doğrudan etkiler: metni yavaş okuyanlar ve hareket duyarlılığı olanlar. WCAG'nin 2.2.2 Pause, Stop, Hide ölçütü, beş saniyeden uzun süren ve otomatik başlayan hareket için duraklatma yolu ister. Bu bir öneri değil, A seviyesinde bir şart.

Uygulamada iki satır iş: görünür bir duraklat kontrolü ve prefers-reduced-motion sorgusuyla animasyonun kapatılması. Odak carousel'in içine girdiğinde veya kullanıcı elle kaydırdığında döngünün durması da aynı yere yazılır. Ana sayfaya otomatik dönen carousel koymam; dönmesi gerekiyorsa da ilk kullanıcı dokunuşunda bir daha başlamaz.

Kaydırma çakışması

Yatay kaydırma, sayfanın dikey kaydırmasıyla aynı parmağı paylaşır. Kullanıcı hafif çapraz bir hareket yaptığında tarayıcı hangisinin kazandığına karar verir ve bu karar her zaman beklenen yönde çıkmaz. İki şey yardımcı olur: slaytın sağ ve sol kenarında boşluk bırakmak, böylece parmağın başlangıç noktası ekran kenarına yapışmaz; ve kaydırma eksenini touch-action ile açıkça bildirmek. Kaydırmayı JavaScript'te dokunma olaylarını dinleyerek yeniden yazmak, tarayıcının kendi kaydırma davranışını taklit etmeye çalıştığı için genelde daha kötü sonuç verir.

Ne zaman carousel, ne zaman liste

Carousel, öğeler eşdeğer ve gezinilmesi zorunlu olmadığında işe yarar. Bir ürün sayfasındaki fotoğraflar buna uyar: kullanıcı zaten o ürüne bakmaya gelmiştir, sıra önemsizdir, hepsini görmemesi bir kayıp değildir. Öğeler birbirinin alternatifiyse ve kullanıcı seçim yapacaksa carousel yanlış araçtır; seçim rastgele erişim ister, sıralı erişim değil.

Pratik ayrım şu: içeriğin görülmemesi kabul edilebilir mi? Cevap evetse carousel kullan, üç dört slaytla sınırla, taşmayı bırak, otomatik döndürme. Cevap hayırsa yatay dizilim yerine dikey liste ya da ızgara kur. Aynı içerik iki katı yer kaplar ama tamamı görünür, ki zaten istenen buydu.