İçeriğe geç
Bigfil
Projeni Anlat
Bigfil

Kreatif

UX: Sonsuz Kaydırma ve Sayfalandırma

Özetle

  • Kaydırma bir devam, tıklama bir karardır; keşif akışında kaydırma, hedefli aramada sayfalandırma işe yarar.
  • Sonsuz kaydırmanın bedeli üç kalemdir: konum kaybı, erişilemeyen alt bilgi ve zamanla düşen sayfa performansı.
  • Sayfalandırma kullanıcıya kaç sonuç olduğunu ve nerede durduğunu söyler; bu kontrol duygusu karar verdirir.
  • Görsel ağırlıklı içerik kaydırmayla, metin ağırlıklı içerik sayfalandırmayla daha hızlı taranır.
  • İki yöntem arasında seçim yapmadan önce üçüncü seçeneği değerlendirin: daha fazla yükle butonu.

“Görüntülenecek çok fazla içeriğim var, içeriğim için sonsuz kaydırma veya sayfalandırma mı yapmalıyım?” Bazı tasarımcılar projeleri için hangi yöntemi seçeceklerinden hala emin değiller.

Bölüm 01

Giriş

UX: Sonsuz Kaydırma ve Sayfalandırma

“Görüntülenecek çok fazla içeriğim var, içeriğim için sonsuz kaydırma veya sayfalandırma mı yapmalıyım?” Bazı tasarımcılar projeleri için hangi yöntemi seçeceklerinden hala emin değiller. Her yöntemin güçlü ve zayıf yönleri vardır ve bu makalede iki yöntemi gözden geçireceğiz ve projelerimiz için hangisini kullanmamız gerektiğine karar vereceğiz.

UX: Sonsuz Kaydırma ve Sayfalandırma — görsel 1

Sonsuz Kaydırma

Sonsuz kaydırma, kullanıcıların görünürde bir bitiş çizgisi olmadan büyük bir içerik yığını arasında gezinmesine olanak tanıyan bir tekniktir. Bu teknik, aşağı kaydırdığınızda sayfayı yenilemeye devam eder. Kulağa ne kadar iyi gelirse gelsin, teknik her site veya uygulama için tek boyutlu bir çözüm değildir.

Artıları

UX: Sonsuz Kaydırma ve Sayfalandırma

Bölüm 02

Kullanıcı Etkileşimi ve İçerik Keşfi

Verileri keşfetmenin başlıca yöntemi olarak kaydırmayı kullandığınızda, kullanıcının web sayfanızda daha uzun süre kalmasını sağlayabilir ve böylece kullanıcı katılımını artırabilir. Sosyal medyanın popüleritesi ile birlikte büyük miktarda veri tüketiliyor; sonsuz kaydırma, fazladan tıklama/dokunma olmadan bu bilgi okyanusuna göz atmak için etkili bir yol sunar.

Sonsuz kaydırma, keşif arayüzleri için neredeyse olmazsa olmaz bir özelliktir. Kullanıcı belirli bir şey aramadığında, sevdiği şeyi bulmak için çok sayıda öğe görmeleri gerekir.

Bir Facebook haber akışı örneği ile sonsuz kaydırmanın faydalarını ölçebilirsiniz. Kullanıcılar, içerik çok sık güncellendiği için özet akışındaki her şeyi göremeyeceklerini biliyorlar. Sonsuz kaydırma ile Facebook, kullanıcılara mümkün olduğunca fazla bilgi sunmak için elinden gelenin en iyisini yapıyor ve bu bilgi akışını tarayıp tüketiyorlar.

Bölüm 03

Kaydırmak, tıklamaktan daha iyidir

Kaydırma, tıklamaya/dokunmaya göre daha düşük etkileşim maliyetine sahiptir; mouse tekerlekleri veya dokunmatik ekranlar, kaydırmayı tıklamaya göre daha hızlı ve daha kolay hale getirir. Ayrıca, sonsuz kaydırma bağımlılık yapabilir. Öğretici gibi sürekli ve uzun bir içerik için kaydırma, metni birkaç ayrı ekrana veya sayfaya bölmekten daha iyi kullanılabilirlik sağlar.

