Bağlantı mı Buton mu: Komutu Arayüzde Doğru Etikete Yazmak

Bir arayüzde eylemi bağlantı mı buton mu yapacağınız görsel bir tercih değil. Bağlantı gezinir, buton durumu değiştirir. Bu ikisini karıştıran arayüz yalnızca kullanıcıyı değil, sayfaları önden yükleyen tarayıcıyı ve bağlantıları takip eden botu da yanıltır.

Ayrım görünüşte değil, sonuçta

Bağlantı bir adrese götürür. Adres çubuğu değişir, geri tuşu çalışır, hedef yer imine eklenebilir. Buton bir işlem başlatır: kaydeder, siler, sepete ekler, filtreyi uygular. Seçim kriteri eylemin birincil ya da ikincil olması değil, bir şeyin değişip değişmemesi.

Bu yüzden yaygın tavsiyenin “ana eylem buton, yan eylem bağlantı” biçimindeki kısaltması yanlış yere bakar. Görsel ağırlık ayrı bir karar. Bir işlemi button ile yazıp ona sade, düz metne yakın bir görünüm vermek tamamen meşru. Ters yön meşru değil: gezinme hedefi olmayan bir eylemi a href ile yazmam.

Silme bağlantısı, tavsiyenin kendi kuralıyla çeliştiği yer

Aynı tavsiye setinde iki madde yan yana durur. Büyük sonuç doğuran eylemler için buton kullan, sonra “Sil” ve “Hesabımı sil” ikincil eylem sayılıp bağlantıya verilir. İkinci madde birincisini yiyor, çünkü silme bir arayüzde yapılabilecek en büyük durum değişikliği.

Sorun görgü kuralı değil, protokol. a href tıklandığında GET ister; GET ise tanımı gereği durum değiştirmeyen istektir ve buna güvenen yazılım çok. Tarayıcı bağlantıları önden yükler. Sohbet uygulaması yapıştırılan adrese önizleme üretmek için gider. Kurumsal posta tarayıcısı gelen bağlantıyı açıp güvenli mi diye bakar. Arama botu takip eder. Gerçek bir href arkasına silme koyarsanız bu isteklerden herhangi biri, kimse tıklamadan kaydı siler. Klasik sonucu şöyle görürsünüz: kimsenin dokunmadığı bir liste bir sabah boş bulunur.

Silme, form içinde POST ya da DELETE gönderen bir button olur. Kırmızı olsun, ikonsuz olsun, düz metin gibi görünsün; görsel taraf serbest. Tıklanan şeyin bağlantı olmaması gerekiyor.

Kullanıcı tarafında ikinci bir gerekçe var. Bağlantı, orta tuşla ya da Ctrl ile yeni sekmede açılabileceği sözünü verir. Silme bağlantısını yeni sekmede açan kişi ya boş bir sayfa görür ya da kaydının gittiğini fark etmeden sekmeyi kapatır.

Klavye ve ekran okuyucu tarafı

button hem Enter hem boşluk tuşuyla tetiklenir, bağlantı yalnızca Enter ile. Üzerine tıklama olayı bağlanmış bir div ikisiyle de tetiklenmez, odak bile almaz. Ekran okuyucu öğeyi “bağlantı” ya da “düğme” diye duyurur ve bu duyuru bir vaat: biri sizi başka yere götürecek, öteki bir şey yapacak.

Bağlantıya role değeri vererek duyuruyu düzeltebilirsiniz. Ardından boşluk tuşu için kendi tuş dinleyicinizi yazmanız, href davranışını iptal etmeniz, odak sırasını kontrol etmeniz gerekir. Üç yama, üçü de kırılabilir. Doğru etiketi baştan yazmak bunların hiçbirini gerektirmiyor.

Etiket yazarken

Buton metni fiil ve nesneden oluşur, kısadır: “Siparişi tamamla”, “Kaydet”. Dört kelimeyi aşan buton metni genellikle butonun ne yaptığına karar verilmediğini gösterir. Böyle bir durumda metni kısaltmak çözüm değil, eylemi ikiye bölmek çözüm.

Bağlantı metni ise bağlamından koparıldığında da anlaşılmak zorunda, çünkü ekran okuyucu kullanan biri sayfadaki bağlantıları liste halinde gezebiliyor. O listede “buraya”, “devamı” ve “tıklayın” yan yana dururken hiçbiri bir şey söylemez. “Sipariş detaylarını görüntüle” söyler.

Baskın buton bütçesi

Bir ekranda dolgulu, yüksek kontrastlı butondan beş tane varsa o ekranda birincil eylem yoktur. Hiyerarşi karşılaştırmadan doğar, tek tek öğelerin stilinden değil. Karar noktası başına bir baskın buton tutun, geri kalan her şey sade buton ya da düz bağlantı olsun. Ana menüyü, sekmeleri ve kategori listesini butona çevirmek bu bütçeyi ilk ekranda bitirir; üstelik gezinmeyi tarayıcının bildiği davranıştan koparır.