Väripsykologia korkeasti konvertoiville laskeutumissivuille

Väri on ensimmäinen asia, jonka vierailija käsittelee – ennen kuin hän lukee sanaakaan tekstiä. Se viestii toimialasta, uskottavuudesta ja sävystä millisekunneissa. Se vaikuttaa myös suoraan siihen, onko teksti luettavaa, mikä vaikuttaa siihen, pysyvätkö ihmiset sivulla.

Tässä julkaisussa selitetään, miten PAGEnzan värijärjestelmä toimii ja miksi värivalintoihin asettamamme rajoitukset tuottavat itse asiassa parempia tuloksia kuin tekoälyn antaminen rajattomaan vapauteen.

Ongelma, kun tekoälyltä pyydetään "valitsemaan kivoja värejä"

Jos pyydät LLM:ää valitsemaan värejä verkkosivustolle, saat hex-koodeja. Joskus ne näyttävät sopivan yhteen. Joskus eivät. Mallilla ei ole luotettavaa tapaa arvioida, toimiiko värit todella – onko teksti luettavaa, onko paletti sopiva toimialalle, onko yhdistelmä visuaalisesti yhtenäinen eikä vain vahingossa yhteensopiva.

Näimme tämän ongelman selvästi varhaisessa testauksessa. Rajoittamaton värien luonti tuotti paletteja, jotka vaihtelivat erinomaisista täysin käyttökelvottomiin. Johdonmukaisuutta ei ollut.

Ratkaisu oli ottaa värivalinta kokonaan pois LLM:n käsistä ja rakentaa algoritminen järjestelmä, joka takaa tietyt ominaisuudet.

4-värinen järjestelmä

Jokainen PAGEnza-sivusto käyttää täsmälleen neljää nimettyä väriä:

ink – ensisijainen tekstiväri. Aina tumma (korkea luminanssikontrasti taustoihin nähden). Käytetään otsikoissa, leipätekstissä ja luettavissa olevissa käyttöliittymäelementeissä.

bg1 – ensisijainen tausta. Yleensä paletin vaalein väri. Käytetään sivun päätaustana ja vaaleissa osioissa.

bg2 – toissijainen tausta. Luo visuaalista vaihtelua osioiden välille. Täytyy olla eri värisävyinen kuin bg1 – jos bg1 on lämmin kerma, bg2 on viileä harmaa tai sinisävyinen valkoinen.

accent – brändiväri. Käytetään painikkeissa, linkeissä, korostuksissa ja koristeellisissa elementeissä. Yleensä paletin kylläisin väri.

Tämä rajoitus – neljä nimettyä roolia, ei mielivaltaisia hex-koodeja – on se, mikä saa värijärjestelmän toimimaan. Tekoäly ei koskaan päätä, mihin väri menee; se vain valitsee, minkä paletin se käyttää esitarkastetusta joukosta.

Palettien organisointi

Ylläpidämme yli 20 palettiryhmää, joista jokainen on rakennettu arkkityypin ympärille:

• Rohkea: korkeakontrastiset, kylläiset korostukset – teknologia, SaaS, fintech
• Pehmeä: himmeät, desaturoituneet – hyvinvointi, valmennus, luovat palvelut
• Luksus: lähes mustat taustat metallisilla tai jalokivikorostuksilla – premium-palvelut, huippuluokan vähittäiskauppa
• Maanläheinen: lämpimät neutraalit terrakotta- tai salviakorostuksilla – ruoka, kestävyys, käsityö
• Tumma: ensisijaisesti tumman tilan paletit – kehittäjät, toimistot, pelit
• Neutraali: turvallinen, ammattimainen – laki, rahoitus, terveydenhuolto

Jokaisen ryhmän sisällä on useita paletteja, joilla on erilaiset värisävyt, saturaatiotasot ja korostussävyt. Järjestelmä valitsee ryhmän toimialan ja arkkityypin perusteella, sitten valitsee tietyn paletin ryhmän sisältä.

WCAG-kontrasti: rajoitus, joka parantaa suunnittelua

WCAG AA vaatii, että tavallisella tekstillä on vähintään 4,5:1 kontrastisuhde taustaansa nähden. Suuri teksti vaatii 3:1. Interaktiiviset elementit vaativat 3:1 vierekkäisiin väreihin nähden.

Jokainen järjestelmämme paletti on validoitu näitä suhteita vastaan ennen sen sisällyttämistä. Erityisesti:

