Kolory w e-commerce

Kolor nie dodaje przyjemnej jakości do projektu – wzmacnia go. To słowa impresjonisty Pierre Bonnarda. Jak się one mają do e-commerce? Jeśli chcesz wpłynąć na decyzję zakupową użytkownika w sklepie, musisz sięgnąć po perswazję, by wzmocnić swój przekaz. Masz do tego cały zestaw narzędzi – jednym z nich jest odpowiednie zastosowanie kolorów. Jak to wygląda w praktyce?

Kolor ma moc. Skąd to wiemy? Wystarczy, że pomyślisz o Allegro, a od razu zobaczysz pomarańczowy. Nie jest to najbardziej wiarygodny eksperyment, ale w uproszczeniu pokazuje, że kolory wiążą się ze sposobem interpretowania przez nas świata. Krótko mówiąc: ludzie to istoty wizualne. Potwierdzają to badania – nasze mózgi są w stanie przetwarzać obrazy, które widzieliśmy zaledwie przez 13 milisekund. Czego możemy nauczyć się z badań o kolorach w kontekście e-commerce?

  • Kolory wpływają na ogólne postrzeganie wyglądu strony: dane Institute for Color Research pokazują, że ludzie dokonują podświadomego osądu na temat osoby, środowiska lub produktu w ciągu 90 sekund od pierwszego obejrzenia. Co więcej, od 62 do 90% tej oceny jest oparte na samym kolorze. To, jakich kolorów użyjemy w sklepie, wpłynie na pierwsze wrażenie odbiorcy i na to, jak zapamięta stronę. To ważne, biorąc pod uwagę, że 52% kupujących nie powraca na stronę internetową z powodu jej ogólnej estetyki.
  • Kolory wpływają na postrzeganie marki: według naukowców z Uniwersytetu Loyola kolor zwiększa rozpoznawalność marki o 80%. Dzięki odpowiedniemu doborowi kolorów kupujący szybciej rozpoznają markę wśród ogromu innych produktów dostępnych na rynku. Kolor może więc wzmocnić zaufanie konsumentów względem sklepu.
  • Kolory wpływają na zakup: 92,6% respondentów badań prowadzonych w 2004 roku przez Seoul International Color Expo stwierdziło, że przy zakupie produktów największą wagę przykładają do warstwy wizualnej. Dla 84,7% z nich kolor stanowi ponad połowę spośród różnych czynników istotnych przy wyborze produktów.

Kolory a psychologia

Jak dobrać odpowiednie kolory do sklepu, by wpłynąć na zwiększenie sprzedaży? Kiedy pomyślisz o tym, że oko ludzkie rozróżnia ok. 10 mln różnych kolorów, to zadanie wydaje się niewykonalne. Z pomocą przychodzi jednak psychologia kolorów.

Na pewno słyszałeś, że kolory wpływają na nasze emocje, np. niebieski zapewnia spokój i bezpieczeństwo, a żółty energię i optymizm. Badania na ten temat przeprowadzili w 2004 roku naukowcy Kayah i Repps. Wyniki pokazały, że 75% uczestników łączyło żółty ze szczęściem, ale również z podekscytowaniem i energią. Jeśli chodzi o niebieski – ponad 60% uczestników stwierdziło, że kolor ten wywołuje u nich spokój, a 10% wskazało na szczęście. Wydaje się, że wystarczy sięgnąć po te badania, by wybrać najlepszy kolor do sklepu. Niestety nie jest to takie proste.

Dlaczego? Wspomniane badania przeprowadzono w warunkach laboratoryjnych. Dlatego mogą nie mieć praktycznego przełożenia np. na e-commerce. Ponadto naukowcy wciąż nie znaleźli odpowiedzi na wiele pytań, dotyczących postrzegania kolorów, np. czy istnieje zależność między preferencją barw i osobowością, a przecież do sklepów trafiają osoby o różnych temperamentach i charakterach.