Tıklama/dokunma için, her içerik güncellemesi, bir sayfanın yüklenmesi için ek bir tıklama eylemi ve bekleme süresi gerektirir.

Bölüm 04

Kaydırma, Mobil Cihazlar İçin İyidir

Ekran ne kadar küçük olursa, kaydırma o kadar uzun olur. Mobil taramanın popülerleşmesi, uzun kaydırmanın bir başka önemli destekçisidir. Mobil cihazların hareket kontrolleri, kaydırmayı sezgisel ve kullanımı kolay hale getirir. Sonuç olarak, kullanıcıların tarama deneyiminin keyfini çıkarma şansı daha yüksektir.

Eksileri

Bölüm 05

Sayfa Performansı ve Cihaz Kaynakları

Sayfa yükleme hızı, iyi bir kullanıcı deneyimi için her şeydir. Yavaş yüklenen sayfaların ziyaretçi kaybettirdiği, alanda yaygın olarak kabul edilen bir gözlemdir. Ve bu, sonsuz kaydırma kullananlar için kötü haber. Bir sayfayı ne kadar çok kullanıcı aşağı kaydırırsa, aynı sayfaya daha fazla içeriğin yüklenmesi gerekir. Sonuç olarak, sayfa performansı giderek yavaşlayacaktır.

Başka bir sorun, kullanıcının cihazının sınırlı kaynaklarıdır. Birçok sonsuz kaydırma sitesinde, özellikle çok sayıda görüntüye sahip olanlarda, sınırlı kaynaklara sahip cihazlar (mobil cihazlar veya eski donanıma sahip tabletler gibi), yüklediği çok sayıda varlık nedeniyle yavaşlamaya başlayabilir.

Bölüm 06

Öğe Arama ve Konum

Sonsuz kaydırma ile ilgili bir başka sorun da, kullanıcıların akışta belirli bir noktaya geldiklerinde konumlarını işaretleyip daha sonra geri dönememeleridir. Siteden ayrılırlarsa tüm ilerlemelerini kaybederler ve aynı noktaya geri dönmek için tekrar aşağı kaydırmaları gerekir. Kullanıcının kaydırma konumunun bu şekilde belirlenememesi, kullanıcılar için yalnızca rahatsızlık veya kafa karışıklığına neden olmakla kalmaz, bunun sonucunda genel kullanıcı deneyimine de zarar verir.

2012 yılında Etsy sonsuz kaydırma arayüzü uygulayan zaman geçirdi ve sahada bulunan yeni arayüz sadece sayfalama kadar iyi performans vermedi. Satın alma miktarı aşağı yukarı aynı kalsa da, kullanıcı etkileşimi azaldı – artık insanlar aramayı çok fazla kullanmıyordu.

Bölüm 07

Alakasız Kaydırma Çubuğu

Bir başka can sıkıcı şey de kaydırma çubuklarının mevcut gerçek veri miktarını yansıtmamasıdır. Dibe yakın olduğunuzu varsayarak mutlu bir şekilde aşağı ineceksiniz, bu da tek başına sizi biraz daha kaydırmaya cezbediyor, sadece oraya vardığınızda sonuçların iki katına çıktığını bulmak için. Erişilebilirlik açısından, kullanıcılarınız için kaydırma çubuklarının kullanımını kırmak oldukça kötü. Kaydırma çubuğu gerçek sayfa uzunluğunu yansıtmalıdır

Bölüm 08

Alt Bilgi Eksikliği

Alt bilgilerin bir nedeni vardır: Kullanıcının bazen ihtiyaç duyduğu içeriği içerirler – kullanıcılar bir şey bulamazlarsa veya başka bir sayfaya gitmek isterlerse, genellikle oraya giderler. Ancak akış sonsuz olarak kaydırıldığından, kullanıcı en alta ulaşır ulaşmaz daha fazla veri yüklenir ve her seferinde alt bilgiyi görünümden çıkarır.

Linkedin 2012’de sonsuz kaydırma özelliğini sunduğunda, kullanıcılar yeni hikayeler yüklemeden hemen önce bir ekran yakalamayı başardılar.

