5 porad dotyczących psychologii kolorów, aby natychmiast ulepszyć witryny eCommerce

Psychologia kolorów dla witryn e-commerce

Jako projektant, psychologia kolorów może nie być czymś, o czym myślisz regularnie, ale prawdopodobnie zdajesz sobie sprawę, że coś czerwonego może sprawić, że poczujesz się głodny, a jasny, słoneczny żółty pokój może sprawić, że poczujesz się beztroski i szczęśliwy.

Zastosowanie psychologii koloru do projektowania stron internetowych eCommerce może mieć również emocjonalny wpływ na odwiedzających witrynę. Jakie kolory wybierzesz do projektu, mogą pomóc w rozpoznaniu marki, a nawet jak prawdopodobne jest, że klient to zaufaj swojej marce.

Psychologia kolorów to w zasadzie sposób, w jaki kolor wpływa na emocje i zachowania ludzi. Czy to sprawia, że ​​chcą kupić przedmiot? Czy to ich uszczęśliwia, czy pokazuje poważną stronę?

Jednak psychologia kolorów nie jest tak prosta, jak czerwony sprawia, że ​​jesteś głodny, a niebieski sprawia, że ​​czujesz się spokojny. W psychologii kolorów jest znacznie więcej i ma wiele warstwowych aspektów. Co więcej, jeśli robisz to dla witryn eCommerce, psychologia kolorów jest tym ważniejsza.

Nie ma powszechnie akceptowany standard tego, jak kolor wpływa na wszystkich. Emocje lub uczucia, które tworzy kolor, są bardzo indywidualne w zależności od osoby. Twoje własne doświadczenia życiowe mogą nawet wpłynąć na to, jak postrzegasz określony kolor i jakie uczucia wywołuje.

W badaniu Wpływ koloru na marketing naukowcy odkryli, że 90% pierwszych wrażeń wynikają z tego, czy odwiedzający czuje, że kolor jest odpowiedni dla marki i czy jest odpowiedni dla tego, co jest sprzedawane.

Jeśli klient uważa, że ​​kolor nie pasuje do marki, prawdopodobnie nie będzie ufał firmie.

Na wynos?

Należy pamiętać o postrzeganiu kolorów, takich jak ciemne kolory, czernie i szarości w przypadku wytrzymałych, męskich produktów oraz róż i fiolet w przypadku produktów dziewczęcych. Po prostu nie bądź tak przywiązany do teorii kolorów, że ignorujesz branding lub ogólną estetykę projektu.

Zacznij od naprawdę świetnego, responsywnego projektu, a następnie możesz dostosować kolory, aby znaleźć najlepsze dla Twojej marki. Będziesz także chciał być świadomy równowagi białej przestrzeni i tego, czy ogólny projekt jest przyjemny dla ludzkiego oka.

Jak kolory wpływają na współczynniki konwersji

Jak wykorzystać teorię kolorów w projektowaniu witryn eCommerce

Jeśli chodzi o zastosowanie teorii kolorów do projektowania eCommerce, najlepiej zacząć od tego, które kolory sprawiają, że użytkownicy chcą kupić Twój produkt. Około 62-90% opinii, jaką klient wyraża w ciągu pierwszych 90 sekund na stronie internetowej, to sam wybór koloru.

Zalecana literatura: 

25+ najlepszych motywów WordPress dla eCommerce dla sklepów internetowych (2020)

 

Mając to na uwadze, możesz zobaczyć, dlaczego tak ważne jest, aby wybrać odpowiednie kolory do swojego projektu.

Ostatnią rzeczą, którą chcesz zrobić, to wyłączyć klientów, aby odbili się od Twojej witryny.

Jak wspomniano wcześniej, który kolor może przyciągnąć czytelników, może zależeć od ogólnego brandingu i tego, czy klient postrzega go jako odpowiedni dla Twojej marki.

