Analizy i testyMarketing treściE-commerce i handel detalicznyInfografiki marketingoweNarzędzia marketingoweMarketing mobilny i tabletowyMedia społecznościowe i marketing influencerów

Jak opracować schematy kolorów witryn internetowych, e-commerce lub aplikacji

Opublikowaliśmy sporo artykułów na temat znaczenia koloru w odniesieniu do marki. W przypadku witryny internetowej, witryny e-commerce, aplikacji mobilnej lub internetowej jest to równie istotne. Kolory mają wpływ na:

  • Pierwsze wrażenie na temat marki i jej wartości – na przykład towary luksusowe często wykorzystują czerń, czerwień sugeruje podekscytowanie itp.
  • Decyzje zakupowe – o zaufaniu marki może decydować kontrast kolorystyczny. Delikatna kolorystyka może być bardziej kobieca i godna zaufania, ostre kontrasty mogą być pilniejsze i motywowane rabatami.
  • Użyteczność i doświadczenie użytkownika – kolory mają psychologiczny a także wpływ fizjologiczny, ułatwiając lub utrudniając nawigację po interfejsie użytkownika.

Jak ważny jest kolor?

  • 85% osób twierdziło, że kolor ma duży wpływ na to, co kupują.
  • Kolory zwiększają rozpoznawalność marki średnio o 80%.
  • Wrażenie kolorystyczne odpowiada za 60% akceptacji lub odrzucenia produktu.

Podczas określania schematu kolorów dla witryny internetowej, w załączonej infografice wyszczególniono kilka kroków:

  1. Kolor podstawowy – Wybierz kolor, który pasuje do energii Twojego produktu lub usługi.
  2. Kolory akcji – Tego brakuje na poniższej infografice, ale określenie podstawowego i dodatkowego koloru akcji jest niezwykle pomocne. Edukuje odbiorców, aby skupili się na określonych elementach interfejsu użytkownika w oparciu o kolor.
  3. Adodatkowe kolory – Wybierz dodatkowe kolory, które się uzupełniają twój podstawowy kolor, najlepiej kolory, które tworzą twój podstawowy kolor muzyka pop.
  4. Kolory tła – Wybierz kolor tła witryny – prawdopodobnie mniej agresywny niż kolor podstawowy. Pamiętaj również o trybie ciemnym i jasnym.. coraz więcej witryn zawiera schematy kolorów w trybie jasnym lub ciemnym.
  5. Kolory kroju pisma – Wybierz kolor tekstu, który ma się znaleźć na Twojej stronie – pamiętaj, że jednolity czarny krój pisma jest rzadki i nie jest polecany.

Na przykład moja firma DK New Media stworzył markę internetową dla producenta sukienek, który chciał stworzyć witrynę handlu elektronicznego skierowaną bezpośrednio do konsumentów, w której ludzie mogliby kupować sukienki online. Rozumieliśmy naszą grupę docelową, wartość marki i – ponieważ marka miała głównie charakter cyfrowy, ale miała także produkt fizyczny – skupiliśmy się na schematach kolorystycznych, które dobrze sprawdzały się w druku (CMYK), paletach tkanin (Pantone), a także cyfrowe (RGB i Hex).

Testowanie schematu kolorów za pomocą badań rynku

Nasz proces wyboru schematu kolorów był intensywny.

  1. Przeprowadziliśmy badania marketingowe dotyczące serii kolorów podstawowych z naszą grupą docelową, co ograniczyło nas do jednego koloru.
  2. Przeprowadziliśmy badania marketingowe dotyczące serii kolorów drugorzędnych i trzeciorzędowych z naszą grupą docelową, w których zawęziliśmy niektóre schematy kolorów.
  3. Wykonaliśmy makiety produktów (opakowania produktów, zawieszki na szyję i zawieszki) oraz makiety e-commerce wraz ze schematami kolorystycznymi i udostępniliśmy je klientowi oraz docelowej grupie odbiorców w celu uzyskania opinii.
  4. Ponieważ ich marka była w dużej mierze uzależniona od sezonowości, dodaliśmy również sezonowe kolory. Może się to przydać w przypadku określonych kolekcji lub wizualizacji reklam i udostępnień w mediach społecznościowych.
  5. Przeszliśmy przez ten proces ponad pół tuzina razy, zanim zdecydowaliśmy się na ostateczny schemat.
schemat kolorów szafy 52

Podczas gdy kolory marki są jasnoróżowe i ciemnoszare, opracowaliśmy kolory akcji być cieniem zieleni. Zielony to kolor zorientowany na akcję, więc był to świetny wybór, aby przyciągnąć wzrok naszych użytkowników do elementów zorientowanych na akcję. Włączyliśmy odwrotność zieleni dla naszych działań drugorzędnych (zielona ramka z białym tłem i tekstem). Testujemy również ciemniejszy odcień zieleni w kolorze akcji dla akcji najechania kursorem.

Odkąd właśnie uruchomiliśmy witrynę, wprowadziliśmy śledzenie myszy i mapy popularności, aby obserwować elementy, które przyciągają odwiedzających i z którymi najczęściej wchodzą w interakcję, aby zapewnić, że mamy schemat kolorów, który nie tylko dobrze wygląda… ale działa dobrze.

Kolory, biała przestrzeń i charakterystyka elementów

Opracowanie schematu kolorów powinno zawsze odbywać się poprzez przetestowanie go w ogólnym interfejsie użytkownika, aby obserwować interakcje użytkowników. W powyższej witrynie uwzględniliśmy również bardzo specyficzne marginesy, dopełnienie, kontury, promienie obramowania, ikonografię i kroje pisma.

Dostarczyliśmy firmie pełny przewodnik po brandingu do wewnętrznej dystrybucji wszelkich materiałów marketingowych lub produktowych. Spójność marki ma kluczowe znaczenie dla tej firmy, ponieważ są nowi i nie mają w tej chwili żadnej świadomości w branży.

Oto powstała witryna e-commerce ze schematem kolorów

  • Closet52 - Kup sukienki online
  • Strona kolekcji Closet52
  • Strona produktu szafy 52

Użyteczność kolorów i daltonizm

Nie zapomnij o testowaniu użyteczności pod kątem kontrastu kolorów w elementach witryny. Możesz przetestować swój schemat za pomocą Narzędzie do testowania dostępności stron internetowych

. Dzięki naszej kolorystyce wiemy, że mamy pewne problemy z kontrastem, nad którymi będziemy pracować w przyszłości, a może nawet mamy kilka opcji dla naszych użytkowników. Co ciekawe, szanse na problemy z kolorami u naszej grupy docelowej są dość niskie.

Ślepota barw to niezdolność do dostrzegania różnic między niektórymi kolorami, które mogą rozróżnić użytkownicy bez kolorów. Ślepota barw wpływa na około pięć do ośmiu procent mężczyzn (około 10.5 miliona) i mniej niż jeden procent kobiet.

Usability.gov

Zespół WebsiteBuilderExpert przygotował tę infografikę i towarzyszący jej szczegółowy artykuł nt Jak wybrać kolor dla swojej witryny? to jest niezwykle dokładne.

Jak wybrać schemat kolorów dla swojej witryny?

Douglas Karr

Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

Powiązane artykuły

Powrót do góry przycisk
Zamknij

Wykryto Adblock

Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.