Krāsu psiholoģija augstas konversijas lapām

Krāsa ir pirmā lieta, ko apmeklētājs apstrādā — pirms viņš izlasa nevienu vārdu. Tā dažu milisekunžu laikā komunicē nozari, uzticamību un toni. Tā arī tieši ietekmē to, vai teksts ir salasāms, kas savukārt ietekmē to, vai cilvēki paliek lapā.

Šajā ierakstā paskaidrots, kā darbojas PAGEnza palešu sistēma un kāpēc ierobežojumi, ko mēs uzliekam krāsu izvēlei, faktiski rada labākus rezultātus nekā neierobežota brīvība mākslīgajam intelektam.

Problēma, jautājot mākslīgajam intelektam "izvēlēties jaukas krāsas"

Ja jūs lūgsit LLM izvēlēties krāsas tīmekļa vietnei, jūs saņemsiet heksakodus. Dažreiz tie izskatās labi kopā. Dažreiz nē. Modelim nav uzticama veida, kā novērtēt, vai krāsas patiešām darbojas — vai teksts ir salasāms, vai palete šķiet piemērota nozarei, vai kombinācija ir vizuāli saskaņota, nevis nejauši saskaņota.

Mēs skaidri redzējām šo problēmu agrīnajos testos. Neierobežota krāsu ģenerēšana radīja paletes, kas svārstījās no izcilām līdz pilnīgi nelietojamām. Nebija nekādas konsekvences.

Risinājums bija pilnībā izņemt krāsu izvēli no LLM rokas un izveidot algoritmisk sistēmu, kas garantē noteiktas īpašības.

4 krāsu sistēma

Katra PAGEnza vietne izmanto tieši četras nosauktas krāsas:

ink — primārā teksta krāsa. Vienmēr tumša (augsts luminiscences kontrasts pret foniem). Izmanto virsrakstiem, pamattekstam un lietotāja interfeisa elementiem, kas ir jāizlasa.

bg1 — primārais fons. Parasti gaišākā krāsa paletē. Izmanto galvenajam lapas fonam un gaišām sekcijām.

bg2 — sekundārais fons. Rada vizuālu dažādību starp sekcijām. Jābūt atšķirīgai krāsu temperatūrai nekā bg1 — ja bg1 ir silts krējums, bg2 ir vēss pelēks vai zilgani balts.

accent — zīmola krāsa. Izmanto pogām, saitēm, izcēlumiem un dekoratīviem elementiem. Parasti vispiesātinātākā krāsa paletē.

Šis ierobežojums — četras nosauktas lomas, nevis patvaļīgi heksakodi — ir tas, kas liek palešu sistēmai darboties. Mākslīgais intelekts nekad nenosaka, kura krāsa kur nonāk; tas tikai izvēlas, kuru paleti izmantot no iepriekš auditēta komplekta.

Kā tiek organizētas paletes

Mēs uzturam 20+ palešu grupas, katra veidota ap arhetipu:

• Drosmīgs: augsts kontrasts, piesātināti akcenti — tehnoloģijas, SaaS, finanšu tehnoloģijas
• Mīksts: neitrāls, nedaudz piesātināts — labsajūta, koučings, radošie pakalpojumi
• Luksusa: gandrīz melni foni ar metāliskiem vai dārgakmeņu akcentiem — premium pakalpojumi, augstākās klases mazumtirdzniecība
• Zemiskas: silti neitrāli toņi ar terakotas vai salvijas akcentiem — pārtika, ilgtspējība, amatniecība
• Tumšs: tumšā režīma pirmās paletes — izstrādātāji, aģentūras, spēles
• Neitrāls: drošs, profesionāls — juridiskie pakalpojumi, finanses, veselības aprūpe

Katrā grupā ir vairākas paletes ar dažādām krāsu temperatūrām, piesātinājuma līmeņiem un akcentu toņiem. Sistēma izvēlas grupu, pamatojoties uz nozari un arhetipu, pēc tam izvēlas konkrētu paleti grupā.

WCAG kontrasts: ierobežojums, kas uzlabo dizainu

WCAG AA prasa, lai parastajam tekstam būtu vismaz 4,5:1 kontrasta attiecība pret tā fonu. Lielam tekstam nepieciešams 3:1. Interaktīvajiem elementiem nepieciešams 3:1 pret blakus esošajām krāsām.

