Psihologija boja za konverzijske odredišne stranice

Boja je prva stvar koju posjetitelj procesuira – prije nego pročita ijednu riječ. Ona komunicira industriju, kredibilitet i ton u milisekundama. Također izravno utječe na čitljivost teksta, što utječe na to hoće li ljudi ostati na stranici.

Ovaj post objašnjava kako PAGEnza sustav paleta funkcionira i zašto ograničenja koja namećemo odabiru boja zapravo proizvode bolje rezultate nego davanje neograničene slobode umjetnoj inteligenciji.

Problem s traženjem od umjetne inteligencije da "odabere lijepe boje"

Ako zamolite LLM da odabere boje za web stranicu, dobit ćete heksadecimalne kodove. Ponekad izgledaju dobro zajedno. Ponekad ne. Model nema pouzdan način za procjenu jesu li boje zapravo funkcionalne – je li tekst čitljiv, je li paleta prikladna za industriju, je li kombinacija vizualno koherentna, a ne slučajno usklađena.

Ovaj smo problem jasno vidjeli u ranom testiranju. Neograničeno generiranje boja proizvelo je palete koje su varirale od izvrsnih do potpuno neupotrebljivih. Nije bilo dosljednosti.

Rješenje je bilo potpuno izuzeti odabir boja iz LLM-ovih ruku i izgraditi algoritamski sustav koji jamči specifična svojstva.

Četverobojni sustav

Svaka PAGEnza stranica koristi točno četiri imenovane boje:

ink — primarna boja teksta. Uvijek tamna (visok kontrast svjetline u odnosu na pozadine). Koristi se za naslove, glavni tekst i UI elemente koji se trebaju čitati.

bg1 — primarna pozadina. Obično najsvjetlija boja u paleti. Koristi se za glavnu pozadinu stranice i svijetle sekcije.

bg2 — sekundarna pozadina. Stvara vizualnu raznolikost između sekcija. Mora imati drugačiju temperaturu boje od bg1 — ako je bg1 topla krema, bg2 je hladno siva ili bijela s plavim tonom.

accent — boja brenda. Koristi se za gumbe, poveznice, isticanja i ukrasne elemente. Obično najzasićenija boja u paleti.

Ovo ograničenje — četiri imenovane uloge, a ne proizvoljni heksadecimalni kodovi — ono je što čini sustav paleta funkcionalnim. Umjetna inteligencija nikada ne odlučuje koja boja ide gdje; ona samo odabire koju paletu koristiti iz unaprijed provjerenog skupa.

Kako su organizirane palete

Održavamo 20+ grupa paleta, svaka izgrađena oko arhetipa:

• Bold: visok kontrast, zasićeni akcenti — tehnologija, SaaS, fintech
• Soft: prigušene, nezasićene — wellness, coaching, kreativne usluge
• Luxury: pozadine gotovo crne s metalnim ili draguljastim akcentima — premium usluge, luksuzna maloprodaja
• Earthy: topli neutralni tonovi s akcentima terakote ili kadulje — hrana, održivost, obrt
• Dark: palete s primarnim tamnim načinom rada — developeri, agencije, gaming
• Neutral: sigurne, profesionalne — pravne, financijske, zdravstvene usluge

Unutar svake grupe postoji više paleta s različitim temperaturama boje, razinama zasićenosti i nijansama akcenta. Sustav odabire grupu na temelju industrije i arhetipa, a zatim odabire specifičnu paletu unutar grupe.

WCAG kontrast: ograničenje koje poboljšava dizajn

WCAG AA zahtijeva da normalni tekst ima omjer kontrasta najmanje 4,5:1 u odnosu na svoju pozadinu. Veliki tekst treba 3:1. Interaktivni elementi trebaju 3:1 u odnosu na susjedne boje.

Svaka paleta u našem sustavu validirana je prema tim omjerima prije nego što se uključi. Konkretno:

• ink mora postići ≥4,5:1 kontrast u odnosu na bg1, bg2 i bilo koju površinsku boju na kojoj se tekst pojavljuje
• accent mora postići ≥3,0:1 u odnosu na bg1 i bg2 (za korištenje kao pozadine gumba)
• Validacija koristi stvarnu matematiku svjetline — L = 0.2126R + 0.7152G + 0.0722B nakon korekcije gama — ne aproksimacije

Učinak je da je svaka generirana stranica prema zadanim postavkama čitljiva. Ali postoji sekundarna korist: dizajni s visokim kontrastom bolje konvergiraju. Gumb koji je jasno vidljiv dobiva više klikova nego onaj koji se stapa s pozadinom. Zahtjev za pristupačnostšću pokazao se kao zahtjev za konverziju.

Kontrast temperature boje između sekcija

Jedan detalj koji se lako može previdjeti: bg1 i bg2 moraju imati kontrastne temperature boje. Ako su obje pozadine tople, izmjenične sekcije postaju monotonije — stranica izgleda kao jedna kontinuirana masa, a ne kao odvojena područja sadržaja.

Pravilo u našem sustavu: ako bg1 ima toplu nijansu (u smjeru narančaste/žute, ili topao neutralni ton poput kreme), bg2 mora biti hladan (u smjeru plave/sive). Ako je bg1 hladno bijela, bg2 može biti topla izvanbijela.

To je razlog zašto naše sekcije izgledaju odvojeno čak i bez jakih razdjelnika ili sjena — sam pomak temperature pozadine stvara jasan vizualni prekid.

Logika boja specifična za industriju

Neki odabiri boja snažno su kodirani prema industriji. Posjetitelji imaju očekivanja izgrađena godinama izloženosti web stranicama u određenoj kategoriji.

Zdravstvo i wellness: plave i zelene boje signaliziraju povjerenje i smirenost. Zasićene crvene i narančaste boje u ovom kontekstu djeluju alarmantno.

Pravne i financijske usluge: tamne mornarske, ugljene, konzervativne sive boje. Svijetli akcenti su prihvatljivi, ali moraju biti suzdržani. Razigrane palete podrivaju kredibilitet.

Hrana i ugostiteljstvo: topli tonovi — terakota, jantar, krema — aktiviraju asocijacije na apetit. Hladne kliničke palete djeluju pogrešno.

Tehnologija i SaaS: plave boje ostaju dominantne, ali postoji veći raspon. Električno plave, indigo, pa čak i ljubičaste boje djeluju napredno u tehnologiji. Čiste crne pozadine dobro funkcioniraju za alate za developere.

Luksuz i premium: ključ je suzdržanost. Ograničen raspon boja, gotovo crne ili duboke mornarske boje kao primarne boje, zlatni ili platinasti akcenti. Visok kontrast, nikada zasićen.

Odabir arhetipa u Design Mandate mapira industriju + vrstu poslovanja na odgovarajuću grupu paleta, tako da wellness coach ne završi s istom paletom kao odvjetnički ured, čak i ako su oboje opisani kao "profesionalni".

Što klijenti mogu promijeniti

Nakon generiranja, klijenti mogu uređivati svoju stranicu u Gutenberg editoru. Alat za odabir boja u editoru prikazuje samo četiri boje brenda — ništa drugo. To znači:

• Mogu mijenjati pozadine sekcija između bg1, bg2 i površina
• Mogu mijenjati boje gumba i poveznica između accent i ink
• Ne mogu uvesti proizvoljnu petu boju koja bi narušila paletu

Ograničenje je namjerno. Najčešći način na koji klijenti naruše profesionalno dizajniranu stranicu je odabir boja iz punog kotača boja. Ograničavanje palete na četiri imenovane boje to onemogućuje bez ulaska u kod.