Ana Sayfa Dönerlerinin Son Kullanıcılar İçin Çalışabilmesi İçin 10 Gereksinim (Gerekirse)

Yayınlanan: 2022-03-10
Kısa özet ↬ Ana sayfa karuselleri gerçekten kullanıcılara yardımcı oluyor mu? Yoksa büyük organizasyonlarda afişlerini ana sayfaya kimin koyacağına dair iç tartışmaları çözmek için kolay bir araç oldukları için mi popülerler? Kısa cevap, ana sayfa karusellerinin çalışabileceği , ancak pratikte uygulamaların büyük çoğunluğunun son kullanıcılarda düşük performans gösterdiğidir.

Baymard Enstitüsü'nde, hem masaüstü hem de mobil e-ticaret web sitelerinin son yedi yılı için büyük ölçekli kullanılabilirlik testleri gerçekleştirdik. Testler, ana sayfa karusellerinin 10 uygulama gereksinimine uymaları durumunda son kullanıcılarla düzgün bir şekilde çalışabileceğini gösteriyor. Daha da önemlisi, uygulama masaüstünden mobil cihazlara farklılık göstermelidir.

Bu bulguların, Atlıkarınca Kullanmalı mıyım? .

(Büyük versiyonu görüntüle)

Şimdi, kullanıcı testinin, mükemmel şekilde uygulanmış bir atlıkarınca bile, performansı başka hiçbir tasarımda olduğu gibi olumlu yönde bozacak bir "ana sayfa kurtarıcısı" olduğunu göstermediğinin altını çizmeme izin verin. Ana sayfa karuselinin hem iyi performans gösteren hem de uygulanması çok daha kolay olan alternatifleri vardır (en iyisini makalenin sonunda sunacağız).

Çoğu atlıkarınca uygulamasının (birkaç eklenti tarafından oluşturulanlar dahil) bu 10 kullanılabilirlik ayrıntısının çoğundan yoksun olduğu (bunları UX için düpedüz zararlı hale getirdiği) göz önüne alındığında, atlıkarıncalarla ilgili tartışmalarda neden güçlü ifadelerin sıklıkla kullanıldığı anlaşılabilir. Ancak ana sayfa karusellerinin asla kullanılmaması gerektiğini söylemek, en azından bir e-ticaret bağlamında, yedi yıllık büyük ölçekli kullanılabilirlik testimizle tam olarak uyumlu değildir.

SmashingMag'de Daha Fazla Okuma :

  • Mobil E-Ticaret Web Sitelerinde Carousel Kullanımının Keşfi
  • Dropbox'ın Karusel Tasarımı Yapısızlaştırıldı
  • Android Carousel Tasarım Modeli İçin Kesin Bir Kılavuz
  • Mobil Kullanıcıyı Nasıl Zehirlersiniz?

Bu makalede, ana sayfa karusellerinin son kullanıcılar tarafından kabul edilebilir bir şekilde çalışmasını sağlamak için gerekli bulduğumuz 10 uygulama detayını gözden geçireceğiz. Mobil ve masaüstü uygulamalarının nasıl ve neden farklı olması gerektiğini özetleyeceğiz ve son olarak ana sayfa karusellerine daha basit, sorunsuz bir alternatif önereceğiz.

(10 gereksinimin tümünü uygulayacak kaynaklara sahip değilseniz, önerimiz diğerlerinin çoğuyla uyumlu olacaktır: Bir ana sayfa atlıkarıncası kullanmayın, bunun yerine sonunda önerilen alternatif tasarımı kullanın.)

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Ana Sayfa Uygulamada Dönen Karuseller

Döngüler, e-ticaret web sitelerinde, özellikle de ana sayfada oldukça popülerdir. Aslında, ABD'de en çok hasılat yapan 50 e-ticaret web sitesi için yaptığımız “Ana Sayfa ve Kategori” karşılaştırması, e-ticaret web sitelerinin %52'sinin masaüstü ana sayfalarında bir atlıkarınca olduğunu ortaya koyuyor. "Mobil E-Ticaret" kullanılabilirlik kıyaslamamız, atlıkarıncaların mobil web sitelerinde eşit derecede popüler olduğunu ortaya koyuyor: Mobil e-ticaret web sitelerinin %56'sının ana sayfasında bir karusel var.

