Acente yazılımlarında renkler çok iş görür. Yenilemesi yaklaşan poliçe turuncu, gecikmiş tahsilat kırmızı, tamamlanan teklif yeşil, bekleyen işlem gri ile işaretlenir. Bir bakışta durumu anlamak için renk güçlü bir araçtır. Ancak renk tek başına kullanıldığında, bilgiye ulaşamayan bir kullanıcı grubu ortaya çıkar.
Renk görme farklılığı yaşayan kullanıcılar, düşük kaliteli ya da parlak ışık altındaki ekranlarda çalışanlar, ekran okuyucu kullananlar ve yazdırılmış siyah-beyaz raporlara bakanlar renkle verilen mesajı kaçırabilir. Bu yazıda durum göstergelerini, rengin yanında başka sinyallerle de destekleyerek herkes için anlaşılır kılmanın yollarını ele alıyoruz.
Sorun Nerede Ortaya Çıkar?
Acente yazılımında rengin tek sinyal olarak kullanıldığı tipik alanlar şunlardır:
- Poliçe listesinde satırların durumuna göre renklendirilmesi,
- Takvimde görev türlerinin yalnızca renkle ayrılması,
- Formlarda hatalı alanın sadece kırmızı çerçeveyle gösterilmesi,
- Grafiklerde serilerin yalnızca renkle birbirinden ayrılması,
- Teklif sonuçlarında öne çıkarılan seçeneğin sadece renkli arka planla belirtilmesi.
Bu örneklerin her birinde, kırmızı ile yeşili ayırt etmekte zorlanan bir kullanıcı için "geciken" ile "tamamlanan" aynı görünebilir.
Birinci İlke: Renk + Metin
En güvenilir çözüm, durumu metinle de yazmaktır. Bir poliçe satırında yalnızca turuncu bir nokta yerine "Yenileme yaklaşıyor" ifadesinin yer alması, durumu herkes için kesinleştirir. Dar alanlarda kısa etiketler kullanılabilir; ancak etiketin anlamı belirsiz kalmamalıdır. Kısaltma kullanılıyorsa, imleç üzerine geldiğinde ya da odaklanıldığında açık hali gösterilmelidir.
İkinci İlke: Renk + Şekil veya Simge
Metin eklemenin mümkün olmadığı yoğun ekranlarda, her duruma ayrı bir şekil ya da simge atamak etkili bir yöntemdir. Örneğin tamamlanan işler için onay işareti, bekleyen işler için saat simgesi, sorunlu işler için uyarı üçgeni kullanılabilir. Bu simgeler renkle birlikte kullanıldığında, renk ayrımı yapamayan kullanıcı şekilden, diğerleri hem renkten hem şekilden anlam çıkarır.
Simge seçiminde dikkat edilmesi gereken nokta, simgelerin sistem genelinde tutarlı olmasıdır. Aynı uyarı simgesinin bir ekranda "eksik bilgi", başka bir ekranda "gecikmiş ödeme" anlamına gelmesi karışıklık yaratır.
Üçüncü İlke: Yeterli Kontrast
Rengin yanında metin ya da simge kullanılsa bile, bu öğelerin arka planla yeterli kontrasta sahip olması gerekir. Açık gri zemin üzerinde açık sarı bir etiket, renk görme farklılığı olmayan kullanıcılar için bile okunması zor bir sonuç verir. Erişilebilirlik yönergeleri, metin ve önemli grafik öğeler için asgari kontrast oranları tanımlar. Tasarım sisteminde her durum renginin bu oranları karşılayan açık ve koyu tonları önceden belirlenmelidir.
Formlarda Hata Gösterimi
Hatalı bir alanı yalnızca kırmızı çerçeveyle göstermek, en yaygın renk bağımlılığı örneğidir. Doğru yaklaşımda hatalı alan:
- Çerçeve rengiyle işaretlenir,
- Yanında bir uyarı simgesi taşır,
- Altında hatanın ne olduğunu açıklayan bir metin gösterir,
- Ekran okuyucuya hata durumunu programatik olarak bildirir.
Bu düzen hem trafik ve kasko akışlarındaki araç alanlarında hem de DASK akışındaki adres alanlarında aynı biçimde uygulanmalıdır.
Grafiklerde ve Raporlarda
Yönetim raporlarında kullanılan grafikler genellikle birden fazla seriyi renkle ayırır. Renk ayrımı yapamayan bir yönetici için bu grafikler okunamaz hale gelebilir. Çözüm önerileri şunlardır:
- Serilerin doğrudan grafik üzerinde etiketlenmesi,
- Çizgi grafiklerde farklı çizgi stilleri ya da işaretçi şekilleri kullanılması,
- Çubuk grafiklerde desen veya doku farkı eklenmesi,
- Grafiğin yanında aynı veriyi içeren bir tablo görünümü sunulması.
Tablo görünümü, ekran okuyucu kullanıcıları için de verinin erişilebilir bir karşılığıdır.
Listelerde Satır Renklendirme
Poliçe veya görev listelerinde tüm satırı renklendirmek dikkat çekici olsa da okunabilirliği düşürebilir ve renk anlamını belirsizleştirebilir. Daha dengeli bir yaklaşım, satırın başına ya da durum sütununa metinli bir etiket yerleştirmektir. Kullanıcılar ayrıca bu sütuna göre filtreleme ve sıralama yapabilmelidir; böylece renk taramak yerine "yalnızca gecikenleri göster" diyebilirler.
Gri Tonlama Testi
Bir ekranın renge bağımlı olup olmadığını anlamanın pratik yolu, ekranı gri tonlamaya çevirip bakmaktır. Eğer durumlar hâlâ ayırt edilebiliyorsa, tasarım rengi tek sinyal olarak kullanmıyor demektir. Bu testin yanında, renk görme farklılıklarını taklit eden simülasyon araçlarıyla da ekranlar gözden geçirilebilir.
Mobil Ekranlarda Ek Dikkat
Mobil cihazlar sahada, açık havada ve değişken ışık koşullarında kullanılır. Güneş altında renk farkları daha da azalır. Mobil uygulamada durum göstergelerinin metin ve simgeyle desteklenmesi, bu nedenle masaüstüne göre daha da kritiktir.
Örnek: Yenileme Listesinin Yeniden Tasarımı
Bir yenileme listesinde başlangıçta yalnızca satır renkleri kullanıldığını düşünelim: Yaklaşanlar sarı, bugün bitenler turuncu, süresi geçenler kırmızı. Yeniden tasarımda her satıra bir durum sütunu eklenir; bu sütunda simge ile birlikte "Yaklaşıyor", "Bugün bitiyor" ve "Süresi geçti" etiketleri yer alır. Satır renkleri ince bir sol kenar çizgisine indirgenir, kalan gün sayısı ayrı bir sütunda yazılır. Kullanıcı artık renge bakmadan, etiketi okuyarak ya da sütuna göre sıralayarak önceliklendirme yapabilir. Liste yazdırıldığında da bilgi kaybolmaz.
Bu değişiklik görsel olarak daha sakin bir ekran ortaya çıkarır; renk dikkat çekmek için kullanılmaya devam eder ama anlamın tek taşıyıcısı olmaktan çıkar.
Tasarım Sistemine Yerleştirmek
Bu ilkelerin her ekranda ayrı ayrı hatırlanması zordur. En sürdürülebilir yöntem, durum göstergelerini tasarım sisteminde hazır bileşenler olarak tanımlamaktır: Her durum için renk, simge, metin ve kontrast değerleri bir arada gelir. Geliştirici yeni bir ekran yaparken yalnızca durumu seçer; erişilebilirlik kuralları bileşenin içinde zaten uygulanmıştır.
InsureHub'da acente yazılımının poliçe, görev ve CRM ekranlarındaki durum göstergelerini bu ilkelere göre tasarlamayı hedefliyoruz. Ekranları yakından görmek için demo talebi bırakabilirsiniz.