Yeşil başarı, kırmızı hata: semantik renkler

Kısa cevap

Arayüzlerde başarı yeşille, uyarı sarı ya da turuncuyla, hata kırmızıyla, bilgi maviyle gösterilir; bu eşleme evrensel bir yasa değildir, iş güvenliği işaretlerinde düzenlenmiş bir alışkanlığın arayüze taşınmasıdır ve bazı bağlamlarda kırılır. Marka rengi kırmızı olan bir üründe hata mesajı yalnız renkle ayırt edilemez; simge, metin, konum ve biçim birlikte çalışmalı, hata kırmızısı da marka kırmızısından ayrı bir token olarak tanımlanmalıdır. Durum renkleri azaldıkça güçlenir: her şey renkle uyardığında kullanıcı uyarıları görmez olur.

Dört rol

UX-01'de semantik token'ların bir rengi değeriyle değil rolüyle adlandırdığını gördük. Arayüzlerin neredeyse hepsinde bu rollerin küçük bir alt kümesi, kullanıcıya bir durumu bildirmek için ayrılır.

Başarı, bir işlemin tamamlandığını söyler: form gönderildi, ödeme alındı, dosya yüklendi. Uyarı, bir şeyin henüz yanlış olmadığını ama dikkat istediğini söyler: pil azalıyor, abonelik yakında bitiyor, şifre zayıf. Hata, bir şeyin yanlış gittiğini ve kullanıcının bir şey yapması gerektiğini söyler: kart reddedildi, alan boş bırakıldı, bağlantı koptu. Bilgi, bir durumu yargısız aktarır: yeni bir sürüm var, bakım saat on birde başlayacak.

Uyarı ve bilgi de aynı biçimde tanımlanır; uyarı çoğunlukla sarıdan turuncuya uzanan bir aralıktan, bilgi ise maviden seçilir. Sarı, beyaz zemin üzerinde metin rengi olarak kullanıldığında okunurluğu düşük kalır, bu yüzden uyarı rolü çoğu zaman bir sarı zemin ve üzerinde koyu metin olarak ya da koyulaştırılmış bir turuncuyla kurulur.

Evrensel sayılan kodlar nereden geliyor

Bu eşlemeler arayüz tasarımcılarının icadı değildir. Kırmızının tehlike ve durma, sarının dikkat anlamı, iş yerlerinde ve kamusal alanlarda güvenlik işaretleri olarak uzun zamandır düzenlenir. ABD'nin iş güvenliği düzenlemesi, fiziksel tehlikelerin işaretlenmesi için bir renk kodu tanımlar: kırmızı yangın söndürme ekipmanı, tehlike ve makinelerdeki acil durdurma düğmeleri için, sarı ise dikkat ve takılma, düşme ya da sıkışma gibi fiziksel tehlikeler için temel renktir. Uluslararası düzeyde ISO 3864, güvenlik renklerini ve güvenlik işaretlerinin tasarım ilkelerini düzenler.

Arayüz, bu alışkanlığı devralır. Kullanıcı bir formda kırmızı bir kenar gördüğünde, bir yolda kırmızı bir işaret gördüğünde öğrendiği şeyi uygular. Bu devralma işe yarar, çünkü öğrenilmiş bir eşleme yeniden öğretilmek zorunda değildir.

Ama «evrensel» sözcüğü dikkatle kullanılmalıdır. Rengin anlamı bağlama göre değişir: kırmızı bir arayüzde hata olabilir, bir kutlama ekranında şenlik, bir sağlık uygulamasında bir veri serisinin yalnızca adı. Finansal grafiklerde yükseliş ve düşüşün hangi renkle gösterildiği piyasadan piyasaya değişir ve bazı Doğu Asya piyasalarında yükseliş kırmızıyla gösterilir; bu kodların ayrıntısı EC-13'ün konusudur. Kültürler arası renk anlamları için TK-14 daha geniş bir çerçeve verir. Arayüz tasarımı için çıkarılacak ders şudur: yerleşik eşleme bir başlangıç noktasıdır, kullanıcının bağlamı sınanmadan doğru varsayılamaz.

Renk tek başına yetmez

Durum renklerinin en büyük zayıflığı, dördünün de çoğu zaman yalnız renkle ayrılmasıdır. İki sorun burada birleşir.

İlki, renk görme farklılıklarıdır. Kırmızı–yeşil ekseninde renk ayırt etme güçlüğü yaşayan biri için başarı yeşili ile hata kırmızısı birbirine çok yakın görünebilir; bu farklılıkların kendisi BI serisinin konusudur. İkincisi, açıklıktır. Sık kullanılan bir hata kırmızısı ile bir başarı yeşili ölçüldüğünde, ikisinin açıklıkları neredeyse aynı çıkabilir: #D32F2F kırmızısı ile #2E7D32 yeşili arasındaki WCAG kontrast oranı yaklaşık 1,03:1'dir. Renk tonunu göremeyen biri için bu iki renk aynı grinin iki kopyasıdır. DT-01'deki siyah-beyaz testi burada da işe yarar: durum renklerini griye çevirin; hepsi aynı görünüyorsa, arayüz yalnız renkle konuşuyor demektir.

