Hazır Bileşenler ve Tanıdıklık: Kullanılabilirlik Kazancı Nereden Gelir

Hazır tema ve bileşen kütüphaneleri kullanılabilirliği artırıyor. Doğru, ama nedeni çoğu zaman yanlış yerde aranıyor: kazanç bileşenin kendi kalitesinden değil, kullanıcının o bileşeni başka sitelerde zaten öğrenmiş olmasından geliyor. Aradaki fark, hazır sistemi nerede kullanacağını da nerede bırakacağını da belirliyor.

Kazanç öğrenme maliyetinin sıfıra yakın olmasından geliyor

Bir kullanıcı sitene geldiğinde arama kutusunu, sepet ikonunu ya da adım göstergesini ilk kez görmüyor. Onlarca başka üründe aynı yerleşimle, aynı davranışla karşılaşmış durumda. Beklentisi oradan gelen bir alışkanlık.

Bunun sonucu şu: senin bileşenin kullanıcının hafızasındaki modele uyuyorsa öğrenme adımı hiç yaşanmıyor, kullanıcı doğrudan işine bakıyor. Uymuyorsa öğrenme adımı geri geliyor ve bedelini kullanıcı ödüyor. Yani hazır bileşenin sağladığı şey estetik değil, atlanan bir öğrenme turu.

Buradan pratik bir ölçüt çıkıyor. Bir bileşen için "daha güzel olur mu" sorusundan önce "kullanıcı bunu daha önce nerede gördü" sorusunu sor. Cevap yoksa, kütüphaneden almanın avantajı da yok demektir; o parçayı zaten kendin tasarlayacaksın.

Özgünlük ile tanıdıklık aynı bütçeden harcıyor

Hazır sistemleri anlatan metinler aynı anda iki şey vaat ediyor: standart bileşenler kullanılabilirliği artıracak, tasarımcı da kurtardığı zamanı marka özgünlüğüne ayıracak. Bu iki vaat aynı yöne gitmiyor. Özgünleştirdiğin her bileşen, tanıdıklıktan gelen avantajı bir miktar geri veriyor.

Çelişkiyi çözmenin yolu katmanları ayırmak. Renk, tipografi, boşluk, köşe yarıçapı, ikon dili: bunlar görünürlük katmanı, değiştirmenin kullanıcıya öğrenme yükü çıkarmadığı yer. Konum, etkileşim sırası, geri bildirim biçimi, klavye davranışı: bunlar model katmanı, kullanıcının hafızasındaki şablonun oturduğu yer.

Bir bileşenin davranışını yalnızca farklı görünsün diye değiştirmem. Görünürlük katmanındaki fark bedava, davranış katmanındaki fark kullanıcıya fatura ediliyor ve o faturayı analitikte "kullanıcı bulamıyor" olarak görüyorsun.

Hazır sistemin görünmeyen bedeli taşıdığın ama kullanmadığın kod

Hazır temalar bileşenleri paket halinde getiriyor. Projende sekiz bileşen kullanıyor olabilirsin, tarayıcı altmış bileşenin stilini indirir. Bu ölçülebilir bir şey, tahmin etmene gerek yok: Chrome DevTools'ta Coverage sekmesini açıp sayfayı yenilediğinde her CSS ve JS dosyasının yüzde kaçının kullanılmadığını satır satır görürsün. Kurumsal temalarda bu oranın yüzde seksenin üzerinde çıkması sık rastlanan bir durum.

Sayfanın açılma süresi doğrudan kullanıcı deneyimi konusu, ayrı bir teknik başlık değil. Yavaş yüklenen bir arayüzde kullanıcı ilk etkileşimi denemeden çıkıyor, dolayısıyla bileşenin ne kadar iyi tasarlandığının bir hükmü kalmıyor. Ölçtükten sonra kullanılmayan kısmı temadan ayıklamak çoğu kurulumda bir yapılandırma dosyası meselesi, tasarımı değiştirmeyi gerektirmiyor.

Hazır bileşen nerede yetmez

Genel görevlerde yeter: giriş, arama, form, liste, sayfalama. Bunların hepsinin oturmuş bir sözleşmesi var ve kullanıcı o sözleşmeyi biliyor.

Ürününe özgü akışta yetmez. Rezervasyon takvimi, sipariş durumu ekranı, çok adımlı bir başvuru: bunlar senin alanının kendi mantığını taşıyor ve ödünç alacak bir alışkanlık yok. Hazır sistemden kazandığın zamanın gideceği yer tam olarak burası. Marka renkleri değil, kimsenin senin yerine tasarlayamayacağı akış.

Erişilebilirlik tarafında da hazır olan her şeyin doğru olduğunu varsayma. Bir bileşeni projeye almadan önce üç şeyi elle dene: sadece Tab tuşuyla bileşenin içine girip çıkabiliyor musun, odaklanılan öğe gözle görülüyor mu, açılır bir yapıysa Esc onu kapatıyor mu? Popüler kütüphanelerde bile açılır menü ve modal bileşenleri bu testlerin en az birinde takılıyor. Sonradan düzeltmek, baştan doğru bileşeni seçmekten pahalı.

Seçerken bakılacak yer

• Bileşenin davranışı yaygın örneklerle aynı mı, yoksa kütüphane kendi icadını mı dayatıyor?
• Görsel katman, davranışı bozmadan değiştirilebiliyor mu?
• Kullanmadığın parçalar paketten çıkarılabiliyor mu?
• Klavye ve odak yönetimi çalışıyor mu?

Dördü de olumluysa hazır sistem sana zaman kazandırır. Biri olumsuzsa kazandığın zaman, sonradan yamalarken harcadığın zamana eşitleniyor.