Döngüler ancak içerikleri kadar iyi olabilir. Bir denek Drugstore.com'a girerken "Vay canına, burada gösterdikleri oldukça agresif reklamlar" diye şikayet etti. "Bu konsantrasyonumu bozuyor." Özellikle reklam görünümlü içerik sorunludur ve atlıkarıncanın temel gücü olan iyi bir görsel ilk izlenim oluşturma avantajından faydalanmaz. (Büyük versiyonu görüntüle)

Bu makalenin odak noktasının dönen içeriğin kendisi değil, tasarım ve etkileşimli özellikler aracılığıyla bir ana sayfa atlıkarıncasının nasıl daha kullanıcı dostu hale getirileceği üzerinde olduğunu vurgulamalıyım. Bir atlıkarınca içeriği alakalı, iyi seçilmiş ve yüksek kalitede değilse, arayüz ve mantık ne kadar optimize edilmiş olursa olsun kullanıcı deneyimi kötü olacaktır. İçerik reklam gibi görünüyorsa, testlerimiz ve göz izleme çalışmalarımız, çoğu kullanıcının, kendileri için ne kadar alakalı olabileceğine bakılmaksızın, banner körlüğü nedeniyle içeriği görmezden geleceğini ortaya koymaktadır.

Ana sayfa karusellerinde gözlemlenen başlıca avantajlardan biri, büyük ve ısmarlama görüntüleri dahil etmenin kolay bir yolu olmalarıdır. Test sırasında, ana sayfadaki büyük ve özel resimlerin kullanıcılara web sitesi hakkında iyi bir ilk izlenim verdiğini gördük - yeni bir web sitesine girdikten sonra, kalmak veya ayrılmak konusunda ilk kararlarını vermeden önce harcadıkları süreyi artırdı. Başka bir deyişle, büyük ısmarlama görüntülerin genellikle ana sayfa hemen çıkma oranlarını düşürürken aynı zamanda web sitesine ve markaya da olumlu yansıdığını görüyoruz.

Bununla birlikte, uygulama ayrıntılarının bir atlı karıncayı nasıl hızlı bir şekilde sinir bozucu ve potansiyel olarak zararlı bir kullanıcı deneyimine dönüştürebileceğini de gözlemledik. Bu makalede, 10 uygulama gereksinimini 4 gruba ayırdık:

  • Slayt sırası ve hedefler
  • Masaüstünde otomatik döndürme mantığı
  • Dönen kontrollerin iki işlevi
  • Dokunmatik cihazlarda farklılıklar

1. Slayt Sırası ve Hedefler

Çoğu kullanıcı, otomatik olarak dönen bir sayfa bile olsa, bir ana sayfa atlıkarıncasındaki tüm slaytları görmez. Ana sayfada yeterince uzun kalmıyorlar ve kesinlikle sayfanın en üstünde değiller.

Test sırasında, deneklerimiz genellikle başka bir sayfaya geçerler veya atlıkarınca tüm slaytlar arasında geçiş yapmadan çok önce atlıkarıncayı geçerlerdi. Ve bu, otomatik dönen atlıkarıncalar durumundaydı - açıkçası, tamamen manuel atlıkarıncalar, test denekleri aktif olarak slaytları değiştirene kadar yalnızca ilk slaydı ortaya çıkardı.

Bu, slayt dizisinin önemli olduğu anlamına gelir, çünkü ilk slayt sonrakilerden çok daha fazla poz alır. Otomatik dönen bir atlıkarıncada, ilk slaydın %50'den fazla tıklama alması alışılmadık bir durum değildir (Erik Runyon'un “Atlıkarınca Etkileşim İstatistikleri”nin “Site 2” bölümüne bakın). Bir diğer önemli çıkarım ise, kullanıcıların herhangi bir özel slaydı göreceklerinin varsayılmamasıdır.


Toys'R'Us mobil web sitesini test ederken, “hediye bulucuya” erişmenin tek yolu ana sayfadaki atlıkarıncadaki bir slayttı. Bu, aktif olarak aramasına rağmen deneklerin onu bulmasını son derece zorlaştırdı (özellikle ilk slayt olmadığı için). Sonuç olarak, atlıkarınca yerleşimi, birkaç web sitesinin terk edilmesinde önemli bir katkı sağladı. (Büyük versiyonu görüntüle)

