UX

Bir Arayüz Okunabilir Olabilir Ama Yine de Kolay Okunmayabilir

Bir ekran bütün temel okunabilirlik kontrollerinden geçebilir. Yine de okumak gereğinden fazla yorucu olabilir. Benim ilgimi çeken yer tam olarak burası. Tipografi, dil, dikkat ve arayüz tasarımı birbirine karışıyor.

Ortada temiz bir okuma arayüzü, solda bakan bir göz ve sağda görsel kaosa dönüşen harf parçalarıyla hazırlanmış editoryal tarzda kapak görseli.
Netlik azaldıkça okuma eforu artıyor.Hüdaverdi Ural

Metin yeterince büyük olabilir. Kontrastı düzgün olabilir. Buna rağmen paragrafın ortasında nerede kaldığımı kaybedebilirim. Bir butonun etiketi açık görünebilir ama bastığımda ne olacağını anlamak için tekrar düşünmem gerekebilir.

Bu ayrım son zamanlarda kafama daha çok takılıyor. Karakterli arayüzleri seviyorum ama okuyamadığım metin bir sayfayla kurduğum ilişkiyi tamamen kesebiliyor. Okunabilirlik yalnızca harfleri görebilmek değil. Anlama ulaşana kadar ne kadar çalıştığımız da bunun parçası.

Okunabilir olmak kolay okunmak anlamına gelmiyor

Tasarım değerlendirmelerinde okunabilirliği birkaç görünür özellikle ölçüyoruz. Yazı yeterince büyük mü? Kontrast uygun mu? Satır yüksekliği rahat mı? Bunlar doğru sorular. Bazıları WCAG içinde doğrudan ölçülebiliyor.

Yine de bütün deneyimi anlatmıyorlar.

Aynı font, aynı boyut ve aynı kontrastla iki ekran düşünün. Biri “Değişiklikleri kaydedemedik. Bağlantınızı kontrol edip tekrar deneyin.” diyor. Diğeri “Talep ettiğiniz işlem ağ kaynaklı servis kesintisi nedeniyle tamamlanamadı.” diyor.

İkisi de okunuyor. Birincisi beni daha hızlı ilerletiyor.

Okunabilirlik formülleri bu zorluğun bir kısmını sayıya çevirmeye çalışıyor. Örneğin Flesch-Kincaid modeli, cümle uzunluğu ve kelimelerdeki hece yoğunluğunu okuma kolaylığıyla ilişkilendiriyor. Gereksiz yere karmaşık metinleri fark ettirebilir. Yine de bir butonun içinde bulunduğu görev açısından anlamlı olup olmadığını söyleyemez.

Ortalama cümle uzunluğu ve kelime başına hece sayısına göre Flesch-Kincaid okuma kolaylığı ile seviye puanlarını gösteren grafik
Okunabilirlik puanları zor dili gösterebilir; arayüzün bağlam içinde anlamlı olması yine ayrı bir konudur.Wikimedia Commons, “Flesch Kincaid readability tests.svg”

Bu fark yorgunken daha görünür oluyor. İkinci dilde okurken de öyle. Bir işi yaparken dikkatiniz başka yere bölündüğünde de metnin yükü artıyor. Bu çabayı önemsemek için mutlaka bir sağlık tanımına ihtiyacımız olduğunu düşünmüyorum.

Kontrast testini geçmek eforu ölçmüyor

WCAG 2.2 kontrast, metni büyütme ve metin aralıkları için önemli sınırlar veriyor. Görsel sunum rehberi satır genişliği, hizalama ve boşluklara da değiniyor. Çünkü metnin yerleşimi okumayı doğrudan etkileyebiliyor.

Bu ayrımı faydalı buluyorum. Uyum ile rahatlık aynı şey değil.

Kontrast oranı ön planla arka planın yeterince ayrılıp ayrılmadığını gösterebilir. Cümlenin gereksiz koşullarla dolu olup olmadığını söylemez. Beş etiketin aynı anda dikkat isteyip istemediğini de ölçmez.

Bu yüzden bir arayüz ölçülebilir bir kurala uyup zihinsel olarak pahalı kalabilir. Bu, kuralın işe yaramadığı anlamına gelmiyor. Kural yalnızca problemin bir parçasını ölçüyor.

Benim için erişilebilirlik kontrolleri taban çizgisi. Kullanıcının nerede durduğunu izlemek hâlâ ayrı bir iş.

Satır uzunluğu ve boşluk okuma işini değiştiriyor

