Krásné, dostupné barvy semaforů

author
4 minutes, 3 seconds Read

Každý je používá: Zelená, žlutá (nebo oranžová) a červená. Používáme je při vizualizaci dat, používáme je v tlačítkách, obarvujeme jimi text a ikony a vkládáme je do upozornění. Často je používáme v klíčových okamžicích, když oznamujeme úspěch nebo sdělujeme špatné zprávy. Také je zneužíváme, používáme je k upoutání pozornosti tam, kde nejsou důležité. Co však příliš často neděláme, je jejich zpřístupnění.

Významná menšina lidí je barvoslepá a většina z nich má červeno-zelenou barvoslepost. Od roku 2011 musím řešit barevnou přístupnost v důležitých interakcích, jako jsou upozornění na životní funkce pacientů, kvalitu péče o pacienty, stav cloudového serveru nebo výkonné analýzy prodeje. Zde je několik tipů pro přístupnost, které jsem cestou pochytil, a také moje osobní šablona pro použitelnou a přístupnou paletu barev pro provoz.

Můžete navrhnout krásnou paletu vhodnou pro barvoslepé, ale nikdy není na škodu posílit sdělení. Místo změny textu na červenou nebo zelenou umístěte vedle textu jinak tvarovanou červenou nebo zelenou ikonu. Tímto způsobem, i když nemáte kontrolu nad barevnou paletou, nebo byl graf vytištěn černobíle, nebo váš uživatel vidí pouze v šedé barvě, jste vyjádřili svůj názor.

Příklad: Excel. Excel nabízí ikony ve světlých barvách, které vám pomohou vyprávět příběh vašich dat. Ujistěte se, že používáte různě tvarované ikony i různé barvy! Zde je důvod, proč:

Desktop Excel, Office 2013. Věnujte pozornost červeným a zeleným kroužkům – dokázali byste je snadno rozlišit? Společnost Microsoft tento problém v pozdějších verzích vyřešila.

Deuteranopie a protanopie jsou dva běžné typy červeno-zelené barvosleposti. Testování barev podle nich optimalizuje většinu uživatelů, ale ikony pomohou zpečetit dohodu.

Nedůvěřujte přednastaveným barevným paletám

Na internetu existuje mnoho nesmírně užitečných rámců a kotlů. Každý z nich splňuje mnoho potřeb, ale ne všechny měly čas optimalizovat své barvy pro barvoslepé.

Příklad populárních přednastavených barevných motivů, které nekontrolovaly přístupnost při používání barev. (Aneb „Proč nepoužívat oranžovou.“)

Nejdůležitější otázka při pohledu na červenou, zelenou, oranžovou a žlutou je: „Poznají moji uživatelé tuto barvu, když ji uvidí samotnou?“. Nevěřte lidem, kteří vytvořili váš rámec, že na to mysleli. Ověřte si to sami.

Ptáte se, jak to uděláte? Po mnoho let byl jediným řešením, které jsem pro testování našel, Photoshop od Adobe, který nabízel protanopické a deuteranopické zobrazení všeho, co jsem vytvářel. Možnosti jsou v části Zobrazení → Nastavení náhledu (viz obrázek níže).

Snímek obrazovky: nalezení náhledů barvosleposti v Adobe Photoshopu.

Nyní se mým nástrojem stal Corblindor Coblis (Simulátor barvosleposti). Stačí udělat rychlý snímek obrazovky své práce a uvidíte, jak vypadá pro mnoho různých typů barvosleposti.

Plánujte dopředu pomocí barevné šablony

V průběhu let jsem udělal spoustu práce s barevnou vizualizací dat a objevil se vzor, který považuji za užitečný. Nabízím ho zde v zájmu lepší použitelnosti dat. Důrazně doporučuji zvážit tento přístup při vytváření barevné palety značky.

Všimněte si, jak světlá vs. tmavá a teplá vs. studená rozlišují červenou a zelenou. Vaše žlutá by měla být výrazně světlejší než červená nebo zelená!

Tady jsou hlavní zásady:

  • Použijte světlý, střední a tmavý odstín. Vaše žlutá by měla být váš světlý odstín.
  • Použijte teplou zelenou a studenou červenou nebo studenou zelenou a teplou červenou. Jen nemějte oba studené nebo oba teplé.
  • Žádnou oranžovou. Protože je mnohem světlejší, je při použití žluté místo oranžové mnohem méně pravděpodobné, že vaše „výstražná“ barva bude pro barvoslepé uživatele v rozporu s vaší „úspěšnou“ zelenou nebo bude vypadat příliš podobně jako vaše „vážný problém“ (např. chyby) červená.

To je vše! Děkujeme za přečtení. Jděte dál a bavte se vyprávěním dobrých příběhů s vašimi daty.

Similar Posts

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.