Opas nettisivun väreihin
“Noin 62-90% kuluttajan ensivaikutelmasta tuotteeseen, tulee pelkästään värin perusteella.” – Journal of the Academy of Marketing Science
Onko värillä väliä?
Kuinka valita värit oikein, mitä värit viestii ja kuinka käytän niitä nettisivulla?
Miksi värit ovat sivustollesi tärkeitä
Värit eivät ole vain kosmeettinen seikka.
Värit ovat yksi tehokkaimmista työkaluista ensivaikutelman luomisessa, sillä se on ensimmäisiä asioita, jonka käyttäjä huomaa. Vahvan ensivaikutelman lisäksi, väreillä pystytään tehokkaasti ohjaamaan käyttäjän toimintaa verkkosivulla ja alitajuntaisesti viestimään brändin arvoja.
Värien merkitys verkkosivulla on huomattavasti suurempi kuin moni ymmärtää. Jos olet tähän asti kuvitellut, että isot brändit valitsevat värit vain pelkällä mutulla, anna minun kertoa miksi näin ei ole.
Mitä eri värit sitten viestii ja kuinka voit valita oikeat värit juuri sinun omalle brändille ja sivulle? Tässäkään ei onneksi tarvitse arpoa, sillä julkista dataa ja ilmaisia työkaluja löytyy runsaasti.
“39% ihmisistä sanoo, että väri on kaikista tärkein visuaalinen elementti nettisivulla.” – Small Business Trends/KoMarketing
Tutkitusti, kun käyttäjiltä on kysytty, mitkä ovat heidän eniten arvostamiaan visuaalisia elementtejä yritysten verkkosivuilla, peräti 39 % kuluttajista valitsi värin. Vain kuvat/valokuvat (40 %) olivat kyselyssä sen edellä.
Lähde: TDF 2021 Website Design Survey
Väripsykologia: Mitä brändisi väri viestii?
Värit vaikuttavat eri tavalla eri ihmisiin. Väripsykologia saattaa kuulostaa höpöhöpöltä, mutta se perustuu todistettuun dataan: on siis olemassa yleinen konsensus siitä, miten ihmiset reagoivat väreihin.
Klassinen esimerkki on, että jos vaihtaisimme punaisen omenan siniseksi, ei omena enään näytä herkulliselta. Tämä johtuu siitä, että alitajuinen mielleyhtymä sinisen ja ruoan välillä laukaisee tunteen myrkyllisyydestä.
Verkkosivuston pääväri viestii välittömästi brändisi luonteesta ja auttaa brändisi tunnistettavuutta jopa 80 %, myös siksi isot brändit pitäytyvät valitsemissaan väreissä.
Lyhyesti, ihmiset pitävät pääväreistä (sininen, vihreä & punainen), ja vihaavat keltaista, oranssia ja ruskeaa. Kyselyissä sininen väri on tehnyt useaan otteeseen murskavoiton, eikä mikään ihme, sillä se on myös maailmanlaajuisesti suosituin lempiväri. Sininen viestii ammattimaisuutta ja turvallisuutta, siksi myös esimerkiksi poliisi pukeutuu siniseen.
Mielenkiintoisesti violetti on kaikista eniten mielipiteitä jakava väri. Se on miehillä toiseksi vihatuin, kun taas naisilla se on toiseksi pidetyin. Voi siis päätellä, että jos haluaa brändätä yritystä vain naisille, violetti ei silloin ole huono vaihtoehto.
“Kuluttajat pitävät vähiten keltaisesta väristä verkkosivuilla”
– TDF 2021 Website Design Survey
On kuitenkin tärkeä huomata, että kun ihmisiltä kysytään mikä on heidän inhokki väri sivuilla, he antavat vastauksen vain oman kokemuksen perusteella. Se ei siis tarkoita etteikö väri voisi sopia sinun sivulle ja sinun brändiin. Väripreferenssit eivät ole kiveen hakattuja.
Tähän asti luettuasi sinulla on jo peruskäsitys väripsykologiasta, vaikkakin aihe saattaa vielä tuntua hieman epäselvältä. Ainakin olet ymmärtänyt, että sama taideteos, esitettynä kahdessa eri värisävyssä, voi herättää täysin erilaisia tunteita.
Käytännön opas: Kuinka valita harmoninen väripaletti?
Värien valinnassa on hyvä noudattaa tuttua ja turvallista KISS sääntöä, eli ameriikan kielellä “Keep It Simple, Stupid”.
Väreillä tulisi ensisijaisesti kaapata käyttäjän huomio asioihin joita halutaan korostaa, sekä kaunistaa jo valmiiksi toimivaa visuaalisuutta. Suunnittele sivu siis niin, että se toimisi myös ilman värejä.
Väriharmonian perusteet
Värikombojen kanssa ei ole pakko arpoa, sillä netistä löytyy useita ilmaisia työkaluja väripalettien valitsemiseen. Jotta osaat käyttää työkaluja oikein, sinun on ymmärrettävä perusmekaniikkat:
Voit aloittaa väripaletin luomisen ilmaisilla työkaluilla kuten:
Adobe Color Wheel https://color.adobe.com/create/color-wheel
Color Hunt https://colorhunt.co/
Sävyerojen merkitys
Punainen pitää sisällään monta tunnetta, syvä tummanpunainen tuo mieleen viinin; kirkas tulipunainen on hälyttävä väri, kun taas pehmeästä vaaleanpunaisesta saattaa tulla mieleen hattara.
- Saturaation säätäminen. Korkeampi saturaatio (värikylläisyys) tuo mukanaan enemmän energiaa ja suoria mielleyhtymiä, kun taas matalampi saturaatio on hienovaraisempi ja rauhoittavampi.
- Kirkkauden säätäminen. Yleisesti ottaen tummemmat värit luovat syvällisemmän ja arvokkaamman tunnelman, kun taas vaaleammat värit tuovat esiin kepeämmän mielen.
Värin saturaatiosta sen verran, että ei kannata käyttää liikaa saturoituneita värejä, sivustosta tulee helposti liian hektinen.
Kuinka muuttaa nettisivun värit suoraan euroiksi?
Toimintapainikkeiden (CTA, Call to Action) värin on huudettava käyttäjälle: ”Klikkaa tästä!”. Klikattavuuteen vaikuttaa olennaisesti napin sijoittelu, koko, muoto, animaatiot, teksti sekä tietysti väri.
Hubspotin ja Dmixin toteuttamassa ikonisessa A/B-testissä punaiset napit ohittivat vihreät napit konversiossa peräti 21 %:lla. Toinen testi osoitti, että punaiseen nappiin siirtyminen nosti konversiota 34 %:lla.
Testin lopputulos ei kuitenkaan ollut se, että punainen on yksiselitteisesti paras väri napeille, vaan se, että kontrasti on kuningas. Esimerkiksi huomioliivit ei vahingossa ole keltaisia, eikä vaahtosammuttimet ole punaisia vain läpällä, vaan värit on valittu koska ne erottuvat vahvasti ympäristöstä.
Muista esteettömyys (Accessibility)
Käytä harmaata tai mustaa tekstiin ja luo riittävä kontrasti, niin että teksti erottuu taustasta. Muista, että luettavuus ohittaa aina kauneuden. Tarkista aina, että tekstin ja taustan välinen kontrasti on riittävä myös esteettömyyden (WCAG) näkökulmasta.
Käytä valkoista tilaa (white space) luomaan tilaa eri elementtien välille. Näin voit ohjata kävijöiden huomion tärkeisiin asioihin, kuten toimintakehotuksiin (CTA). Tärkeimpänä valkoinen tila auttaa siinä, että verkkosivu ei näytä sotkuiselta ja ahtaalta.
Hyvänä nyrkkisääntönä: valkoista tilaa tulisi olla mahdollisimman paljon, mutta kuitenkin niin, ettei käyttäjä huomaa sitä. Mieti vaikka Googlen palveluita ja sivuja, jotka käyttävät valkoista tilaa erittäin onnistuneesti.
Tiivistelmä artikkelista
Olet artikkelista toivottavasti oppinut, miten värit viestivät brändistäsi, kuinka valita harmoninen väripaletti ja miten käyttää kontrastia ohjaamaan käyttäjän katsetta suoraan toivottuun toimintaan.
On tärkeää myös tiedostaa, että jos sivustosi ei toimi käyttäjällesi, niin sillä ei ole mitään väliä kuinka hyvältä sivu näyttää, koska jos sivut ei konvertoi käyttäjiä haluamallasi tavalla, sivusto on epäonnistunut. Piste.
Älä siis jätä onnistunutta sivustoa vain värien varaan!
Jos haluat tietää, miten rakennat toimivan sivuston, joka on sekä psykologisesti vetoava, visuaalisesti näyttävä, että teknisesti toimiva, jatka lukemista:
- Lue lisää sivuston rakentamisesta tässä artikkelissa.
- Lue lisää sivunrakennus työkalun valitsemisesta tässä artikkelissa.