Na przykład, jeśli sprzedajesz akcesoria motocyklowe, prawdopodobnie nie użyjesz różowego przycisku kup unless sprzedajesz specjalnie dziewczęce akcesoria kobietom. Chcesz mieć pewną spójność w całym projekcie.

Jeśli więc zdecydujesz się użyć czerwonych przycisków wezwania do działania (CTA), przyciski CTA powinny zachować ten kolor w całym projekcie. Jedynym wyjątkiem jest sytuacja, gdy chcesz tylko zwrócić uwagę na jeden konkretny przycisk, a nie na inne.

To, co jest prawdopodobnie nawet ważniejsze niż ostatecznie wybrany kolor, to upewnienie się, że kolory są spójne w całej witrynie. Jeśli zdecydujesz się użyć czerwieni, aby stworzyć poczucie energii i świeżości, trzymaj się tej palety kolorów, od przycisków wezwania do działania po polecane nagłówki.

Upewnij się, że nie używasz zderzających się kolorów, które mogą stworzyć zgrzytliwy symbol irytacji dla odwiedzających witrynę.

psychologia koloru

Źródło: WebpageFx

Poruszanie się po wyborze kolorów — jak dokonać najlepszego wyboru?

Wiedza o tym, jakich kolorów użyć i kiedy, może być nieco bardziej skomplikowana, ale można dowiedzieć się, co najlepiej pasuje do Twojej witryny.

Na przykład, jeśli chcesz stworzyć poczucie zaufania, niebieski może być dobrym wyborem. Poniżej wyjaśnimy nieco więcej na temat rodzajów emocji i uczuć, które mogą być kierowane przez różne kolory.

Warto również wiedzieć, jakich kolorów używają twoi konkurenci i zdecydować, czy podobne kolory będą dla ciebie odpowiednie, czy też chcesz wyróżnić się na tle konkurencji bardzo różnymi kolorami. Niektóre strony bardzo dobrze wykorzystują kolor. Oto kilka przykładów:

  • Artykuły sportowe Dicka wykorzystuje ciemną zieleń, aby pomyśleć o wspaniałym plenerze. Ponieważ sprzedają sprzęt outdoorowy, jest to dla nich idealny wybór kolorów. Ten kolor znajdziesz w ich nagłówkach, banerach sprzedażowych i niektórych przyciskach CTA.fiuty sportowe

 

  • Rue 21 to internetowy biznes odzieżowy skierowany do nastolatków i młodych dorosłych. Ich ubrania są świeże, niedrogie i zabawne. Nic dziwnego, że kolory użyte na tej stronie to młode, świeże, jasne błękity i róże. Zauważ też, że nacisk kładziony jest na tanie ceny z małymi jasnoróżowymi bąbelkami pokazującymi różne przedziały cenowe w sklepie. To prawie wezwanie do działania dla odwiedzających witrynę.

rue21 

Docelowe Persony i Kolory - dla kogo przeznaczony jest mój produkt?

 

Niezwykle ważne jest, aby zrozumieć grupę docelową i rodzaje kolorów, których można oczekiwać od rodzaju witryny. Tak więc pierwszy krok w wyborze palety kolorów powinien rozpocząć się od zbadania docelowej grupy demograficznej.

Jeśli nie utworzyłeś jeszcze persony użytkownika dla grupy docelowej, powinieneś utworzyć co najmniej jedną.

Jest to w zasadzie fikcyjna osoba, która reprezentuje Twojego najbardziej prawdopodobnego klienta. Możesz nadać mu imię, cechy, potencjalną karierę i tak dalej. Pomoże Ci to lepiej zrozumieć odbiorców, dla których piszesz, a następnie możesz dostosować swoje treści – i wybór kolorów – do tego typu osobowości.

Na przykład wykazano, że mężczyźni preferują kolor niebieski o 57%, a następnie zielony (14%) i czarny (9%).

