Jak dobierać kolory do interfejsu użytkownika - kolory w IT?

Nie ma skutecznego marketingu bez psychologii - również psychologii kolorów. Kolory w marketingu mają ogromne znaczenie. Wpływają na to, jak konsumenci postrzegają daną markę, na to, czy jej zaufają, a co za tym idzie – czy dokonają zakupu. W tym artykule skupimy się na znaczeniu barw w marketingu z naciskiem na dopasowanie kolorów do strony internetowej, aplikacji webowych, mobilnych oraz przycisków typu call to action. Wymienimy też kolory wzbudzające zaufanie i te, które nas ostrzegają!

Istotność doboru kolorów w rozwiązaniach informatycznych

Google doskonale pokazuje, jak ważna jest psychologia koloru w biznesie. W 2012 roku firma przeprowadziła badanie polegające na analizie reakcji swoich użytkowników na pięćdziesiąt odcieni niebieskiego (kolor niebieski lubi każda z płci). Google liczył liczbę kliknięć linków komercyjnych, zestawiając ją z kolorem. Dzięki temu udało się wybrać taki odcień błękitu, który najlepiej wpływał na użytkowników i skłaniał internautów na całym świecie do klikania w odsyłacz. Według oficjalnych danych zastosowanie tego konkretnego odcienia koloru niebieskiego zwiększyło zyski firmy o 200 mln dolarów tylko w 2013 roku. Nie ma wątpliwości – warto zastosować psychologię kolorów na swojej stronie.

Jest to szczególnie istotne przy wyborze schematu kolorów strony www czy aplikacji mobilnych. Można to zauważyć na przykład, obserwując kolorystykę stron skierowanych głównie do kobiet lub mężczyzn. Badania wykazują, że płeć ma wpływ na postrzeganie kolorów. Preferencje płci, wynikające z narodowości czy te związane z wiekiem nie są ograniczone i stałe, ale warto wziąć je pod uwagę, planując wygląd aplikacji. Nie ma twardych i szybkich zasad określających, które kolory są męskie, żeńskie lub neutralne pod względem płci. Ponieważ kolory występują w wielu odcieniach, ktoś może kochać bogaty, królewski błękit, ale zdecydowanie nie lubi bladego, błękitnego nieba, więc preferencja koloru niebieskiego nie oznacza, że ​​każdy odcień niebieskiego jest powszechnie odpowiedni. Jednak niektóre uogólnienia są możliwe na podstawie badań nad kolorami.

Kolor niebieski wzbudza zaufanie

Jest kolorem zaufania, pokoju, porządku, lojalności, przywołuje uczucie ciszy i opanowania, kojarzony jest również ze szczerością i uczciwością, często opisywany jest jako bezpieczny i spokojny. Niebieski jest ulubionym kolorem zarówno mężczyzn, jak i kobiet w każdym wieku. Jednak mężczyźni mają znacznie silniejszą preferencję dla niebieskiego niż kobiety. Może to być uspokajający efekt koloru niebieskiego, który sprawia, że ​​jest popularnym kolorem zarówno dla mężczyzn, jak i kobiet, lub może być połączeniem kilku odcieni niebieskiego z autorytetem, inteligencją i stabilnością. Możesz użyć niebieskiego na stronie firmowej, biznesowej, finansowej, wzorując się na takich przykładach jak: Facebook, PayPal, Twitter, PZU. To kolor wzbudzający zaufanie.

unsplash.com @Alexander Shatov

Kolor zielony nawiązuje do natury

Najbardziej intuicyjnym skojarzeniem z kolorem zielonym jest natura – produkty ekologiczne, powietrze, środowisko. Co ciekawe, badania pokazują, że zielony pobudza kreatywność i jest z nią też utożsamiany. Jeśli twoja strona ma cokolwiek wspólnego z naturą, zielony jest więc dobrym wyborem. Zielone CTA (Call To action) będzie szczególnie skuteczne, jeśli wystąpi efekt izolacji - element, który bardzo się wyróżnia, zostaje łatwiej zapamiętany. Badania pokazują, że uczestnicy są w stanie lepiej rozpoznać przedmiot, gdy ten rażąco różni się od otoczenia. Dlatego zielony przycisk CTA (Call To Action) najlepiej umieścić na białym lub szarym tle, aby wyróżniał się i przyciągał uwagę odbiorcy. Zielony to również, podobnie jak niebieski, kolory zaufania. Ta barwa w oczach konsumentów kojarzy się z wiarygodnością marki, która jest równocześnie świeża, pomysłowa, ale także odnosząca sukcesy i pewna siebie. Kolor zielony jest chłodny i spokojny, a oznacza wzrost, odnowienie, zdrowie i środowisko, a także równowagę i stabilność. Podczas gdy kobiety preferują chłodne, miękkie kolory, mężczyźni preferują jaśniejsze odcienie.

unsplash.com @Alexander Shatov

