Dashboard'da renk disiplini

Kısa cevap

Bir yönetim panelinde her metrik farklı bir renkle çizildiğinde renk artık hiçbir şey söylemez: okur hangi rengin bir anlam taşıdığını, hangisinin yalnız süs olduğunu ayıramaz ve asıl dikkat edilmesi gereken sapmayı gözden kaçırır. Disiplinli bir panel çoğu şeyi gri ve soluk tonlarda tutar, rengi yalnız anlam taşıdığı yerde kullanır: dikkat isteyen tek bir durum için bir vurgu rengi, bir kategori hangi grafikte görünürse görünsün hep kendi renginde. Kırmızı–sarı–yeşil trafik ışığı kodlaması ölçülü kullanılır, çünkü eşik kararlarını olduğundan kesin gösterir ve kırmızı–yeşil ayrımı yapamayan okurlar için çoğu zaman işe yaramaz.

Gösterge paneli: bir bakışta okunacak yüzey

Tek bir grafikte bir renk kararı, okurun o grafikte ne göreceğini belirler. Bir panelde ise onlarca grafik yan yana durur ve renk kararları birbirine karışır: bir grafikte "satış"ı gösteren mavi, yanındaki grafikte "iade"yi gösterebilir; bir grafiğin süs olarak kullandığı turuncu, öbüründe bir uyarı anlamına gelebilir. Panelin amacı hızlı okunmaksa, renk tutarlılığı bir estetik tercih değil, okumanın ön koşuludur.

Veri görselleştirme uygulamacısı Stephen Few, grafiklerde renk kullanımı üzerine yazdığı pratik kurallarda bu disiplini birkaç cümleye indirir.

Gri zemin ve veri dışı öğeler

Disiplinin ilk adımı, rengi kaldırmaktır. Bir panelde verinin kendisi olmayan pek çok öğe vardır: eksenler, ızgara çizgileri, çerçeveler, arka plan kutuları, etiketler.

Bu öğeler renkli ve belirgin olduğunda, gözün ilk yakaladığı şey veri değil çerçeve olur. Gri zemin ilkesi, bu öğeleri açık ve orta gri tonlarda, yalnız işlerini görecek kadar belirgin tutmayı; verinin çoğunu da soluk ve doygunluğu düşük renklerle çizmeyi önerir.

Gri zemin rengi yasaklamaz; rengin değerini artırır. Her şey renkli olduğunda hiçbir renk öne çıkmaz; her şey gri olduğunda tek bir renk hemen görülür. PS-04'te ele alınan ön dikkat, renkte tek başına farklı bir öğenin bir bakışta bulunabildiğini anlatır; ama bu yalnız o öğe gerçekten tek başına farklıysa işler. Healey ve Enns'in görsel dikkat ve bellek üzerine derlemesi, görselleştirme tasarımında bu algı bulgularının nasıl kullanıldığını ayrıntılı olarak tartışır.

Tek vurgu rengi

Bir panelde bir şeyin dikkat istemesi, geri kalan her şeyin istememesi demektir. Bu yüzden disiplinli panellerde vurgu için tek bir renk ayrılır ve yalnız belirli bir durum için kullanılır: hedefin altında kalan bir değer, beklenmeyen bir sapma, seçilmiş bir öğe.

Bu kural, dikkatin sınırlı kapasitesiyle ilgili araştırmalarla uyumludur.

Kartın sorusu buradan cevaplanır. Bir panelde her metrik farklı renkteyse ne kaybedilir? Önce rengin anlamı kaybedilir: okur hangi renk farkının bir veri farkı, hangisinin yalnız süs olduğunu ayıramaz. Sonra sapmayı görme yeteneği kaybedilir: renklerin çokluğu, dikkat isteyen tek bir değeri kalabalığın içinde saklar; çok sayıda farklı öğe arasında beklenmeyen bir öğeyi fark etmek, dikkatin kapasite sınırına takılır. Son olarak da tutarlılık kaybedilir: aynı rengin başka grafiklerde başka şeyleri göstermesi, okuru her grafikte lejantı yeniden okumaya zorlar.

Sabit kategori renkleri

Bir panelde aynı kategoriler birden çok grafikte görünür: aynı ürünler, aynı bölgeler, aynı ekipler. Her grafikte bunlara farklı renk vermek, okurun renkle kurduğu bağı her seferinde koparır.

Bunun pratik bir sonucu vardır: grafik yazılımlarının çoğu, bir grafikte hangi kategoriler görünüyorsa renkleri sırayla dağıtır. Bir filtre bir kategoriyi kaldırdığında, geri kalanların rengi kayar ve dün mavi olan ürün bugün turuncu görünür. Renkleri kategorilere sabit bir tabloyla bağlamak, bu kaymayı önler.

