Spalvų psichologija, skirta didelį konversijos rodiklį turintiems tinklalapiams

Spalva yra pirmas dalykas, kurį lankytojas apdoroja – dar prieš perskaitydamas žodį. Ji per milisekundes perteikia pramonės šaką, patikimumą ir toną. Ji taip pat tiesiogiai veikia tai, ar tekstas yra įskaitomas, o tai veikia tai, ar žmonės lieka puslapyje.

Šiame įraše paaiškinama, kaip veikia PAGEnza paletės sistema ir kodėl apribojimai, kuriuos taikome spalvų pasirinkimui, iš tikrųjų duoda geresnių rezultatų nei neribota laisvė dirbtiniam intelektui.

Problema, kai dirbtinio intelekto prašoma „parinkti gražias spalvas“

Jei paprašysite LLM pasirinkti spalvas svetainei, gausite šešioliktainius kodus. Kartais jie atrodo gerai kartu. Kartais – ne. Modelis neturi patikimo būdo įvertinti, ar spalvos iš tikrųjų veikia – ar tekstas yra įskaitomas, ar paletė tinka pramonei, ar derinys yra vizualiai darnus, o ne atsitiktinai derantis.

Šią problemą aiškiai matėme ankstyvose testavimo stadijose. Neapribotas spalvų generavimas davė paletes, kurios svyravo nuo puikių iki visiškai nenaudojamų. Nebuvo jokio nuoseklumo.

Sprendimas buvo visiškai atimti spalvų pasirinkimą iš LLM ir sukurti algoritminę sistemą, kuri garantuoja specifines savybes.

4 spalvų sistema

Kiekviena PAGEnza svetainė naudoja lygiai keturias pavadintas spalvas:

ink – pagrindinė teksto spalva. Visada tamsi (didelis šviesumo kontrastas su fonais). Naudojama antraštėms, pagrindiniam tekstui ir vartotojo sąsajos elementams, kuriuos reikia perskaityti.

bg1 – pagrindinis fonas. Paprastai šviesiausia paletės spalva. Naudojama pagrindiniam puslapio fonui ir šviesioms sekcijoms.

bg2 – antrinis fonas. Sukuria vizualinę įvairovę tarp sekcijų. Turi turėti kitokią spalvos temperatūrą nei bg1 – jei bg1 yra šiltas kremas, bg2 yra vėsus pilkas arba mėlynai atspalvintas baltas.

accent – prekės ženklo spalva. Naudojama mygtukams, nuorodoms, paryškinimams ir dekoratyviniams elementams. Paprastai yra sodriausia paletės spalva.

Šis apribojimas – keturi pavadinti vaidmenys, o ne atsitiktiniai šešioliktainiai kodai – yra tai, kas leidžia veikti paletės sistemai. Dirbtinis intelektas niekada nenusprendžia, kokia spalva kur eina; jis tik pasirenka, kurią paletę naudoti iš iš anksto patikrintų rinkinių.

Kaip organizuojamos paletės

Mes palaikome 20+ paletės grupių, kurių kiekviena yra pastatyta aplink archetipą:

• Drąsus: didelio kontrasto, sodrūs akcentai – technologijos, SaaS, finansinės technologijos
• Švelnus: prislopinti, desatūruoti – sveikata, koučingas, kūrybinės paslaugos
• Prabanga: beveik juodi fonai su metaliniais ar brangakmenių akcentais – aukščiausios klasės paslaugos, prabangus mažmeninis pardavimas
• Žemiškas: šilti neutralūs tonai su terakotos ar šalavijų akcentais – maistas, tvarumas, amatai
• Tamsus: pirmiausia tamsaus režimo paletės – programuotojai, agentūros, žaidimai
• Neutralus: saugus, profesionalus – teisė, finansai, sveikatos priežiūra

Kiekvienoje grupėje yra kelios paletės su skirtingomis spalvos temperatūromis, sodrumo lygiais ir akcentų atspalviais. Sistema pasirenka grupę pagal pramonės šaką ir archetipą, tada pasirenka konkrečią paletę grupėje.

WCAG kontrastas: apribojimas, kuris pagerina dizainą

WCAG AA reikalauja, kad normalus tekstas turėtų bent 4,5:1 kontrasto santykį su savo fonu. Didelis tekstas reikalauja 3:1. Interaktyvūs elementai reikalauja 3:1 su gretimomis spalvomis.

