Rozet görsellerinde bronz, gümüş, altın gibi seviyeleri nasıl ayırt edilebilir tasarlarız?

Test grubunun bu geri bildirimi vermesi çok değerli; seviyeleri sadece renkle ayırmak, rozet tasarımında en sık gördüğüm erişilebilirlik hatası. Renk tek başına bir bilgiyi taşımamalı, her zaman ikinci bir görsel ipucuyla desteklenmeli.

Seviyeleri ayırmak için renk dışında kullanabileceğiniz yöntemler:

• Şekil ya da çerçeve: Birinci seviye daire, ikinci altıgen, üçüncü yıldız benzeri bir çerçeve gibi.
• Sayısal ya da sembolik işaret: Rozetin alt kısmında bir, iki, üç çizgi ya da yıldız.
• Detay yoğunluğu: Üst seviyelerde kurdele, çelenk ya da ek bir halka eklemek.
• Etiket: Rozetin altında "Seviye 2" gibi kısa bir metin. Özellikle ekran okuyucu kullananlar için görselin alternatif metninde de seviyeyi belirtin.

Genel tasarım kriterlerim:

• Küçük boyutta test edin: Rozet mobilde bir parmak ucu kadar görünebiliyor. Taslakları küçültüp bakın; ayrıntılar kayboluyorsa sadeleştirin.
• Gri tonlamada kontrol edin: Tasarımı siyah-beyaza çevirdiğinizde seviyeler hâlâ ayırt edilebiliyorsa iyi yoldasınız.
• Kontrastı koruyun: Simge ile arka plan arasında yeterli kontrast olsun; açık ve koyu temada ayrı ayrı test edin.
• Tutarlı bir aile oluşturun: Tüm yetkinlik alanlarında aynı seviye dili kullanılsın. Kullanıcı bir alanda öğrendiği kodu diğerinde de tanımalı.
• Alan simgesi ile seviye işaretini ayırın: Simge "hangi konu", çerçeve ya da işaret "hangi seviye" bilgisini taşısın; ikisini karıştırmayın.

Sık yapılan hata, her rozeti ayrı bir illüstrasyon gibi tasarlamak. Bu ilk bakışta etkileyici görünse de sistem büyüdükçe tutarlılık kayboluyor ve yeni rozet eklemek zorlaşıyor. Bir şablon üzerinden çalışın: sabit çerçeve yapısı, değişen alan simgesi ve seviye işaretleri. Bu şablonu bir stil rehberinde belgeleyin ki ileride rozet ekleyen herkes aynı kurallarla çalışsın.