Split Button Kötü Değil, Küçük Yapılınca Kötü

Mobil menüde bir başlığa dokunduğunuzda kategori sayfası mı açılmalı, alt menü mü? Tek dokunuşa iki iş yükleyen split button bu yüzden sürekli eleştiriliyor. Eleştirinin bir kısmı haklı; kalanı, ölçü hatasını fikir hatası sanmaktan geliyor.

Dört itirazın üçü uygulamayla ilgili

Split button'a yöneltilen itirazlar hep aynı listeden çıkar: kullanıcı alışkanlığına aykırıdır, yanlış dokunmaya yol açar, keşfedilemez, arayüzü güvenilmez gösterir. Listeye tek tek bakınca hepsinin aynı ağırlıkta olmadığı görülüyor.

Alışkanlık iddiası zayıf. Ok işaretiyle ayrılmış menü başlığı mobil arayüzlerde yıllardır kullanılıyor, kullanıcı bu kalıbı tanımıyor değil. Yanlış dokunma ise gerçek, ama sebebi fikir değil ölçü: iki hedef ayırt edilemeyecek kadar dar olduğunda parmak ikisinin arasına düşer. Aynı başlığa iki kez dokunup iki farklı sonuç almak da ancak dokunulan yerin neresi olduğu görünmüyorsa güvensizlik yaratır.

Geriye ciddiye alınması gereken tek itiraz kalıyor: keşfedilebilirlik. İki alanın ayrı olduğu görsel olarak belli değilse kullanıcı ikincisini hiç denemez. Çözümü de bellidir, ayırıcı bir çizgi ve açma alanına başlıktan farklı bir zemin.

Ölçü meselesi

WCAG 2.2, dokunma hedefleri için 24×24 CSS pikselini alt sınır sayıyor (2.5.8 Target Size Minimum); platform kılavuzları rahat kullanım için 44 piksel civarını öneriyor. Yan yana iki hedef koyduğunuzda bu ölçü ikisi için ayrı ayrı geçerlidir, toplam için değil.

Yer sıkıntısı bahane olamaz. 360 piksel genişliğinde bir ekranda açma alanına 48 piksel ayırdığınızda başlığa 312 piksel kalır ve menü etiketleri o alana rahatça sığar. Sorun çoğu şablonun ok işaretine 20 piksellik bir kutu ayırıp geri kalanını bağlantıya bırakması.

Alternatifler ve hangisinin ne zaman doğru olduğu

Kategori bağlantısını hiç vermemek

Kategori sayfası zaten alt başlıkların listesinden ibaretse mobilde o sayfaya bağlantı vermenin karşılığı yok. Kullanıcı bir dokunuş kazanır, siz bir sorunu ortadan kaldırırsınız. Kategori sayfasında özgün metin, filtre ya da farklı bir şablon varsa bu yol kapanır.

Alt menünün içine tümünü gör satırı koymak

En savunulabilir çözüm bu. Başlığa dokunmak alt menüyü açar, açılan listenin ilk satırı kategori sayfasına gider. Masaüstünde ve mobilde aynı yapı çalışır, ayrı bir davranış öğretmeniz gerekmez. Etiketi "Ana sayfa" yapmayın, kullanıcı site anasayfasına gideceğini sanır; kategori adını içeren bir etiket net durur.

Çift dokunuş

İlk dokunuş açar, ikinci dokunuş sayfaya götürür. Kulağa zarif geliyor, pratikte iki yerden çatlıyor. Açtığı menüyü kapatmak isteyen kullanıcı başlığa tekrar dokunur ve kendini kategori sayfasında bulur. İkincisi daha ağır: bu davranışın klavyede karşılığı yoktur. Kullanıcı zamanla alışır argümanı da ilk ziyaretçi için hiçbir şey söylemiyor, oysa navigasyon menüsü tam olarak ilk ziyaretçinin yeri.

Menü derinliği bir SEO vaadi değildir

Menüyü iki ya da üç kademeli kurmanın arama sonuçlarına kendiliğinden bir etkisi yok. Alt sayfalara giden bağlantıların sayfada bulunması iş görür; onları bir menü bileşenine gömmek ek değer üretmez. Kademe eklemenin gerekçesi tarama değil, kullanıcının aradığını daha az dokunuşla bulması olmalı.

Erişilebilir hali, doğru yapılmış split button'dur

Bir menü başlığının hem bağlantı hem açıcı olması klavyede tek öğeyle çözülemez. Enter tuşu bağlantıyı izler, alt menüyü açmak için ikinci bir eyleme ihtiyaç vardır. Erişilebilir kurulum bellidir: başlık a olarak kalır, yanına aria-expanded taşıyan ayrı bir button gelir, ekran okuyucu menünün açık mı kapalı mı olduğunu bu değerden okur.

Bu yapıyı kurduğunuzda elinizde kalan şeye dikkat edin: doğru ölçülerle yapılmış bir split button. Kaçınılması gereken kalıbın adı değildi, 20 piksellik dokunma alanına sıkıştırılmış ve durumunu hiçbir yere bildirmeyen hâliydi.