Jak vyvinout webové stránky, elektronický obchod nebo barevná schémata aplikací

Vyvíjejte barevná schémata webových stránek, elektronického obchodu nebo aplikací

Sdíleli jsme několik článků o důležitosti barev s ohledem na značku. Pro web, web elektronického obchodu nebo mobilní či webovou aplikaci je to stejně důležité. Barvy mají vliv na:

  • Prvotní dojem ze značky a její hodnota – například luxusní zboží často využívá černou, červená implikuje vzrušení atd.
  • Rozhodnutí o nákupu – důvěryhodnost značky může být určena barevným kontrastem. Jemná barevná schémata mohou být ženštější a důvěryhodnější, ostré kontrasty mohou být naléhavější a řízené slevou.
  • Použitelnost a uživatelská zkušenost – barvy mají psycholog a také fyziologický dopad, což usnadňuje nebo ztěžuje navigaci v uživatelském rozhraní.

Jak důležitá je barva?

  • 85 % lidí tvrdilo, že barva má zásadní vliv na to, co kupují.
  • Barvy zvyšují povědomí o značce v průměru o 80 %.
  • Barevný dojem je zodpovědný za 60 % přijetí nebo zamítnutí produktu.

Při určování barevného schématu pro webovou stránku je několik kroků podrobně popsaných v doprovodné infografice:

  1. Základní barva – Vyberte si barvu, která odpovídá energii vašeho produktu nebo služby.
  2. Akční barvy – Toto v infografice níže chybí, ale identifikace barvy primární akce a barvy sekundární akce je nesmírně užitečná. Vzdělává vaše publikum, aby se zaměřilo na konkrétní prvky uživatelského rozhraní na základě barvy.
  3. Adalší barvy – Vyberte další barvy, které se doplňují vaši primární barvu, ideálně barvy, které tvoří vaši primární barvu pop.
  4. Barvy pozadí – Vyberte si barvu pozadí svého webu – možná méně agresivní než vaše primární barva. Mějte na paměti také tmavý a světlý režim... stále více webů zahrnuje barevná schémata ve světlém nebo tmavém režimu.
  5. Barvy písma – Vyberte barvu textu, který bude na vašem webu – pamatujte, že jednobarevné černé písmo je vzácné a nedoporučuje se.

Jako příklad moje společnost Highbridge vyvinul online značku pro výrobce šatů, který chtěl vytvořit web elektronického obchodu přímo pro spotřebitele, kde by lidé mohli koupit šaty online. Pochopili jsme naši cílovou skupinu, hodnotu značky, a – protože značka byla převážně digitální, ale měla také fyzický produkt – zaměřili jsme se na barevná schémata, která dobře fungovala v tisku (CMYK), paletách látek (Pantone) i digitální (RGB a Hex).

Testování barevného schématu pomocí průzkumu trhu

Náš proces výběru barevného schématu byl náročný.

  1. S naší cílovou skupinou jsme provedli marketingový průzkum řady základních barev, který nás zredukoval na jednu barvu.
  2. Provedli jsme marketingový průzkum řady sekundárních a terciárních barev s naší cílovou skupinou, kde jsme zúžili některá barevná schémata.
  3. Udělali jsme makety produktů (obaly produktů, visačky na krk a visačky na zavěšení) i makety elektronického obchodu s barevnými schématy a poskytli jsme je klientovi i cílové skupině pro zpětnou vazbu.
  4. Protože jejich značka do značné míry závisela na sezónnosti, začlenili jsme do mixu také sezónní barvy. To se může hodit pro konkrétní kolekce nebo vizuály pro reklamy a sdílení na sociálních sítích.
  5. Prošli jsme tímto procesem více než půl tuctukrát, než jsme se rozhodli pro konečné schéma.

barevné schéma šatníku 52

Zatímco barvy značky jsou světle růžová a tmavě šedá, vyvinuli jsme akční barvy být odstínem zelené. Zelená je barva zaměřená na akci, takže to byl skvělý výběr, který přitáhl oči našich uživatelů k prvkům zaměřeným na akci. Do našich sekundárních akcí jsme začlenili převrácenou hodnotu zelené (zelené ohraničení s bílým pozadím a textem). Testujeme také tmavší odstín zelené na akční barvě pro akce vznesení.

Vzhledem k tomu, že jsme web právě spustili, začlenili jsme sledování myší a teplotní mapy, abychom mohli pozorovat prvky, které naše návštěvníky nejvíce přitahují a s nimiž nejvíce interagují, abychom zajistili barevné schéma, které nejen dobře vypadá, ale také dobře funguje.

Barvy, bílá místa a vlastnosti prvků

Vývoj barevného schématu by měl být vždy proveden jeho testováním v celkovém uživatelském rozhraní, aby bylo možné pozorovat interakci uživatelů. U výše uvedeného webu jsme také začlenili velmi specifické okraje, odsazení, obrysy, poloměry okrajů, ikonografii a typy písma.

Společnosti jsme dodali kompletního průvodce brandingem k interní distribuci pro jakýkoli marketingový nebo produktový materiál. Konzistence značky je pro tuto společnost zásadní, protože jsou nové a v tomto bodě nemají v tomto odvětví žádné povědomí.

Zde je výsledný web elektronického obchodu s barevným schématem

  • Skříň52 - Kupujte šaty online
  • Stránka sbírek skříňky52
  • Stránka produktu Closet52

Navštivte Closet52

Použitelnost barev a barevná slepota

Nezapomeňte na testování použitelnosti barevného kontrastu mezi prvky vašeho webu. Své schéma můžete otestovat pomocí Nástroj pro testování přístupnosti webových stránek. S naším barevným schématem víme, že máme nějaké problémy s kontrastem, na kterých budeme dále pracovat, nebo dokonce můžeme mít nějaké možnosti pro naše uživatele. Zajímavé je, že šance na problémy s barvami u naší cílové skupiny jsou poměrně nízké.

Barvoslepost je neschopnost vnímat rozdíly mezi některými barvami, které mohou odlišit nebarevní uživatelé. Barvoslepost postihuje asi pět až osm procent mužů (přibližně 10.5 milionu) a méně než jedno procento žen.

Usability.gov

Tým společnosti WebsiteBuilderExpert dal dohromady tuto infografiku a podrobný doprovodný článek o Jak vybrat barvu pro váš web to je extrémně důkladné.

Jak vybrat barevné schéma pro váš web