Uzun satırlarda göz daha fazla yol alıyor. Sıkışık paragraflarda düşüncelerin sınırı daha zor seçiliyor. İki yana yaslanmış metinlerde kelime aralıkları düzensizleşebiliyor.

W3C'nin görsel sunum rehberi bunların hepsine değiniyor. Metin bloklarının 80 karakteri aşmamasını sağlayacak bir mekanizma, iki yana yaslamadan kaçınma ve daha geniş satır ile paragraf aralıkları öneriliyor.

Bu sayıları her ekran için değişmez bir Figma kuralına çevirmek istemem. Kısa bir etiketle uzun bir makalenin işi aynı değil.

Daha yararlı soru şu: Yerleşim okurun kaldığı yeri korumasına yardım ediyor mu?

Bazen çözüm daha dar bir metin alanı. Bazen açıklamayı iki parçaya bölmek. Bazen de arayüz yeterince açık olmadığı için yazdığımız bir cümleyi tamamen kaldırmak.

Bir metin bloğu için minimum, ideal ve maksimum satır uzunluğu örnekleri
Satır uzunluğu, gözün bir metin bloğu içinde ne kadar rahat ilerleyebildiğini değiştirir.Wikimedia Commons, “Line Length.png”

En zor kısım bazen kelimelerin kendisi oluyor

Tipografi görsel olarak daha fazla dikkat çekiyor. Yine de asıl sürtünmeyi çoğu zaman dil yaratıyor.

W3C'nin bilişsel erişilebilirlik rehberi açık kelimeler, kısa cümleler ve sade yapılar öneriyor. Digital.gov'un plain language yaklaşımı da benzer bir hedef koyuyor: İnsan bilgiye ulaşabilmeli, anlayabilmeli ve kullanabilmeli.

Bu fikir, ürün ekibinin bildiği kelimeler ekrana taşındığında kolayca kayboluyor.

“Authenticate”, “authorise”, “sync”, “submit”, “verify” ve “confirm” ürün içinde doğru terimler olabilir. Kullanıcı için aynı şey değiller. Aradaki fark önemliyse arayüz bunu göstermeli. Önemli değilse daha basit kelimeyi tercih ederim.

Yardım metninde de aynı sorun var. Bir alan anlaşılmadığında yeni bir cümle eklemek güvenli hissettiriyor. Bir noktadan sonra açıklamanın kendisi okunması gereken ikinci probleme dönüşüyor.

İyi bir etiket bazen iyi bir paragraftan daha fazla iş yapıyor.

İkon çözülmesi gereken bir bulmacaya dönüşmemeli

İkonlar ekranı sadeleştirebilir. Bu, okuma eforunu otomatik olarak azalttıkları anlamına gelmiyor. Tanıdık bir sembol çok hızlı anlaşılır. Tanıdık olmayan bir ikon küçük bir bulmacaya dönüşür.

W3C'nin bilişsel erişilebilirlik rehberi tanıdık ikonları, terimleri ve kalıpları kullanmayı öneriyor. Kullanıcı bir işi tamamlamadan önce tasarımcının özel görsel dilini öğrenmek zorunda kalmamalı.

Bunu en çok mobil arayüzlerde fark ediyorum. Alan daraldıkça etiketleri kaldırmak cazip geliyor. Beş kelime yerine beş düzgün ikon daha temiz görünüyor. İki ikon beni düşündürüyorsa yapılan temizlik yalnızca yükü ekrandan hafızama taşımış oluyor.

İkonla etiketi bir süre birlikte göstermek de işe yarayabilir. Kelime simgenin anlamını öğretir. Sonraki kullanımlarda ikon tek başına daha anlaşılır hale gelir.

Biraz daha fazla yer kullanmayı tahmin yürütmeye tercih ederim.

Dikkat bölününce arayüz yeniden okunmak zorunda kalıyor

Arayüzde okumak kitap okumaya pek benzemiyor. Bildirim geliyor. Biri bir şey soruyor. Kod bulmak için başka uygulamaya geçiyoruz. Forma döndüğümüzde nerede kaldığımızı yeniden çıkarmamız gerekiyor.

Burada okunabilirlik hafıza ve dikkatle birleşiyor.

W3C'nin bilişsel erişilebilirlik rehberi odaklanmayı desteklemeyi ve süreçleri hafızaya fazla bağımlı bırakmamayı öneriyor. Bence bu, erişilebilirlik bağlamının dışında da güçlü bir ürün tasarımı ilkesi.

Ekran, kullanıcının görevi yeniden kurmasına yetecek kadar iz bırakmalı. Açık bir başlık, görünür seçim, kaybolmayan giriş ve net bir hata mesajı buna yardımcı olabilir.

