Värvipühholoogia kõrge konversioonimääraga sihtlehtede jaoks

Värv on esimene asi, mida külastaja töötleb – enne kui ta sõnagi loeb. See edastab tööstusharu, usaldusväärsust ja tooni millisekundite jooksul. See mõjutab otseselt ka seda, kas tekst on loetav, mis omakorda mõjutab seda, kas inimesed lehel püsivad.

See postitus selgitab, kuidas PAGEnza paletisüsteem töötab ja miks värvivalikule seatud piirangud tegelikult paremaid tulemusi annavad kui tehisintellektile piiramatu vabaduse andmine.

Probleem tehisintellektile "kenade värvide valimise" palumisel

Kui palute LLM-il veebisaidi jaoks värve valida, saate HEX-koodid. Mõnikord näevad need koos head välja. Mõnikord mitte. Mudelil pole usaldusväärset viisi, kuidas hinnata, kas värvid tegelikult töötavad – kas tekst on loetav, kas palett tundub tööstusharu jaoks sobiv, kas kombinatsioon on visuaalselt koherentne, mitte juhuslikult sobiv.

Nälgime seda probleemi varajastes testides selgelt. Piiranguteta värvide genereerimine andis palette, mis ulatusid suurepärastest täiesti kasutamiskõlbmatuteni. Järjepidevust polnud.

Lahendus oli värvivaliku täielikult LLM-i käest ära võtta ja ehitada algoritmiline süsteem, mis tagab spetsiifilised omadused.

4-värviline süsteem

Iga PAGEnza sait kasutab täpselt nelja nimetatud värvi:

ink – peamine tekstivärv. Alati tume (kõrge heleduse kontrast taustade suhtes). Kasutatakse pealkirjade, põhiteksti ja loetavust vajavate kasutajaliidese elementide jaoks.

bg1 – peamine taust. Tavaliselt paleti kõige heledam värv. Kasutatakse peamise lehe tausta ja heledate sektsioonide jaoks.

bg2 – sekundaarne taust. Loob visuaalset mitmekesisust sektsioonide vahel. Peab olema erineva värvitemperatuuriga kui bg1 – kui bg1 on soe kreem, siis bg2 on jahe hall või sinaka tooniga valge.

accent – brändivärv. Kasutatakse nuppude, linkide, esiletõstude ja dekoratiivsete elementide jaoks. Tavaliselt paleti kõige küllastatum värv.

See piirang – neli nimetatud rolli, mitte suvalised HEX-koodid – on see, mis muudab paletisüsteemi toimivaks. Tehisintellekt ei otsusta kunagi, milline värv kuhu läheb; see valib ainult eelnevalt auditeeritud komplektist, millist paletti kasutada.

Kuidas palette korraldatakse

Meil on üle 20 paletigrupi, millest igaüks on ehitatud arhetüübi ümber:

• Julge: kõrge kontrasti, küllastatud aktsendid – tehnoloogia, SaaS, fintech
• Pehme: summutatud, dehüdreeritud – heaolu, coaching, loomingulised teenused
• Luksus: peaaegu mustad taustad metallik- või juveelaktsentidega – premium teenused, kõrgetasemeline jaemüük
• Maa-lähedane: soojad neutraalid terrakota- või salveiaktsentidega – toit, jätkusuutlikkus, käsitöö
• Tume: esmalt tumeda režiimiga paletid – arendajad, agentuurid, mängud
• Neutraalne: turvaline, professionaalne – õigus, rahandus, tervishoid

Iga grupi sees on mitu paletti erinevate värvitemperatuuride, küllastustaseme ja aktsenttoonidega. Süsteem valib grupi tööstusharu ja arhetüübi põhjal, seejärel valib grupi seest konkreetse paleti.

WCAG-i kontrast: piirang, mis parandab disaini

WCAG AA nõuab, et tavaline tekst oleks taustaga vähemalt 4,5:1 kontrastisuhtega. Suur tekst vajab 3:1. Interaktiivsed elemendid vajavad külgnevate värvidega 3:1.