Bu yüzden iyi bir hata mesajı yalnız kırmızı değildir: yanında bir uyarı simgesi, ne olduğunu söyleyen bir cümle ve sorunlu alanın hemen altında durmak gibi bir konum taşır. Başarı mesajı bir onay işareti, uyarı bir üçgen, bilgi bir «i» harfi taşıyabilir. Renk bu işaretleri güçlendirir, onların yerine geçmez.

Marka rengi kırmızıysa

Kartın sorusu, pek çok ürünün gerçekten yaşadığı bir çatışmayı soruyor: marka renginiz kırmızıysa hata mesajlarını nasıl ayırt edersiniz?

Marka kırmızısı butonlarda, başlıklarda ve vurgu öğelerinde her yerdeyse, hata kırmızısı ekranda ayrı bir anlam taşıyamaz. Kullanıcı bir alanın kırmızı kenarını gördüğünde, bunun bir hata mı yoksa markanın süsü mü olduğunu ayırt edemez. Birkaç yol birlikte kullanılabilir.

Hata için ayrı bir token tanımlanır ve marka kırmızısından belirgin biçimde ayrılır: daha koyu, tonu biraz farklı bir kırmızı ya da tersine, markanın kendisi hata olmayan yerlerde kırmızıyı daha az ve yalnız büyük yüzeylerde kullanır. Bu, iki kırmızıyı aynı rolde karıştırmamayı sağlar ama tek başına yetmez.

Hatanın biçimi markanınkinden ayrılır. Marka kırmızısı dolu butonlarda ve logoda yaşıyorsa, hata bir alanın altında ince bir çizgi, bir simge ve bir metin satırı olarak yaşar; ikisi aynı biçimi paylaşmaz.

Hata, renkten bağımsız işaretlerle taşınır. Simge ve metin, kırmızı ne olursa olsun hatayı anlatır. Kullanıcı rengi marka rengi sansa bile, «Kart numarası eksik» cümlesini okur.

Konum ve zamanlama kullanılır. Hata, sorunlu alanın hemen yanında ve kullanıcı bir eylem yaptığı anda görünür; marka öğeleri ise sayfanın sabit yerlerinde durur.

Bu yolların hiçbiri tek doğru cevap değildir; ekip, markanın kırmızıyı ne kadar yoğun kullandığına göre bir karışım seçer ve sonucu kullanıcılarla, renk görme farklılığı olanlar da dahil olmak üzere sınar.

Uyarı yorgunluğu

Durum renklerinin son tuzağı, onları fazla kullanmaktır. Her küçük bilgi bir sarı kutuya, her eksik alan kırmızı bir çerçeveye, her sıradan onay yeşil bir bantla dönüşürse, kullanıcı bu renklere tepki vermeyi bırakır.

Bu kavram en açık biçimde hastanelerde belgelenmiştir; sesli alarmlar için, ama ilke görsel uyarılara da taşınır. ABD'de hastaneleri akredite eden Joint Commission'ın 2013 tarihli bir uyarısı, bir hasta için günde yüzlerce alarm sinyali üretilebildiğini, bu sinyallerin yüzde 85 ile 99'unun klinik müdahale gerektirmediğinin tahmin edildiğini ve sonuçta klinisyenlerin seslere karşı duyarsızlaştığını yazar.

Arayüz için sonuç açıktır: durum rengi seyrek olduğunda anlam taşır. Bilgi rolü için renkli kutular yerine sade metin, uyarı için yalnız gerçekten dikkat gerektiren durumlar, hata için yalnız kullanıcının bir şey yapması gereken anlar seçilir. Kırmızının az göründüğü bir arayüzde kırmızı göründüğünde okunur.

Örnek — yüz doğrulama çerçevesi

Bir bankacılık uygulaması, hesap açarken kullanıcıdan bir yüz fotoğrafı istiyor. Kamera görüntüsünün üzerinde oval bir çerçeve var: yüz algılanınca yeşile, algılanmayınca kırmızıya dönüyor. Başka hiçbir işaret yok.

Hesaplanan kontrastlar sorunu gösteriyor. #D32F2F kırmızısı, açık bir ten örneği olan #F1C7A9 üzerinde yaklaşık 3,2:1 oranında ayrılırken, orta koyulukta bir ten örneği olan #8D5524 üzerinde oran 1,22:1'e düşüyor; #2E7D32 yeşili aynı ten üzerinde 1,18:1'de kalıyor. Yani orta ve koyu tenli bir kullanıcı için çerçeve, rengi ne olursa olsun, yüzünün kenarında neredeyse görünmüyor ve kırmızı ile yeşil arasındaki fark da yalnız tonla, açıklık farkı olmadan taşınıyor.