Zihinsel yük ile çalışma belleği arasındaki ilişki burada iyi bir hatırlatıcı. Görev mevcut çalışma belleğinin daha büyük kısmını kullandıkça, kullanıcının bir önceki ekranda olanı hatırlaması için daha az alan kalıyor.

Bilişsel yük artarken kullanılabilir çalışma belleği kapasitesinin azaldığını gösteren basit şema
Bilişsel yük arttıkça görev için kullanılabilir çalışma belleği kapasitesi azalır.Wikimedia Commons, “WorkingCogLoad.png”

En kötü sürüm, ilk bakışta anlaşılır olup otuz saniye sonra geri döndüğünüzde hiçbir bağlam vermeyen ekran.

Daha kısa her zaman daha açık değil

Her okunabilirlik problemini kelime keserek çözme eğilimi var. Bunun da doğru olduğunu düşünmüyorum.

“Devam” ifadesi “Siparişi gözden geçir” ifadesinden kısa. Aynı zamanda daha belirsiz. “Hata” da “Kart numarası eksik” ifadesinden kısa. Bana daha az yardım ediyor.

Sade dil, az kelime demek değil.

Bazen tek bir ek kelime belirsizliği kaldırıyor. Bazen kısa bir açıklama ikondan daha yararlı oluyor. Bazen de yapılan işlemin sonucu gerçekten önemli olduğu için cümlenin biraz uzun olması gerekiyor.

Metni karakter sayısına göre değil, verdiği karara göre değerlendirmeyi tercih ederim.

Okunabilirlik puanlarına da bu yüzden temkinliyim. Karmaşık cümleleri gösterebilirler. Ekranın kullanıcıdan ne anlamasını istediğini bilmiyorlar. Bir ödeme uyarısıyla pazarlama başlığını aynı biçimde sadeleştirmek doğru olmaz.

İlk okumayı değil geri dönüşü de tasarlamak istiyorum

Artık bir ekrana bakarken farklı bir soru sormak istiyorum. “Bunu okuyabiliyor muyum?” yerine “Bunu okurken kafamda ne kadar şey tutmam gerekiyor?”

Bu soru küçük ayrıntıları değiştiriyor.

Etiket eylemi anlatıyor mu diye bakıyorum. Paragrafın tek bir işi var mı diye bakıyorum. Hata sonrasında hangi bilgilerin ekranda kaldığını inceliyorum. Kullanıcı ekranı bırakıp döndüğünde bağlamı tekrar kurabiliyor mu diye düşünüyorum.

Kontrastı, yazı boyutunu, boşluğu ve yakınlaştırmayı yine kontrol ederim. Bunlar önemli. Sadece orada durmak istemiyorum.

Benim görmek istediğim arayüz, okurun onu anlayabildiğini kanıtlamasını istemeyen arayüz.

Kaynaklar

  1. WCAG 2.2 Metin, kontrast, büyütme ve sunum için W3C erişilebilirlik gereksinimleri.
  2. Understanding SC 1.4.8: Visual Presentation Satır genişliği, hizalama, boşluk ve metin sunumu üzerine W3C rehberi.
  3. Understanding SC 1.4.12: Text Spacing Satır, paragraf, kelime ve harf aralıklarının değiştirilebilmesine ilişkin W3C rehberi.
  4. Making Content Usable for People with Cognitive and Learning Disabilities Açık dil, odak, hafıza, tanıdık kalıplar ve kullanılabilir içerik üzerine W3C rehberi.
  5. How Users Read on the Web Web üzerinde tarama ve okuma davranışları üzerine Nielsen Norman Group çalışması.
  6. Plain Language Guide Bilgiyi bulmayı, anlamayı ve kullanmayı kolaylaştırmaya yönelik ABD kamu rehberi.
  7. Microsoft Inclusive Design Farklı insan ihtiyaçlarını merkeze alan kapsayıcı tasarım ilkeleri ve kaynakları.
UX/UI ve Ürün Tasarımcısı

Hüdaverdi, İstanbul’da yaşayan bir ürün tasarımcısı. 2017’den bu yana haber siteleri, e-ticaret ürünleri, bir fintech uygulaması ve çeşitli makine kontrol panelleri üzerinde çalıştı. Şu anda bir medya platformunda ürün tasarımcısı olarak çalışıyor; burada genellikle tasarım, teknoloji ve ürün deneyimleri üzerine yazıyor. Bunun yanında ilham, sanat ve gündelik hayat üzerine de yazıyor.

Birlikte bir şeyler
üretelim

Merhaba de!