Jednym z przykładów użycia niebieskiego w połączeniu z męskim wyglądem jest sprzęt i usługi olinowania firmy Mountain Productions. Zwróć uwagę, że kolory są głębokie i ciemne, nadając całej stronie męski wygląd. Niebieskie plamy wprowadzają ulubiony kolor, tworząc silne wezwanie do działania, a strona ma wystarczająco dużo miejsca, aby zrównoważyć cały wygląd.

olinowanie

Kobiety preferują również kolor niebieski w 35%, tuż za nim purpurowy (23%) i czerwony (9%).

Dobry przykład wykorzystania fioletów w projektowaniu stron internetowych można zobaczyć na stronie Claire's, która sprzedaje niedrogie ubrania i biżuterię. Ta strona używa niektórych pasm fioletu, ale wykorzystuje również mocne plamy jasnego koloru, aby pokazać swoją młodzieńczą stronę, szczególnie na obrazie młodych dziewcząt noszących akcesoria Claire.

Jednak strona przyciąga również odrobinę niebieskiego, rozumiejąc, że niebieski jest ulubionym i zaufanym kolorem wśród kobiet. Na tej stronie zauważysz nawet trochę czerwieni, co dowodzi, że ci, którzy ją zaprojektowali, wyraźnie rozumieją, że większość kobiet woli te kolory od innych.

Ostatecznie nie można się pomylić z niebieskim, ponieważ większość ludzi lubi ten kolor i uważa go za godny zaufania i uspokajający.
Claires

Kolory i to, co przekazują

 

Chociaż należy pamiętać, że wpływ koloru może się różnić w zależności od doświadczeń osób przeglądających daną stronę, istnieją pewne ogólne zasady dotyczące znaczenia każdego koloru, które można zastosować w swoich projektach:

1. Czerwony

Czerwony ma tendencję do przekazywania:

  • Energia
  • Moc
  • Pasja
  • Miłość


Czerwień może wzbudzać podekscytowanie i przyciąga uwagę. Zwróć uwagę, że poniższy projekt strony internetowej jest jasny i energiczny.

Fantasy Shopping wykorzystuje czerwień w obu częściach nagłówka i stanowi mocniejszy punkt w pytaniu oraz w samym projekcie. Zwróć uwagę, jak czerwień zwraca twoją uwagę na to, gdzie projektant chce, aby poszedł.

balenciaga kolor witryn e-commerce

XStore oferuje bardziej miękki szablon o tematyce czerwonej, ale nadal ma odważne stwierdzenie z ukośnymi liniami skierowanymi do środka. Centralny punkt prowadzi prosto do tekstu głównego. 

XStore

2. Żółty

Żółty często przywołuje:

  • Radość
  • Energia
  • Ciepło
  • Wesołość


Żółty często tworzy uczucie szczęścia i lekkości.

 

Herbata Lipton znakomicie wykorzystuje kolor żółty, aby stworzyć jasny i słoneczny nastrój. Herbata mrożona kojarzy się nie tylko ze szczęśliwymi czasami, ale także ze słoneczną herbatą i latem.

Jaskrawe żółcie w tym projekcie sprawiają, że jesteś szczęśliwy i może pomóc Ci wyobrazić sobie zabawę z grilla na podwórku. To sprawia, że ​​chcesz od razu pobiec i kupić herbatę, aby móc zrobić sobie własny napar z herbaty słonecznej, prawda?

Zwróć uwagę, że nawet zdjęcia produktów odzwierciedlają to użycie słonecznej żółci.

Lipton Tea - psychologia kolorów dla witryn e-commerce

Szablon cytryny również emanuje ciepłem i żywiołowością poprzez ich projekt z nutą żółci na różnych stronach.

Zachęcamy użytkowników do przesuwania kursora po górnym panelu nawigacyjnym, zmieniając półprzezroczystą czerń na kreskę żółtą. Ten projekt nie tylko podkreśla energię, ale zachęca innych do odmłodzenia podczas przewijania witryny.

