Verkkosivustojen, verkkokaupan tai sovellusten värimallien kehittäminen

Olemme jakaneet useita artikkeleita värin tärkeydestä brändin kannalta. Verkkosivustolla, verkkokaupassa tai mobiili- tai verkkosovelluksessa se on aivan yhtä tärkeä. Väreillä on vaikutusta:
- Ensivaikutelma brändistä ja sen arvosta – esimerkiksi ylellisyystavaroissa käytetään usein mustaa, punainen viittaa jännitykseen jne.
- Ostopäätökset – värikontrasti voi määrittää brändin luottamuksen. Pehmeät värimaailmat voivat olla naisellisempia ja luotettavampia, kun taas jyrkät kontrastit voivat välittää kiireellisyyden ja alennusten tavoittelun tunteen.
- Käytettävyys ja käyttökokemus – väreillä on psykologinen vaikutus ja myös fysiologinen vaikutus, mikä tekee käyttöliittymässä navigoinnista joko helpompaa tai haastavampaa.
Kuinka tärkeä väri on?
- 85 % ihmisistä väitti, että värillä on merkittävä vaikutus siihen, mitä he ostavat.
- Värit lisäävät brändin tunnettuutta keskimäärin 80 %.
- Värivaikutelma vastaa 60 % tuotteen hyväksymisestä tai hylkäämisestä.
Kun määrität verkkosivuston värimaailman, seuraa joitakin vaiheita, jotka on kuvattu oheisessa infografiassa:
- Ensisijainen väri – Valitse väri, joka sopii tuotteesi tai palvelusi energiaan.
- Toimintavärit – Tämä puuttuu alla olevasta infografiikasta, mutta ensisijaisen ja toissijaisen toimintovärin tunnistaminen on erittäin hyödyllistä. Se opettaa yleisöllesi keskittymään tiettyihin käyttöliittymäelementteihin värin perusteella.
- Alisävärejä - 11ionaaliset värit jotka täydentävät pääväriäsi, mieluiten värejä, jotka saavat päävärisi erottumaan.
- Taustavärit – Valitse verkkosivustosi taustalle väri – mahdollisesti vähemmän aggressiivinen kuin päävärisi. Muista myös tumma ja vaalea tila. Yhä useammat sivustot käyttävät värimaailmoja, jotka vaihtavat vaalean ja tumman tilan välillä.
- Kirjasinvärit – Valitse verkkosivustosi tekstille väri – muista, että yksivärinen musta kirjasintyyppi on harvinainen eikä sitä suositella.
1Kehitin verkkobrändin vaatevalmistajalle, jonka tavoitteena oli luoda suoraan kuluttajille suunnattu (D2C) verkkokaupan alusta, jonka avulla asiakkaat voivat ostaa mekkoja verkosta. Ymmärsimme kohdeyleisömme ja brändin arvon. Koska brändi oli pääasiassa digitaalinen, mutta sillä oli myös fyysinen tuote, keskityimme värimaailmoihin, jotka toimivat hyvin painetussa mediassa (CMYK), kangaspaletit (Pantone) sekä digitaaliset (RGB ja heksadesimaali).
Väriteeman testaaminen markkinatutkimuksella
Värimaailman valintaprosessimme oli intensiivinen.
- Teimme kohdeyleisömme kanssa markkinointitutkimusta useista pääväreistä, mikä lopulta johti meidät keskittymään yhteen väriin.
- Teimme kohdeyleisömme kanssa markkinointitutkimusta useista toissijaisista ja tertiäärisistä väreistä ja rajasimme joitakin värimaailmoja.
- Teimme tuotemalleja (tuotepakkaukset, kaula- ja ripustuslaput) sekä verkkokaupan malleja värimaailman kanssa ja toimitimme ne asiakkaalle sekä kohdeyleisölle palautetta varten.
- Koska heidän brändinsä oli vahvasti riippuvainen sesongeista, sisällytimme suunnitteluun myös sesonginmukaisia värejä. Tästä voi olla erityisen hyötyä tiettyjen kokoelmien tai mainosten ja sosiaalisen median julkaisujen visuaalien luomisessa.
- Kävimme tämän prosessin läpi yli puoli tusinaa kertaa ennen kuin päädyimme lopulliseen suunnitelmaan.
Vaikka merkkivärit ovat vaaleanpunainen ja tummanharmaa, kehitimme toiminnan värejä olla vihreän sävy. Vihreä on toimintaan suuntautunut väri, joten se on loistava valinta kiinnittämään käyttäjien huomion toimintaan suuntautuneisiin elementteihin. Otimme käyttöön vihreän käänteisen värin toissijaisia toimintoja varten (vihreä reunus valkoisella taustalla ja tekstillä). Testaamme myös tummempaa vihreän sävyä toimintovärinä hiiren osoittimen päälle liikkuville toiminnoille.

Sivuston lanseerauksesta lähtien olemme ottaneet käyttöön hiiren seurannan ja lämpökarttoja seurataksemme elementtejä, joihin kävijämme kiinnittyvät eniten ja joiden kanssa he ovat eniten vuorovaikutuksessa. Näin varmistamme, että värimaailmamme ei ainoastaan näytä hyvältä, vaan myös toimii hyvin.
Värit, valkoinen tila ja elementin ominaisuudet
Värimaailman kehittäminen tulisi aina tehdä testaamalla sitä koko käyttöliittymässä käyttäjien vuorovaikutuksen havaitsemiseksi. Yllä olevalla sivustolla lisäsimme myös tarkat marginaalit, täyttöä, ääriviivoja, reunusten säteitä, ikonografiaa ja kirjasintyyppejä.
Toimitimme yritykselle kattavan brändioppaan, jota jaettiin sisäisesti kaikille markkinointi- ja tuotemateriaaleille. Brändin yhtenäisyys on ratkaisevan tärkeää tälle yritykselle, koska se on uusi ja sillä ei ole vielä toimialakohtaista tunnettuutta.
Tässä on tuloksena syntynyt verkkokauppasivusto värimaailmalla



Värien käytettävyys ja värisokeus
Muista suorittaa käytettävyystestaus sivustosi elementtien värikontrastin osalta. Voit testata värimaailmaasi käyttämällä Verkkosivuston saavutettavuuden testaustyökaluVärimaailmamme kanssa olemme tietoisia joistakin kontrastiongelmista, joihin puutumme tulevaisuudessa, tai meillä saattaa jopa olla vaihtoehtoja käyttäjillemme. Mielenkiintoista kyllä, väriongelmien todennäköisyys kohdeyleisömme keskuudessa on suhteellisen pieni.
Värisokeus on kyvyttömyys havaita eroja joidenkin sellaisten värien välillä, jotka värittömät heikentyneet käyttäjät voivat erottaa. Värisokeus vaikuttaa noin viidestä kahdeksaan prosenttia miehistä (noin 10.5 miljoonaa) ja alle prosentti naisista.
Usability.gov
WebsiteBuilderExpertin tiimi on koonnut tämän infografian ja siihen liittyvän yksityiskohtaisen artikkelin Kuinka valita väri verkkosivustollesi se on erittäin perusteellista.




