Värien käyttö tiedottavissa www-sivuissa 12.01.2004 Natalia Kaijalainen 55198D natalia.kaijalainen@hut.fi
SISÄLLYSLUETTELO JOHDANTO... 1 VÄRIN MÄÄRÄYTYMINEN... 1 SILMÄN VÄRINTUNNISTUS... 1 VÄRI TAUSTALLA JA AKTIIVISENA... 2 VÄRIT JA KONVENTIOT... 4 VÄRIT JA HUOMIOITAVUUS... 5 VÄRIT JA MIELIKUVAT... 6 SUUNITTELEMINEN VÄRISOKEILLE... 6 YHTEENVETO... 7 LÄHTEET... 8
Natalia Kaijalainen 1 Johdanto Aion käsitellä esseessäni värinkäyttöä käyttäjille tietoja antavilla sivuilla. Koska kaikkien sivujen tarkoituksena ei ole olla informatiivisia, keskityn esimerkeissäni eri liikennöitsijöiden bussiaikatauluista kertoviin sivuihin. Nämä valitsin sen takia, että aikataulujen etsiminen rajaa käyttäjiä mahdollisimman vähän. Kyseisten sivujen on tarjottava apua eri ikäisille ja erilaisista ympäristöistä tuleville asiakkaille, joten käyttäjien joukossa voi olla lapsia, vanhuksia, värisokeita, nettiosaajia tai ketä vaan, ainoana ehtona on aikataulujen etsiminen. Lisäksi eri laajuisten bussiyritysten sisältä löytyy monella eri tavalla nettisivujensa tekemiseen panostaneita yrityksiä. Pyrin käymään esseessäni läpi asioita, jotka pitäisi huomioida sivujen värimaailmaa suunniteltaessa. Suunnittelijoille tarjotaan nykyään paljon tietoa erilaisista ongelmista, jotka voisivat vaikeuttaa sivujen lukemista ja tietojen löytämistä. On osattava käyttää tietoja oikein ja luoda sillä tavalla helppokäyttöinen ympäristö, tai ainakin estää vääränlaisten värien käytön aiheuttamat käyttövaikeudet. Käyn esseessäni läpi miten ihminen näkee värit ja miten hän mieltää niiden merkityksen sekä kerron tapoja, joilla sivuilla voi parantaa luettavuutta ja kiinnittää huomiota. Käyn läpi myös värisokeiden huomioimisen sivujen tekemisessä. Värin määräytyminen Väri muodostuu kolmesta ihmisen hahmottamasta piirteestä: värisävy, kirkkaus ja värikylläisyys. Värisävy on juuri se minkä ihminen hahmottaa eri värinä, eli se osa joka muodostuu valon aallonpituudesta. Yleensä puhuttaessa väristä tarkoitetaan juuri värisävyä. Värin kirkkaus tarkoittaa valon voimakkuutta ja se näkyy valkoisen ja mustan määränä värissä. Värikylläisyydellä tarkoitetaan tietyn värin puhtautta. [1,2] Väri itsessään on kohteen heijastamaa aallonpituutta. Tietokonemonitoreissa väri määräytyy jonkun tietyn pisteen lähettäessä tiettyä aallonpituutta. Värin muodostuminen aivoissa riippuu silmän kyvystä vastaanottaa eri aallonpituuksia. Suurin osa monitoreista muodostaa värin yhdistämällä kolmea eri valoa (punaista, vihreää ja sinistä). Tämä malli on myös ihmisen silmän toimintamalli. Silmän värintunnistus Jotta pystyisimme ymmärtämään ongelmat värien käyttämisessä, on hyvä ensin ymmärtää, miten ihmissilmä vastaanottaa värit, miten näköhavainto syntyy ja millä tavalla erottelemme eri sävyt. Samalla käyn läpi myös erilaiset värisokeudet, koska tällaisia käyttäjiä on väestöstä jonkin verran ja myös heidän palveleminen on tärkeää. Silmän verkkokalvolla on eri aallonpituista valoa aistivia soluja. Värien aistimisesta huolehtivat tappisolut, joita on kolmenlaisia johtuen ihmisen silmän käyttämästä niin kutsutusta RGB-värimallista (Red, Green, Blue). Tappisolujen kolme tyyppiä ovat punaista (yleensä yli puolet soluista), vihreää (kolmasosa) ja sinistä (pieni osa) väriä aistivat solut. Eri sävyt muodostuvat näiden kolmen värin yhdistelmistä. [2] Joillain ihmisillä esiintyy värisokeutta, mikä sellaisenaan on harvinaista, mutta eriasteinen värinäön heikkous on taas yleisempää valtaväestön keskuudessa. Värisokeudesta tai -heikkoudesta kärsivät yleisemmin miehet kuin naiset ja jo kymmenen henkilön ryhmässä on todennäköisesti yksi värisokea. Värien erottamisen vaikeus johtuu yleensä tappisolujen vaikeudesta aistia tietynväristä valoa. Yleisin värisokeuden muoto on puna-vihersokeus, mutta myös muitakin värisokeuksia esiintyy kuten violetin ja kellertävänvihreän erottamisen vaikeus ja harvinaisimpana värinäön puuttuminen, jolloin silmä erottaa vain harmaasävyjä. [3]
Natalia Kaijalainen 2 Väri taustalla ja aktiivisena Ihminen erottaa parhaiten hyvällä kontrastilla kirjoitettua tekstiä. Värien käytössä tuo pätee erityisesti. On helppo lukea sellaista tekstiä, jonka erottamiseksi ei tarvitse ponnistella. Musta teksti valkoisella pohjalla on arkisuudestaan huolimatta erittäin ystävällinen lukijalle. Eikä sivuston välttämättä tarvitse olla tylsän näköinen vaikka tärkeimmät tekstit olisikin kirjoitettu mustavalkoisella. Tästä mielestäni hyvänä esimerkkinä on Connex Oy:n kotisivu (http://www.connexfinland.fi/finland/certificate/) Sivustolla on käytetty muitakin värejä kuten sinistä ja oranssia. Kuten kuvasta huomaa valkoinen teksti ei erotu sinisellä pohjalla yhtä hyvin kuin musta valkoisella. Vaikka sininen ja oranssi ovat Connexin värejä, niitä ei ole onneksi ulotettu koko sivustoon ja sillä tavalla on saatu luettavuus melko hyväksi. Vastakkaisena esimerkkinä voi pitää Veljekset Salmelan sivuja (http://www.veljeksetsalmela.fi/hakemisto.html) Sivustolla on käytetty räikeää vihreää pohjaa ja sinisiä linkkejä aikatauluihin ja muihin sivuston osiin. Teksti kyllä erottuu, jos lukee keskittyneesti, mutta ongelmakohdiksi tulevat linkit, joiden alla on Veljekset Salmela teksti. Taustaan kuuluva teksti on myös haluttu erottumaan, joten sen kontrastia on suurennettu, mutta samalla on unohdettu, että
Natalia Kaijalainen 3 kontrasti linkkeihin pienenee. Taustan ongelmana on myös Veljekset Salmela Oy -teksti, joka vie silmän huomion taustalle eikä eteen, niin kuin pitäisi. Taustan olisi hyvä olla saman värinen ja myös tasainen, teksti taustalla häiritsee lukijaa. Värejä käyttäessä on muutenkin hyvä muistaa maltillisuus, sillä jos värejä käytetään säästelemättä voi sivuston selkeys hävitä väriloistoon ja käyttäjällä voi olla vaikeuksia hahmottaa kokonaisuuksia tai pystyä lukemaan tekstiä. Marta Eleniak, YK:n käytettävyyskonsultti, neuvoo sivujen värikontrastien tutkimiseksi sivu muuttamista ensin harmaasävyiseksi ja sitten mustavalkoiseksi ja jos sanoma on vielä silloinkin selvä, sivujen kontrasti on kunnossa [4]. Tapa on erittäin hyvä ja tuo esille helposti sivuilla olevia ongelmia. Kokeilin yllä mainittua keinoa esimerkkinä Ketosen Liikenne Oy:n sivuille (http://www.ketosenliikenne.fi/). 1. alkuperäinen sivu 2. harmaasävytetty sivu
Natalia Kaijalainen 4 3. sivu mustavalkoisena Tällä sivustolla vasemman valikon linkkien kontrasti taustaan nähden hyppää heti silmille. Siis tekstiä ei välttämättä erota kunnolla. Tuo ongelma näkyy selvästi vaikka sivu on alkuperäisessä värityksessä. Harmaasävyisenä tekstin ja taustan rajan hämärtyminen on selvästi huomattavissa, ja näin ollen tekstiä on miltei mahdoton lukea. Kun sivu muutetaan mustavalkoiseksi ongelma korostuu, kun vasen puoli muuttuu kokonaan mustaksi ja tekstit katoavat kokonaan. Kontrasti värisävyjen välillä on niin pieni, että kaksivärisenä kuvassa ei sellaista enää ole. Ketosen liikenteen sivujen suunnittelijalla on ollut selvästi päällimmäisenä ajatuksena yrityksen omien värien käyttö, mikä on johtanut ongelmiin. Yrityksen logossa voivat saman värin eri sävyt näyttää tyylikkäiltä, mutta sama ei todellakaan päde käytettävyyteen, kun sivun värityksenä on samanlaisia värejä. Värikontrasteja on hyvä miettiä ja ottaa huomioon sivua suunniteltaessa. Samalla läheisiä sävyjä on syytä välttää taustan ja varsinaisen tekstin välillä, vaikka värit miellyttäisivätkin suunnittelijaa. Harmaasävy/mustavalkotesti on objektiivinen tapa katsoa oman sivun värikontrasteja. Värikontrastit ovat erittäin tärkeitä huomioida suunniteltaessa käytettävää sivustoa, jonka myös värisokeat pystyvät lukemaan. Yleensä hyvän yhdistelmän muodostavat väriympyrässä vastakkaisilla puolilla olevat värit. Kuitenkaan suoria vastavärejä ei pitäisi käyttää, mutta vastavärien viereiset värit ovat hyvä valinta [5]. Värit ja konventiot Konventiolla tarkoitetaan jotain käytäntöä, joka on yleistynyt ja josta käyttäjät tunnistavat esim. jonkun toiminnon. Konventioiden näkökulmasta värien valitseminen on melko helppoa. Suunnittelijan ei tarvitse vielä internetsivuja tehdessään käyttää paljoakaan aikaa miettiessään rikkooko joku väri yleisiä konventioita. Tosin joitakin käytäntöjä on jo olemassa, joista poikkeaminen voi aiheuttaa käyttäjille ongelmia. Toimimattomien alueiden (poissa sillä hetkellä käytöstä) merkitseminen vaaleammilla sävyillä on yleistä ohjelmien käyttöliittymissä ja on yleistynyt myös internetsivustoilla. Tällä tavalla voidaan esimerkiksi viestiä käyttäjälle, millä alasivulla hän on ja käyttäjän on helppoa virkistää tarvittaessa muistia. Tällä hetkellä Internetissä vahvana vallitseva konventio on linkkitekstien sininen väri ja alleviivaus. Etsiessään sivuilla linkkiä käyttäjän silmä hakee jo automaattisesti sinisellä fontilla kirjoitettua tekstiä ja jos sellaista ei löydy, ruvetaan hakemaan linkkejä lukemalla tekstit. Tästä konventiosta poikkeaminen kannattaa tehdä harkiten, muun kuin sinisen värin käyttö voi toimia, jos sitä on ajateltu sivua suunniteltaessa. Samoin kannattaa ottaa huomioon, minkä värinen sivuston muu teksti on, eli linkkien on erotuttava tavallisesta tekstistä varsinkin, jos linkeistä ei tehdä konvention mukaisia.
Natalia Kaijalainen 5 J.Paanasen (http://personal.inet.fi/yritys/jpaananen/liikenne.html) sivut käyvät sopivana esimerkkinä linkkikonvention epäonnistuneesta rikkomisesta. Ensisilmäyksellä on mahdoton erottaa sivulla olevat linkit muusta tekstistä. Pienen päättelyn jälkeen alhaalla olevan rivin voi yhdistää valikkolinkeiksi. Linkkejä sivulla löytyy todellisuudessa lisää, kuvan oikealla puolella olevat tekstit ovat kaikki linkkejä ja näihinkin voi päätyä, kun lukee niiden sisällön. Yllättävin linkki löytyy kumminkin kuvan vasemmalla puolella, yrityksen osoitteen kohdalla. Linkiksi paljastuu Viitasaari, joka johtaa kaupungin sivuille. Tuota ei helposti linkiksi tulkitse. Itse huomasin kaupungin olevan linkki, kun siirsin vahingossa hiiren osoitteen päälle. Värit ja huomioitavuus Yksi värien tärkeä ominaisuus on se, että väreillä voi kiinnittää käyttäjän huomion haluttuihin asioihin. Ihmiselle luontainen huomion väri on punainen, koska luonnossa väri kertoo yleensä vaarasta. Punaisella värillä on helppo tiedottaa tärkeistä muutoksista, ajankohtaisista asioista tai muusta tarpeellisesta. On hyvä huomata, että väri muuttuu huomaamattomaksi, jos sitä on sivulla liikaa. Punaisen tekstin joukosta ei punaisella kirjoitettu tärkeä ilmoitus erotu käyttäjän silmissä. Tourusen Linjat Oy (http://www.tourusenlinjat.fi/) on käyttänyt punaista väriä aikataulusivullaan juuri huomion herättämiseksi. Vaikka punaista väriä on käytetty muutenkin, mm. valikkolinkkeinä, vuodenvaihteen liikenteen pohjaväri hyppää silmille ja saa käyttäjän varuilleen: "Tässä on tärkeä tiedotus". Bussien liikennöinti on vuodenvaihteessa poikkeuksellista ja tästä on hyvä muistuttaa asiakkaita. Välttämättä ei huomion herättämiseksi tarvita punaista väriä. Valikko on helppo erottaa omaksi alueekseen käyttäen eri taustaväriä. Kontrastia muuttamalla ja varsinkin sitä suurentamalla saa halutut asiat pomppaamaan esiin taustasta, jolloin käyttäjä huomaa ne helpommin.
Natalia Kaijalainen 6 Värit ja mielikuvat Värien valinnalla voi viestiä arvomaailmaa ja luoda käyttäjälle mielikuvia yrityksestä tai tuotteesta. Eskelisen Lapin Linjat (http://www.eskelisen-lapinlinjat.com/index.html) käyttää onnistuneesti lämpimiä värejä. Sivusto luo mielihyvän ja mukavuuden tunnetta käyttäjässä. Tällä sivulla on käytetty runsaasti keltaista ja lämmintä punaista. Varsinkin keltainen väri tulkitaan länsimaissa usein auringon, lämmön ja toivon väriksi, mikä osaltaan luo yritykselle positiivista mainosta. Eri kulttuureissa voidaan värejä tulkita eri tavalla. Jo mainitun keltaisen lisäksi, myös muut värit synnyttävät mielikuvia. Punainen on vaaran ja huomion väri, jossain kulttuureissa, osittain jopa Suomessakin, se on myös voimakkaasti sidoksissa kommunismin väriin, mutta kommunismi harvemmin tulee suomalaiselle ensimmäisenä mieleen punaisen sävyisestä sivusta. Sininen on kylmyyden, taivaan ja auktoriteetin väri (vrt. poliisi). Vihreä on mm. turvallisuuden, luonnon, rahan väri.[5] Kylmät värit yleensä hahmotetaan taustalla oleviksi ja lämpimät tuntuvat tulevan katsojaa lähemmäksi. Tästä syystä esim. sininen sopii hyvin taustalle, kunhan se ei ole liian räikeä, koska värikylläinen sininen nousee erottuen taustasta.[2] Väreillä on paljon muitakin merkityksiä ja väriyhdistelmillä merkityksiä on lisää. Omaa sivua suunniteltaessa on hyvä muistaa ympäristön kuvitelmat ja kulttuuriset vaikutteet, ettei vahingossa viesti väreillään jotain negatiivista tai imagolleen vahingollista kuvitelmaa. Suunitteleminen värisokeille Koska isossa ryhmässä käyttäjiä löytyy aina myös värisokeita ja sivuilla esitetyn tiedon saantia tuskin halutaan rajoittaa vain tavallisesti näkeviin, on mietittävä mahdollisia väriyhdistelmiä kriittisesti. Kyseenalaista on myös onko olemassa termiä normaalisti näkevä, sillä jo ystävien kanssa keskusteltaessa huomaa, miten eri henkilöt näkevät sinivihreän auton pikkuisen eri sävyisenä, vaikka värinäkö olisikin kohdallaan. "Värinäön heikkous on varsin tavallista: protanomaliassa on vaikeaa erottaa punaista sinivihreästä, deuteranomaliassa vihreää purppuranpunaisesta ja tritanomaliassa violettia kellertävänvihreästä."[3] Tärkeintä on olla viittaamatta väreihin tekstissä. On todella vaarallista antaa sellaisia ohjeita, kuten lue vihreällä pohjalla oleva teksti tai paina punaista nappia päästäksesi seuraavalle sivulle. Parempi olisi viitata otsikoihin tai nimiin. Punainen nappi ei kaikista ihmisistä välttämättä näytä punaiselta tai vihreä tausta vihreältä. Miten siinä tapauksessa voi tietää, mikä on oikea jatkamistapa? Varsinkin värisokeille suunniteltaessa kannattaa kiinnittää erityistä huomiota kontrasteihin, välttämättä edes harmaasävyotos sivustosta ei kerro totuutta. Alla on esimerkki taustan ja tekstin näkyvyydestä eri värisokeudesta
Natalia Kaijalainen 7 kärsivien ihmisten silmin. Ensimmäisessä tapauksessa harmaasävy näyttää hyvältä, mutta siitäkin huolimatta vain kärsivä näkee tekstin kunnolla. Toiseen kuvasarjaan tekstin ja taustan kontrastia on kasvatettu huomattavasti, mikä näkyy heti tekstin parempana näkymisenä värisokeille.[6] (Esimerkkikuvat ovat täydellisistä värisokeuksista eikä värinäön heikkouksista) Kuvat lainattu lähteestä [6]: 1.kuvasarja Normaali värinäkö: Harmaasävynä: Deuteranopia: Protanopia: Tritanopia: Kontrastia suurennetaan 2.kuvasarja Normaali värinäkö: Deuteranopia: Protanopia: Tritanopia: Yhteenveto Värien käyttöä voisi käsitellä vielä laajemmin ja tarkemmin. Internet-sivua suunniteltaessa on hyvä miettiä käyttäjäryhmä etukäteen ja jos saavutettavuudesta ei haluta karsia, pitäisi huomioida erilaisetkin käyttäjät. Mutta jo peruskäyttäjälle sivun värityksen suhteen on rajoituksia. Suunnittelijan on helppo sortua kuvittelemaan omaa sivua hyväksi, sillä sivun tekijä tietää jo valmiiksi, mitä missäkin kohdissa lukee ja mikä pitäisi löytyä helposti. Itse tekemäänsä sivua kohtaan on vaikea olla täysin objektiivinen. Parhaan tulokseen päästään, kun sivua arvioi jokin sitoutumaton taho. Sivuston itsenäistä arviointia varten on olemassa erilaisia tarkistuslistoja, esimerkiksi Maria Eleniakin lista löytyy osoitteesta http://www.sitepoint.com/article/1126/2. Värejä käytettäessä on hyvä muista kunnollisen kontrasti, huomiovärien harkittu käyttö, ympäristön odotukset ja tulkinnat, rajoittuneet käyttäjäryhmät sekä muita pienempiä asioita. Kaikkea ei välttämättä tarvitse toteuttaa, mutta hyvä sivusto palvelee kaikkia, joita haluttiinkin.
Natalia Kaijalainen 8 Lähteet [ 1 ] Arlainstituutti: Silmät ja Näkeminen [http://www.arlainst.fi/nv-peda/silmat/], lainattu 12/2003 [ 2 ] Sinkkonen, Kuoppala, Parkkinen, Vastamäki: Käytettävyyden psykologiaa, Edita/IT Press 2002 [ 3 ] Tero Kivelä, Silmätaudit [http://www.kandidaattikustannus.fi/tf/ch23/ch23_15.html], lainattu 12/2003 [ 4 ] Marta Eleniak, Essential Colour Checklists For Web Design [http://www.sitepoint.com/article/1126] lainattu 1/2004 [ 5 ] Ari Linfholn, Värit [http://www.kolumbus.fi/ari.lindholm/06/05.html] lainattu 1/2004 [ 6 ] Robert Hess, Can Color-Blind Users See Your Site? [http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhess/html/hess10092000.asp] lainattu 1/2004