cytrynowy

3. Czarny i szary

Czerń i szarość często stwarzają wrażenie:

  • Władza
  • Moc
  • Wytrzymałość
  • Męskość
  • Neutralność

Te kolory tworzą również poczucie zaufania i niezawodności.

Harley Davidson bardzo skutecznie wykorzystuje czernie i szarości, aby stworzyć potężną, męską stronę internetową, która mówi o władzy i autorytecie. Zwróć uwagę, że wszystkie kolory są dość ciemne, z wyjątkiem pomarańczowego przycisku CTA.

Nie możesz nie zwrócić uwagi na ten przycisk, który skutecznie kieruje użytkownika witryny, do którego firma chce, aby się udał.

Przeczytaj Więcej czarne strony internetowe i ciemne strony internetowe tutaj.

Harley Davidson - psychologia koloru

Motyw Phoenix również wykorzystuje czerń i szarości w swoim szablonie i ma silną i wyrafinowaną osobowość. To zgrabny szablon, który nie rozprasza uwagi.

Ten typ witryny przemawia do liderów biznesu, którzy nie chcą sztuczek i przybyli na witrynę w jednym celu. Jeśli jesteś zainteresowany wdrażaniem minimalistycznych technik projektowania stron internetowych i nie tylko, możesz to sprawdzić ten artykuł o minimalnych motywach WordPress.

feniks

4. Pomarańczowy

Orange promuje:

  • Szczęście
  • Podniecenie
  • Ciepło
  • Sofistyka

Podobnie jak czerwony i żółty, pomarańczowy może wywoływać uczucie energii i szczęścia. Jednak jest również postrzegany jako bardziej wyrafinowany kolor. Dobrym przykładem zastosowania pomarańczy w projekcie są napoje Sunny Delight. Ponieważ są to napoje o smaku pomarańczowym, sensowne jest użycie tego koloru w swoim projekcie.

Pamiętaj, że częścią psychologii kolorów jest używanie kolorów, których odwiedzający witrynę oczekiwałby od Twojej marki. Sunny D bardzo dobrze wykorzystuje tę koncepcję. Projekt wykorzystuje pomarańczowe obramowanie, pomarańczowe przyciski nawigacyjne i pomarańczowe w ich obrazach i logo. Zestawienie ciemnoniebieskiej i białej przestrzeni zapewnia wyrafinowany wygląd, który pokazuje, że napój jest nie tylko dla dzieci, ale raczej dla wszystkich grup wiekowych.

Sunny D.

Zwróć uwagę, że szablon Omegi jest tak żywy dzięki swojemu projektowi dzięki odważnemu, pomarańczowemu paskowi. To zachęcający układ, a wszystkie funkcje, na które chcą zwrócić uwagę, są w kolorze pomarańczowym. Estetycznie ten prosty projekt może mieć dużą wartość dla potencjalnej firmy.

omega

5. Zielony

Zielony często przekazuje:

  • Natura
  • Wzrost
  • pieniądze
  • Płodność


Zielony wywołuje uczucie spokoju i relaksu. Często zobaczysz marki, które są przyjazne dla środowiska lub związane z plenerem, używając tego koloru. Ponadto firmy finansowe mogą używać zielonego, aby pokazać, że możesz zarabiać pieniądze – pomyśl o bankach, blogach pieniężnych itp.

John Deere jest dobrym przykładem zastosowania zieleni w projektowaniu stron internetowych.

Używają bardzo specyficznego odcienia zieleni, który jest dobrze znany na całym świecie. Traktory tej marki są dostępne w kolorach zielonym i żółtym, więc ma sens tylko, aby te kolory pojawiły się w projekcie strony internetowej John Deere.

W końcu o „Johnie Deere Greenie” napisano nawet piosenki country.

