Psihologija barv za privlačne pristajalne strani

Barva je prva stvar, ki jo obiskovalec zazna – še preden prebere besedo. V milisekundah sporoča panogo, verodostojnost in ton. Neposredno vpliva tudi na to, ali je besedilo berljivo, kar vpliva na to, ali ljudje ostanejo na strani.

Ta objava pojasnjuje, kako deluje PAGEnzin sistem barvnih palet in zakaj omejitve, ki jih nalagamo pri izbiri barv, dejansko prinašajo boljše rezultate kot neomejena svoboda umetne inteligence.

Težava pri naročanju umetni inteligenci, naj "izbere lepe barve"

Če prosite LLM, naj izbere barve za spletno stran, dobite heksadecimalne kode. Včasih se zdijo skupaj v redu. Včasih se ne. Model nima zanesljivega načina za oceno, ali barve dejansko delujejo – ali je besedilo berljivo, ali je barvna paleta primerna za panogo, ali je kombinacija vizualno koherentna in ne le naključno usklajena.

To težavo smo jasno videli v zgodnjih testiranjih. Neomejeno generiranje barv je prineslo barvne palete, ki so segale od odličnih do popolnoma neuporabnih. Ni bilo doslednosti.

Rešitev je bila, da izbiro barv popolnoma odvzamemo iz rok LLM in zgradimo algoritemski sistem, ki zagotavlja določene lastnosti.

4-barvni sistem

Vsaka PAGEnzina stran uporablja natančno štiri poimenovane barve:

ink – primarna barva besedila. Vedno temna (visok kontrast svetilnosti glede na ozadje). Uporablja se za naslove, besedilo in elemente uporabniškega vmesnika, ki jih je treba prebrati.

bg1 – primarno ozadje. Običajno najsvetlejša barva v paleti. Uporablja se za glavno ozadje strani in svetle dele.

bg2 – sekundarno ozadje. Ustvarja vizualno raznolikost med posameznimi deli. Mora imeti drugačno barvno temperaturo kot bg1 – če je bg1 topel smetanov, je bg2 hladen siv ali bel s pridihom modre.

accent – barva blagovne znamke. Uporablja se za gumbe, povezave, poudarke in okrasne elemente. Običajno najbolj nasičena barva v paleti.

Ta omejitev – štiri poimenovane vloge, ne poljubne heksadecimalne kode – je tisto, kar omogoča delovanje sistema barvnih palet. Umetna inteligenca nikoli ne odloča, katera barva gre kam; izbira le, katero barvno paleto uporabiti iz predhodno preverjenega nabora.

Kako so organizirane barvne palete

Vzdržujemo 20+ skupin barvnih palet, vsaka zgrajena okoli arhetipa:

• Drzne: visokokontrastni, nasičeni poudarki – tehnologija, SaaS, fintech
• Nežne: umirjene, razbarvane – wellness, coaching, kreativne storitve
• Luksuzne: skoraj črna ozadja s kovinskimi ali dragocenimi poudarki – premium storitve, vrhunska maloprodaja
• Zemljene: topli nevtralni toni s terakota ali žajbljevimi poudarki – hrana, trajnost, obrt
• Temne: barvne palete, ki temeljijo na temnem načinu – razvijalci, agencije, igre
• Nevtralne: varne, profesionalne – pravne, finančne, zdravstvene storitve

Znotraj vsake skupine je več barvnih palet z različnimi barvnimi temperaturami, stopnjami nasičenosti in odtenki poudarkov. Sistem izbere skupino glede na panogo in arhetip, nato pa izbere določeno barvno paleto znotraj skupine.

WCAG kontrast: omejitev, ki izboljšuje oblikovanje

WCAG AA zahteva, da ima običajno besedilo kontrastno razmerje najmanj 4,5:1 glede na ozadje. Veliko besedilo potrebuje 3:1. Interaktivni elementi potrebujejo 3:1 glede na sosednje barve.

