Kolory strony internetowej

Zamów bezpłatne badanie strony i otrzymaj praktyczne wskazówki.

Wybór kolorystyki strony wcale nie musi być trudny, ani przypadkowy.

Możesz oprzeć się na solidnej wiedzy i wynikach badań, które zaraz Ci przedstawimy.

Jeżeli chcesz:

1. Kolorem wesprzeć swoją sprzedaż na stronie.

2. Zmniejszyć współczynnik odrzuceń.

3. Tworzyć skuteczne wezwania do działania.

Ten artykuł Ci to ułatwi.

Jednak nie w ten sposób powstają najbardziej angażujące strony. Skuteczni marketerzy internetowi używają teorii kolorów.

Aby zrozumieć kolory w biznesie, trzeba zacząć od podstaw.

Dlaczego powyższe kolory wyglądają inaczej, chociaż wszystkie są niebieskie?

Dzieje się tak dlatego, że kolor składa się z 3 składników: odcienia, nasycenia
i jasności.

1. Odcień. To główna kategoria podziału kolorów, której uczymy się już
w przedszkolu (np. niebieski, żółty, zielony).

2. Nasycenie (saturacja). Określa jak “żywa” jest barwa. Kolory o niskim nasyceniu sprawiają wrażenie wyblakłych, a te z dużą saturacją są jaskrawe.

3. Jasność. Wyraża ilość odbitego światła - od jasnej do ciemnej barwy.

Mimo, że wszystkie kolory, jakie przed chwilą zobaczyłeś mają jednakowy odcień (niebieski), różnią się jasnością.

Projektanci zazwyczaj skupiają się właśnie na odcieniu. W nim upatrują największego znaczenia.

To błąd!

Faktycznie, odcień wpływa na ludzką fizjologię. Ciepłe kolory zwiększają pobudzenie (zachęcają do spontanicznych zakupów). Zimne barwy z kolei stymulują w mniejszym stopniu (nadają się świetnie do ofert wymagających przemyślenia lub negocjacji).

Jednak z badań wynika, że nasycenie i jasność działają na emocje mocniej niż odcień.

Zastanawiałeś się kiedyś, skąd biorą się upodobania kolorystyczne? Dlaczego pewne kolory uwielbiasz, a inne wydają Ci się brzydkie?

W pró­bach zro­zu­mie­nia tego, dla­cze­go ludzie lubią okre­ślo­ne kolo­ry, naukow­cy sku­pi­li się na ewo­lu­cji. Główna teo­ria jest taka, że lubi­my kolo­ry, któ­re są powią­za­ne ze zdro­wy­mi rze­cza­mi i pro­mu­ją prze­trwa­nie.

Wpływ ewolucji możesz zobaczyć na przykład w tym, że niektóre kobiety (nadal)
w większym stopniu niż mężczyźni preferują czerwone odcienie.

Dzieje się tak m.in. dlatego, że samice z czasem wykształciły preferencję dla czerwonawych kolorów. Musiały rozpoznawać ciepłe odcienie na zielonych liściach podczas zbierania pożywienia.

Ta umiejętność pomagała im przetrwać. Była więc przekazywana z pokolenia na pokolenie. 

Na to, czy lubisz dany kolor, wpływają również Twoje doświadczenia z przeszłości.

Nasze oso­bi­ste pre­fe­ren­cje zale­żą od wszyst­kich przed­mio­tów, któ­re napo­tka­li­śmy
w swo­im życiu i tego, jak bar­dzo się nam podo­ba­ły. Od daw­na podej­rze­wa­na hipo­te­za, zosta­ła potwier­dzo­na. Ludzie lubią kolo­ry lubia­nych rze­czy.

Prawdopodobnie lubię fio­le­to­wy bar­dziej od Ciebie, ponie­waż pokój mojej bab­ci był fio­le­to­wy, a moje doświad­cze­nia z nim były pozy­tyw­ne.

Twój mózg tworzy i rozbudowuje sieć wiedzy.

Barwa niebieska może Ci się kojarzyć z oceanem, relaksem i przyjemnością. Szum fal, woda, ciepły piasek pod stopami i odprężenie są często wiązane właśnie z kolorem niebieskim.

Jednak, jeśli w Twoim doświadczeniu pojawiłyby się bolesne wspomnienia z barwą niebieską (np. wypadek z udziałem niebieskiego auta), nagle ten kolor stałby się dla Ciebie mniej atrakcyjny i przyjemny.