Bunların hiçbiri başlı başına bir sorun değildir - bir kullanıcının tüm dönen slaytları görmemesi, web sitesinin özelliklerine erişmenin tek yolu atlıkarınca olmadığı ve bunu belirtmek için güvenilmediği sürece bir sorun değildir. web sitesinin ürün çeşitliliği. Ancak, "Ana Sayfa ve Kategori" ve "Mobil E-Ticaret" kullanılabilirlik çalışmalarımızdaki test web sitelerinin çoğu, dönen slaytlarında yalnızca belirli teklifleri ve web sitesi özelliklerini (ürün sihirbazları, hediye bulma araçları, vb.) deneklerin çoğu bu slaytları hiç görmedi (zaten ana sayfadan ayrıldılar); bu nedenle, denekler, birçoğu aktif olarak onları aramış olmalarına rağmen, aksi takdirde yararlı olan bu araçları asla öğrenmediler. Bu nedenle, dönen slaytlarda bu tür özellikleri tanıtmak harika bir fikir olsa da, bunlara erişmenin tek yolu bu olmamalıdır.

paket servisler

  • En önemli içeriği ilk slayda yerleştirerek slaytların sırasını dikkatlice seçin.
  • Döngüyü, hiçbir zaman önemli içeriğe giden tek yol olarak değil, önemli web sitesi özelliklerinin ve bilgilerinin ek bir vurgusu olarak kullanın.

2. Masaüstünde Otomatik Döndürme Mantığı

Bir atlıkarıncayı otomatik döndürmek, içeriğin slaytlar arasında gösterilmesini yayar ve bunun gerçekten bir atlıkarınca olduğunun altını çizer. Aslında, manuel atlıkarıncaların tıklama oranları %1 ila %2 arasında olsa da (A Carousel Kullanmalı mıyım? onun bölümü “Site 2”). Yine de bir uyarı: Herhangi bir hareketli grafik gibi, otomatik döndürme de dikkati statik içerikten uzaklaştırır, böylece atlıkarınca içeriğinin kalitesi ve küratörlüğü için çıtayı daha da yükseltir.

Bu düşüncelere dayanarak, otomatik döndürmenin uygun olduğuna karar verirseniz, performans için üç ayrıntının çok önemli olduğu kanıtlanmıştır, o kadar ki, bunlara bağlı kalamazsanız, otomatik döndürme veya atlıkarınca uygulamayın. :

  • Slaytlar çok hızlı dönmemelidir.
  • Otomatik döndürme, fareyle üzerine gelindiğinde duraklatılmalıdır.
  • Otomatik döndürme, herhangi bir aktif kullanıcı etkileşiminden sonra kalıcı olarak durmalıdır.

Slaytlar Çok Hızlı Dönmemeli

Bir atlıkarınca çok hızlı dönerse, kullanıcıların ilgilendikleri slaytları araştırmak için yeterli zamanı olmaz. Bu, bir slaytın metnini dönmeden önce acele etmeye çalıştıkları için kullanıcıların tedirgin hissetmelerine neden olabilir. Tabii ki, otomatik olarak çok yavaş döndürme, tam tersi bir etkiye sahip olacak ve kullanıcıları pek ilgilendirmeyen slaytlarla sıkıcı hale getirecektir.

Test denekleri Pottery Barn'ın ana sayfasındaki atlıkarıncadaki büyük ve güzel görüntülere bayılırken, birçoğu slaytların çok hızlı değiştiğini ve içeriği incelemeleri için çok az zaman verdiğini hissetti. (Büyük versiyonu görüntüle)

Slayttaki metin miktarı, slaydın görünürlük süresini büyük ölçüde belirlemelidir. Sadece kısa bir başlıksa, testlerimizde 5 ila 7 saniyenin uygun olduğu kanıtlandı, oysa daha fazla metin ağırlıklı slaytlar için daha uzun sürelere ihtiyaç vardı. (Nielsen Norman Group, slaytları otomatik döndürmek için her 3 kelime için 1 saniye önerir.) Bunun bir sonucu, bazı slaytları diğerlerinden daha uzun göstererek, her slayta benzersiz süreler atamanız gerekebilir.