Vsaka barvna paleta v našem sistemu je pred vključitvijo preverjena glede na ta razmerja. Natančneje:

• ink mora doseči kontrast ≥4,5:1 glede na bg1, bg2 in katero koli barvo površine, kjer se pojavi besedilo
• accent mora doseči kontrast ≥3,0:1 glede na bg1 in bg2 (za uporabo kot ozadje gumbov)
• Preverjanje uporablja dejansko matematiko svetilnosti – L = 0,2126R + 0,7152G + 0,0722B po popravku gama – ne približkov

Učinek je, da je vsaka ustvarjena stran privzeto berljiva. Vendar obstaja sekundarna korist: dizajni z visokim kontrastom bolje pretvarjajo. Gumb, ki je jasno viden, dobi več klikov kot tisti, ki se zlije z ozadjem. Zahteva po dostopnosti se izkaže za zahtevo po konverziji.

Kontrast barvnih temperatur med posameznimi deli

Ena podrobnost, ki jo je enostavno spregledati: bg1 in bg2 morata imeti kontrastni barvni temperaturi. Če sta obe ozadji topli, izmenjujoči se deli delujejo monotono – stran izgleda kot en sam neprekinjen kup, namesto kot ločena vsebinska področja.

Pravilo v našem sistemu: če ima bg1 topel odtenek (smer oranžne/rumene ali topel nevtralen ton, kot je smetanova), mora biti bg2 hladen (smer modre/sive). Če je bg1 hladen bel, je bg2 lahko topel smetanov.

Zato se naši deli zdijo izraziti tudi brez močnih ločil ali senčnih senc – že sam premik temperature ozadja ustvari jasno vizualno ločitev.

Logika barv, specifična za panogo

Nekatere izbire barv so močno kodirane glede na panogo. Obiskovalci imajo pričakovanja, zgrajena na podlagi let izpostavljenosti spletnim stranem v določeni kategoriji.

Zdravstvo in wellness: modre in zelene barve signalizirajo zaupanje in mir. Nasičene rdeče in oranžne barve se v tem kontekstu zdijo alarmantne.

Pravne in finančne storitve: temno modre, ogljeno sive, konzervativne sive barve. Svetli poudarki so sprejemljivi, vendar morajo biti zadržani. Igrivi barvni odtenki podkopavajo verodostojnost.

Hrana in gostinstvo: topli toni – terakota, jantar, smetanova – spodbujajo asociacije na apetit. Hladne klinične barvne palete se zdijo napačne.

Tehnologija in SaaS: modre barve ostajajo prevladujoče, vendar je več razpona. Električno modre, indigo in celo vijolične barve delujejo tehnološko napredno. Črna ozadja so primerna za orodja za razvijalce.

Luksuz in premium: ključna je zadržanost. Omejen barvni razpon, skoraj črna ali globoko modra kot primarne barve, zlati ali platinasti poudarki. Visok kontrast, nikoli nasičeno.

Izbira arhetipa v Design Mandate poveže panogo + vrsto posla z ustrezno skupino barvnih palet, tako da trener wellnessa ne dobi iste barvne palete kot odvetniška pisarna, tudi če sta obe opisani kot "profesionalni".

Kaj lahko stranke spremenijo

Po generiranju lahko stranke urejajo svojo stran v Gutenbergovem urejevalniku. Izbirnik barv v urejevalniku prikazuje samo štiri barve blagovne znamke – nič drugega. To pomeni:

• Lahko spremenijo ozadja posameznih delov med bg1, bg2 in površinami
• Lahko spremenijo barve gumbov in povezav med accent in ink
• Ne morejo vnesti poljubne pete barve, ki bi pokvarila barvno paleto

Omejitev je namerna. Najpogostejši način, kako stranke pokvarijo profesionalno oblikovano stran, je izbira barv s celotnega barvnega kolesa. Omejitev barvne palete na štiri poimenovane barve to onemogoča, ne da bi posegli v kodo.