UX/UI tasarım / DIJION
Bilgiyi yalnız renge bırakmamak: uygulama ve oyun arayüzleri
Hata, seçim ve oyun nesnelerini metin, şekil ve desenle ayırt eden; renk kapandığında anlamı kontrol eden tasarım örnekleri.
Kırmızı bir sınır, yeşil bir simge veya mavi bir oyun taşı tek başına anlamı garanti etmez. Renkleri ayırt etmekte zorlanan kullanıcılar, düşük parlaklıkta ekranlar ve yoğun görsel arka planlar farklı güçlükler yaratabilir. Kritik bir durumun ikinci bir işaretle anlaşılmasını sağlamak, renk paletini terk etmeyi gerektirmez.
Önce rengin taşıdığı bilgiyi yazın
Bir formda kırmızı hata anlamına mı geliyor, zorunlu alan mı? Oyunda yeşil taş güvenli bölge mi, aynı gruba ait nesne mi? Her anlamı bir satırda yazın. Aynı renk farklı ekranlarda farklı şey söylüyorsa sorun yalnız renk algısı değildir; tutarlılık da bozulur.
Tüm sütunlar için tabloyu yatay kaydırabilirsiniz.
| Durum | Renk dışı işaret | Kontrol sorusu |
|---|---|---|
| Form hatası | Alanla ilişkili açıklama ve simge | Hangi alan ve nasıl düzeltilir belli mi? |
| Seçili filtre | İşaret, sınır ve programatik seçili durum | Seçim yalnız renkle mi anlatılıyor? |
| Oyun taşı grubu | Ayırt edilebilir şekil veya desen | Hareket sırasında da ayrılıyor mu? |
| Görev tamamlandı | Açık tamamlanma metni | Başarı yalnız yeşil parlamaya mı bağlı? |
Kontrast ve anlam ayrı kontrollerdir
WCAG renk kullanımı ölçütü bilginin yalnız renkle verilmemesini ele alır. Bu kontrolü kontrast kontrolüyle karıştırmayın: güçlü kontrasta sahip iki öğe hâlâ yalnız renk farkıyla anlam taşıyabilir. İkinci işaretin kendisi de okunabilir ve ayırt edilebilir olmalıdır.
Hata işaretini göreve bağlayın
“Kırmızı alanları düzeltin” yerine hangi bilginin eksik veya geçersiz olduğunu söyleyin. Açıklama ilgili alanın yanında bulunmalı ve yardımcı teknolojiyle ilişkisi korunmalıdır. Simge kullanılıyorsa tek başına bilinmeyen bir ünlem işaretine güvenmeyin; düzeltme yolu metinde yer alsın.
İkinci işaret oynanışı değiştirmesin
Kurmaca bir eşleştirme oyununa desen eklediğinizde, desen yoğunluğu veya boyutu nesneleri beklenmedik biçimde zorlaştırabilir. Statik örneği değil hareketli durumu test edin. Renk dışı ipucu yalnız ayarlar ekranında gösteriliyorsa, gerçek oyun kararını desteklemiyor olabilir.
Anlam deneyi yapın
- Rengin kaybolduğu bir önizlemede hangi durumların hâlâ anlaşılabildiğini kontrol edin.
- Bu önizlemeyi gerçek kullanıcı değerlendirmesinin yerine koymayın.
- Metin, şekil veya simgenin küçük ekranda da ayırt edildiğini doğrulayın.
- Ses kapalı ve metin büyükken kritik görevi tekrar tamamlayın.
Teslim çıktısı, her kritik anlamın hangi iki işaretle iletildiği ve hangi koşulda test edildiğidir. Yalnız ekranın güzel görünmesi, bilginin erişilebilir olduğu sonucunu vermez.