Otomatik Döndürme, Fareyle Üzerine Geldiğinde Her Zaman Duraklatılmalıdır (%42 Yapmıyor)

Genellikle bir kullanıcının fare konumu ile sayfaya odaklanması arasında bir ilişki vardır ("Web Bilgisi Arama ve Etkileşim", PDF'nin 29. sayfasına bakın). Bu nedenle, üzerine gelinen bir slayt kesinlikle kullanıcının onu okumak isteyebileceğinin bir göstergesidir ve atlıkarınca duraklaması gerekir.

Kullanıcının faresi bir slaydın üzerine geldiğinde otomatik döndürmeyi duraklatmanın daha da önemli bir nedeni, atlıkarıncanın tam kullanıcı istediğini açmak için tıkladığında sonraki slayda dönmesini engellemektir. Kullanılabilirlik testi sırasında, deneklerin bir slayda tıklamaya çalıştıklarını sık sık gözlemledik, yalnızca atlıkarınca tıklamadan birkaç milisaniye önce otomatik olarak dönerek tamamen farklı bir sayfaya gitmelerine neden oldu.

Blue Nile'da gezinirken açıklanan bir konu, "Farem bunun üzerindeyse, gerçekten duraklaması gerekir, çünkü aksi takdirde, tıpkı az önce yaptığı gibi, yanlış slayda tıklama riskini alırım ve yanlış sayfaya ulaşırım." . O yüzden ara." (Büyük versiyonu görüntüle)

Kullanıcı yanlış sayfaya geldiğini fark ederse, genellikle "biraz can sıkıcı" bulur ve onları ana sayfaya geri dönmeye ve açmak istediği slaydı bulup tekrar tıklamaya zorlar. Bununla birlikte, bir konunun ne olduğunu anlamadığı ve istenmeyen açılış sayfasına göz atmaya başladığı, açıkçası bunu son derece düşük alaka düzeyine sahip bulduğu durumlar da gördük.

Fareyle üzerine gelindiğinde otomatik döndürmeyi duraklatmak, bu nedenle kullanıcıları dolambaçlı yollara göndermekten ve hatta potansiyel olarak onları yanıltmaktan kaçınmak için çok önemlidir. Ne yazık ki, ana sayfa kıyaslamamızda, ana sayfa atlıkarıncasına sahip masaüstü e-ticaret web sitelerinin %42'sinin şu anda kullanıcı faresiyle üzerine geldiğinde otomatik döndürmeyi duraklatmadığını gördük.

Otomatik döndürme, kullanıcının faresi slayttan ayrıldığında (yani artık karusel üzerinde gezinmiyorsa), kullanıcının başka bir şekilde dönerek ile etkileşime girmediği varsayılarak devam edebilir.

Otomatik Döndürme Herhangi Bir Etkin Kullanıcı Etkileşiminden Sonra Kalıcı Olarak Durmalıdır

Kullanıcı, karusel üzerinde gezinmenin ötesinde etkileşime girdiyse (örneğin, dönen çarkın kontrollerini kullanarak bir slaydı aktif olarak değiştirerek), otomatik döndürme, kullanıcı gezinmese bile kalıcı olarak durmalıdır.

Bir kullanıcı, dönen döngünün sonraki veya önceki düğmesini veya slayt göstergesini tıklatarak bir slaydı aktif olarak değiştirdiğinde, seçimin kasıtlı olması muhtemeldir ve kullanıcı (potansiyel olarak) geri dönmeden önce ana sayfanın diğer bölümlerini kontrol etmeye karar verirse değiştirilmemelidir. seçtikleri slayta.

Bir tıklama, en iyi ihtimalle kullanıcı odağını ölçmek için kullanılabilen bir fareyle üzerine gelmeden temelde farklıdır. Bir tıklama, aktif bir kullanıcı isteğidir ve güçlü bir ilgi ve niyet göstergesidir. Bu nedenle, kullanıcı atlıkarıncayı kasıtlı olarak belirli bir slayda ayarlamış olabileceğinden, kullanıcı atlıkarınca ile aktif olarak etkileşime girdiğinde otomatik döndürmeyi kalıcı olarak durdurun.

3. Dönen Kontrollerin İki İşlevi Gerçekleştirmesi Gerekiyor

Net kontroller, kullanıcıların bir atlıkarınca içeriğini bağlamsallaştırmasına ve kontrolü elinde tutmasına yardımcı olur. Test sırasında, kaydırıcı kontrollerinin iki işlevi yerine getirmesi gerektiğini gördük: set arasında mevcut slaydı belirtmek ve kullanıcıların ileri geri gezinmesine izin vermek. Şaşırtıcı derecede çok sayıda kaydırıcı tasarımı bunlardan sadece birini yapar.

(Büyük versiyonu görüntüle)

Set arasında mevcut kaymanın gösterilmesinin birkaç amaca hizmet ettiği gözlemlendi:

  • Mevcut olanın ötesinde ek slaytlar olduğunu belirtir ve bunun daha fazla içerikli bir atlıkarınca olduğunu iletmeye yardımcı olur. Bu, kullanıcının sonraki slaytları keşfetmesini destekler.
  • Karuselin kaç tane kaydırıcı içerdiğini gösterir. Kullanıcıların, kendilerine ne kadar içerik olduğu söylendiğinde, tüm bir atlı karıncaya bakma olasılıklarının daha yüksek olduğunu gördük.
  • Atlıkarıncanın son slayta çarptığını ve başlangıca geri döndüğünü gösterir.

Slaytları göstermenin geleneksel yolu bir dizi noktadır. Noktaların tasarımı ve yerleştirilmesiyle ilgili bir uyarı: Büyük, renkli bir görüntünün üzerine küçük noktalar yerleştirmek genellikle keşfedilebilirlik sorunlarına neden olur. Noktaları görüntü slaytlarının dışına yerleştirmek, kontrast sorunlarından kaçınmanın en kolay yoludur.

Kaydırıcı denetimlerinin ikinci bileşeni, kullanıcıların slaytlar arasında ileri geri gitmesini sağlar. Geleneksel tasarım basit oklardır. Ancak, çok küçük olmaları ve renkli bir görüntünün üzerine yerleştirildiğinde yeterince kontrast oluşturmamalarının birleşimi nedeniyle ok kontrollerinin kullanıcılar tarafından gözden kaçırıldığını gözlemledik. Bu nedenle, sonraki ve önceki kontrollerin uygun boyutta olduğundan ve kontrastın yeterince keskin olduğundan emin olun.

(Büyük versiyonu görüntüle)

Oklarla denemeler yapmak istiyorsanız, aşağıdaki Amazon'da görüldüğü gibi, aşağıdaki slayttan bir kesit göstererek işlevlerini netleştiren bir tasarım düşünün.

(Büyük versiyonu görüntüle)

Kontrast sağlamanın harika bir yolu, görüntüde kontrollerin görüneceği alanın parlaklığını tespit etmek ve ardından kontrollerin renklerini buna göre değiştirmektir. Google'dan Kenneth Cachia, bu amaç için BackgroundCheck adlı ücretsiz bir komut dosyası bile yaptı. (Ama atlıkarıncanın geri kalanını kopyalamayın çünkü diğer 10 şartımızdan birkaçını ihlal ediyor.)

(Büyük versiyonu görüntüle)

Dönen kontroller için geleneksel tasarım deseni, set arasındaki mevcut kaymayı gösteren bir dizi nokta ve ileri ve geri hareket için oklar olsa da, diğer tasarımlar aynı hedeflere ulaşacaktır. Vurgulanmaya değer tasarımlardan biri, aşağıdaki Amazon atlıkarıncasında görülen “içindekiler tablosu”.

(Büyük versiyonu görüntüle)

İçindekiler, geleneksel nokta ve okların en büyük zayıflıklarından ikisini ele aldığı için özellikle ilginç bir modeldir. İlk olarak, geçerli slaydın göstergesini ve manuel slayt denetleyicisini tek bir UI bileşeninde birleştirir. İkinci olarak, kullanıcılara bir sonraki adımın bir parçasını göstererek bilgi kokusu sağlar ve böylece kullanıcıların slaytlar arasında anlamlı bir şekilde atlamalarına olanak tanır. Luke Wroblewski, Amazon'un bu kalıbın iyi performans gösterdiğini bulduğunu paylaşıyor.

4. Dokunmatik Cihazlarda Her Şey Farklıdır

Mobil e-ticaret web siteleri üzerinde yıllarca süren kullanılabilirlik çalışmamız sırasında, ana sayfa karusellerinin dokunmatik cihazlarda masaüstü cihazlardan çok farklı gereksinimleri olduğunu gördük - masaüstü cihazlar için ana hatlarıyla belirtilen tüm etkileşim mantığının (yukarıdaki 2. bölümde) ) mobilde geçersiz. Ayrıca, yeni gereksinimler geçerlidir. Dokunmatik cihazlarda özellikle aşağıdaki üç uygulama detayının önemli olduğunu gözlemledik:

  • Fareyle üzerine gelme olmaması, otomatik döndürme kullanımını geçersiz kılar.
  • Kaydırma hareketlerini her zaman destekleyin.
  • Döngü resmini mobil ekranlar için optimize edin.

