Väri on olennainen rooli UI design. Oikein tehtynä se parantaa käyttäjäkokemusta, vaikuttaa ostopäätöksiin ja heijastaa brändien ääntä.
Joten, miten voit suunnitella tehokkaita, helposti saatavilla ja esteettisesti miellyttävä rajapinnat värisokea käyttäjille?
Vaikka tieteen takana väri sokeus on melko monimutkainen, ydin on, että värisokea ihmiset on vaikeuksia nähdä väri selvästi tai erottaa joitakin värejä., Tämä mielessä, tässä artikkelissa, jaamme vinkkejä siitä, miten voit parantaa sivuston saavutettavuutta ja kokemusta se tarjoaa väri sokea ihmisiä.
Värisokeus Digitaalisessa Maailmassa
tutkimusten Mukaan noin 1 potilaalla 12 miestä (ja 1 joka 200 naista) ovat värisokea. Vaikka värisokeat ihmiset näkevät asiat yhtä selvästi kuin kaikki muutkin, he eivät pysty täysin erottamaan punaista, vihreää tai sinistä valoa. Värisokeutta on erilaisia; deuteranopia ja protanopia värisokeus ovat yleisimpiä.,
henkilöillä, joilla on punavihreä värisokeus (deuteranopia), on vaikeuksia erottaa punainen ja vihreä. Samoin ihmiset, joilla on punainen värisokeus (punasokeus), punaiset värit näyttävät tylsää.
Mitä tämä tarkoittaa, vuodesta suunnittelu näkökulmasta on, että luottaa väri yksin luettavuutta ja affordance olisi tehdä sivuston vaikea käyttää joku, joka on värisokea.
Voit käyttää Coblis Värisokeus Simulaattori nähdä, mitä sivusto näyttää värisokea käyttäjille.,
7 Tapaa, joilla Voit Parantaa Väri Saavutettavuus värisokea Käyttäjille
Design-elementtejä ja tekniikoita, jotka parantavat väri saavutettavuus väri sokeat käyttäjät ovat yleensä pidetään hyvän suunnittelun käytäntöjä. Vaikka saatat ajatella, että sivustosi esteettinen valitus voi kärsiä, jos suunnittelet esteettömyyttä, se ei todellakaan pidä paikkaansa.
Täällä me katsomaan joitakin tapoja, joilla voit suunnitella helpommin UI pitää värisokea käyttäjien mielessä.
#1: käyttötavat ja tekstuurit
värierot ovat uskomattoman tärkeitä datan visualisoinnissa esim.,, kaaviot ja piirakkakaaviot. Valitsemalla värejä, joilla on alhainen kontrastisuhde voi tehdä kaavion vaikea tulkita väri sokea käyttäjille.
Tässä on mitä sinun pitäisi tehdä sen sijaan:
- Käytä malleja ja kuvioita, jotta käyttäjien on helppo erottaa eri segmentteihin.
- lisää tekstimerkintöjä segmentteihin, jotta ne ovat entistä helpommin ymmärrettävissä.
Let ’ s katsomaan, miten värisokea henkilö tritanopia voi nähdä sini-vihreä pylväsdiagrammi vastaan, kuinka he näkisivät saman kuvaajan kanssa, kuvioita ja tekstuurit.,
Tässä on mitä se näyttäisi, jos merkitty kunkin segmentin sijaan käyttää kuvioita:
#2: Käytä Värejä ja Symboleja
Sinun ei pitäisi luottaa pelkästään väri kommunikoida virheitä tai välittää tietoa kautta UI.
katsotaan esimerkiksi Facebook-ilmoittautumislomaketta., Jos lomake vedota väri yksin kerro käyttäjille, että he olivat tehneet virheen tietyllä alalla, se voisi näyttää jotain tällaista punainen-sokea (punasokeus) käyttäjä:
Tässä on tarkastella Facebook on rekisteröitymisen kanssa symboleja ja virheilmoituksia liitteenä:
Käyttämällä kuvakkeet ja symbolit lomakkeita antaa käyttäjä tietää, että he ovat tehneet virheen, parantaa saavutettavuutta ja auttaa heitä korjata virheensä nopeammin.
#3: Käytä teksteineen
Lisätä tekstiä tarrat väri suodattimet ja tilkkuja parantaa saavutettavuutta värisokea käyttäjille., Riippuen väri sokeus, käyttäjät saattavat löytää se vaikea erottaa eri värejä (tai sävyjä) ilman, että jonkinlainen kuvaileva teksti.
esimerkiksi, ilman kuvailevaa tekstiä etiketti Amazon, väri sokeat käyttäjät eivät voi kertoa punainen paita lukuun ottamatta oranssi tai vihreä.
Lisätä tekstiä tarrat väri suodattimet parantaa saavutettavuutta ihmisille, joilla on normaali näkö, sekä. Esimerkiksi valkoista, luonnonvalkoista ja vaaleanharmaata on monitoreissa usein vaikea erottaa toisistaan.,
#4: alleviivataan linkkejä
paljon siitä ajasta, kun käytämme fontin väriä tai fontin painoa linkkien merkitsemiseen. Vaikka se voi olla mahdollista, että joku deuteranomaly, punasokeus, tai tritanopia erottaa ankkuri tekstiä normaalia tekstiä, se ei todellakaan ole ihanteellinen, koska alhainen kontrasti-suhde.
Joku monochromacy ei pysty erottamaan tekstin ja ankkuri tekstiä ollenkaan ja olisi hääriä tekstiä nähdä, jos se heidän kursori muuttuu osoitin.
tästä syystä, se on hyvä idea lisätä korostaa tekstin linkit., Näin säännöllinen teksti ja ankkuriteksti on helppo heti erottaa toisistaan. Täällä on esimerkiksi Engadget-sivusto:
#5: Väri Yhdistelmiä Välttää
Tietyt väriyhdistelmät eivät ole ihanteellinen väri sokeat käyttäjät joko, koska heillä on alhainen kontrasti tai koska ne ovat vaikea erottaa toisistaan.,
Tässä on luettelo väri yhdistelmiä, jotka sinun tulisi välttää käyttämällä oman käyttöliittymän malleja, missä se on mahdollista:
- vihreä-punainen
- vihreä-sininen
- vihreä-ruskea
- vihreä-musta
- vihreä-harmaa
- sininen-harmaa
- vaalean vihreä-keltainen
- sininen-violetti
Tässä on, mitä vihreä-punainen ja sininen-violetti väri yhdistelmiä näyttäisi siltä, että käyttäjä, jolla on punasokeus:
#6: Tee Ensisijainen Painikkeet Standout
Monta kertaa, suunnittelijat luottaa väriä, jotta ensisijainen painikkeet erottuvat., Ongelma tässä on se, että värin käyttö voi olla vaikeaa värisokea käyttäjille hahmottaa.
Tässä on mitä sinun pitäisi tehdä sen sijaan:
- Lisätä koko ensisijainen painiketta.
- Kokeile erilaisia sijoitusyhdistelmiä.
- lisää ensisijaisten ja toissijaisten painikkeiden kontrastia.
- käytä rajoja, kuvakkeita tai kirjasinpainoa ensisijaisten ja toissijaisten painikkeiden erottamiseen.
esimerkiksi reformaatiossa käytetään kokoa ja väriä korostamaan ensisijaista nappia.,
Ja Tulipesän esittelee heidän ensisijainen painiketta oikeassa alakulmassa ja toissijainen-painiketta vasemmassa yläkulmassa.
#7: Mark Tarvittavat Lomakkeen Kentät
Väri sokeat käyttäjät saattavat olla vaikeuksia erottaa toisistaan pakolliset ja valinnaiset kentät, jos käytät väri yksin merkitsemään vaaditut kentät muodoissa.
sen Sijaan, haluat ehkä:
- Merkitse vaaditut kentät tähdellä (*).
- Etikettikentät, joissa on vaadittu tai valinnainen sana.
- poista valinnaiset kentät lomakkeista.,
Johtopäätös
Suunnittelu UI väri sokeat käyttäjät auttavat sinua parantamaan sivuston käytettävyys käyttäjille, joilla on normaali näkö, samoin. Vaikka ei ole yksi koko sopii kaikille ratkaisu, kun se tulee web accessibility, tässä on muutamia vinkkejä sinun pitäisi pitää mielessä:
- Käytä kuvioita ja tekstuurit näyttää kontrastia kuvaajia ja kaavioita.
- käytä värejä ja symboleja virheviestien välittämiseen.
- lisää tekstimerkinnät värisuodattimiin ja swatcheihin.
- alleviivaa linkkejä säännöllisen tekstin ja ankkuritekstin erottamiseksi toisistaan.,
- vältä huonoja väriyhdistelmiä, kuten vihreä-punainen ja sinipunainen.
- käytä kokoa, sijoittelua tai kirjasinpainoja, jotta pääpainikkeet erottuvat.
- merkki vaati lomakekenttiä, joissa on tunnus (kuten asteriski) tai merkitään ne.