Co na to badania?

Schloss i jego współ­pra­cow­nik Stephen Palmer w ramach serii eks­pe­ry­men­tów poka­zy­wa­li kolo­ro­we przed­mio­ty gru­pie uczest­ni­ków. Obrazki były ten­den­cyj­ne.

Nie­któ­rzy ludzie widzie­li przyjemne, ładne czer­wo­ne rze­czy (sma­ko­wi­te tru­skaw­ki)
i nie­przy­jem­ne zie­lo­ne, jak na przy­kład śluz.

Inni widzie­li nie­przy­jem­ne rze­czy w kolo­rze czer­wo­nym, jak na przy­kład krew, i ład­ne zie­lo­ne, jak drze­wa.

Ludzie wole­li kolor koja­rzo­ny z pozy­tyw­ny­mi obra­za­mi, któ­re zoba­czy­li wcześniej. To nie sama barwa decydowała o ich preferencjach. 

Największe, światowe marki najczęściej wybierają do swojej identyfikacji wizualnej kolor niebieski. Jednak to wcale nie oznacza, że będzie on najlepszy również dla Twojego biznesu.

Z Amazonu korzysta masa ludzi, którzy nie przepadają za połączeniem czerni, bieli
i pomarańczu. Mimo to bardzo lubią tę markę i chętnie od niej kupują.

Najważniejsza jest ADEKWATNOŚĆ. W zależności od kontekstu zmienia się podejście do koloru. Nie lubimy czerwieni widząc krew, ale patrząc na wiśnie, już nam się podoba.

W skrócie, teoria koloru jest badaniem tego, jak barwy oddziałują na siebie nawzajem i w jaki sposób mogą być używane do tworzenia pożądanych efektów.

Jeśli nie potrafisz na swojej stronie od razu przyciągnąć uwagi i zdobyć zaufania odwiedzających, prawdopodobnie stracisz ich na zawsze.

Teoria barw ułatwia projektowanie lepszych Landing Pages na
2 sposoby:

1. Wykorzystuje psychologię kolorów.

2. Określa udane kombinacje kolorystyczne.

Psychologia koloru jest nauką o tym, jak kolory wpływają na ludzkie nastroje, emocje i zachowania.

Różne barwy mogą wywoływać różnorodne emocje u Twojej grupy docelowej (potencjalnych klientów), więc ważne jest, aby wybrać kolory, które przekazują wiadomość, jaką chcesz dostarczyć.

Niektóre wspólne skojarzenia kolorystyczne zostały wymienione poniżej.

Jednak nie sugeruj się wyłącznie powyższym zestawem cech wybierając kolory strony internetowej.

Próby dopasowania się do stereotypowych skojarzeń wcale nie dają aż tak dobrych rezultatów w biznesie, jak mogłoby się wydawać.

Badania wykazały, że wsparcie kolorem cech osobowości, które chcesz pokazać swoim klientom, jest ważniejsze dla dochodów Twojej firmy niż ogólne skojarzenia.

Przemyśl, jakie cechy i wrażenia powinni poczuć odwiedzający stronę, by wykonać na niej akcję, do której ich zachęcasz (konwersję).

Teraz wybierz kolory najlepiej odzwierciedlające te cechy. Sprawdź, czy pozwolą Ci też wyróżnić się od konkurencyjnych marek w Twojej branży. Nie chcesz być z nimi mylony.

Jeżeli nadal wahasz się i nie wiesz, które barwy pomogą Ci przekazać odpowiednią wiadomość klientom, przygotuj kilka wersji kolorystycznych strony i je przetestuj.

Opracuj makiety (uproszczone projekty), które różnią się tylko jedną cechą - kolorami. Zapytaj ludzi, którzy należą do Twojej wymarzonej grupy odbiorców, co o nich myślą.

Jest jeszcze jedna rzecz, którą musisz wziąć pod uwagę wybierając kolory strony - to jej przejrzystość.

W praktyce kolory są bardziej czytelne na tle o wysokim kontraście (np. czarny tekst na białym tle).

Skuteczność Landing Page zależy od tego, czy odwiedzający są w stanie szybko i bez wysiłku zrozumieć jego treści.