Hover Olmaması, Otomatik Döndürme Kullanımını Geçersiz Kılıyor (%31 Yanlış Anlıyor)

İlk olarak, slaytların otomatik olarak döndürülmesi, yalnızca kullanıcının cihazı fareyle üzerine gelme durumunu destekliyorsa iyi bir fikirdir. Bu çok önemlidir, çünkü fareyle üzerine gelme durumu, bir kullanıcının belirli bir slayta olan potansiyel ilgisini anlamamızı sağlar.

Fareyle üzerine gelme durumunu, kullanıcının bir slaytın içeriğiyle ilgilendiğinin ve metnini okuduktan sonra slaydı açmak isteyebileceğinin bir göstergesi olarak kullanabiliriz. Bu nedenle, kullanıcının metni okumayı bitirmesine izin vermek ve yanlışlıkla yanlış slayda tıklamaktan kaçınmak için otomatik döndürme geçici olarak duraklatılmalıdır.

Burada, Toys'R'Us'un mobil web sitesindeki bir konu, “Baharda Yaz Mega İndirimi” adlı ilginç bir slayt fark etti ve ekrana dokunmak için uzandı. Ne yazık ki atlıkarınca milisaniyeler önce otomatik olarak döndürülerek onu bir "Bike Blast" satışına yönlendirdi. (Büyük versiyonu görüntüle)