Kiekviena mūsų sistemos paletė yra patvirtinama pagal šiuos santykius prieš ją įtraukiant. Konkrečiai:

• ink turi pasiekti ≥4.5:1 kontrastą su bg1, bg2 ir bet kokia paviršiaus spalva, kurioje yra tekstas
• accent turi pasiekti ≥3.0:1 su bg1 ir bg2 (naudojimui kaip mygtukų fonams)
• Patvirtinimas naudoja realią šviesumo matematiką – L = 0.2126R + 0.7152G + 0.0722B po gama korekcijos – ne apytiksles reikšmes

Rezultatas yra tas, kad kiekviena sugeneruota svetainė yra įskaitoma pagal numatytuosius nustatymus. Tačiau yra ir papildoma nauda: didelio kontrasto dizainai geriau konvertuoja. Mygtukas, kuris yra aiškiai matomas, sulaukia daugiau paspaudimų nei tas, kuris susilieja su fonu. Prieinamumo reikalavimas pasirodo esąs konversijos reikalavimas.

Spalvos temperatūros kontrastas tarp sekcijų

Viena detalė, kurią lengva pamiršti: bg1 ir bg2 turi turėti kontrastingas spalvos temperatūras. Jei abu fonai yra šilti, besikeičiančios sekcijos atrodo monotoniškai – puslapis atrodo kaip vienas ištisinis darinys, o ne atskiri turinio plotai.

Sistema taiko taisyklę: jei bg1 turi šiltą atspalvį (oranžinės/geltonos krypties arba šiltas neutralus, pvz., kremas), bg2 turi būti vėsus (mėlynos/pilkos krypties). Jei bg1 yra vėsus baltas, bg2 gali būti šiltas ne visai baltas.

Štai kodėl mūsų sekcijos atrodo skirtingos net ir be sunkių pertvarų ar šešėlių – vien pats foninės temperatūros poslinkis sukuria aiškų vizualinį pertrauką.

Pramonės specifinė spalvų logika

Kai kurie spalvų pasirinkimai yra stipriai susieti su pramone. Lankytojai turi lūkesčių, susiformavusių per daugelį metų, kai jie matė svetaines tam tikroje kategorijoje.

Sveikatos priežiūra ir gerovė: mėlynos ir žalios spalvos signalizuoja pasitikėjimą ir ramybę. Sodrios raudonos ir oranžinės spalvos šiuo atveju skamba nerimą keliančiai.

Teisė ir finansai: tamsiai mėlyni, anglies, konservatyvūs pilki tonai. Ryškūs akcentai yra priimtini, bet turi būti ribojami. Žaismingos paletės menkina patikimumą.

Maistas ir svetingumas: šilti tonai – terakotos, gintaro, kremo – suaktyvina apetito asociacijas. Vėsios klinikinės paletės atrodo netinkamai.

Technologijos ir SaaS: mėlynos spalvos išlieka dominuojančios, bet yra didesnė įvairovė. Elektrinės mėlynos, indigo ir net violetinės spalvos skamba kaip pažangios technologijos. Gryni juodi fonai tinka kūrėjų įrankiams.

Prabanga ir aukščiausios klasės: svarbiausia yra saikas. Ribotas spalvų diapazonas, beveik juodos arba tamsiai mėlynos spalvos kaip pagrindinės spalvos, aukso ar platinos akcentai. Didelis kontrastas, niekada ne sodrus.

Archetipo pasirinkimas Dizaino mandate susieja pramonės šaką + verslo tipą su atitinkama paletės grupe, todėl gerovės koučingo specialistas negauna tos pačios paletės kaip advokatų kontora, net jei abi apibūdinamos kaip „profesionalios“.

Ką klientai gali pakeisti

Po generavimo klientai gali redaguoti savo svetainę „Gutenberg“. Redaktoriaus spalvų parinkiklis rodo tik keturias prekės ženklo spalvas – nieko daugiau. Tai reiškia:

• Jie gali keisti sekcijų fonus tarp bg1, bg2 ir paviršių
• Jie gali keisti mygtukų ir nuorodų spalvas tarp accent ir ink
• Jie negali įvesti atsitiktinės penktos spalvos, kuri sugadintų paletę

Apribojimas yra sąmoningas. Dažniausias būdas, kuriuo klientai sugadina profesionaliai suprojektuotą svetainę, yra spalvų pasirinkimas iš viso spalvų rato. Apribojus paletę iki keturių pavadintų spalvų, tai tampa neįmanoma be kodavimo.