Wybierając kolor do sklepu, warto mieć na uwadze:

  • Odbiór kolorów przez osoby z różnych kultur – kolory znaczą co innego w różnych szerokościach geograficznych, np. czerwony w zachodniej kulturze postrzegany jest jako zagrożenie, złość, miłość, pasja, podniecenie. Tymczasem w kulturze wschodniej i azjatyckiej oznacza radość, szczęście i świętowanie.
  • Odbiór kolorów przez osoby w różnym wieku – według ankiety przeprowadzonej przez Joe Hallocka, z wiekiem mogą nam się zmieniać preferencje co do kolorów, np. gdy ludzie starzeją się, wzrasta ich upodobanie do fioletów, podczas gdy maleje do zieleni.
  • Odbiór kolorów przez mężczyzn i kobiety – są badania, które mówią, że niebieski to najpopularniejszy kolor zarówno wśród kobiet, jak i wśród mężczyzn. Natomiast najbardziej nielubianym kolorem u mężczyzn jest brąz, a u kobiet pomarańcz.
kolory w e-commerce
Rysunek 1. Wykres pokazujący preferencje kolorów ze względu na płeć
Wyniki sformułowana na podstawie badania 232 osób (79,3% pochodziło z USA, a pozostałe ~ 20% z 21 innych krajów. Źródło: www.joehallock.com/edu/COM498/preferences.html#favbygender.
  • Odbiór kolorów przez osoby niedowidzące lub mające zaburzenia widzenia – ok. 8% mężczyzn i 0,5% kobiet ma różnego typu problemy z rozróżnianiem wybranych kolorów. W tym przypadku dobór kolorów decyduje o dostępności sklepu dla jak największej liczby użytkowników niezależnie od stanu zdrowia (np. osoby niedowidzące) czy sytuacji (np. w trakcie jazdy autobusem, kiedy trudniej jest się skupić). Świadomość tego jest ważna, gdy chcemy wyróżnić jakiś element w sklepie za pomocą koloru, np. przycisk call to action.
kolory w e-commerce

Rysunek 2. Strona główna Allegro widziana oczyma osoby z zaburzeniem rozpoznawania barwy czerwonej
Komentarz do rysunku: Przyciski call to action nie są już tak wyraźne, jak w oryginale, ale wciąż osoba z tą wadą może je rozpoznać. Widok wygenerowany za pomocą wtyczki do Chrome – Colorblinding.
Źródło: allegro.pl.

#Wskazówka

Jak zapewnić osobom niewidomym możliwość wglądu w kolory produktów w sklepie?

Osoby niewidome „odczytują” treści na stronie przy pomocy mowy syntetycznej. Jednym z elementów, który zapewni im swobodny dostęp do informacji, jest prawidłowe opisywanie zdjęć i grafik za pomocą znaczników alt w kodzie strony. W znacznikach alt umieść w skróconej formie to, co znajduje się na danym obrazku.

Przykład:

<img src=“image.jpg” alt=“Czerwona torebka listonoszka. Klasyczny fason. Złota, metalowa ozdoba przy klapce. =“image tooltip”>.

Dzięki temu osoba korzystająca z czytnika ekranu, będzie miała dostęp do informacji o kolorach produktu.

Zapomnij o wróżeniu z ręki

Wykorzystanie kolorów jest tylko częścią całościowej strategii optymalizacji sklepu. Na konwersję wpływa wiele elementów – od copywritingu (opisy produktów, slogany claimy), poprzez sposób zaprezentowania asortymentu (zdjęcia, grafiki), projektu nawigacji, aż po szybkość ładowania się strony czy to, jak poprowadzisz konsumenta przez cały proces zakupowy.

Nie ma niestety zbyt wielu dokładnych badań na temat kolorów w e-commerce ani listy najlepszych kolorów dla sklepów. Spokojnie, nie jesteśmy jednak całkowicie bezradni, jeśli chodzi o wybór koloru do sklepu internetowego.

W projektowaniu chodzi przede wszystkim o funkcjonalność i użyteczność – nie o to, czy dany kolor jest ładny. Kolor jest narzędziem, które pomaga nakierować oko użytkownika na miejsce, które chcemy uwypuklić. Dobry interfejs sklepu internetowego wykorzystuje kolor do tego, by zwracać uwagę użytkownika na konkretne miejsce (np. w kierunku przycisków akcji) oraz wpływać na jego całkowite doświadczenie w korzystaniu z witryny. Dlatego, zamiast spekulować – badaj, aby lepiej poznać swoich klientów i ich preferencje kolorystyczne.

Testy kolorów w e-sklepie

Skąd zatem wiedzieć, czy dana kolorystyka będzie dobrym wyborem?

Pomysł 1: Test preferencji użytkowników przed wdrożeniem sklepu

Aby wybrać kolory, które będą działały na klientów, warto zebrać informacje zwrotne od grupy docelowej. Im wcześniej to zrobisz, tym lepiej. Idealny moment? Zdecydowanie, zanim projekt strony ujrzy światło dzienne lub przed wprowadzeniem większych zmian w kolorystyce serwisu.

Badanie możesz przeprowadzić za pomocą testów preferencji. W ramach takiego testu pokazuje się dwa lub więcej wariantów kolorystycznych strony, a następnie zadaje się użytkownikom szereg pytań.

#Słowniczek

Test preferencji (mapowanie preferencji) – uczestnicy wchodzą w interakcję z kilkoma projektami i przeglądają je, aby określić, które preferują i dlaczego. Porównają estetykę, interakcje i/lub treść. Testy preferencji wykorzystuje się w marketingu oraz do badania marek, ale również można je zaadoptować do innych dziedzin, np. do testowania użyteczności sklepu.

Jak się przygotować do testu preferencji?

  1. Cel badania – określ, co chcesz zbadać. Weź pod uwagę aspekt użyteczności serwisu, na który składa się również estetyka. W naszym przypadku badamy, jak użytkownicy odbierają kolory użyte w serwisie.
  2. Dobierz grupę użytkowników – możesz przebadać własną grupę użytkowników, wysyłając im link do testu lub skorzystać z użytkowników, których oferują agencje badawcze lub narzędzia do przeprowadzania testów.
  3. Przygotuj wersje projektów – pokażesz je użytkownikom jako pierwszy etap testu. Użytkownicy wybierają jedną wersję, do której w następnej kolejności odpowiadają na pytania.
  4. Przygotuj pytania – to najtrudniejszy etap przygotowań, ponieważ źle zadane pytania mogą odbić się negatywnie na jakości odpowiedzi. Podstawowym pytaniem, które możesz zadać, jest pytanie o skojarzenia użytkowników z kolorystyką wybranego projektu – respondenci powinni wybrać je np. z chmury tagów. W badaniach pogłębionych możesz zadać odbiorcom więcej pytań np.:

Czy test preferencji wskaże jednoznacznie, która wersja strony będzie lepiej konwertowała? Nie do końca. Przypomnij sobie dane z początku artykułu, które mówią o tym, że kolorystyka jest jednym z elementów, wpływającym na ogólne wrażenie odbiorcy wobec sklepu, na postrzeganie marki, a co za tym idzie na decyzje zakupowe. Dlatego też wynik testu preferencji możesz potraktować jako kierunkowskaz wyboru odpowiedniej kolorystyki.

Pomysł 2: Test A/B przycisku call to action

Skuteczny kolor przycisku call to action w sklepie internetowym to temat, który wzbudza wiele emocji i kontrowersji. Kilka lat temu Oli Gardner z Unbounce pisał o tzw. BOB, czyli Big Orange Button (Wielki Pomarańczowy Przycisk) – twierdząc, że pomarańczowy to idealny kolor na button CTA1. Czy to oznacza, że wszyscy powinni używać tego koloru? Oczywiście, że nie, ponieważ nie ma czegoś takiego jak „uniwersalny kolor, wpływający na konwersję”. W takich przypadkach należy stosować podstawową zasadę, która brzmi: sprawdzam.

Aby sprawdzić, czy zmiana koloru wpłynie na konwersję w sklepie internetowym, wykonaj testy A/B, w których porównasz dwa warianty kolorystyczne przycisku.

O czym pamiętać, przeprowadzając test A/B?

  1. Testuj każdą wprowadzaną zmianę w kolorze przycisku – każda zmiana koloru jest nowym testem A/B.
  2. Zmień kolor przycisku do testów zgodnie ze schematem kolorów na stronie sklepu. Przyciski call to action nie funkcjonują samodzielnie – są otoczone przez inne elementy strony, np. jeśli kolorem bazowym jest zieleń i wszystkie przyciski do tej pory były zielone, przetestuj wariant z kolorem kontrastującym z zielenią, np. czerwony.
  3. Testuj kolor przycisku, nie zmieniając w tym samym czasie innych elementów np. treści wezwania do działania czy jego umiejscowienia. Jeśli zmienisz więcej niż jedną rzecz, nie będziesz wiedzieć, co wpłynęło na konwersję.

Czy zmiana koloru przycisku call to actionmoże wpłynąć na konwersję? Tak – jednym ze znanych przykładów jest test przeprowadzony przez firmę HubSpot, który pokazał, że czerwony przycisk na stronie internetowej był skuteczniejszy od zielonego o 21%. Inny przykład: sklep Andreas Carter Sports zmienił kolor przycisku „Dodaj do koszyka” z zielonego (który był bazowy dla sklepu) na niebieski i zmniejszył liczbę porzuconych koszyków o 50%. Co ciekawe, w przypadku wielu sklepów marek modowych, kolory przycisków akcji odpowiadają całościowej kolorystyce marki – mimo tego, nie zlewają się z otoczeniem i tworzą spójną całość.

#Zła praktyka

Nie bez przyczyny tylko 7% e-sklepów (z globalnej listy TOP 100 wg Alexy) wybiera szary jako kolor przycisku „Kup” lub „Dodaj do koszyka”. Przycisk na obrazku poniżej nie wyróżnia się na karcie produktu, co może negatywnie wpływać na konwersję. Kolor przycisku jest niewyrazisty, a kontrast między tekstem a tłem zbyt niski.

kolory w e-commerce
Rysunek 3. Zły dobór kolorów na przycisku call to action. Źródło: bellemaison.pl

#Dobra praktyka

Duzi gracze e-commerce robią wiele w kierunku optymalizacji konwersji, dlatego warto podpatrywać, jakie kolory stosują na przyciskach. Amazon wybrał kolor pomarańczowy (czyli tzw. Big Orange Button). Natomiast eBay zdecydował się na niebieski, który wg psychologii koloru kojarzy się ze spokojem – jest to więc dobry kolor, jeśli chcesz sprawić, by klienci czuli, że podjęli słuszną decyzję zakupową.

kolory w e-commerce

Rysunek 4. Wybór kolorów przycisków call to action przez gigantów e-commerce. Źródło: ebay.com

Do zapamiętania

Najważniejszą sprawą w wyborze właściwego koloru do sklepu internetowego wcale nie jest… wybór koloru. Chodzi bardziej o kombinację wielu elementów, czyli zachowanie kontrastów między poszczególnymi barwami, dobranie kolorów przycisków akcji, które będą się wyróżniać na stronie czy odpowiednią ekspozycję  asortymentu. Pamiętaj też, że coś, co zadziałało u kogoś innego, niekoniecznie sprawdzi się w twoim sklepie – dlatego zawsze przeprowadzaj własne testy. Na konwersję w sklepie internetowym wpływa tak wiele elementów, że niestety sama zmiana koloru nie rozwiąże wszystkich bolączek związanych ze zwiększeniem sprzedaży.

Artykuł ukazał się w magazynie "E-commerce & Digital Marketing", nr 11/2019