• ink:n on saavutettava ≥4,5:1 kontrasti bg1:tä, bg2:ta ja kaikkia pintoja vastaan, joilla tekstiä esiintyy
• accent:n on saavutettava ≥3,0:1 kontrasti bg1:tä ja bg2:ta vastaan (käytettäväksi painikkeiden taustoina)
• Validointi käyttää todellista luminanssimatematiikkaa – L = 0.2126R + 0.7152G + 0.0722B gamma-korjauksen jälkeen – ei approksimaatioita

Vaikutus on se, että jokainen luotu sivusto on oletusarvoisesti luettava. Mutta on toissijainen hyöty: korkeakontrastiset suunnittelut konvertoituvat paremmin. Selvästi näkyvä painike saa enemmän klikkauksia kuin taustaan sulautuva. Saavutettavuusvaatimus osoittautuu konversiotarpeeksi.

Värisävykontrasti osioiden välillä

Yksi yksityiskohta, joka on helppo unohtaa: bg1 ja bg2 on oltava eri värisävyisiä. Jos molemmat taustat ovat lämpimiä, vuorottelevat osiot tuntuvat monotonisilta – sivu näyttää yhtenäiseltä möykyltä eikä erillisiltä sisältöalueilta.

Järjestelmämme sääntö: jos bg1:llä on lämmin sävy (oranssi/keltainen suunta, tai lämmin neutraali kuten kerma), bg2:n on oltava viileä (sininen/harmaa suunta). Jos bg1 on viileä valkoinen, bg2 voi olla lämmin luonnonvalkoinen.

Tämä on syy, miksi osiomme tuntuvat erottuvan, vaikka niissä ei olisikaan raskaita jakajia tai varjoja – pelkkä taustan värisävyn muutos luo selkeän visuaalisen eron.

Toimialakohtainen värilogiikka

Jotkut värivalinnat ovat vahvasti toimialakohtaisia. Vierailijoilla on odotuksia, jotka perustuvat vuosien altistumiseen tietyn kategorian verkkosivustoille.

Terveydenhuolto ja hyvinvointi: siniset ja vihreät signaloivat luottamusta ja rauhaa. Kylläiset punaiset ja oranssit näyttävät hälyttäviltä tässä kontekstissa.

Laki ja rahoitus: tummat laivastonsiniset, hiilenharmaa, konservatiiviset harmaat. Kirkkaat korostukset ovat hyväksyttäviä, mutta niitä on rajoitettava. Leikkisät paletit heikentävät uskottavuutta.

Ruoka ja vieraanvaraisuus: lämpimät sävyt – terrakotta, keltainen, kerma – aktivoivat ruokahalun assosiaatioita. Viileät kliiniset paletit tuntuvat vääristä.

Teknologia ja SaaS: siniset ovat edelleen hallitsevia, mutta valikoimaa on enemmän. Sähkönsiniset, indigot ja jopa violetti näyttävät teknologiavetoisilta. Puhtaat mustat taustat sopivat kehittäjätyökaluille.

Luksus ja premium: avain on pidättyväisyys. Rajoitettu värivalikoima, lähes mustat tai syvän laivastonsiniset ensisijaisina väreinä, kulta- tai platinakorostukset. Korkea kontrasti, ei koskaan kylläinen.

Design Mandaten arkkityyppivalinta yhdistää toimialan + liiketoimintatyypin sopivaan palettiryhmään, joten hyvinvointivalmentaja ei päädy samaan palettiin kuin asianajotoimisto, vaikka molempia kuvattaisiin "ammattimaisiksi".

Mitä asiakkaat voivat muuttaa

Luomisen jälkeen asiakkaat voivat muokata sivustoaan Gutenbergissa. Editorin värivalitsin näyttää vain neljä brändiväriä – ei mitään muuta. Tämä tarkoittaa:

• He voivat vaihtaa osioiden taustoja bg1:n, bg2:n ja pintojen välillä
• He voivat vaihtaa painikkeiden ja linkkien värejä accent:n ja ink:n välillä
• He eivät voi esitellä mielivaltaista viidettä väriä, joka rikkoo paletin.

Rajoitus on tarkoituksellinen. Yleisin tapa, jolla asiakkaat rikkovat ammattimaisesti suunnitellun sivuston, on valita värejä täydestä väriympyrästä. Paletin rajoittaminen neljään nimettyyn väriin tekee sen mahdottomaksi ilman koodiin menemistä.