Pratikte bu, otomatik döndürmenin mobil web siteleri veya dokunmatik cihazlar için uygun olmadığı anlamına gelir, çünkü rotasyonda kritik duraklamayı başlatmak için bir fareyle üzerine gelme durumundan yoksundur. Kullanıcının sayfadaki odağını anlamanın bir yolu olmadan, kullanıcının belirli bir slaydı okuyup okumadığını veya mevcut slayda tıklamak üzere olduğunu bilmek imkansızdır. Otomatik döndürme, kullanıcı döner sekmeye tıklamadan sadece milisaniyeler önce bir slayt değişikliği başlatarak yanlış sayfayı açmalarına neden olabilir - mobil kullanılabilirlik çalışmamızda defalarca gözlemlendiği gibi.

Gerçekleştirdiğimiz mobil e-ticaret kullanılabilirlik karşılaştırması, mobil e-ticaret web sitelerinin %56'sında bir ana sayfa atlıkarıncasına sahipken, mobil web sitelerinin %31'inde otomatik dönen bir ana sayfa atlı karıncaya ve %25'inde manuel bir ana sayfa atlı karıncaya sahip olduğunu ortaya koydu. Diğer bir deyişle, atlıkarınca bulunan mobil web sitelerinin yarısına yakını, mobil karuselleri otomatik olarak dönmediği için kabul edilebilir bir uygulamanın başlangıcına sahiptir.

Kaydırma Hareketlerini Daima Destekleyin (%12 Yapmayın)