Trafik ışığı kodlaması

Panellerde en yaygın renk kalıbı, durumları kırmızı, sarı ve yeşille göstermektir.

Bu kodlamanın iki sorunu vardır. Birincisi, eşiğin iki yanındaki çok yakın değerleri birbirinden çok farklı renklerle göstererek eşik kararını olduğundan kesin gösterir; VG-04'te ele alınan sınıf sınırı sorununun en keskin biçimidir. İkincisi, kırmızı ile yeşil, en yaygın renk görme eksikliklerinde birbirine çok yaklaşır. Sık kullanılan bir kırmızıyı (#D62728) ve yeşili (#2CA02C) Machado ve arkadaşlarının modeliyle tam şiddette döteranomali benzetiminden geçirdiğimizde, ikisi arasındaki ΔE00 farkı normal görmede yaklaşık 72 iken benzetimde yaklaşık 4,6'ya düşer: iki renk hemen hemen aynı hardal tonuna dönüşür. Kırmızıyı yeşilden ayıramayan okurlar için kalıcı çözümler VG-07'nin konusudur; burada kural şudur: durum rengi tek başına bırakılmaz, bir simge, bir etiket ya da bir konumla desteklenir.

Trafik ışığı kodlamasını tamamen bırakmak gerekmez; ama her şeyin yeşil ya da kırmızı olduğu bir panelde renk yine anlamını yitirir. İyi durumdaki değerleri gri bırakıp yalnız dikkat isteyenleri renklendirmek, kodlamayı tek vurgu rengi ilkesine yaklaştırır.

Adım adım: bir paneli renkten arındırmak

1. Paneldeki bütün renkleri listeleyin ve her birinin ne anlama geldiğini yazın; anlamı yazılamayan rengi griye çevirin.
2. Veri dışı öğeleri, yani eksenleri, ızgaraları, çerçeveleri ve arka planları açık griye çekin.
3. Dikkat isteyen durumlar için tek bir vurgu rengi seçin ve onu başka hiçbir yerde kullanmayın.
4. Birden çok grafikte görünen kategoriler için sabit bir renk tablosu kurun ve filtrelerin bu renkleri kaydırmadığını kontrol edin.
5. Trafik ışığı renklerini yalnız eşiği önceden tanımlanmış ölçülerde kullanın, eşiği panelde yazın ve rengi bir simge ya da etiketle destekleyin.
6. Paneli gri tonlamada ve bir renk görme eksikliği benzetiminde açın; dikkat isteyen öğenin hâlâ bir bakışta bulunup bulunmadığına bakın.

Örnek — dört ten, bir eşik, iki panel

FS-12'deki modelde, üç tepeli bir LED ışığın dört ten örneğini gün ışığına göre ne kadar farklı gösterdiğini ΔE00 olarak hesaplamıştık: F1C7A9 için 6,0, C68863 için 6,8, 8D5524 için 6,5, 4A2C1D için 5,1. Bir ışık üreticisinin kalite panelinde bu dört sayının, ΔE00 = 6 eşiğiyle gösterildiğini düşünelim.

Trafik ışığı kodlamasıyla çizilen panelde, eşiğin üstündeki üç ten kırmızı, 5,1'lik ten yeşil görünür. Okur panelden "üç tende sorun var, birinde yok" sonucunu çıkarır; oysa dört değer 5,1 ile 6,8 arasında, yani birbirine çok yakındır ve F1C7A9'un 6,0'ı eşiğin tam üzerindedir. Aynı panel kırmızı ile yeşili ayıramayan bir okura dört hemen hemen aynı renkte kutu gösterir ve hiçbir şey söylemez.

Gri zeminli panelde dört değer aynı gri tonda çubuklarla çizilir, eşik ince bir çizgi olarak işaretlenir ve yalnız eşiği en çok aşan değer, C68863'ün 6,8'i, tek vurgu rengiyle boyanır; her çubuğun yanına sayısı yazılır. Okur, dört tenin de benzer büyüklükte bir fark gösterdiğini ve en büyük farkın hangisinde olduğunu bir bakışta görür; renk körü bir okur da vurguyu açıklık farkından ve sayıdan okur. İki panel aynı dört sayıyı gösterir; ama yalnız biri, tenler arasındaki farkın küçük, ışıkla tenler arasındaki farkın büyük olduğunu söyler.

Sık yapılan yanlış

Özet

