Barevné kódy slev bez šumu a chaosu
Barevné kódování slev je silný nástroj, který urychluje orientaci a pomáhá srozumitelně komunikovat prahové úrovně (např. -10 %, -20 %, -30 %, extra kupón, VIP). Pokud je však paleta navržena bez pravidel, vzniká vizuální šum, kognitivní přetížení a riziko dark patterns – barva vypadá „výhodně“, avšak význam je nejasný či zavádějící. Tento článek nabízí systematický postup, jak navrhnout barevné kódy slev tak, aby byly konzistentní, přístupné, auditovatelné a právně udržitelné.
Principy: čeho má barevné kódování slev dosáhnout
- Srozumitelnost: zákazník okamžitě rozumí tomu, co barva znamená (úroveň slevy, typ akce, stav splnění prahu).
- Konzistence: stejný význam barvy napříč stránkami (PLP, PDP, košík, e-maily, bannery).
- Prístupnost: informace nesmí být pouze barvou; musí mít textový a ikonografický ekvivalent a dostatečný kontrast.
- Právní čistota: žádné vizuální skrývání informace (např. falešná procenta, nečitelná referenční cena).
Taxonomie: co vlastně barevně kódujeme
- Prahové úrovně slev: -5 %, -10 %, -20 %, -30 %…
- Stav prahu: Nesplněno → Blízko → Splněno (např. do dopravy zdarma chybí 6 €).
- Typ slevy: promo kód, automatická sleva, množstevní sleva, VIP/loyální sleva.
- Časový stav: probíhá, brzy končí, ukončeno (archiv/kampaňová stránka).
Paleta: návrh barevných tokenů a významů
Základem je omezená, hierarchická paleta. Doporučení: max. 5–7 úrovní, z nichž jen 3–4 jsou primárně využívané. Každá barva má token v designovém systému.
| Token | Účel | Příklad významu | Kontrast (min.) |
|---|---|---|---|
| –discount/low | Nízká sleva | -5 % až -10 % | 4.5:1 text na pozadí |
| –discount/med | Střední sleva | -15 % až -20 % | 4.5:1 |
| –discount/high | Vysoká sleva | -25 % až -30 % | 4.5:1 |
| –discount/extra | Extra kupón/VIP | Dodatečná -10 % s kódem | 4.5:1 + ikona klíče |
| –threshold/near | Blízko prahu | „Chybí 6 €“ | 4.5:1 + progress bar |
| –threshold/met | Prahová podmínka splněna | Doprava zdarma aktivována | 3:1 (velký text/ikona) |
| –campaign/ending | Brzy končí | ≤ 24 h | 4.5:1 + ikona hodin |
Prístupnost: barva ≠ jediný nosič informace
- Text + barva + ikona: každá barevná značka má doprovodný text (např. „-20 %“) a ikonu (procento, zámek, hodiny).
- Kontrast: minimálně 4.5:1 pro text pod 18 pt; 3:1 pro velký text/tučný. Nepoužívejte „ tón v tónu“ u klíčové informace.
- Barvoslepost: nespoléhejte se na rozdíl červená vs. zelená. Používejte vzorování (šrafování) nebo odlišné ikony.
- Fokus a klávesnice: stavové značky musí být přístupné přes čtečky s ARIA popisem (např. aria-label=“Sleva 20 procent, prah splněn“).
Prahy bez chaosu: logika zobrazování
- Definovaná pásma: slevy mapujte na intervaly (např. 0–9 %, 10–19 %, 20–29 %, ≥30 %). Barva není určována „na oko“, ale pravidlem.
- Priorita signálů: v košíku upřednostněte stav prahu dopravy před barevným zvýrazněním malé slevy – méně šumu, více hodnoty.
- Bez kumulace barev: na jedné kartě produktu max. 2 barevné signály současně (např. sleva + pra pro dopravu). Ostatní jako neutrální texty.
- Stavové přechody: „nesplněno → blízko → splněno“ používají stejnou barvu s odlišnou intenzitou + ikonou, nikoli tři různé barvy.
Microcopy: neutrální texty místo hyperbol
- Dobré: „Sleva -20 % do 23:59. Referenční cena za 30 dní: 49,90 €.“
- Špatné: „Mega šok! Nepropásni!“ (bez údajů a reference)
- Dobré: „Do dopravy zdarma chybí 6 €. Přidáte spotřební materiál?“
- Dobré: „VIP -10 % s kódem VIP10 (pouze pro přihlášené).“
Dark patterns: čemu se vyhnout
- Falešné prahy: barva „splněno“, ačkoliv práh není dosažen (např. po přidání nekompatibilního produktu).
- Barevné zamlčování: referenční cena nebo doba trvání akce v nízkém kontrastu (šedá na šedé).
- Přetížení: současně 3+ barevných štítků (sleva, kupón, doprava, novinka) – zákazník nečte, pouze ignoruje.
- Nátlakové barvy: blikající červená s odpočtem bez reálného časového omezení.
Vzory UI: od PLP po košík
- PLP (listing): jeden barevný štítek se slevou (mapovaný na pásmo), sekundární malé neutrální badge pro „nové“ nebo „TOP“.
- PDP (detail): barevný štítek slevy + neutrální panel „Do dopravy zdarma chybí 6 €“ s progress barem (token –threshold/near).
- Košík: primární panel prahu dopravy (barva podle stavu), sleva vyjádřena textem + procentem, bez dalšího barevného zvýraznění.
- Checkout: klidná paleta – barevně pouze potvrzení prahu (splněno) a chybové stavy platby.
Právní rámec (EU orientačně): Omnibus a transparentnost
- Referenční cena za 30 dní: při tvrzení „-X %“ uvádějte nejnižší cenu produktu v posledních 30 dnech, čitelně.
- Jasné podmínky: barva nesmí zaměňovat slevu s kupónem; pokud se jedná o kupón, musí být uveden a aplikovatelný bez skrytých kroků.
- Prístupnost jako součást férovosti: klíčové informace (procento, termín, referenční cena) ve velikosti ≥ 16 px a dostatečném kontrastu.
Měření: KPI nad rámec CR
| Metrika | Definice | Interpretace |
|---|---|---|
| Discount Clarity Score | % relací, ve kterých byl zobrazen tooltip/legenda | Vyšší u nových uživatelů, pak klesá |
| Threshold Completion Rate | % košíků, které splnily práh (doprava/kupón) | Růst bez skoku nákladů na dopravu |
| Complaint Rate (Promo) | Stížnosti na nejasné slevy | Pokles po standardizaci palety |
| WCAG Pass Rate | % barevných prvků splňujících kontrast | Cíl ≥ 98 % mimo incidenty |
A/B testování: méně barev, větší efekt
- Hypotéza: „Redukovaná paleta a jasná pásma sníží vizuální šum a zvýší Threshold Completion Rate o 10 %.“
- Varianty: A) stávající stav s mnoha barvami; B) 4-pásmová paleta + jednotný prahový panel; C) B + vysvětlující legenda/tooltip.
- Stop kritéria: nárůst Complaint Rate nebo pokles WCAG Pass Rate pod 95 % → rollback.
Implementace: design systém a kód
- Design tokens: barvy, kontrasty, stavy (near/met/ending) v jednom zdroji pravdy (Figma/JSON).
- Komponenty: <DiscountBadge level=“med“ />, <ThresholdBar state=“near“ amountLeft=“6€“ />, <CouponPill type=“vip“ />.
- Lint pravidla: zákaz inline barev v aplikaci; povoleny jen tokeny (build-time validace kontrastu).
- I18n: procenta, měny a data lokalizujte; barvy pojmenovávejte neutrálně (ne „červená sleva“, ale „–discount/high“).
Omnikanál: soulad online, e-mail, tisk
- E-maily: používejte stejné barvy a texty, ale počítejte s rozdílným vykreslováním; vždy doplňte textový význam.
- Tisk letáků: CMYK aproximační hodnoty tokenů; zkontrolujte čitelnost na bílém i barevném podkladu.
- Prodejna: shelf talkery se stejnou paletou a legendou; vyhněte se přetížení signály na jedné cenovce.
Governance: kdo rozhoduje o barvách
- Content board: produkt, design, právník – schvalují nové významy barev a textů.
- Change log: každá změna mapování pásem (např. rozšíření „med“ z 10–20 % na 10–25 %) je dokumentována s datem a důvodem.
- Incident handling: při záměně významu barvy v kampani okamžitý fallback na neutrální textové značky.
Příklady: „dobré vs. špatné“ kompozice
| Situace | Špatné | Dobré |
|---|---|---|
| PLP karta | Tři barevné badge (sleva, novinka, doprava) | Jeden barevný badge slevy (pásmo), ostatní neutrální text/ikona |
| Košík | Červené „Ušetři ještě víc!“ bez údajů | Panel „Do dopravy zdarma chybí 6 €“ s progress barem |
| Kampaň „končí“ | Blikající červená s nečitelným časem | Token –campaign/ending + ikona hodin + datum/čas |
Checklist: barevné kódy slev bez chaosu
- ✅ Max. 4 pásma slev v produkci, ostatní vyhrazená pro speciální případy.
- ✅ Každá barva má text a ikonu; informace není pouze barvou.
- ✅ Kontrast splňuje min. 4.5:1 (text) a 3:1 (velké prvky).
- ✅ Prahy a mapování jsou pravidlem, nikoli pocitem designéra.
- ✅ Na jedné obrazovce max. 2 barevné signály současně.
- ✅ Referenční cena a trvání akce jsou jasně uvedeny.
- ✅ Změny palety jsou logovány, A/B testy sledují i stížnosti, ne jen CR.
Méně je více, barva je závazek
Barevné kódy slev jsou účinné, pokud jsou disciplinované. Omezená paleta, pevná pravidla mapování, přístupnost a právní transparentnost vytvářejí prostředí bez chaosu, kde barva urychluje porozumění a neklame. Barva je závazek – pokud něco vybarvíte, musíte umět vysvětlit proč, za jakých podmínek a s jakým přínosem pro zákazníka. Takto se z vizuální rekvizity stává spolehlivý navigační systém slev.
