Anasayfaya Dönüş: Logo, Yazılı Bağlantı ve Breadcrumb

Bir sitede yolunu kaybeden ziyaretçinin ilk refleksi geriye değil, başa dönmektir. Logonun tıklanabilir olması bu ihtiyacı kısmen karşılar, tamamen değil. Aradaki farkı yazılı bir anasayfa bağlantısı ve doğru kurulmuş bir breadcrumb kapatır.

Logo tıklanabilir, ama bu öğrenilmiş bir bilgi

Sol üstteki logonun anasayfaya götürmesi yazılı olmayan bir sözleşme. Sorun şu ki bu sözleşmeyi imzalayan taraf, yıllardır web kullanan taraf. Peki bu davranışı hiç öğrenmemiş biri siteye girse ne olur? Logoya tıklamayı denemez, menüde arar, bulamazsa arama kutusuna gider ya da tarayıcının geri tuşuna sarılır.

Bir kurumsal sitede logonun hiç bağlantı taşımadığını fark ettim, kimse de bildirmemişti; kullanıcılar geri tuşuyla idare ediyordu. Sessiz kalması, sorun olmadığı anlamına gelmiyordu.

Ekran okuyucu tarafında durum daha net. Logo bağlantısının erişilebilir adı görsel dosyasının adı ya da "logo" ise, bağlantı listesinde hiçbir şey ifade etmez. Alt metni marka adı ve hedefiyle birlikte yazın: <a href="/"><img alt="Site Adı, anasayfa"></a>. Üç kelimelik bir düzeltme, tek satır kod.

Yazılı bağlantı nereye konur

Ana navigasyonun ilk öğesi doğal yeri. Etiket "Anasayfa" olsun, marka adı ya da ev ikonu olmasın: ikon tek başına belirsiz, marka adı ise logonun tekrarı gibi okunur.

Peki her sayfada gerçekten gerekli mi? Arama motorundan gelen ziyaretçi siteye ortadan giriyor, yani hiyerarşiyi hiç görmeden bir alt sayfada açılıyor. O ziyaretçi için üst seviyeye çıkan bir yol yoksa site tek sayfadan ibaret görünür. Gerekli.

Kullanıcı zaten anasayfadayken

Yaygın tavsiye, anasayfada bu bağlantının gösterilmemesi. Katılmıyorum. Öğeyi menüden çıkarınca menü her sayfada aynı kalmaz, kalan öğelerin yatay konumu kayar ve kullanıcının kas hafızasına yerleşen hedefler yerinden oynar.

Daha iyisi öğeyi yerinde bırakıp bağlantı olmaktan çıkarmak: href kaldırılır, aria-current="page" eklenir, görsel olarak da pasif gösterilir. Böylece hem hizalama bozulmaz hem de ekran okuyucu bulunulan sayfayı bildirir. Uygulama maliyeti, menü şablonunda tek bir koşul.

Breadcrumb ile çakışıyor mu

Breadcrumb'ın kökündeki "Anasayfa" ile menüdeki "Anasayfa" aynı adrese gider, bu yüzden gereksiz tekrar sayılır ve biri silinir. İkisi aynı işi yapmıyor. Menüdeki öğe site genelinde sabit bir çıkış kapısı, breadcrumb'daki öğe ise bulunduğunuz konumun kökü; ikincisi tek başına değil, ardından gelen kategori zinciriyle anlam taşır.

Silinecek bir şey varsa o da tek seviyeli sayfalarda breadcrumb'ın kendisi. "Anasayfa > İletişim" hiçbir hiyerarşi bilgisi vermez, sadece satır kaplar. Breadcrumb'ı en az iki ara seviyesi olan bölümlerde gösterin.

İki bağlantının aynı sayfada bulunması ekran okuyucu kullanıcısı için de sorun değil, yeter ki isimleri ayırt edilebilsin ve breadcrumb bir nav içinde etiketlenmiş olsun.

Mobilde ne değişir

Hamburger menünün içine gizlenen anasayfa bağlantısı iki tıkla ulaşılır hale gelir ve pratikte kullanılmaz. Sabit alt menü bunu çözer, ama bedava değil: dikey alandan kalıcı olarak yer yer, form sayfalarında klavye açıldığında girdi alanlarıyla çakışabilir, uzun listelerde son öğeyi örter.

Ya sabit çubuk olmasaydı? O zaman en azından üstteki logonun her sayfada görünür kalması, yani sticky header, aynı işi daha ucuza yapar. Hangisini seçerseniz seçin, ölçün: anasayfaya dönüş tıklamalarının kaç tanesi logodan, kaç tanesi yazılı bağlantıdan geliyor? İkisine ayrı olay adı vermek beş dakikalık iş, ve tartışmayı fikirden veriye taşır.