Iga meie süsteemi palett on enne selle lisamist nende suhete suhtes valideeritud. Täpsemalt:

• ink peab saavutama bg1, bg2 ja mis tahes pinnavärvi, kus tekst ilmub, suhtes ≥4,5:1 kontrasti
• accent peab saavutama bg1 ja bg2 suhtes ≥3,0:1 (nupu taustadena kasutamiseks)
• Valideerimine kasutab tegelikku heleduse matemaatikat – L = 0,2126R + 0,7152G + 0,0722B pärast gammakorrektsiooni – mitte ligikaudseid arvutusi

Tulemuseks on, et iga genereeritud sait on vaikimisi loetav. Kuid on ka teine ​​kasu: kõrge kontrastsusega kujundused konverteerivad paremini. Selgelt nähtav nupp saab rohkem klikke kui nupp, mis sulandub taustaga. Ligipääsetavuse nõue osutub konversiooninõudeks.

Värvitemperatuuri kontrast sektsioonide vahel

Üks detail, mida on lihtne tähelepanuta jätta: bg1 ja bg2 peavad olema erineva värvitemperatuuriga. Kui mõlemad taustad on soojad, tunduvad vahelduvad sektsioonid monotoonsed – leht näeb välja nagu üks pidev mass, mitte eraldiseisvad sisualad.

Meie süsteemi reegel: kui bg1 on soe toon (oranži/kollase suunas või soe neutraal nagu kreem), peab bg2 olema jahe (sinise/halli suunas). Kui bg1 on jahe valge, võib bg2 olla soe beež.

See on põhjus, miks meie sektsioonid tunduvad selged isegi ilma tugevate eraldajate või varjudeta – ainult taustatemperatuuri muutus loob selge visuaalse piiri.

Tööstusharuspetsiifiline värviloogika

Mõned värvivalikud on tugevalt tööstusharuspetsiifilised. Külastajatel on ootused, mis on ehitatud aastatepikkuse kokkupuute põhjal teatud kategooria veebisaitidega.

Tervishoid ja heaolu: sinised ja rohelised annavad märku usaldusest ja rahust. Külla punased ja oranžid tunduvad selles kontekstis murettekitavad.

Õigus ja rahandus: tumedad mereväesinine, söehall, konservatiivsed hallid. Erksad aktsendid on vastuvõetavad, kuid peavad olema piiratud. Mängulised paletid õõnestavad usaldusväärsust.

Toit ja külalislahkus: soojad toonid – terrakota, merevaik, kreem – kutsuvad esile isu. Jahedad kliinilised paletid tunduvad valed.

Tehnoloogia ja SaaS: sinised jäävad domineerima, kuid on rohkem valikuvõimalusi. Elektri-sinised, indigokarva ja isegi violetne tunduvad tehnoloogilised. Puhtad mustad taustad sobivad arendajatele.

Luksus ja premium: võti on piiratus. Piiratud värvivalik, peaaegu mustad või sügavad mereväesinine peavärvidena, kuld- või plaatinaaktsendid. Kõrge kontrastsus, mitte kunagi küllastatud.

Design Mandate'i arhetüübi valik seob tööstusharu + äritüübi sobiva paletigrupiga, nii et heaolu-coach ei saa sama paletti kui advokaadibüroo, isegi kui mõlemat kirjeldatakse kui "professionaalset".

Mida kliendid saavad muuta

Pärast genereerimist saavad kliendid oma saiti Gutenbergis redigeerida. Redaktori värvivalija näitab ainult nelja brändivärvi – mitte midagi muud. See tähendab:

• Nad saavad muuta sektsioonide tausta bg1, bg2 ja pindade vahel
• Nad saavad muuta nuppude ja linkide värve accent ja ink vahel
• Nad ei saa tutvustada suvalist viiendat värvi, mis rikub paletti

Piirang on tahtlik. Kõige tavalisem viis, kuidas kliendid professionaalselt kujundatud saiti rikuvad, on valida värve täisspektriga värvirattalt. Paleti piiramine nelja nimetatud värviga muudab selle võimatuks ilma koodi sisenemata.