Zwróć uwagę, jak poniższy przykład witryny wykorzystuje jasną zieleń, ale ma również przyjemną równowagę neutralnych kolorów, aby zieleń nie była zbyt przytłaczająca.

Profesjonalny projektant może przyjrzeć się ogólnej równowadze strony i upewnić się, że tekst jest czytelny, ale nadal wiąże kolory z ogólną koncepcją marki, np. Odznaka w Nowej Zelandii używa koloru zielonego, aby odzwierciedlić swoją markę na stronie.

Jest to jeden z najlepszych przykładów witryny wykorzystującej to, co już wiadomo o kolorze marki i przekładając to w inteligentny sposób na koncepcję projektową.

John Deere Green - psychologia kolorów

Adeline Fashion łączy w szablonie bodźce środowiskowe i ich rynek. Zawiera naturalną estetykę w projekcie, pokazując, jak marka, która jest bardziej zorientowana na naturę, może dostosować ten szablon i nadal mieć organiczny urok.

Adeline

6. Niebieski

Niebieski jest zwykle postrzegany jako:

  • Godna zaufania
  • Uspokój
  • Mądry
  • Spokojny

Istnieje wiele różnych odcieni niebieskiego, a każdy odcień może wywołać inną emocję. Na przykład głęboki błękit królewski może stworzyć wrażenie królewskiej i bogactwa. To dobry kolor dla luksusowych marek. Z drugiej strony jasna woda może stworzyć wrażenie młodości i luzu. Jasnoniebieski może wywołać uczucie spokoju.

Zastanów się, z czym kojarzą Ci się różne odcienie niebieskiego i który odcień najlepiej reprezentuje Twoją markę. Istnieje wiele różnych przykładów firm wykorzystujących kolor niebieski w projektowaniu.

Pamiętaj, że niebieski jest ulubionym kolorem zarówno wśród mężczyzn, jak i kobiet, więc ma sens ten kolor często pojawiał się w różnych projektach stron internetowych.

Jednym z przykładów koloru niebieskiego skutecznie wykorzystywanego w koncepcji projektowej jest Skype.

Już sama nazwa przywodzi na myśl niebo — i błękit nieba. Skype uwzględnia to oczekiwanie w swoim logo i całym projekcie. Zwróć uwagę, jak tworzą równowagę dzięki neutralnym kolorom, a następnie dodają niebieski kolor z wezwaniem do działania.

Ponadto użycie jasnych kolorów może wskazywać na młodość, zabawę lub kobiecość. Tylko upewnij się, że używasz tych kolorów z umiarem, w przeciwnym razie ryzykujesz przytłoczenie projektu i odwiedzającego witrynę. Ogólna estetyka powinna być przyjemna i łatwa w nawigacji.

Należy również pamiętać o używaniu żółci i innych jasnych kolorów, które mogą nie pojawiać się na białym lub mogą męczyć oczy.

Niektórzy ludzie wolą używać jaśniejszych kolorów w ciemnych projektach internetowych.

Jednak projekt ciemnej strony internetowej może nie do końca pasować do tonu Twojej oferty produktów. Pamiętaj, że ciemny wzór może stworzyć imponujący, ciężki i męski wygląd. Powyższy przykład Harleya Davidsona działa naprawdę dobrze z ciemnymi, odważnymi kolorami.

Jeśli jednak próbujesz sprzedawać lakier do paznokci, ten wygląd prawdopodobnie nie jest dla Ciebie.

skype

Funkcje VG Strepre a podobna paleta kolorów ze swoim szablonem, a także wykorzystuje zaokrąglone przyciski. Dopełniający kolor podkreśla określone CTA i dobrze komponuje się z nadmierną atmosferą witryny.

Ostatnią rzeczą, jaką chcesz mieć, są wezwania do działania, aby poczuć się przytłaczające.

stepre

Testy dzielone, aby zobaczyć, jakie kolory najlepiej sprawdzają się u odbiorców Your

 

