Preattentive Görsel Özellikler: Grafik Başına Tek Kanal
Bir grafiğe bakan kişi, ne aradığını bilmeden önce bazı şeyleri zaten görmüştür: kırmızı olan nokta, diğerlerinden uzun duran çubuk, kenarda tek başına kalan işaret. Bu ilk algı katmanına preattentive görsel özellikler deniyor. Pratikte işe yarayan kısmı, hangi görsel kanalın bu katmanda çalıştığını bilmek ve grafik başına bir tanesini seçmek.
Dört kanal, kısa tarif
Preattentive özellikler, bakışı bilinçli olarak yönlendirmeye gerek kalmadan, yarım saniyeden kısa sürede işlenen görsel niteliklerdir. Dördü işe yarar.
Renk kategori ayırmanın ve tek bir değeri öne çıkarmanın en hızlı yoludur. Form boyut, şekil, uzunluk, kalınlık ve yön gibi nitelikleri kapsar; sayısal büyüklüğü göstermek için en güvenilir grubu burasıdır. Hareket yanıp sönme ve animasyon olarak ikiye ayrılır, ikisi de dikkat çeker ve ikisi de pahalıdır. Konum, yani ortak bir eksen üzerindeki yerleşim, dördü arasında en doğru okunanıdır.
John Tukey'nin cümlesi hâlâ en iyi ölçüt: bir görselin en yüksek değeri, bize beklemediğimiz şeyi fark ettirmesidir. Beklenmedik şey bir kanalda öne çıkıyorsa iş görür.
İki kanalı birleştirince avantaj kayboluyor
Görselleştirme tavsiyelerinde sık geçen bir cümle var: kanalları birleştirin, etki katlanır. Tersi doğru.
Hedef tek bir özellikte farklılaşıyorsa, örneğin mavi noktalar arasında tek bir kırmızı nokta, bulma süresi ekrandaki öğe sayısından neredeyse bağımsızdır. Yirmi nokta da olsa iki yüz nokta da olsa kırmızı olan aynı anda görünür. Hedefi iki özelliğin birleşimi tanımladığı anda, örneğin mavi kareler ile kırmızı daireler arasındaki tek kırmızı kare, göz tek tek taramaya başlar ve süre öğe sayısıyla doğru orantılı büyür. Buna birleşim araması deniyor ve preattentive avantajın bittiği yer tam olarak orasıdır.
Uygulamaya çevirisi şu: bir grafikte hem rengi hem şekli anlamlı kılmayın. Rengi kategoriye verdiyseniz şekli sabit bırakın. Şekli anlamlı yapacaksanız renk tek tonda kalsın. Vurgulanacak değer bir taneyse tek kanal zaten yeter.
Kanalların doğruluğu eşit değil
Hepsi "preattentive" başlığı altında toplanıyor ama sayısal bir farkı okuturken verdikleri hassasiyet aynı değil. Karşılaştırma yaptıran grafiklerde kabaca şu sıra geçerlidir:
- Ortak eksen üzerinde konum
- Uzunluk
- Eğim ve açı
- Alan
- Renk yoğunluğu ve parlaklık
Bu yüzden "hangisi daha büyük" sorusunun cevabı bir çubuk grafikte, aynı veriyi gösteren bir balon grafiğinden daha çabuk çıkar. Renk tonunu sayısal büyüklüğe bağlamak ise en zayıf tercih; ton kategoriktir, sıralı okunmaz. Sıralı bir ölçek gösterecekseniz tonu değil parlaklığı ya da doygunluğu değiştirin.
Hareketi vurgu aracı olarak kullanmam
İki nedeni var. Birincisi, hareket ölçeklenmiyor: ekranda tek bir yanıp sönen öğe varken iş görür, ikinci bir hareketli öğe eklendiği anda ikisi de görünmez olur. İkincisi, hareket kalıcı bir işaret değil. Ekrana üç saniye geç bakan kullanıcı animasyonu kaçırır, geriye hiçbir iz kalmaz; renk ya da konum ise ne zaman bakılırsa bakılsın oradadır.
Gerçekten gerekiyorsa, örneğin canlı bir panelde eşiği aşan bir uyarı için, hareketi kalıcı bir işaretle birlikte verin ve prefers-reduced-motion tercihi açık olan kullanıcılar için kapatın. Bu tercihi karşılamayan bir animasyon, bazı kullanıcılar için sadece rahatsız edici değil, doğrudan kullanılamaz.
Renk tek başına taşımaz
Kırmızı ile yeşili ayıramayan bir okuyucu için, farkı yalnızca bu ikisine yüklemiş bir grafik boş bir görsel demektir. Çözüm rengi bırakmak değil, ikinci bir işaret eklemek: doğrudan etiket, farklı çizgi deseni, ayrı konum. Buradaki ikinci işaret birleşim araması yaratmaz, çünkü hedefi tanımlayan hâlâ tek kanal; diğeri yalnızca yedek.
Hızlı kontrol yöntemi, tasarımı gri tonlamaya çevirip bakmak. Fark hâlâ okunuyorsa renk bir bonus olarak duruyor demektir, taşıyıcı olarak değil.
Seçimi nasıl yaparsınız
Önce grafiğin cevaplaması gereken tek soruyu yazın. Soru "hangisi en büyük" ise konum ya da uzunluk kullanın, soru "hangi grup" ise renk tonunu kullanın, soru "hangisi sıra dışı" ise geri kalan her şeyi sabit tutup tek bir kanalda ayrıştırın. Bir grafikte bu sorulardan ikisini birden cevaplamaya çalışıyorsanız, muhtemelen iki grafiğe ihtiyacınız var.