Sonsuz kaydırma uygulayan siteler, alt bilgiyi yapışkan hale getirerek erişilebilir hale getirmeli veya bağlantıları bir üst veya yan çubuğa yeniden yerleştirmelidir .

Başka bir çözüm, ‘’daha fazla yükle’’ butonunu kullanarak isteğe bağlı olarak içerik yüklemektir. Kullanıcı ‘’daha fazla’’ butonunu tıklayana kadar yeni içerik otomatik olarak yüklenmez. Bu şekilde kullanıcılar, onu kovalamak zorunda kalmadan alt bilginize kolayca ulaşabilirler.

Sayfalandırma

UX: Sonsuz Kaydırma ve Sayfalandırma — görsel 1

Sayfalandırma, içeriği ayrı sayfalara bölen bir kullanıcı ara birimi modelidir. Sayfanın en altına gider ve sayı satırını görürseniz, bu sayı satırı bir sitenin veya uygulamanın sayfalandırmasıdır.

Artıları

Bölüm 09

İyi Dönüşüm

Sayfalandırma, kullanıcı yalnızca içeriğe göz atmakla kalmayıp, sonuç listesinde belirli bir şey aradığında iyidir. “Kaydırma bir devamdır, tıklama ise bir karardır.” (Joshua Porter)

Sayfalandırmanın faydalarını Google Arama örneği ile ölçebilirsiniz. Bir kullanıcı olarak, kaç tane sonuç sayfasının kontrol edileceğine karar verebilirsiniz.

Bölüm 10

Kontrol Duygusu

Sonsuz kaydırma, sonsuz bir oyun gibidir – ne kadar ileri giderseniz gidin, asla sona eremez. Kullanıcılar, mevcut sonuçların sayısını bildiklerinde, sonsuza kadar kayan bir listeyi araştırmak yerine daha bilinçli bir karar verebilirler. Bir son noktaya ulaşmak kullanıcıya kontrol duygusu verir. Araştırma ayrıca, kullanıcıların sınırlı ancak yine de alakalı sonuçlara sahip olduklarında, aradıklarının gerçekten orada olup olmadığını kolayca belirleyebildiklerini açıklığa kavuşturuyor.

Ayrıca, kullanıcılar toplam sonuç sayısını gördüklerinde (elbette toplam veri miktarı sonsuz olmadığında), gerçekte aradıklarını bulmanın ne kadar zaman alacağını tahmin edebileceklerdir.

Bölüm 11

Öğe Konumu

Sayfalandırılmış bir arayüze sahip olmak, kullanıcının öğenin zihinsel konumunu tutmasını sağlar. Sayfanın tam sayfa numarasını bilmeyebilirler, ancak kabaca ne olduğunu hatırlayacaklar ve sayfalandırılmış bağlantılar oraya daha kolay ulaşmalarını sağlayacaktır.

Sayfalandırma ile kullanıcılar, bulundukları yere geri dönmek için hangi sayfaya tıklayacaklarını bildikleri için navigasyonun kontrolü altındadır.

Sayfalandırma, e-ticaret siteleri ve uygulamaları için iyidir. Kullanıcılar online alışveriş yaptıklarında kaldıkları yere geri dönebilmek ve alışverişlerine devam edebilmek isterler.

Eksileri

  1. Ekstra İşlemler

Bir sayfalandırmada bir sonraki sayfaya geçmek için, kullanıcının bağlantı hedefini bulması (örneğin “İleri”), fareyi üzerine getirmesi, tıklaması ve yeni sayfanın yüklenmesini beklemesi gerekir.

Bölüm 12

Bir içerik için tıklamak

Buradaki temel sorun, çoğu sitenin kullanıcılara tek bir sayfayla (yani sayfa başına 10-20 öğe) çok sınırlı içerik göstermesidir. Sayfalarınızı yükleme hızından ödün vermeden daha uzun hale getirerek, kullanıcılar sayfa başına daha fazla içerik alacak ve sayfalandırma butınuna çok fazla tıklamak veya dokunmak zorunda kalmayacak.

Sonsuz Kaydırma/Sayfalandırma Ne Zaman Kullanılır?