Ponieważ indywidualna percepcja może mieć taki wpływ na to, jakie kolory działają najlepiej, jedną mądrą rzeczą do zrobienia na własnej stronie internetowej jest ustalenie, jakie kolory preferują Twoi docelowi odbiorcy. Możesz je zbadać, ale odpowiedzi mogą nie być tak dokładne, jak przeprowadzenie prostych testów dzielonych, aby zobaczyć, na które z nich reagują najlepiej.

Możesz skonfigurować różne strony docelowe i śledzić wyniki konwersji, czas spędzony na stronie itp.

Niektóre rzeczy, które możesz chcieć przetestować, obejmują:

  • Kolor nagłówków
  • Kolor przycisków CTA
  • Kolor tła
  • Balans między kolorem głównym a kolorami neutralnymi

Wypróbuj różne kombinacje i zobacz, które najlepiej sprawdzają się w Twojej witrynie. Użyj jasnych, odważnych kolorów dla swojego CTA (czerwony, jasnoróżowy, niebieski).

Na przykład firma Nature Air wypróbowała 17 różnych stron docelowych, aby sprawdzić, która z nich ma lepsze współczynniki konwersji. Dzięki testom A/B odkryli, że bardziej widoczne kolory CTA zwiększyły konwersje aż o 591%.

Ponadto firma Performable przeprowadziła test, w którym zamieniła przycisk wezwania do działania na stronie głównej z zielonego na czerwony i odnotowała 21% wzrost liczby konwersji.

Czerwony przyciąga uwagę bez względu na to, jak go przyciąć, i jest to kolor, który powinieneś przynajmniej od czasu do czasu włączyć do swojej witryny, aby uzyskać wezwanie do działania. Wykonaj własne testy A/B z tą koncepcją i zobacz, jakie wyniki uzyskasz.

Psychologia kolorów na wynos

Psychologia kolorów ma tak wiele różnych elementów, ponieważ ludzie są wyjątkowymi jednostkami. Nawet kultura, z której dana osoba pochodzi, może tworzyć różnice w sposobie postrzegania różnych kolorów.

Twoje pierwsze kroki w określaniu, jakich kolorów użyć w projekcie, powinny zacząć się od ustalenia, kim jest Twoja docelowa grupa demograficzna. Jest to niezbędny krok dla psychologii kolorów i witryn eCommerce.

Następnie weź pod uwagę kolory, które większość ludzi kojarzy z typem oferowanego produktu. Spójrz na swoją konkurencję, aby zobaczyć, jakich kolorów używa. Chociaż chcesz być wyjątkowy, chcesz również trzymać się przynajmniej niektórych konwencjonalnych standardów.

Na koniec przeprowadź testy A/B, aby upewnić się, że wszystko przeanalizowałeś poprawnie i bądź otwarty na zmiany, jeśli zajdzie taka potrzeba.

Zrozumienie psychologii kolorów jest ważne, ale nie bądź tak przywiązany do niej, że ignorujesz podstawowe techniki projektowania lub zdrowy rozsądek.

O autorze
David Attard
Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/
David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.

Jeszcze jedna rzecz... Czy wiesz, że osoby, które udostępniają przydatne rzeczy, takie jak ten post, również wyglądają NIESAMOWITE? ;-)
Proszę zostaw użyteczny skomentuj swoje przemyślenia, a następnie udostępnij to na swoich grupach na Facebooku, które uznają to za przydatne i wspólnie zbierzmy korzyści. Dziękuję za udostępnienie i bycie miłym!

Ujawnienie: Ta strona może zawierać linki do zewnętrznych witryn produktów, które kochamy i gorąco polecamy. Jeśli kupisz sugerowane przez nas produkty, możemy otrzymać opłatę za polecenie. Takie opłaty nie wpływają na nasze rekomendacje i nie przyjmujemy płatności za pozytywne recenzje.

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...