“Katın üstünde” günleri bitti. Uzun kaydırma ve sonsuz kaydırma siteleri giderek daha popüler hale geliyor ve bu tekniğin mobil cihazlara iyi dönüşmesi tesadüf değil. Mobil ekranların artan kullanımı, uzun kaydırma tekniğinin yaygın kabul görmesinde kesinlikle önemli bir rol oynamıştır: Ekran ne kadar küçük olursa, kaydırma o kadar uzun olur.
Uzun kaydırma, tasarımcılara çok sayıda yeni kapı açar. Bununla birlikte, bu modelin kendine ait dezavantajları vardır. Tasarımcıların içerik, gezinme ve animasyona yoğun bir ilgi göstermesini gerektirir.
Uzun kaydırma işleminizin kullanıcı beklentilerini karşıladığından emin olmak için takip etmeniz gereken 5 ipucu.
İnsanlara genellikle rağmen kaydırma işlemini başlat sayfa yüklendikçe, üst kısımdaki içerik, ekranın görünen kısmı çok önemlidir. Sayfanın üstünde görünen, ilk gösterim oluşturur ve kullanıcılarınız için kalite beklentisi belirler. Kullanıcılar kaydırma yapar, ancak yalnızca sayfaya girdiklerinde gördükleri şey yeterlidir.
Kullanıcıların kaymasını sağlamak için ziyaretçilerin ilgisini çeken içerikler sağlamanız gerekir. Böylece, en ilgi çekici içeriğinizi sayfanın en üst bölümüne yerleştirin:
Bazen kullanıcıları kaydırmanın en iyi yolu, doğrudan bunları yapmasını istemek. Kullanıcıları, içeriğin çoğunun katlamanın altında olduğunu bildirmeniz yeterlidir. Ekranı gösteren bir ok veya “aşağı kaydır” metni gibi ince bir görsel işaret, içeriğin çoğunun aşağıda mevcut olduğunu kullanıcılara bildirebilir.
Ekranı gösteren bir ok, kullanıcıları içeriğin çoğunun aşağıda ortaya konulacağını bildirir.
Gezinme, bir sitenin kullanıcı deneyiminin bir yapma veya kırılma yönüdür. Tasarımınızda uzun kaydırma kullanmanın en büyük risklerinden biri de kullanıcı uyumsuzluğu olasılığıdır. Gezinme çubuğu, kullanıcılar sayfayı aşağı kaydırdıklarında görünürlüğünü kaybederse, sayfanın derinlerinde olduklarında tam olarak geri gitmek zorunda kalacaklardır. Genellikle, bu davranış kullanıcıları karıştırır ve sinirlendirir.
Bu problemin bariz çözümü, mevcut konumu gösteren ve her zaman aynı konumda ekranda kalan yapışkan bir navigasyon menüsü kullanmaktır.
Kalıcı olarak görünür yapışkan navigasyon örneği.
Yalnızca mobil cihazlar: Mobil ekran masaüstü ekranından daha küçük olduğundan, görünür bir gezinme çubuğu ekranın nispeten önemli bir bölümünü alabilir. Küçük bir ekran mülkünün problemini çözmenin bir yolu, kullanıcılar yeni içerik için gezinirken gezinme çubuğunu gizlemek ve kullanıcılar en üste geri dönmek için aşağı doğru çekildiğinde görünür hale getirmektir.
Paralaks kaydırma ve kaydırma etkinleştirilmiş animasyonlar gibi yaratıcı efektler, kullanıcıların daha fazla kaydırma yapmasını sağlayabilir. Daha eğlenceli bir şeye kaydırıyorlar ve kullanıcı “ne olacak?” Diye merak ediyorlar.
Sayfanızı kaydırılabilir "parçalar" haline getirmeyi düşünün. Her yığın içinde, içeriği yaratıcı animasyonlarla tanıtabilirsiniz. Kullanıcılar ilerledikçe, takip edilecek içerikler oluşturulurken animasyonlar bir sonraki ekrana geçiş yapar.
Paralaks, kaydırma deneyimini geliştirebilen bir başka popüler animasyon etkisidir. Paralaks etkisi, arka plan görüntüsünün ön plandaki içeriğe göre daha yavaş hareket etmesini sağlayarak derinlik ve daldırma yanılsaması yaratır. Siteniz pürüzsüz, doğrusal bir şekilde bir hikaye anlatmak istediğinde, paralaks etkisi ile eşleştirilmiş uzun kaydırma, tamamen sürükleyici bir tarama deneyimi oluşturabilir.
Kaydırma ele geçirme uygulayan web siteleri, kaydırmayı kontrol altına alır ve web tarayıcısının temel işlevini geçersiz kılar. Kaydırma tehlikesi, kullanıcının sayfa kaydırma işlemini tam olarak kontrol etmediğinden ve davranışını tahmin edemediği için kötüdür. Kullanıcıların bir web sitesinin kaydırma etkileşimi beklentisi anlatı deneyimi uğruna yok edilmemelidir.
Apple, Mac Pro sayfasında kaydırma ele geçirme kullanır.
Uzun kaydırma, tamamen sürükleyici bir tarama deneyimi oluşturabilir. Hedef olarak keyifli bir yolculuk yapmak tamamen mümkün. Kullanıcılar sitenizdeki içeriği beğendiklerinde ve kullanıcı arayüzünü sezgisel bulduklarında, kaydırma işleminin uzunluğunu düşünmezler.