Ekip çerçeveyi yeniden kuruyor. Oval, iç tarafta beyaz, dış tarafta koyu bir çizgiden oluşan iki katmanlı bir kenar alıyor: beyaz çizgi koyu tenler üzerinde, koyu çizgi açık tenler üzerinde sınırı taşıyor. Durum, çerçevenin altına yazılan bir cümle ve bir simgeyle bildiriliyor: «Yüzünüz algılandı» yanında bir onay işareti, «Yüzünüzü çerçeveye yaklaştırın» yanında bir ok. Renk hâlâ var, ama yalnız bu işaretleri destekliyor. Sonuç, ekibin açıktan koyuya farklı tenlerden ve farklı ışıklarda çekilmiş bir görüntü setinde sınanıyor.

Sık yapılan yanlış

Özet

1. Dört durum rolü, güvenlik işaretlerinden devralınan yeşil, sarı-turuncu, kırmızı ve mavi eşlemeleriyle gösterilir; bu eşleme bir başlangıç noktasıdır ve bağlama göre kırılır.
2. Durum yalnız renkle bildirilmez; simge, metin, konum ve biçim birlikte çalışır ve marka kırmızısı olan bir üründe hata kırmızısı ayrı bir token ve ayrı bir biçimle tanımlanır.
3. Durum renkleri seyrek kullanıldığında anlam taşır; ten üzerinde görünen öğelerde renkli çerçeve, iki katmanlı kenar ve yazılı durum bilgisiyle desteklenir.

Kendini sına

1. (Kolay) Arayüzlerde en yaygın dört durum rolü hangileridir?
2. (Kolay) WCAG 2.2'nin 1.4.1 ölçütü renk için ne ister?
3. (Orta) Marka renginiz kırmızıysa hata mesajlarını nasıl ayırt edersiniz?
4. (Orta) Uyarı yorgunluğu nedir ve durum renklerinin kullanımını nasıl etkiler?
5. (Zor) #D32F2F kırmızısı ile #2E7D32 yeşili arasındaki kontrast oranı yaklaşık 1,03:1 ise, bu bir durum göstergesi için ne anlama gelir?
6. (Zor) Yüz doğrulama çerçevesi neden yalnız kırmızı ve yeşille kurulmamalıdır?

Cevaplar

1. Başarı ile hata, bunların arasında uyarı ve yargısız bildirim için bilgi («Dört rol»).
2. Rengin bilgi aktarmanın, bir eylemi belirtmenin, bir yanıt istemenin ya da bir görsel öğeyi ayırt etmenin tek görsel aracı olmamasını («Renk tek başına yetmez»).
3. Hata için marka kırmızısından belirgin biçimde ayrılan ayrı bir token tanımlanır; hatanın biçimi markanınkinden ayrılır, simge ve açıklayıcı metinle taşınır ve sorunlu alanın hemen yanında, kullanıcı eylem yaptığı anda gösterilir. Hangi karışımın seçileceği markanın kırmızıyı ne kadar kullandığına bağlıdır ve kullanıcılarla sınanır («Marka rengi kırmızıysa»).
4. Çok sayıda ve çoğu önemsiz uyarıyla karşılaşan kişinin uyarılara duyarsızlaşmasıdır; durum renkleri yalnız gerçekten gerektiğinde kullanılmalı, bilgi için sade metin tercih edilmelidir («Uyarı yorgunluğu»).
5. İki rengin açıklıkları neredeyse aynıdır; renk tonunu ayırt edemeyen biri ya da gri tonlamalı bir ekran için ikisi aynı görünür. Başarı ile hata yalnız tonla ayrılıyordur ve renkten bağımsız bir işaret gerekir («Renk tek başına yetmez»).
6. Orta ve koyu tenler üzerinde her iki rengin kontrastı çok düşüktür, örneğin #8D5524 üzerinde 1,22:1 ve 1,18:1; iki renk ayrıca yalnız tonla ayrılır. İki katmanlı bir kenar ve yazılı durum bilgisi, çerçevenin her tende görünmesini ve durumun renkten bağımsız okunmasını sağlar («Örnek — yüz doğrulama çerçevesi»).

Kaynaklar

• W3C, «Web Content Accessibility Guidelines (WCAG) 2.2», 1.4.1 ve 1.4.11 başarı ölçütleri.
• OSHA, 29 CFR 1910.144, «Safety color code for marking physical hazards».
• ISO 3864-1, «Graphical symbols — Safety colours and safety signs — Part 1».
• The Joint Commission, «Medical device alarm safety in hospitals», Sentinel Event Alert, sayı 50, 8 Nisan 2013.

Sonraki adım

UX-03 durum renklerini karanlığa taşıyor: aynı token yapısından karanlık bir tema üretirken renklerin doygunluğunun neden düşürüldüğünü, bu derste kurulan hata ve başarı renklerinin koyu zeminde nasıl yeniden ayarlandığını ve OLED ekranlarda koyu yüzeylerin enerjiyle ilişkisini ele alıyor. UX-04 ise durumdan etkileşime geçiyor: bir butonun üzerine gelindiğinde, basıldığında, klavye odağı aldığında ve devre dışı kaldığında rengin nasıl değişmesi gerektiğini ve devre dışı bir öğenin ne kadar soluk olabileceğini soruyor.