Mindenki használja őket: Zöld, sárga (vagy narancssárga) és piros. Használjuk őket az adatvizualizációban, használjuk őket a gombokban, szövegeket és ikonokat színezünk velük, és figyelmeztetésekbe helyezzük őket. Gyakran használjuk őket kritikus pillanatokban, amikor sikert jelentünk be, vagy rossz híreket közlünk. Visszaélünk is velük, arra használjuk őket, hogy felhívjuk rájuk a figyelmet ott is, ahol nem relevánsak. Amit viszont túl gyakran nem teszünk meg, az az, hogy hozzáférhetővé tesszük őket.
Az emberek jelentős kisebbsége színvak, és ezek többsége vörös-zöld színvakságban szenved. 2011 óta meg kellett oldanom a színelérhetőséget fontos interakciókban, például a beteg életfunkcióira, a betegellátás minőségére, a felhőszerverek állapotára vagy a vezetői értékesítési elemzésekre vonatkozó figyelmeztetésekben. Íme néhány hozzáférhetőségi tipp, amit útközben szedtem össze, valamint az én személyes sablonom egy használható, hozzáférhető közlekedési színpalettához.
Eltervezhet egy gyönyörű, színvakbarát palettát, de sosem árt, ha megerősíti az üzenetet. Ahelyett, hogy a szöveget pirosra vagy zöldre cserélné, helyezzen egy más formájú piros vagy zöld ikont a szöveg mellé. Így még akkor is, ha nem tudja befolyásolni a színpalettát, vagy a táblázatot fekete-fehérben nyomtatták ki, vagy a felhasználó csak szürkében lát, akkor is érthetővé teszi a mondanivalóját.
Egy példa: Excel. Az Excel közlekedési lámpa színű ikonokat kínál, amelyek segítik az adattörténet elmesélését. Ügyeljen arra, hogy különböző formájú ikonokat, valamint különböző színeket használjon! Íme, miért:
A deuteranópia és a protanópia a vörös-zöld színvakság két gyakori típusa. A színek tesztelése ezekkel szemben a legtöbb felhasználó számára optimalizál, de az ikonok segítenek megpecsételni a dolgot.
Ne bízzon az előre beállított színpalettákban
Az interneten számos rendkívül hasznos keretrendszer és boilerplate található. Mindegyik sok igényt kielégít, de nem mindegyiknek volt ideje arra, hogy a színeket színvakságra optimalizálják.
A legfontosabb kérdés a vörös, zöld, narancssárga és sárga színek vizsgálatakor a következő: “Fel fogják-e ismerni a felhasználóim ezt a színt, ha önmagában látják?”. Ne bízz abban, hogy a keretrendszered készítői gondoltak erre. Ellenőrizd le magad.
Hogyan csinálod ezt, kérdezed? Sok éven át az egyetlen megoldás, amit tesztelésre találtam, az Adobe Photoshopja volt, amely protanópiás és deuteranópiás nézeteket kínált arra, amit éppen készítettem. A lehetőségek a View → Proof Setup menüpont alatt találhatók (lásd az alábbi képet).
Most a Corblindor Coblis (Color Blind Simulator) lett a kedvenc eszközöm. Csak készítsen egy gyors képernyőképet a munkájáról, és megnézheti, hogyan néz ki a színvakság számos különböző típusa esetén.
Tervezzen előre egy színsablonnal
Az évek során sok adatvizualizációs színmunkát végeztem, és kialakult egy minta, amelyet hasznosnak találok. Ezt ajánlom itt, az adatok használhatóbbá tétele érdekében. Erősen ajánlom, hogy ezt a megközelítést vegye figyelembe, amikor a márka színpalettáját alakítja ki.
Itt vannak a legfontosabb irányelvek:
- Használj világos, közepes és sötét árnyalatot. A sárga legyen a világos árnyalatod.
- Használj meleg zöldet és hideg vöröset, vagy hideg zöldet és meleg vöröset. Csak ne legyen mindkettő hideg vagy mindkettő meleg.
- Ne legyen narancssárga. Mivel sokkal világosabb, a sárga szín használata narancs helyett sokkal kevésbé valószínűvé teszi, hogy a “figyelmeztető” színed a színvak felhasználók számára ütközik a “siker” zölddel, vagy túlságosan hasonlít a “súlyos probléma” (pl. hibák) piros színére.
Ez az! Köszönjük, hogy elolvastad. Menjetek előre, és érezzétek jól magatokat, és meséljetek jó történeteket az adataiddal.