Sonsuz kaydırmanın etkili olduğu yalnızca birkaç örnek vardır. Kullanıcı tarafından oluşturulan içeriğin büyük akışları olan siteler ve uygulamalar (X, Facebook, Pinterest, Instagram) için en uygunudur. Sayfalandırma ise, kullanıcıların belirli bir şey aradığı hedef odaklı siteler ve uygulamalar için çok uygundur.

İçeriğin türü de tarama yönteminin seçilmesinde rol oynar. Metne karşı daha fazla görseliniz var mı? Google ürünleri bu nokta için iyi bir örnektir. Google Görseller sonsuz kaydırma kullanır çünkü kullanıcılar görüntüleri metinden çok daha hızlı tarayabilir ve işleyebilir. Bir arama sonucunu okumak çok daha uzun sürer. Metin ağırlıklı arama sonuçlarında sayfalı yapının uzun süre tercih edilmesinin nedeni budur.

Çözüm

Tasarımcılar, birini seçmeden önce sonsuz kaydırma ve sayfalandırmanın artılarını ve eksilerini tartmalıdır. Seçim, ürününüzün türüne ve içeriği nasıl teslim etmek istediğinizin biçimine bağlıdır.

Sık sorulan sorular

Sonsuz kaydırma arama motoru görünürlüğünü etkiler mi?
Etkileyebilir ve bu, seçim yaparken en sık atlanan boyuttur. Yalnızca kaydırmayla yüklenen içeriğin kendine ait bir adresi yoksa, arama motorunun o içeriği bulması ve dizine eklemesi zorlaşır. Çözüm ikisini birlikte kurmaktır: kullanıcı kaydırırken arka planda sayfalı adresler de üretilsin. Ürün listeleri ve kategori sayfaları gibi bulunması gereken içeriklerde bu ayrıntı önemlidir.
Kullanıcının kaydırırken kaybettiği yeri korumak mümkün mü?
Mümkün. Kullanıcı aşağı indikçe adres çubuğundaki adres güncellenirse, geri tuşu ve bağlantı paylaşma yeniden çalışır hale gelir. Bu, sonsuz kaydırmanın en can sıkıcı yan etkisini büyük ölçüde ortadan kaldırır. Uygulanması ek iş gerektirir ve tam da bu yüzden çoğu projede atlanır; oysa listeye geri dönmenin sık olduğu ürünlerde tek başına belirleyici olabilir.
E-ticarette hangisi kullanılmalı?
Genel eğilim sayfalandırma yönünde, ama tek başına liste biçimine bakmak yanıltıcı olur. Belirleyici olan filtreleme kalitesidir. İyi filtreler kullanıcıyı zaten az sayıda sonuca indiriyorsa listenin ne kadar uzun olduğu önemini yitirir. Filtre zayıfsa kullanıcı listeyi tarayarak arar ve o zaman nerede kaldığını bilmek kritik hale gelir; sayfalandırmanın avantajı burada belirginleşir.
Sonsuz kaydırma erişilebilirlik açısından sorun çıkarır mı?
Çıkarabilir. İki nokta öne çıkar: yeni içerik yüklendiğinde ekran okuyucu kullanıcısına bunun bildirilmemesi, ve klavyeyle gezinen kullanıcının sürekli genişleyen bir listede sayfa sonundaki bağlantılara ulaşamaması. İkisi de çözülebilir ama kendiliğinden çözülmez. Alt bilgiyi sabitlemek ya da daha fazla yükle butonu kullanmak, bu iki sorunu aynı anda hafifletir.
İkisi arasında karar veremiyorsam ne yapmalıyım?
Kullanıcının o ekranda ne yaptığını sorun: belirli bir şeyi mi arıyor, yoksa ilgisini çeken bir şeye mi bakınıyor? Arıyorsa sayfalandırma, bakınıyorsa kaydırma. Hâlâ kararsızsanız ortadaki seçeneği kullanın; daha fazla yükle butonu kaydırmanın akıcılığını korur ama yüklemeyi kullanıcının kararına bırakır, böylece alt bilgi ve konum sorunlarının çoğu ortadan kalkar.

İletişim / Başlayalım

Bu konuyu markanıza uyarlayalım.

Yazıda anlatılanları kendi projenize taşımak için bir keşif görüşmesi ayarlayalım.