İkinci olarak, önemli dokunma hareketlerini destekleyin - özellikle kaydırma, çünkü kullanıcılar dokunmatik cihazlarda "galerilerde" bu şekilde gezinildiğini beklemeye başladılar. Bu, sonraki ve önceki düğmeler ve slayt göstergeleri gibi geleneksel atlıkarınca arabirim denetimlerini uygulamamanız gerektiği anlamına gelmez; ancak, kaydırma hareketi desteğine ek olarak atlıkarınca kontrollerinin sağlanması gerektiğini gördük. Mobil e-ticaret kıyaslamamız, mobil web sitelerinin %12'sinin genel olarak resim galerileri için kaydırma hareketlerini desteklemediğini ortaya çıkardı (ancak uyumluluk, ürün sayfalarındaki %40'ın tam olarak desteklemediği resim yakınlaştırma hareketlerinden daha yüksek olmasına rağmen).

Yan not: Açık olmadığı için masaüstündeki kaydırma hareketlerine de güvenmeyin. Masaüstü web sitelerinin de tıklanabilir carousel kontrollerine ihtiyacı vardır.

Mobil Çalışmayı Optimize Edin

Ana sayfa atlıkarıncalı mobil web sitelerini incelerken sıklıkla gözlemlediğimiz bir şey, masaüstü web sitesindeki resimlerin yeniden kullanılmasıdır. Portre modunda tutulan küçük bir mobil ekrana küçültüldüğünde slaytlardaki herhangi bir metnin okunaklı kalmasını sağladığı sürece bu bir sorun değildir. Bazen, mobil web sitelerini (özellikle duyarlı web sitelerini), hatta 100 milyon doları aşan çevrimiçi satış markasını aşan şirketlerin mobil web sitelerini kıyaslarken ve denetlerken, masaüstü için oluşturulan sanat eserlerinin basitçe küçültüldüğünü ve mobil cihazlarda yeniden kullanıldığını görüyoruz.


Neiman Marcus, masaüstü carousel çizimini basitçe küçültür ve onu doğrudan mobil ana sayfa carousel'inde kullanır. Sağda görüldüğü gibi, bu, küçük mobil ekran için tasarlanmadığından metnin bir kısmını zorlukla okunabilir hale getiriyor. (Büyük versiyonu görüntüle)

Son olarak, mobil kullanıcıların yavaş yüklenen karusellere karşı daha az sabrı var gibi görünüyor. Bunun nedeni, kullanıcının dönen içeriğin yüklenmesi için 1 ila 5 saniye beklerken tipik olarak gezinme menülerini ve diğer içeriği tarayabildiği masaüstünün aksine, genellikle ekranlarında atlıkarıncadan başka bir şey görememeleridir. Bu nedenle, okunabilirliği sağlamanın yanı sıra, slayt görüntülerinin ağırlığının bir mobil cihazın bant genişliği için optimize edildiğinden emin olun.

10 Döngü Gereksinimi

İçeriğin kalitesinin ve alaka düzeyinin ötesinde, ciddi kullanılabilirlik sorunlarından kaçınmak için bir ana sayfa atlıkarıncasının tasarımı ve mantığının aşağıdaki 10 gereksinimin tümünü karşılaması gerekir:

  1. Tüm platformlar: Slaytları dikkatli bir şekilde sıralayın, çünkü ilk slayt sonraki slaytlara göre birkaç kat daha fazla poz alacaktır.
  2. Tüm platformlar: Döngü, bir web sitesinin özelliklerine ve içeriğine erişmenin hiçbir zaman tek yolu olmamalıdır.
  3. Masaüstü: Otomatik döndürmeyi yalnızca, hareketli grafiklerin neden olduğu dikkatin diğer ana sayfa öğelerinden uzaklaşması kabul edilebilir olduğunda kullanın.
  4. Masaüstü: Slaytları orta hızda döndürün - yalnızca başlığı olan bir slayt için genellikle 5 ila 7 saniye yeterlidir. Metin bilgilerinin miktarı slaytlar arasında farklılık gösteriyorsa, genellikle her slayt için benzersiz bir dönüş süresi istenir (neredeyse hiç uyulmayan bir ayrıntı).
  5. Masaüstü: Kullanıcının muhtemelen okuyacağı veya tıklamak üzere olduğu bir slaydı değiştirmekten kaçınmak için üzerine gelindiğinde otomatik döndürmeyi duraklatın.
  6. Masaüstü: Kullanıcı atlıkarıncanın arayüz kontrollerine tıkladıktan sonra otomatik döndürmeyi kalıcı olarak durdurun.
  7. Tüm platformlar: Her zaman set arasında geçerli slaydı belirtin ve kullanıcıların ileri geri gezinmesine izin verin. Geleneksel olarak bu, yeterince büyük ve alttaki görüntüyle zıtlık oluşturan noktalar ve oklar kullanmak anlamına gelir. En azından masaüstünde bu, "içindekiler tablosu" tasarımının kullanılması gibi başka yollarla başarılabilir.
  8. Dokunmatik cihazlar: Fareyle üzerine gelme durumunun olmaması (ve dolayısıyla otomatik döndürmeyi duraklatmanın bir yolu) nedeniyle, mobil web sitelerinde veya dokunmatik cihazlarda asla otomatik döndürme yapmayın.
  9. Dokunmatik cihazlar: Diğer tüm UI kontrollerine ek olarak kaydırma hareketlerini destekler.
  10. Mobil cihazlar: Resmi masaüstünden küçültüyorsanız, slaytlardaki metnin hala okunabilir olduğundan emin olun.