1. Bir panelde renk, yalnız anlam taşıdığı yerde kullanıldığında bir sinyaldir; veri dışı öğeler ve verinin çoğu gri ya da soluk tutulur.
2. Dikkat isteyen durumlar için tek bir vurgu rengi ayrılır ve her kategori bütün grafiklerde kendi sabit rengini korur; renklerin çokluğu, dikkatin sınırlı kapasitesi yüzünden beklenmeyen sapmaları gizler.
3. Trafik ışığı kodlaması eşik kararlarını olduğundan kesin gösterir ve kırmızı–yeşil ayrımı yapamayan okurlar için çoğu zaman işe yaramaz; ölçülü kullanılır ve simge ya da etiketle desteklenir.

Kendini sına

1. (Kolay) Veri dışı öğe nedir? Üç örnek verin.
2. (Kolay) Sabit kategori rengi hangi sorunu önler?
3. (Orta) Bir panelde her metrik farklı renkteyse ne kaybedilir?
4. (Orta) Trafik ışığı kodlamasının iki sorunu nedir?
5. (Zor) Örnekteki trafik ışığı paneli neden yanıltıcıdır ve gri zeminli panel aynı sayıları nasıl daha doğru gösterir?
6. (Zor) Haroz ve Whitney'in bulguları, tek vurgu rengi ilkesini nasıl destekler?

Cevaplar

1. Bir grafikte verinin kendisini değil, onu okumayı kolaylaştıran yapıyı gösteren öğedir; eksenler, ızgara çizgileri, çerçeveler, arka plan ve etiketler buna örnektir («Gri zemin ve veri dışı öğeler»).
2. Aynı kategorinin farklı grafiklerde farklı renklerle görünmesini ve bir filtre bir kategoriyi kaldırdığında renklerin kaymasını önler; okurun renkle kategori arasında kurduğu bağ korunur («Sabit kategori renkleri»).
3. Önce rengin anlamı kaybedilir, çünkü okur hangi renk farkının veri farkı olduğunu ayıramaz. Sonra sapmayı görme yeteneği kaybedilir, çünkü renklerin çokluğu dikkat isteyen tek bir değeri kalabalıkta saklar. Son olarak tutarlılık kaybedilir; bir grafikteki mavi başka bir grafikte başka bir şeyi temsil eder ve okur her grafikte lejantı yeniden okumak zorunda kalır («Tek vurgu rengi»).
4. Eşiğin iki yanındaki yakın değerleri çok farklı renklerle göstererek eşik kararını olduğundan kesin gösterir; kırmızı ile yeşil de en yaygın renk görme eksikliklerinde birbirine çok yaklaşır. Örnekte ΔE00 farkı döteranomali benzetiminde yaklaşık 72'den 4,6'ya düşer («Trafik ışığı kodlaması»).
5. Değerler 5,1 ile 6,8 arasında birbirine çok yakınken trafik ışığı paneli üç teni kırmızı, birini yeşil göstererek sanki aralarında derin bir ayrım varmış gibi gösterir ve renk körü bir okura hiçbir şey söylemez. Gri zeminli panel dört değeri aynı tonda çizer, eşiği bir çizgiyle gösterir ve yalnız en büyük değeri vurgular; böylece farkların küçük olduğu ve en büyüğünün nerede olduğu birlikte görülür («Örnek — dört ten, bir eşik, iki panel»).
6. Haroz ve Whitney, görsel öğelerin çeşitliliğinin ve dikkatin kapasite sınırlarının özellikle beklenmeyen bilgiyi fark etme yeteneğini etkilediğini gösterdi. Renk çeşitliliği azaltılıp tek bir renk yalnız dikkat isteyen duruma ayrıldığında, o öğe kalabalıkta kaybolmaz («Tek vurgu rengi»).

Kaynaklar

• Few, S., «Practical Rules for Using Color in Charts», Visual Business Intelligence Newsletter, Perceptual Edge, 2008.
• Haroz, S. ve Whitney, D., «How Capacity Limits of Attention Influence Information Visualization Effectiveness», IEEE Transactions on Visualization and Computer Graphics, 18(12), 2012, s. 2402–2410.
• Healey, C. G. ve Enns, J. T., «Attention and Visual Memory in Visualization and Computer Graphics», IEEE Transactions on Visualization and Computer Graphics, 18(7), 2012, s. 1170–1188.

Sonraki adım

Bir panelde rengin ne söylediğini sorguladık; aynı soru pazarlamada bir istatistiğin kendisine yöneltilebilir. PZ-02, rengin marka tanınırlığındaki rolünü ve sık alıntılanan "renk tanınırlığı yüzde 80 artırır" türünden bir sayının kaynağını izlemeyi ele alır: renk ile markayı eşleştirme testleri ve dağıtıcı marka varlığının nasıl ölçüldüğü. Arayüzlerde durum renklerinin anlamı için UX-02'ye bak.