Mobil Breadcrumb Tasarımı: Nerede İşe Yarar, Nerede Yer Kaplar
Breadcrumb, mobilde çoğu zaman ekranın en üstündeki en değersiz satırdır. Değerli olduğu bir durum var: kullanıcı arama sonucundan doğrudan üç dört kademe derine düştüğünde geri tuşu onu siteye değil Google'a geri götürür, elinde kalan tek yukarı yol o satırdır. Yani soru breadcrumb koyup koymamak değil, hangi sayfada koyduğun.
Her sitede gerekmiyor
Blog gibi tek katmanlı yapılarda breadcrumb, "Ana Sayfa > Yazı Başlığı" diye anlamsız bir satıra dönüşür ve mobilde en pahalı alanı, ilk ekranın üstünü yer. Gerçekten karşılığını verdiği yer, kategori derinliği üçü geçen kataloglar: e-ticaret, dokümantasyon, ilan siteleri. Ölçütü şuraya bağlarım: sayfaya dışarıdan giren birinin bir üst bağlama geçmek için başka yolu yoksa breadcrumb gerekli, varsa süs.
Filtreli listelerde durum biraz farklı, çünkü orada kullanıcı yukarı değil geriye, yani daha az filtreli bir sonuç setine dönmek ister. O ihtiyacı breadcrumb yerine kaldırılabilir filtre etiketleri (chip) çok daha iyi karşılar.
Üç tür var, mobilde ikisi ayakta kalıyor
Konuma dayalı breadcrumb site hiyerarşisindeki yeri gösterir: Ana Sayfa > Erkek Ayakkabı > Spor Ayakkabı. Öngörülebilir olduğu için mobilde en güvenlisi budur. Özelliğe dayalı olan seçilen filtreleri taşır ve katalog aramalarında işe yarar. Yola dayalı breadcrumb ise kullanıcının gezdiği rotayı yansıtır; aynı sayfa her ziyarette farklı bir yol gösterdiği için mobilde kafa karıştırmaktan başka bir şey yapmaz, geri tuşunun zaten yaptığı işi tekrar eder.
Kısaltmak ile yatay kaydırma aynı anda tavsiye edilemez
Bu konudaki rehberlerin çoğu yan yana iki şey söyler: yolu son iki seviyeye indir, bir de taşarsa yatay kaydırılabilir yap ve kaydırılabildiğini okla belli et. İkisi birbirini götürür. Yolu iki seviyeye indirdiğinde 360 piksellik bir ekranda taşma zaten kalmaz, kaydırmaya gerek olmaz; kaydırma koyman gerekiyorsa yolu yeterince kısaltmamışsın demektir. Bir e-ticaret projesinde tam bunu yaşadım: yatay kaydırmalı breadcrumb'ta tıklamaların neredeyse tamamı görünen son iki bağlantıya gidiyordu, kaydırıp sola bakan kimse yoktu.
Pratik karşılığı sade: mevcut sayfanın bir üstü ve mümkünse kök kategori. Ortadaki kademeler için üç nokta koymak da çözüm değil, dokunulacak minik bir hedef daha ekler. Uzun etiketleri kısaltırken kelimenin ortasından değil sonundan kes, "Oyun Bilgisay…" okunur ama "Oyun B. Aks." okunmaz.
Dokunma alanı yazı boyutundan önemli
Breadcrumb bağlantıları satır içinde yan yana durduğu için doğal olarak birbirine yapışır. Android tarafında önerilen dokunma hedefi 48dp, iOS tarafında 44pt; 14 piksellik bir yazı bunu tek başına sağlamaz, yukarı aşağı dolgu vermen gerekir. Ayırıcı olarak kullandığın oku bağlantının içine alma, yanlış kademeye giden dokunuşların çoğu oradan çıkar.
Rengi de dekoratif görme. Mevcut sayfayı gösteren son kademe bağlantı olmamalı ve gri kalmalı, tıklanabilir kademeler ise gövde metninden ayırt edilebilmeli. Ekran okuyucu için listeyi <nav aria-label="breadcrumb"> içine alıp sıralı liste olarak kurmak, ayrı bir erişilebilirlik çabası değil, doğru işaretlemenin kendisi.
Asıl kazanç arama sonucunda
Breadcrumb'ın ölçülebilir faydası çoğu zaman sitenin içinde değil dışında görünür. Sayfaya BreadcrumbList yapısal verisi eklediğinde Google, arama sonucunda çıplak URL yerine kategori yolunu gösterebiliyor; mobil sonuç listesinde bu, kullanıcının tıklamadan önce sayfanın nereye ait olduğunu görmesi demek. Görünür breadcrumb ile yapısal veriyi aynı tutmaya dikkat et, ikisi ayrışırsa işaretleme işe yaramaz.
Yani mobilde breadcrumb'ı kullanıcı navigasyonu diye savunmak çoğu sitede zorlama olur. Katalog derinliği varsa koy, iki kademede kes, dokunma alanını büyüt, yapısal veriyi ekle. Gerisi ekranın üstünde boşuna duran bir satır.