Breadcrumb UX’i bozar mı?

Breadcrumb UX’i bozar mı?

İlk yazdığım başlık, benim bile içimi şişirdiği için çok daha ayak üstü sohbeti kıvamında bir alternatifle dikkatinizi çekmeye çalıştım. Umarım başarılı olmuşumdur zira “breadcrumb” özellikle içerik yoğun web varlıkları için kullanıcının olumlu bir deneyim yaşaması üzerinde çok önemli bir rol oynuyor. UX’i bozmuyor, aksine kullanıcıya içerik tüketiminde ciddi anlamda navigasyon desteği sağlıyor. Nasıl mı? Önce “Neden breadcrumb kullanmamız gerekiyor?” sorusunu yanıtlayalım. Sonra da “Nasıl?” sorusuna yanıt bulalım.

Breadcrumb’ı, bir web varlığı üzerinde yönümüzü daha kolay bulabilmek için kullanıyoruz

İşte yukarıdaki çıkarımın temel motivasyonu ve onun sebep-sonuç ilişkisi de köklerini insan evrimindeki yapı taşlarından birine kadar salıyor: peşinde koştuğumuz avın bize vereceği enerji, onu avlamak için harcayacağımız enerjiden fazla dur! Orada bir sorun var.

hepsiburada-breadcrumbs

Jakob Nielsen 1995’ten bugüne “Breadcrumb kullanın.” telkininde bulunmaya devam ededursun, o günden bugüne, özellikle de son yıllarda, arayüz tasarımcıları ve yazılım geliştiricilerde “Yahu hala mi breadcrumb istiyorsunuz? Vazgeçsek artık o eski kafalardan!” şeklinde özetlenebilecek bir tepki alma frekansı yükselmeye yüz yuttu.

Oysa ki web varlığınız zengin ve katmanlı bir içerik mimarisi sunuyorsa, ya da üzerinde e-ticaret dönen bir web sitesi işletiyorsanız, sizin “Breadcrumb kullanmalı mıyım?” diye değil de “Hangi breadcrumb tiplerini kullanmalıyım?” diye sormanız gerekiyor.

Baymard Insitute, 50 ana akım e-ticaret web sitesini inceledikten sonra hazırladığı raporda örneklem içindeki e-ticaret web sitelerinin %68’inin breadcrumb kullanımlarının kullanılabilirlik standartlarına uygun olmadığının altını çiziyor. Spoiler’ı verip, sonraki paragrafa geçiyorum: breadcrumb’ın kabul edilmiş en az 3 farklı tipi var ve siz doğru yerde yanlış olanı kullanıyor olabilirsiniz.

Breadcrumb tipleri

Breadcrumb’ın asli görevi kullanıcının kendisine soracağı 3 soruya, doğru yerde, doğru yanıtı verebilmektir:

  1. Şu anda neredeyim?
  2. Buradan nereye gidebilirim?
  3. Gidebileceğim yerlere, gerçekten gitmeli miyim? (Bu sonuncusu biraz iddialı ama yine de ekledim.)

Location based breadcrumb:

En çok tercih edilen ve kullanıcının bulunduğu noktaya nasıl gelmiş olduğunu göstermeyi amaçlayan, konum bazlı yer gösterimi için kullanılan breadcrumb tipi.

hepsiburada-location-based-breadcrumbs

Attribute based breadcrumb:

Özellikle e-ticaret sitelerinin, kullanıcının aradığı içeriği bulmak için seçmeyi tercih ettiği “içerik nitelikleri”ni göstermekte kullandıkları breadcrumb tipi.

n11-attribute-based-breadcrumbs

Path (History) based breadcrumb:

Genellikle en az dikkatimizi çeken tip olan path based breadcrumb’ın amacı kullanıcının web varlığı üzerindeki oturumunda tükettiği sayfaları ardışık bir şekilde dizmektir. Nihai hedef, kullanıcıya yaşamış olduğu deneyimi ileriye ve geriye doğru tekrar yaşatabilmek olsa da bu işlevi tarayıcının fabrikasyon ayalarında yer alan “geri” ve “ileri” butonlarımızla da mümkün kılabildiğimizden, spesifik durumlar dışında bu tip sıklıkla tercih edilmemektedir. (Aşağıdaki örnekte, işaretli breadcrumb, kullanıcının gezindiği tüm sayfaları kullanıcıya göstermektense “arama sonuçlarına geri dönme” bağlantısını sunarak,kullanıcıya en azından az önce bulunduğu içerik ortamına hızlı bir geri dönüş yapabilme imkanını  sunmaktadır.)

path-location-based-breadcrumbs

Peki breadcrumb halen işe yarıyor mu?

Aşağıdaki kabul görmüş adımlara sadık olarak breadcrumb yaratıyorsanız, yanıtım net bir “Evet”:

1- Kullanıcının bulunduğu sayfayı breadcrumb’a eklemeyin. (Eklerseniz de tıklanamaz olmasına özen gösterin.)

breadcrumbs-kurallari-1

2- Kullanıcının breadcrumb adımlarını birbirinden rahatlıkla ayrıştırmasını sağlayacak bir stil ataması yapın. (Ya da separatör işaretler kullanın.)

breadcrumbs-kurallari-2

3- Ana navigasyonla breadcrumb’ı asla yarıştırmayın!

breadcrumbs-kurallari-3

“Bunları ben de biliyorum. Yeni bir şey yok mu?”

Breadcrumb kullananlar ile SEO’cuların gizli aşkını, Google’ın bu konuya ne kadar önem verdiğini ve yeni yeni başlanan “fly-out breadcrumb” kullanımını da biliyorsan, o zaman yok diyebilirim.

İşin SEO ayağında breadcrumb’ın doğru şekilde kurgulanması durumunda organik trafik konusunda Google’ın sempatisini kazandığı kesin.

Adobe Creative Cloud aboneliklerinde öğrencilere ve öğretmenlere özel %60 indirim fırsatlarını kaçırmayın.

Fly-out breadcrumb adı verilen yenilikçi breadcrumb şemaları da aşağıdaki Wowhead örneğinde olduğu gibi, dipsiz bir içerik mimarisi olan web varlıklarında, breadcrumb üzerinden 2 boyutlu bir navigasyonel açılımla, kullanıcıya içgüdüsel olarak yürütülebilecek bir araştırmada, hiç beklenmedik anda kullanılabilirlik açısından oldukça faydalı çözümler sunabiliyorlar.

fly-over-breadcrumb

 

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

KEŞFETMEYE DEVAM ET
Yeni dönemde markalar ve tüketici ilişkileri üzerine… markalarin-tuketici-ile-iliski-kurma-yontemleri

Yeni dönemde markalar ve tüketici ilişkileri üzerine…

Gizle
SENİN İÇİN ÖNERİYORUZ
“Lütfen Bizden Ayrılmayın”

“Lütfen Bizden Ayrılmayın”

Gizle