Színpszichológia a magas konverziójú céloldalakhoz

A szín az első dolog, amit a látogató feldolgoz – még mielőtt egy szót is olvasna. Másodpercek alatt kommunikálja az iparágat, a hitelességet és a hangnemet. Közvetlenül befolyásolja azt is, hogy a szöveg olvasható-e, ami befolyásolja, hogy az emberek az oldalon maradnak-e.

Ez a bejegyzés elmagyarázza, hogyan működik a PAGEnza színpaletta-rendszere, és miért ad a színválasztásra vonatkozó korlátozásaink valójában jobb eredményeket, mint az AI korlátlan szabadságának megadása.

A probléma azzal, ha egy AI-t arra kérünk, hogy „válasszon szép színeket"

Ha egy LLM-et arra kérsz, hogy válasszon színeket egy weboldalhoz, akkor hex kódokat kapsz. Néha jól néznek ki együtt. Néha nem. A modellnek nincs megbízható módja annak értékelésére, hogy a színek valóban működnek-e – olvasható-e a szöveg, megfelelő-e a paletta az iparág számára, a kombináció vizuálisan koherens-e, ahelyett, hogy véletlenül illeszkedne.

Ezt a problémát már a korai tesztelés során is világosan láttuk. A korlátlan szín generálás olyan palettákat eredményezett, amelyek a kiválótól a teljesen használhatatlanig terjedtek. Nem volt következetesség.

A megoldás az volt, hogy a színválasztást teljesen kivettük az LLM kezéből, és egy algoritmusos rendszert építettünk, amely garantálja a specifikus tulajdonságokat.

A 4-színű rendszer

Minden PAGEnza webhely pontosan négy elnevezett színt használ:

ink – az elsődleges szövegszín. Mindig sötét (nagy világítási kontraszt a háttérrel szemben). Fejlécekhez, törzsszöveghez és olvashatóságot igénylő UI elemekhez használatos.

bg1 – az elsődleges háttér. Általában a paletta legvilágosabb színe. A fő oldalszínhez és a világos szakaszokhoz használatos.

bg2 – a másodlagos háttér. Vizuális változatosságot teremt a szakaszok között. Más színárnyalattal kell rendelkeznie, mint a bg1 – ha a bg1 meleg krémszínű, akkor a bg2 hideg szürke vagy kékesfehér.

accent – a márkaszin. Gombokhoz, linkekhez, kiemelésekhez és dekoratív elemekhez használatos. Általában a paletta legtelítettebb színe.

Ez a korlátozás – négy elnevezett szerepkör, nem pedig önkényes hex kódok – teszi lehetővé a színpaletta rendszer működését. Az AI soha nem dönti el, hogy melyik szín hova kerül; csak egy előzetesen auditált készletből választ ki egy színpalettát.

Hogyan szerveződnek a színpaletták

20+ színpaletta csoportot tartunk karban, mindegyik egy archetípus köré épül:

• Merész: nagy kontrasztú, telített kiemelések – technológia, SaaS, fintech
• Lágy: tompa, telítetlen – wellness, coaching, kreatív szolgáltatások
• Luxus: majdnem fekete háttér fémes vagy drágakő kiemelésekkel – prémium szolgáltatások, csúcskategóriás kiskereskedelem
• Földies: meleg semlegesek terrakotta vagy zsálya kiemelésekkel – élelmiszer, fenntarthatóság, kézművesség
• Sötét: elsősorban sötét módú paletták – fejlesztők, ügynökségek, játék
• Semleges: biztonságos, professzionális – jogi, pénzügyi, egészségügyi

Minden csoporton belül több színpaletta található különböző színárnyalatokkal, telítettségi szintekkel és kiemelési árnyalatokkal. A rendszer az iparág és az archetípus alapján választ ki egy csoportot, majd kiválaszt egy specifikus színpalettát a csoporton belül.

WCAG kontraszt: a tervezést javító korlátozás

A WCAG AA előírja, hogy a normál szöveg kontrasztaránya legalább 4,5:1 legyen a háttérrel szemben. A nagy szöveghez 3:1 szükséges. Az interaktív elemekhez 3:1 szükséges a szomszédos színekkel szemben.

Rendszerünk minden színpalettáját validáljuk ezekre az arányokra, mielőtt bekerülne. Pontosabban:

• Az ink-nek ≥4,5:1 kontrasztot kell elérnie a bg1, bg2 és bármely olyan felületi szín ellen, ahol szöveg jelenik meg.
• Az accent-nek ≥3,0:1 kontrasztot kell elérnie a bg1 és bg2 ellen (gomb háttérként való használathoz).
• A validálás valós világítási matekot használ – L = 0,2126R + 0,7152G + 0,0722B gamma korrekció után – nem közelítéseket.

Ennek hatása az, hogy minden generált webhely alapértelmezetten olvasható. De van egy másodlagos előny: a magas kontrasztú dizájnok jobban konvertálnak. Egy jól látható gomb több kattintást kap, mint egy olyan, amelyik beleolvad a háttérbe. A hozzáférhetőségi követelmény konverziós követelménnyé válik.

Színhőmérséklet kontraszt a szakaszok között

Egy könnyen figyelmen kívül hagyható részlet: a bg1 és bg2 színeknek kontrasztos színárnyalatokkal kell rendelkezniük. Ha mindkét háttér meleg, az váltakozó szakaszok monotonnak tűnnek – az oldal egyetlen összefüggő masszának tűnik, nem pedig különálló tartalomterületeknek.

Rendszerünk szabálya: ha a bg1 meleg árnyalattal rendelkezik (narancs/sárga irányban, vagy meleg semleges, mint a krémszín), akkor a bg2-nek hűvösnek kell lennie (kék/szürke irányban). Ha a bg1 hűvös fehér, akkor a bg2 lehet meleg törtfehér.

Ez az oka annak, hogy a szakaszaink elkülönülnek még nehéz elválasztók vagy árnyékok nélkül is – már maga a háttér hőmérsékletének eltolódása is egyértelmű vizuális törést hoz létre.

Iparág-specifikus színlogika

Bizonyos színválasztások erősen iparági kódolásúak. A látogatóknak elvárásaik vannak, amelyek egy adott kategóriában lévő webhelyekkel való éves expozícióból épültek fel.

Egészségügy és wellness: a kékek és zöldek bizalmat és nyugalmat jeleznek. A telített pirosak és narancsok ebben a kontextusban riasztónak tűnnek.

Jogi és pénzügyi: sötét tengerészkék, faszén, konzervatív szürkék. Az élénk kiemelések elfogadhatók, de visszafogottnak kell lenniük. A játékos paletták aláássák a hitelességet.

Élelmiszer és vendéglátás: a meleg tónusok – terrakotta, borostyán, krémszín – étvágyat keltő asszociációkat aktiválnak. A hűvös, klinikai paletták rossznak tűnnek.

Technológia és SaaS: a kékek dominálnak, de nagyobb a választék. Az elektromos kékek, indigók és még az ibolyaszín is technológia-orientáltnak tűnik. A tiszta fekete háttér működik a fejlesztői eszközöknél.

Luxus és prémium: a kulcs a visszafogottság. Korlátozott színválaszték, majdnem fekete vagy mély tengerészkék mint elsődleges színek, arany vagy platina kiemelések. Nagy kontraszt, soha nem telített.

A Design Mandate-ban az archetípus kiválasztása az iparág + üzleti típus alapján megfelelteti a megfelelő színpaletta csoportot, így egy wellness edző nem kapja ugyanazt a színpalettát, mint egy ügyvédi iroda, még akkor sem, ha mindkettőt "professzionálisnak" írják le.

Mit változtathatnak az ügyfelek

Generálás után az ügyfelek szerkeszthetik webhelyüket a Gutenbergben. A szerkesztőben lévő színválasztó csak a négy márkaszínt mutatja – semmi mást. Ez azt jelenti:

• A szakaszok hátterét bg1, bg2 és felületek között változtathatják.
• A gombok és linkek színeit accent és ink között változtathatják.
• Nem vezethetnek be önkényes ötödik színt, amely megtöri a színpalettát.

A korlátozás szándékos. Az ügyfelek leggyakoribb módja egy professzionálisan tervezett webhely megtörésének az, hogy a teljes színkörből választanak színeket. A színpaletta négy elnevezett színre korlátozása ezt lehetetlenné teszi anélkül, hogy a kódba kellene nyúlni.