Kolor żółty ostrzega

Żółty, chociaż określany jest jako kolor radości i przyjaźni, psychologia kolorów postrzega go również jako kolor do ostrzegania i tak jest też używany. Często mówi się o nim, że doprowadza dzieci do płaczu, a dorosłych denerwuje. Czy w takim razie nadaje się do zwiększenia konwersji na stronie? Niekoniecznie. Jednak w niewielkich porcjach, może się sprawdzić, np. wzbudzając niepokój lub ciekawość odwiedzających stronę. Żółty kolor jest dobrze widoczny w morzu białego. Co ciekawe, według badań: 60 % konsumentów uważa kolor za główny czynnik wpływający na ich decyzje o zakupie pojazdu, a producenci samochodów nadal sprzedają zdecydowaną większość samochodów (prawie 75%) w konserwatywnych kolorach, takich jak biały, czarny, szary i srebrny. Ja wybrałam zielony. Pomyśl również o tym, co widzisz na drodze – znaki ostrzegawcze również są żółte. Psychologia kolorów nie jest wykorzystywana tylko przez marketingowców i można wykorzystać jej narzędzia chociażby przy projektowaniu aplikacji webowych.

unsplash.com @Alexander Shatov

Pomarańczowy wywołuje pośpiech

Kolor pomarańczowy wzbudza pośpiech i skłania do impulsywnego zachowania. Może być wykorzystywany jako kolor radości, a także do stymulowania aktywności fizycznej, współzawodnictwa, pewności siebie i natychmiastowości. Czasami pomarańczowy sugeruje, że coś jest tanie. Może dlatego pomarańczowy stał się flagowym kolorem serwisu aukcyjnego Allegro.pl, czy Aliexpress? Pomarańczowy to, podobnie jak żółty, kolor przyciągający uwagę. Te barwy są zazwyczaj interpretowane jako solidne, wytrzymałe i mocne, pogodne i optymistyczne, pełne życia i z oczekiwaniem długowieczności.

Czerwony pobudza

Kolor czerwony używany jest do komunikowania pasji, podekscytowania, miłości, krwi, ostrzeżenia – np. jako światło stopu na przejściu dla pieszych. Czerwień absolutnie przyciąga wzrok. Nie jest jednak stosowana na przyciskach CTA tak często jak zielony. Bywają przypadki, kiedy zmiana koloru na przycisku CTA z zielonego na czerwony skłania do natychmiastowego działania. Ekscytujący i nowoczesny. Przez marketingowców często uważany za pożądany, ale nieco ryzykowny. Oprócz wpły­wów emocjon­al­nych, kolory wywołują również reakcje fizy­czne. Udowod­niono, że przy czer­wonym oświ­etle­niu reakcje człowieka są o 12% szyb­sze niż nor­mal­nie. Poza tym ciepłe kolory są lep­sze w pozyski­wa­niu uwagi, niż kolory zimne.

Źródło unsplash.com @Alexander Shatov

Czarny dodaje prestiżu

Czerń jest luksusowa, elegancka, wyszukana i ponadczasowa. Kolor czarny to klasyka odpowiednia do sprzedawania wysokiej jakości produktów, np. drogich zegarków, luksusowych samochodów, ekskluzywnej odzieży. Jest uważany za kolor indywidualistów, kojarzący się z profesjonalizmem, siłą, powagą i pewnością siebie. Należy jednak mieć na uwadze drugą stronę medalu - w niektórych kulturach kolor czarny kojarzony przez ludzi ze śmiercią, a na przykład w Chinach - jest to barwa zdrady. Z drugiej strony w kulturze Indian kolor czarny jest symbolem życia. Dobrze zastanów się, kto jest Twoją grupą docelową - w tym celu warto pochylić się nad tematem person użytkowników aplikacji mobilnych, który również pojawi się na naszym blogu.

Ile kolorów powinno się używać podczas projektowania interfejsu użytkownika?

W przypadku wyboru kolorów warto kierować się zasadą 60-30-10. 60% schematu kolorystycznego strony powinien zajmować kolor główny, 30% kolor dodatkowy, 10% kolor akcentujący. Najlepiej, aby schemat kolorystyczny strony składał się z 3 do 5 odcieni. Psy­cholo­gia koloru nie zaj­muje się tym, w jaki sposób ksz­tał­towane są kolory, ale jaki mają one wpływ na człowieka. A tu naukowcy są zgodni — kolory w znaczący sposób wpły­wają na ludzki umysł. Odpowied­nio zaplanowana kolorystyka może nie tylko wpły­wać korzyst­nie na nas­trój, ale także znacznie zwięk­szyć przy­cią­ganie nowych klien­tów. Jak wybrać swój zestaw kolorystyczny? Możesz użyć koła kolorów. To zestaw wszystkich kolorów umieszczony na kole. Dzięki kilku metodom można wybrać odpowiednie odcienie, które niemal zawsze będą do siebie pasować. Poniżej wymienimy kilka najbardziej popularnych zasad doboru kolorów.