Poniższe schematy kolorystyczne pomogą Ci znaleźć barwy, które wzajemnie się uzupełniają i dobrze ze sobą współgrają. Dzięki temu będzie Ci łatwiej dobrać odpowiednie tło do strony.

Schematy monochromatyczne zakładają użycie tylko jednego odcienia. Dzięki nim osiągniesz bardziej spójny i jednolity wygląd strony internetowej.

Schematy analogiczne używają odcieni, które sąsiadują ze sobą na kole kolorów. Pomagają stworzyć poczucie spójności, jednocześnie dając większą różnorodność barw niż schemat monochromatyczny.

Schematy komplementarne wykorzystują kolory po przeciwnych stronach palety barw. Kolory te tworzą wysoki kontrast, który przyciąga uwagę do obiektu na pierwszym planie. Warto podkreślać w ten sposób przyciski akcji (CTA) na stronie.

Schematy rozdzielno-komplementarne używają dwóch barw, które sąsiadują ze sobą i jednego uzupełniającego po przeciwnej stronie palety kolorów.

Ten zabieg łagodzi ekstremalny kontrast kolorów uzupełniających.

Schematy triadyczne wykorzystują trzy kolory, które są równomiernie oddalone od siebie na kole barw. Ten odstęp tworzy przyjemny, zrównoważony wygląd.

Zapewnia równowagę pomiędzy prostotą schematów monochromatycznych
a kontrastem schematów komplementarnych. 

Tetrady obejmują dwie pary dowolnych barw komplementarnych (nie muszą one sąsiadować ze sobą na kole kolorów). Ogromne znaczenie ma tu “wyczucie barw”
i odnalezienie w nich przyjemnego balansu. 

Teoria kolorów jest wykorzystywana do przekazywania dodatkowych, niemal podprogowych, komunikatów w reklamie. Doświadczyłeś tego nieraz.

Przyjrzyjmy się teraz działaniu teorii na realnych przykładach.

Coca-Cola od ponad 100 lat używa czerwieni i bieli. To połączenie kolorystyczne zapewnia kontrast i czytelność, a jednocześnie promuje przyjazne cechy Coca-Coli: energię, odwagę, siłę i zapał.

McDonald chce być kojarzony z przyjemnością, radością i szczęściem. Nie ma chyba lepszej barwy od żółtej, aby osiągnąć ten cel. W połączeniu z czerwienią pobudza apetyt.

Kolor fioletowy przywodzi na myśl magię, kreatywność i prestiż. Play wpisuje się w to idealnie. Buduje wizerunek innowacyjnej, dynamicznej marki. Dodając do swojej identyfikacji barwę białą, kojarzy się też z uczciwością.

Apple wykorzystuje prostą, czarno-białą kolorystyką. Wysoki kontrast sprawia, że tekst jest łatwy do odczytania, co zapewnia dostępność dla wszystkich użytkowników.

Wyraziste białe tło sprawia, że czarne elementy stają się centralnym punktem, subtelnie podkreślając główne wartości marki: moc, elegancję, wyrafinowanie
i efektywność.

Zieleń jest kolorem łatwym do przetworzenia przez ludzkie oko. To jego ogromny atut. Oprócz tego kojarzy się ze zdrowiem, równowagą i odbudową. Właśnie na takim wizerunku zależy marce Starbucks.

Przejdźmy w końcu do sprzedawania w sieci.

Odkrywanie „naj­lep­sze­go” kolo­ru dla wskaź­ni­ków kon­wer­sji na stro­nach inter­ne­to­wych (czyli wskaź­ni­ka zamia­ny odwie­dza­ją­cych w kupu­ją­cych) sta­ło się bar­dzo popu­lar­nym tema­tem.

Fizjologiczna zasa­da, zna­na jako efekt izo­la­cji, mówi, że ele­ment, któ­ry bar­dzo się wyróż­nia, zosta­je łatwiej zapa­mię­ta­ny. Badania wyraź­nie poka­zu­ją, że uczest­ni­cy są w sta­nie lepiej roz­po­znać przed­miot (czy jest to tekst, czy obraz), gdy ten rażą­co róż­ni się od oto­cze­nia.