Katra mūsu sistēmas palete pirms iekļaušanas tiek validēta attiecībā pret šiem koeficientiem. Konkrēti:

• ink jāiegūst ≥4,5:1 kontrasts pret bg1, bg2 un jebkuru virsmas krāsu, kur parādās teksts
• accent jāiegūst ≥3,0:1 pret bg1 un bg2 (lietošanai kā pogu foniem)
• Validācija izmanto reālu luminiscences matemātiku — L = 0.2126R + 0.7152G + 0.0722B pēc gamma korekcijas — nevis aprēķinus

Rezultāts ir tāds, ka katra ģenerētā vietne ir salasāma pēc noklusējuma. Bet ir otrā priekšrocība: augsta kontrasta dizaini konvertē labāk. Poga, kas ir skaidri redzama, saņem vairāk klikšķu nekā tā, kas saplūst ar fonu. Pieejamības prasība izrādās konversijas prasība.

Krāsu temperatūras kontrasts starp sekcijām

Viena detaļa, ko viegli aizmirst: bg1 un bg2 jābūt kontrastējošām krāsu temperatūrām. Ja abi foni ir silti, pamīšus esošās sekcijas šķiet vienmuļas — lapa izskatās kā viens nepārtraukts blāķis, nevis atsevišķas satura zonas.

Noteikums mūsu sistēmā: ja bg1 ir silts tonis (oranžas/dzeltenas virziens vai silts neitrāls, piemēram, krējums), bg2 jābūt vēsam (zils/pelēks virziens). Ja bg1 ir vēss balts, bg2 var būt silts krēmkrāsas.

Tas ir iemesls, kāpēc mūsu sekcijas šķiet atšķirīgas pat bez bieziem dalītājiem vai ēnas — tikai fona temperatūras maiņa rada skaidru vizuālu pārtraukumu.

Uz nozari specifiska krāsu loģika

Dažas krāsu izvēles ir spēcīgi kodētas nozarē. Apmeklētājiem ir gaidas, kas veidotas gadu desmitiem ilgas saskarsmes ar tīmekļa vietnēm noteiktā kategorijā.

Veselības aprūpe un labsajūta: zilas un zaļas krāsas signalizē par uzticību un mieru. Piesātināti sarkani un oranži šajā kontekstā šķiet biedējoši.

Juridiskie un finanšu pakalpojumi: tumši tumši zili, ogļu, konservatīvi pelēki toņi. Spilgti akcenti ir pieņemami, bet tiem jābūt ierobežotiem. Spēlīgi paletes mazina uzticamību.

Pārtika un viesmīlība: silti toņi — terakota, dzintars, krējums — aktivizē apetītes asociācijas. Vēsas klīniskās paletes šķiet nepareizas.

Tehnoloģijas un SaaS: zilas krāsas joprojām dominē, bet ir plašāks diapazons. Elektriski zili, indigo un pat violets šķiet tehnoloģiski progresīvi. Pilnīgi melni foni ir piemēroti izstrādātāju rīkiem.

Luksusa un premium: galvenais ir atturība. Ierobežots krāsu diapazons, gandrīz melni vai dziļi tumši zili kā primārās krāsas, zelta vai platīna akcenti. Augsts kontrasts, nekad nav piesātināts.

Arhetipu izvēle Dizaina Mandātā kartē nozari + biznesa veidu uz atbilstošo palešu grupu, lai labsajūtas koučs nesaņemtu tādu pašu paleti kā advokātu birojs, pat ja abi ir aprakstīti kā "profesionāli".

Ko klienti var mainīt

Pēc ģenerēšanas klienti var rediģēt savu vietni Gutenbergā. Krāsu atlasītājs redaktorā rāda tikai četras zīmola krāsas — neko citu. Tas nozīmē:

• Viņi var mainīt sekciju fonus starp bg1, bg2 un virsmām
• Viņi var mainīt pogu un saišu krāsas starp accent un ink
• Viņi nevar ieviest patvaļīgu piekto krāsu, kas sabojātu paleti

Ierobežojums ir apzināts. Visbiežākais veids, kā klienti sabojā profesionāli izstrādātu vietni, ir krāsu izvēle no pilna krāsu spektra apļa. Ierobežojot paleti līdz četrām nosauktām krāsām, tas kļūst neiespējami bez koda rediģēšanas.