Kolory pod­sta­wowe

W mod­elu kolorów RYB (ang. red, yel­low, blue) bar­wami pod­sta­wowymi są czer­wony, żółty i niebieski. Trzy kolory wtórne (zielony, pomarańc­zowy i fio­le­towy) twor­zone są przez mieszanie się dwóch kolorów pod­sta­wowych Kole­jne sześć kolorów wyższych twor­zone są przez mieszanie się kolorów pry­marnych i wtórnych.

Kolory ana­log­iczne

Taki schemat tworzą kolory, które zna­j­dują się obok siebie na kole kolorów. Zazwyczaj są one dobrze dopa­sowane i tworzą spoko­jne i kom­for­towe wzory. Wys­tępują one często w przy­rodzie i są miłe dla oka. Upewnij się, że między wybranymi ana­log­icznymi kolorami jest odpowied­nia różnica kon­trastu. Trzeci kolor uży­wany jest jako akcent (razem z czarnym, białym lub szarym).

Kolory triadyczne

Tri­ady­czne schematy kolorów wyko­rzys­tują kolory, które są równomiernie rozmieszc­zone wokół koła kolorów. Ich połączenia bywają bardzo żywe, nawet jeśli używa się nien­asy­conych wer­sji barw. Aby korzys­tać z tri­ady­cznych har­monii z powodze­niem, kolory powinny być dokład­nie wyważone — niech jeden kolor domin­uje, akcen­towany przez dwa pozostałe.

Kolory dzielące – uzu­peł­ni­a­jące

Są one odmi­aną kolorów uzu­peł­ni­a­ją­cych. Oprócz koloru bazowego, wyko­rzys­tuje on dwa kolory uzu­peł­ni­a­jące. Schemat ten ma ten sam wiz­ualny kon­trast, co w przy­padku kolorów uzu­peł­ni­a­ją­cych, ale jest on sła­biej nasy­cony. Schemat kolorów dzieląco-uzupełniających jest dobrym wyborem dla początku­ją­cych, ponieważ ciężko jest w jego przy­padku przekombinować.

Schemat pros­tokąta

W tym schema­cie używa się czterech kolorów, ułożonych w dwie uzu­peł­ni­a­jące się pary. Schemat ten dzi­ała najlepiej, jeżeli jeden z kolorów będzie domin­u­ją­cym. Należy zwró­cić uwagę na równowagę pomiędzy ciepłymi i zim­nymi kolorami w projekcie.

Schemat kwadratu

Schemat kwadratu jest podobny do pros­tokąta, ale wszys­tkie kolory rozmieszc­zone są równomiernie na kole kolorów. Schemat ten dzi­ała najlepiej tak samo jak w przy­padku schematu pros­tokąta — jeżeli jeden z kolorów jest domin­u­jący. Należy zwró­cić uwagę na równowagę pomiędzy ciepłymi i chłod­nymi kolorami w projekcie.

Narzędzia przydatne w wyborze kolorów

Kolory na stronę internetową będą lepiej dopasowane, jeżeli wykorzystasz do tego celu specjalne narzędzia. Oto te najpopularniejsze:

Google Adobe Color – pozwala w prosty sposób dobrać kolory na stronę internetową. Głównym narzędziem jest koło barw, na którym można dobrać kolory, korzystając z dostępnych opcji takich jak triada, kolory analogowe, komplementarne czy monochromatyczne. Istnieje również możliwość dobrania swojego zestawu kolorów. Adobe jest bezpłatny.

Paletton – program podobny do Google Adobe Color. Pomaga tworzyć piękne schematy kolorów w krótkim czasie. Posiada funkcję prezentowania konkretnej palety kolorów na przykładach.

Color Wheel – narzędzie, które podpowiada propozycje dodatkowych kolorów pasujących do tego jednego wybranego przez nas.

Colorpalettes – strona, której warto użyć jako inspiracji. Posiada palety kolorystyczne ze zdjęciami.

Colorzilla – wtyczka do Chrome i Mozilla, która pozwala na sprawdzenie koloru na dowolnej stronie www za pomocą próbnika.

Convertacolor – pomaga w zamianie nazwy koloru np. z RGB na CMYK.

Podsumowanie

Przedstawiliśmy analizę wybranych kolorów i ich znaczenie w projektowaniu aplikacji mobilnych i webowych. Pamiętaj, aby testować różne kolory i odcienie w celu znalezienia tego najskuteczniejszego. Jak widzisz, psychologia barw ma moc! Wykorzystaj ją dla swojego biznesu. W iMakeable kładziemy szczególny nacisk na kolorystykę projektując interfejsy aplikacji webowych dla użytkowników - korzystamy ze sprawdzonych w boju zasad doboru kolorów i projektowania interfejsów.