Badania este­tycz­nych reak­cji na połą­cze­nia kolo­rów i pre­fe­ren­cji klien­tów dla okre­ślo­nych połą­czeń kolo­ry­stycz­nych rów­nież udo­wod­ni­ły, że zna­czą­ca więk­szość klien­tów pre­fe­ru­je połą­cze­nia kolo­rów o podob­nych bar­wach, z wyraź­nie kon­tra­stu­ją­cy­mi akcen­ta­mi kolo­ry­stycz­ny­mi.

Weźmy na przy­kład ten czę­sto cyto­wa­ny przy­pa­dek popra­wy kon­wer­sji w wyni­ku zmia­ny kolo­ru przy­ci­sku.

Zmiana kolo­ru przy­ci­sku na czer­wo­ny popra­wi­ła kon­wer­sje o 21%, jed­nak to nie ozna­cza, że czer­wo­ny ma jakąś magicz­ną moc, któ­ra skła­nia ludzi do pod­ję­cia dzia­ła­nia.

To oczy­wi­ste, że jeże­li resz­ta stro­ny jest w odcie­niach zie­le­ni, to zie­lo­ne call to action po pro­stu zle­wa się z oto­cze­niem. Z dru­giej stro­ny czer­wo­ny sta­no­wi moc­ny kon­trast kolo­ry­stycz­ny (i jest kolo­rem dopeł­nia­ją­cym dla zie­lo­ne­go).

Zgodnie z wyni­ka­mi tego bada­nia, gdy ankie­to­wa­nych popro­szo­no o oce­nę pro­duk­tów, któ­rych kolo­ry mia­ły róż­ne nazwy (jak na przy­kład kosme­ty­ki), oka­za­ło się, że „wymyśl­ne” nazwy były pre­fe­ro­wa­ne dużo czę­ściej.

Na przy­kład kolor „mok­ka” był dużo bar­dziej lubia­ny niż „brą­zo­wy” – mimo, że naukow­cy poka­zy­wa­li bada­nym ten sam kolor!

Dodatkowe bada­nia wyka­za­ły, że ten sam efekt ma miej­sce w przy­pad­ku sze­ro­kiej gamy pro­duk­tów. Klien­ci oce­nia­li skom­pli­ko­wa­ne nazwy kolo­rów farb jako mil­sze dla oka niż ich odpo­wied­ni­ki z pro­sty­mi nazwa­mi.

Żelki o takich nazwach, jak „raz­zma­tazz” były wybie­ra­ne dużo chęt­niej niż te o nazwie „cytry­no­wy żół­ty”.

Taki sam efekt odkry­to w przy­pad­ku pro­duk­tów niespożywczych, np. w wypad­ku bluz.

Bez wzglę­du na to, jak dziw­ne może się to wyda­wać, wybór kre­atyw­nych, opi­so­wych
i zapa­da­ją­cych w pamięć nazw do opi­sa­nia okre­ślo­nych kolo­rów (jak na przy­kład “błę­kit nie­ba”, a nie “jasno­nie­bie­ski”) może być waż­ny, jeśli cho­dzi o upew­nie­nie się, że pro­dukt będzie wywo­ły­wał duże wra­że­nie. 

Znaczenie kolorów zależy w dużej mierze od przeszłych doświadczeń konkretnego człowieka i kultury, z którą się utożsamia.

Na Zachodzie kolor niebieski budzi pozytywne skojarzenia, podczas gdy w Iranie ma charakter żałobny.

Z kolei ciężar może przedstawiać inne idee: znaczenie, trwałość, gęstość, a nawet cenę i ruch.

Ciężar sugeruje ważność.

Ciemne kolory wyglądają na cięższe i mogą wywoływać wrażenie, że coś jest ważne.

Skoro coś jest cięższe, prawdopodobnie jest również solidniejsze.

Produkty o ciemnej barwie wydają się być bardziej trwałe. 

Białe tło dodaje przedmiotom lekkości.

Za to ciemniejsze sprawia, że prezentują się jako gęstsze, bogatsze, sycące. 

Ceny powinny wydawać się lekkie i małe, dlatego wyświetlaj je na białym tle. 

Biel jest często postrzegana jako wolna przestrzeń. Może pomóc w stworzeniu poczucia ruchu lub przepływu.

Decydując się na wybór jasnej lub ciemnej kolorystyki strony internetowej, weź pod uwagę kilka kwestii.

Biel i czerń są zwykle postrzegane jako symbole dnia i nocy.

