Hazır Tema ile Kurulan Sitelerde Kullanıcı Deneyiminin Sınırları

Hazır tema seçmek bir tasarım kararı değil, başkasının verdiği onlarca tasarım kararını toptan devralmaktır. Site kurulduğu anda tipografi ölçeği, form davranışı, odak sırası ve mobil kırılım noktaları çoktan belirlenmiştir. Elinizde kalan alan sanıldığından dar, ama neresi olduğunu bilirseniz deneyimin büyük kısmı hâlâ oradan kurtarılabilir.

Tema ne verdiyse onu tartışın, gerisi sizin

Şablon tartışması genelde "hangi tema daha güzel" diye başlar ve orada biter. Oysa ziyaretçinin yaşadığı sorunların çoğu temanın görselliğiyle değil, tema kurulduktan sonra doldurulan kısımla ilgili. Şu alanlar tamamen sizde:

• Menü etiketleri. "Çözümler", "Hizmetlerimiz", "Kurumsal" gibi kalıpları temadan aynen almak zorunda değilsiniz; ziyaretçinin aradığı şeyin adını yazın.
• Form alan sayısı. Tema on alanlı bir iletişim formu getiriyorsa üçe indirmek tek bir ayar meselesi ve dönüşüme etkisi tema seçiminden büyük.
• Boş durumlar. Ürün listesi boşken, arama sonuç vermezken ekranda ne yazdığına şablonlar nadiren bakar.
• Görsel boyutları. Aynı tema, 2 MB'lık kapak görseliyle de 120 KB'lıkla da çalışır. Fark kullanıcıda kalır.

Devraldığınız kusurlar

Bir kısmı ise gerçekten temanın kararı ve çoğu gözle bakınca fark edilmiyor. Klavyeyle gezerken odak halkasının görünüp görünmediği, dokunma hedeflerinin parmak için yeterli olup olmadığı, buton metniyle arka planın kontrast oranı, modal açıldığında odağın içeride kalıp kalmadığı. Bunların hepsi tema kodunda çözülmüş ya da çözülmemiştir.

Bir bayi projesinde temanın başlıkları ekranda doğru sırada görünüyordu ama DOM sırası farklıydı, ekran okuyucuda yan sütun ana içerikten önce okunuyordu. Görsel kontrolle bulunması imkânsızdı, Tab tuşuyla ilk gezintide otuz saniyede çıktı.

Yayın öncesi yarım saat

Tema ne olursa olsun, yayına almadan önce şu kontroller pratikte en çok işi görüyor. Hepsi tarayıcıyla yapılır, ek araç gerekmez.

• Sayfayı fareye hiç dokunmadan yalnızca Tab ile baştan sona gezin. Odağın nerede olduğunu her adımda görebiliyor musunuz? Görünmeyen odak, temanın CSS'inde outline: none ile kapatılmıştır ve :focus-visible için birkaç satır yazarak geri açılır.
• Tarayıcıyı yüzde 200 yakınlaştırın. Metin taşıyor mu, yatay kaydırma çubuğu çıkıyor mu?
• Formu kasten yanlış doldurun. Hata mesajı hangi alana ait olduğunu söylüyor mu, yoksa sayfanın tepesinde tek satırlık genel bir uyarı mı çıkıyor?
• Sadece ikon olan butonlara bakın. Hamburger menü, arama, kapatma. Bunların erişilebilir bir adı yoksa ekran okuyucuda "buton" diye okunurlar.

Şablonu suçlamadan önce

Şablon tabanlı bir altyapıda deneyimin tavanı temanın kalitesiyle sınırlıdır, bu doğru. Ama pratikte projelerin çoğu o tavana hiç yaklaşmadan yayına giriyor. Menü etiketi, form uzunluğu, görsel ağırlığı ve hata mesajı metni, temayı hiç değiştirmeden düzeltilebilecek şeyler ve etkileri tema değiştirmekten daha büyük.

Tema değiştirmeye ancak yukarıdaki kontrollerden geçemeyen ve düzeltilmesi tema koduna dokunmayı gerektiren yapısal bir sorun çıkarsa geçin. Odak halkası, kontrast, ikon adı gibi maddeler bu gruba girmez; onlar birkaç satırlık ek CSS ve düzgün yazılmış metinle çözülür.