Barva hraje nedílnou roli v designu uživatelského ROZHRANÍ. Když udělal dobře, zlepšuje uživatelské zkušenosti, ovlivňuje nákupní rozhodnutí, a odráží značky hlas.
Jak tedy navrhujete efektivní, přístupná a esteticky příjemná rozhraní pro uživatele nevidomých barev?
Zatímco věda za barvoslepost je docela složité, podstata je, že barvoslepí lidé mají potíže vidět barvy jasně nebo rozlišování některých barev., S ohledem na tuto skutečnost se v tomto článku podělíme o několik tipů, jak zlepšit přístupnost vašeho webu a zkušenosti, které přináší pro barvoslepé lidi.
barevná slepota v digitálním světě
podle studií je přibližně 1 z každých 12 mužů (a 1 z každých 200 žen) barvoslepé. Ačkoli barvoslepí lidé vidí věci stejně jasně jako všichni ostatní, nejsou schopni plně rozeznat červené, zelené nebo modré světlo. Existují různé typy barevné slepoty; deuteranopie a protanopie barevná slepota jsou nejčastější.,
Lidé s červeno-zelená barvoslepost (deuteranopie) mají potíže rozlišovat mezi červenou a zelenou. Podobně u lidí s červenou barevnou slepotou (protanopie) vypadají všechny červené barvy matně.
Co to znamená z hlediska designu je to, že spoléhat se na barvu sám pro čitelnost a affordance by, aby vaše webové stránky obtížné používat pro někoho, kdo je barvoslepý.
můžete použít Coblis barvoslepost Simulátor, aby viděli, co vaše stránky vypadá na barvoslepé uživatele.,
7 Způsobů, jak Můžete Zlepšit Barvu Přístupnost pro barvoslepé Uživatele
Designové prvky a techniky, které zlepšují barvu přístupnost pro barvoslepé uživatele jsou obecně považovány za dobrý design postupy. I když si možná myslíte, že estetická přitažlivost vašeho webu může trpět, pokud navrhnete Přístupnost, rozhodně tomu tak není.
zde se podíváme na některé ze způsobů, jak můžete navrhnout přístupnější uživatelské rozhraní s ohledem na uživatele nevidomých barev.
#1: Použijte vzory a textury
barevné rozdíly jsou neuvěřitelně důležité s vizualizací dat, např.,, grafy a koláčové grafy. Výběr barev, které mají nízký kontrastní poměr, může znesnadnit interpretaci grafu pro uživatele nevidomých barev.
zde je to, co byste měli udělat místo toho:
- použijte vzory a textury, abyste uživatelům usnadnili rozlišení různých segmentů.
- přidejte textové štítky do segmentů, aby byly ještě lépe srozumitelné.
Pojďme se podívat na to, jak barvoslepý člověk s tritanopia může vidět modro-zelené sloupcový graf srovnání, jak budou vidět stejný graf s vzory a textury.,
Tady je to, co to bude vypadat, jako kdyby jste označen každý segment místo pomocí vzorce:
#2: Využití Barev a Symbolů
neměli Byste spoléhat pouze na barvu pro komunikaci chyby nebo sdělit informace prostřednictvím svého uživatelského ROZHRANÍ.
podívejme se například na přihlašovací formulář Facebook., Pokud formulář spoléhal na barvu sám, jak dát uživatelům vědět, že udělali chybu na konkrétní oblasti, mohlo by to vypadat něco jako tato červená-blind (protanopia) uživatel:
Zde je pohled na Facebook je formulář, podepište se symboly a chybová hlášení připojen:
Pomocí ikony a symboly formuláře, aby uživatel vědět, že udělali chybu, zlepšuje dostupnost a pomáhá jim napravit jejich chybu rychleji.
#3: Použití textových štítků
přidání textových štítků do barevných filtrů a vzorníků zlepšuje přístupnost pro uživatele nevidomých barev., V závislosti na typu barevné slepoty může být pro uživatele obtížné rozlišovat mezi různými barvami (nebo odstíny) bez nějakého popisného textu.
například bez popisného textového štítku na Amazonu by uživatelé color blind nemohli rozeznat červenou košili kromě oranžové nebo zelené.
přidání textových štítků do barevných filtrů zlepšuje přístupnost i pro lidi s normálním viděním. Například, bílá, off-bílá, a světle šedá jsou často obtížné rozlišovat mezi na monitorech.,
#4: podtrhněte odkazy
hodně času používáme barvu písma nebo hmotnost písma k označení odkazů. I když to může být možné, aby někdo s deuteranomaly, protanopia, nebo tritanopia rozlišovat kotva text z běžný text, je to jistě není ideální vzhledem k nízké kontrastní poměr.
Někdo se monochromacy by neměl být schopen rozlišovat mezi textem a kotvy text vůbec a bude muset umístěte kurzor nad text, aby zjistil, jestli to jejich kurzor se změní na ukazatel.
z tohoto důvodu je dobré přidat podtržení do textových odkazů., Díky tomu je snadné okamžitě rozeznat běžný text a kotevní text od sebe. Zde je příklad z Engadget stránky:
#5: Kombinace Barev, aby se Zabránilo
Některé barevné kombinace nejsou ideální pro barvoslepé uživatele, a to buď proto, že mají nízký kontrastní poměr nebo proto, že jsou obtížné rozlišit mezi.,
Zde je seznam barevné kombinace, které byste se měli vyhnout použití na vaše návrhy rozhraní, kde je to možné:
- zelená-červená
- zelená-modrá
- zelená-hnědá
- zelená-černá
- zelená-šedá
- modrá-šedá
- světle zelená-žlutá
- modrá-fialová
Tady je to, co zelená-červená a modrá-fialová barevná kombinace bude vypadat jako uživatel s protanopia:
#6: Primární Tlačítka Standout
mnohokrát, návrháři se spoléhají na barvu, aby se primární tlačítka vyniknout., Problém s tím spočívá v tom, že barva, kterou používáte, může být pro uživatele nevidomých barev obtížná.
místo toho byste měli udělat:
- Zvětšete velikost primárního tlačítka.
- Vyzkoušejte různé kombinace umístění.
- zvyšte kontrast mezi primárními a sekundárními tlačítky.
- použijte ohraničení, ikony nebo hmotnost písma k rozlišení primárních a sekundárních tlačítek.
například reformace používá velikost a barvu pro zdůraznění primárního tlačítka.,
A Topeniště představuje jejich primární tlačítko v pravém dolním rohu a sekundární tlačítko v levém horním rohu.
#7: Označte Požadované Pole Formuláře
Barva nevidomí uživatelé mohou mít potíže s rozlišením mezi povinné a nepovinné pole, pokud používáte barvy sám k označení povinných polí ve formulářích.
místo toho můžete:
- označit požadovaná pole hvězdičkou (*).
- pole štítků s požadovaným nebo volitelným slovem.
- odstraňte volitelná pole z formulářů.,
Závěr
Navrhování UI pro barvoslepé uživatele, bude to pomůže zlepšit přístupnost svých stránek pro uživatele s normálním zrakem, stejně. I když není jeden-velikost-sedí-všichni řešení, pokud jde o přístupnost, zde je několik tipů, byste měli mít na paměti:
- Použití vzorů a textur ukázat kontrast v grafů a tabulek.
- použijte barvy a symboly k přenosu chybových zpráv.
- přidejte textové štítky do barevných filtrů a vzorníků.
- podtrhují odkazy pro rozlišení mezi běžným textem a kotevním textem.,
- nepoužívejte špatné barevné kombinace, jako je zelená-červená a modro-fialová.
- použijte velikost, umístění nebo závaží písma, aby primární tlačítka vynikla.
- označte požadovaná pole formuláře symbolem (například hvězdičkou) nebo je označte.