Jasne kolory sprzyjają widoczności, podczas gdy ciemne ją utrudniają. Ta widoczność może wpływać na percepcję i zachowanie.

Kiedy ludzie czują się bardziej widoczni, mają tendencję do wykonywania "dobrych" uczynków. Dlatego strony organizacji pomocowych powinny korzystać z białego tła na swoich stronach.

Za to ciemne kolory mogą się sprawdzić np. w firmach tworzących oprogramowanie. Klienci tego typu marek zazwyczaj chcą ukryć swoje błędy.

Mózg kojarzy nasycenie z wielkością. Takie kolory przykuwają uwagę i sprawiają, że obiekt wydaje się większy niż jest w rzeczywistości.

Nasycone kolory wydają się bliższe.

Bliskość obiektu może wpływać na to, jak bardzo zwracamy na niego uwagę. Nasycony kolor przykuwa uwagę. Wtedy mózg zakłada, że obiekt jest bliżej niż
w rzeczywistości.

Ten efekt występuje również w przypadku czasu.

Użycie nasyconego koloru w przypadku terminu promocji może sprawić, że będzie się wydawał jeszcze bliższy i mocniej zmotywuje do działania.

Marki luksusowe są aspiracyjne. Pożądamy ich, ponieważ czujemy, że się odległe
i poza naszym zasięgiem.

Jednak, kiedy prezentujesz odbiorcom bardzo dużą ilość szczegółów, zrezygnuj
z nasyconych barw. W tym konkretnym przypadku zamiast wesprzeć tekst sprawią, że projekt stanie się nieznośnie przytłaczający.

Mózg myli ciepło fizyczne (np. kolor czerwony, pomarańczowy, żółty) z ciepłem społecznym.

Dzieje się tak dlatego, że w mózgu istnieją te same obwody dla obu rodzajów ciepła.

Oznacza to tyle, że jeśli szukasz ciepła społecznego, Twój mózg nieświadomie poszukuje ciepła fizycznego. Dlatego ludzie, którzy czują się samotni wolą cieplejsze bodźce (np. ciepły prysznic, gorące jedzenie).

Z tego samego powodu osoby w czerwonym ubraniu wydają się bardziej atrakcyjne.

To ważna informacja dla przedsiębiorców, których usługi i produkty są wykorzystywane w kontekstach społecznych.

Ciepłe barwy, np. czerwień, świetnie sprawdzają się w projektach aplikacji randkowych, wydarzeń towarzyskich, czy konferencji.

Ciepłe i nasycone kolory działają pobudzająco. Pobudzenie z kolei sprawia, że klienci poświęcają mniej czasu na rozmyślanie i działają szybko.

Jeśli zachęcasz odbiorców do spontanicznych zakupów, takie barwy świetnie się do tego nadają.

Z drugiej strony projektując ekrany ładowania, postaw raczej na kolor niebieski, gdyż on sprawia, że użytkownicy czują się bardziej zrelaksowani.

Kolor czerwony kojarzy się z agresją i dominacją. Aukcje eBay, które wykorzystują czerwone tło zyskują wyższe oferty. Dzieje się tak dlatego, że ludzie licytują bardziej agresywnie i zdecydowanie.

Projektując stronę internetową masz niemal nieograniczone możliwości doboru kolorystyki. To wszystko, o czym dotąd przeczytałeś, potraktuj jako sugestie.

Odpowiedni kolor jest w stanie pomóc Ci w zwiększeniu sprzedaży,
 a niewłaściwy może wprowadzić klientów w błąd i zniechęcić ich od kupowania.

Testuj swoje wybory, a jeśli chcesz mieć pewność, że wszystkie elementy strony będę realizować Twoje cele biznesowe, zamów projekt strony u nas.

Autor:

Mariusz Słowik

Założyciel Owocnych

Mariusz to perfekcjonista, który przedsiębiorców i ich klientów rozumie jak mało kto. Wystarczy chwila rozmowy z nim i już wiesz, że w zakresie designu i tworzenia ofert nie do odrzucenia nie ma sobie równych. Jego wyczucie potrzeb grup docelowych doprowadziło do konsekwentnego wzrostu dochodów firm z tak wielu branż, że już dawno przestaliśmy je liczyć. Czytając jego artykuły można się uczyć, śmiać, a przy tym rozwijać swój biznes lepiej i szybciej.