Şimdi, bu uzun tuzaklar listesiyle, çoğu ana sayfa karuselinin, yetersiz uygulandıkları için yetersiz performans gösterdiğini görebiliyoruz. Örneğin, otomatik olarak dönen masaüstü karusellerinin %42'si üzerine gelindiğinde duraklama yapmıyor. Ayrıca, Nielsen Norman Group'tan ödünç alınan Bir Döngü Kullanmalı mıyım? 2) ve üzerine gelindiğinde otomatik döndürmeyi duraklatmaz (kural 5) — ayrıca, atlıkarınca ana gezinme ve başlığın üzerine yerleştirilir. (Sonraki bir makalede, Nielsen Norman Group atlıkarıncalar hakkında daha incelikli bir bakış açısı sunuyor.)

10 gereksinimin tümü sizin için çok fazla iş olacaksa veya yatırım yapmaya değmeyecekse, o zaman diğerlerinin çoğunun önerdiği şeyi öneriyoruz: Bir atlıkarınca hiç kullanmayın. Bunun yerine, aşağıda sunulan alternatife güvenin.

Karusellere Bir Alternatif

Kullanılabilirlik testimiz sırasında, ana sayfa karusellerine genel olarak iyi performans gösteren bir alternatifin, ana sayfada farklı bölümler olarak statik "slaytları" basitçe görüntülemek olduğunu gördük.


LL Bean'in ana sayfasının iki sürümü: Soldaki sürüm, zahmetli bir atlıkarıncaya dayanır (kural 7: mobilde otomatik döndürmeyi ihlal eder), sağdaki daha yeni sürüm, tüm resimleri doğrudan evde görüntülemenin iyi performans gösteren modelini kullanır. sayfa. (Büyük versiyonu görüntüle)

Slaytları ana sayfaya dağılmış statik içerik bölümleri olarak yeniden kullanmanın (önem derecesine göre) bir takım faydaları vardır:

  • Slaytları değiştirmek için otomatik döndürme ve dönen kontrollerden kurtulur, bu da onu özellikle mobil web siteleri için çok uygun hale getirir.
  • Kullanıcıların ana sayfalarla nasıl etkileşime girdiğiyle son derece uyumludur. Test sırasında, mobil kullanıcıların %70'inin, geldikleri web sitesinin türünü anlamak için ilk kaydırma ve ana sayfayı taradığını gözlemledik. Her biri ısmarlama görüntülere sahip bir avuç anahtar yolu tanıtmak, dönen bir kaydırıcıdan (manuel veya otomatik olarak döndürülen) çok daha taranabilir bir ana sayfa sağlar.
  • 10 gereksinimin tümüne uyan bir karuselden uygulanması önemli ölçüde daha ucuzdur. Kuruluşa bağlı olarak, ana sayfa içeriğini güncellemenin bir dönen slaydı değiştirmekten daha pahalı olduğu kanıtlanabilir.
  • Kuruluş, içeriğin sıkı bir şekilde küratörlüğünü yapma ihtiyacını çok daha kolay bir şekilde anlayacaktır (bir çok içeriği bir atlıkarınca içine sığdırabileceği için atmak yerine).