Rola koloru w UX

Zrozumienie psychologii kolorów jest kluczowym aspektem tworzenia palety kolorów, która dobrze sprawdza się w projektowaniu cyfrowym. Podczas gdy kolor jest czasami uważany przez niektórych projektantów za wybór czysto estetyczny, w rzeczywistości jest to kluczowy element psychologicznego wpływu projektu na użytkowników i jako taki, jego UX.

Dobrze przemyślana paleta kolorów może podnieść projekt z „dobrego” do „wspaniałego”, podczas gdy przeciętna lub zła paleta kolorów może negatywnie wpłynąć na ogólne wrażenia użytkownika, a nawet zakłócić jego zdolność do korzystania z witryny lub aplikacji.

Chociaż ogólnie teoria kolorów jest złożonym tematem, a wykorzystanie koloru w projektowaniu UX obejmuje znacznie więcej niż tylko stworzenie ładnie wyglądającej palety (takiej jak dostępność i psychologiczne efekty nawet różnych odcieni w tym samym odcieniu); projektanci mogą stopniowo wprowadzać lepsze wykorzystanie koloru w swoich projektach bez konieczności ponownego przemyślenia całego procesu. Gdy projektant omówi podstawy, jedną z najbardziej satysfakcjonujących części teorii kolorów jest nauczenie się włączania do swoich projektów bardziej nieoczekiwanych kolorów.

Psychologia koloru

Teoria koloru i psychologiczny wpływ, jaki kolor może mieć na użytkowników, to złożony i często subiektywny temat. Istnieją jednak pewne aspekty, którymi można się zająć na bardziej uniwersalnym poziomie.

Rzeczy takie jak wspólne znaczenia głównych kolorów (podstawowe, drugorzędne i trzeciorzędne), tradycyjne palety kolorów i różnice kulturowe w znaczeniach kolorów są dość proste. Projektanci mogą łatwo nauczyć się tych podstaw i zastosować je w swojej pracy. Ale są ciekawsze punkty, których należy się nauczyć, jeśli chodzi o używanie kolorów w projektowaniu UX .

Nie można przeoczyć emocjonalnego wpływu kolorów interfejsu. I chociaż niektóre kolory są „uniwersalne” w projektowaniu UX (takie jak czarny, biały i szary, z których przynajmniej jeden jest używany w praktycznie każdym dobrym projekcie na rynku), kolory, z którymi są połączone, mogą mieć ogromny wpływ na percepcja użytkownika.

Oczywiście sposób, w jaki używany jest kolor, może również mieć dramatyczny wpływ na to, jak jest postrzegany. Na przykład niebieski używany jako kolor podstawowy w nowoczesnym, minimalistycznym stylu będzie miał zupełnie inny charakter niż ten sam niebieski używany jako kolor akcentujący w bardziej złożonym, korporacyjnym designie.

Różnice kulturowe w kolorze

Jedną z kwestii, którą projektanci zwykle pomijają, są różnice kulturowe, które mogą istnieć wokół różnych kolorów. Na przykład w wielu kulturach zachodnich biel kojarzy się z takimi rzeczami, jak czystość, niewinność i nadzieja. Ale w niektórych częściach Azji biel kojarzy się ze śmiercią, żałobą i pechem.

Niektóre kolory mają ogólnie pozytywne konotacje niezależnie od kultury (np. pomarańczowy), podczas gdy inne, takie jak biały, różnią się znacznie w zależności od kraju. To z pewnością może skomplikować życie projektantowi, gdy próbuje stworzyć projekt, który spodoba się jak największej liczbie odbiorców.

Ważne jest, aby projektanci przyjrzeli się implikacjom kulturowym swoich palet kolorów w oparciu o zamierzonych odbiorców produktu lub witryny. Jeśli produkt ma być skierowany do odbiorców na całym świecie, należy zrównoważyć kolory i używane obrazy, aby zapobiec negatywnym skojarzeniom kulturowym. Jeśli produkt będzie skierowany przede wszystkim do określonej kultury, projektanci mogą zwracać mniejszą uwagę na konsekwencje, jakie wybrana paleta może mieć w innych kulturach.

Dopasowanie kolorów UX do marki

Wartości marki powinny odgrywać kluczową rolę w tworzeniu palety kolorów. Ale to nie jedyny ważny czynnik. Kluczowe są również normy branżowe, podobnie jak kolory już używane przez konkurencję. Używanie palety kolorów, która jest prawie identyczna z podstawową konkurencją marki, to świetny sposób na zamieszanie i zapewnienie, że marka nie będzie się wyróżniać.

Oczywiście są od tego wyjątki. Weźmy na przykład McDonald's i Wendy's. Obie są restauracjami typu fast food, które bezpośrednio ze sobą konkurują. I obaj używają czerwonej i żółtej palety kolorów. Jednak patrząc na ich logo, logo Wendy jest przede wszystkim czerwone z żółtymi akcentami, podczas gdy McDonald's jest odwrotnie. Ich opakowanie również wykorzystuje te kolory na różne sposoby, dodatkowo różnicując marki. Z tego powodu żadne z nich nie dałoby się łatwo pomylić z drugim, nawet jeśli logo i inne znaki identyfikacyjne zostałyby usunięte z opakowania.

Pierwszym krokiem do stworzenia palety kolorów marki, która wspiera wartości marki, jest zrozumienie znaczenia różnych kolorów oraz tego, jak uczynić je jaśniejszymi/jaśniejszymi/ciemniejszymi/ciemniejszymi/itd. może na nie wpływać. Oto podstawowe zestawienie znaczenia różnych kolorów:

• Czerwony — Czerwony to kolor niebezpieczeństwa i pasji, a także podniecenia. To bardzo mocny kolor i może wywoływać u ludzi silne reakcje. Rozjaśnienie na różowy sprawia, że ​​jest bardziej kobiecy i romantyczny, a przyciemnienie odcienia do bordowego sprawia, że ​​jest bardziej stonowany i tradycyjny.
• Pomarańczowy — pomarańczowy to bardzo kreatywny kolor, który kojarzy się również z przygodą i młodością. Jest też bardzo energetyczny. Ze względu na silne nawiązania do stylu pomarańczowego ze stylem lat 70. może również przywoływać klimat retro.
• Żółty — żółty jest wesoły, optymistyczny i wesoły. Jest popularny w projektach dla dzieci i dorosłych. Bardziej pastelowe odcienie są często używane jako neutralny pod względem płci kolor dziecka, podczas gdy jaśniejsze żółcie są popularne w kreatywnych projektach. Ciemniejsze odcienie żółci stają się złotem, co kojarzy się z bogactwem i sukcesem.
• Zielony — Zielony ma różne skojarzenia. Z jednej strony wywołuje poczucie bogactwa i tradycji (szczególnie ciemniejsze odcienie), z drugiej mocno kojarzy się z ekologią i naturą. Limonkowe zielenie często kojarzą się z odnowieniem i wzrostem.
• Niebieski — niebieski jest najczęściej kojarzony z lojalnością i zaufaniem. Jaśniejszy błękit może kojarzyć się z komunikacją, a ciemniejszy i ciemniejszy może kojarzyć się ze smutkiem i depresją. Niebieski to najbardziej powszechnie lubiany kolor na świecie, co może tłumaczyć, dlaczego tak wiele firm wybiera odcienie niebieskiego do swojej marki.
• Fioletowy — fioletowy to kolejny odcień o różnych znaczeniach. Od dawna kojarzy się z rodziną królewską i bogactwem (ponieważ fioletowy barwnik był rzadki w wielu starożytnych cywilizacjach, był zarezerwowany dla rodziny królewskiej). Ale wiąże się również z tajemnicą i duchowością. Fioletowy może również wywoływać kreatywność.
• Czarny — czarny oznacza wyrafinowanie i luksus. Może być jednak również powiązany ze smutkiem i negatywnością. W zależności od innych kolorów UX użytych obok czerni może być nowoczesny lub tradycyjny, formalny lub swobodny.
• Biały — biały jest związany z czystością, niewinnością i pozytywnością. Biel jest również bardzo popularna w minimalistycznych projektach, ze względu na swoją neutralność i prostotę. Podobnie jak czarny, biały łatwo nabiera cech innych kolorów, z którymi jest używany.
• Szary — szary ma różne znaczenia, w zależności od kontekstu. Może być konserwatywny i wyrafinowany lub obskurny i nudny. Może być pozbawiony emocji lub nastrojowy. Może też kojarzyć się ze smutkiem i smutkiem.
• Brązowy — brązowy (który w rzeczywistości jest ciemnym odcieniem pomarańczy) kojarzy się z przyziemnością i uziemieniem. Kojarzy się też z naturą, a nawet przytulnością. I oczywiście może to być związane z byciem brudnym lub obskurnym.

Znajomość tych podstawowych znaczeń kolorów daje projektantom solidną podstawę do budowania palet kolorów dla dowolnej marki lub produktu.

Jednak teoria kolorów jest po części nauką, a po części sztuką. To, że kolor jest ogólnie kojarzony z określonym uczuciem lub nastrojem, nie oznacza, że ​​nie można go postrzegać w inny sposób, łącząc go z różnymi kolorami, zmieniając dokładny odcień lub zmieniając sposób jego wykorzystania wśród innych elementów projektu.

Korzystanie z niekonwencjonalnych kolorów UX

Niekonwencjonalne wykorzystanie kolorów UX to świetny sposób na wyróżnienie marki. I chociaż wymaga to więcej finezji niż zwykłe łączenie starych kolorów, które projektant ma ochotę połączyć, nie jest trudno nauczyć się używać nieoczekiwanych kolorów w projektach UX.

Kolory akcentujące to najłatwiejszy początek, jeśli chodzi o dodawanie niekonwencjonalnych kolorów do projektu. Na przykład strona internetowa kancelarii może używać tradycyjnej palety kolorów granatu i szarości. Ale dodaj trochę limonkowych akcentów i nagle projekt odcina się od morza innych kancelarii z granatowymi i szarymi stronami internetowymi. Lub spójrz na przykład Hogan Lovells, który wykorzystuje białą, szarą i limonkową paletę kolorów do stworzenia nowoczesnej strony internetowej, która zdecydowanie wyróżnia się na tle innych stron z branży prawniczej. Przemówiłby do młodszego, bardziej nowoczesnego tłumu niż przeciętna legalna witryna.

Berdan Real Estate to kolejna strona, która wykorzystuje nieoczekiwaną paletę kolorów. Witryna z nieruchomościami wykorzystuje odcienie żółci i brzoskwini, z których oba są znacznie bardziej energetyczne niż przeciętna witryna nieruchomości (gdzie dominują duże połacie niebieskiego, czerwonego i zielonego).

Ubezpieczenia nie są ogólnie uważane za nowoczesną, przełomową branżę, ale to nie znaczy, że ich projekty nie mogą być. Strona internetowa Lemonade wykorzystuje szaro-białą kolorystykę z akcentami fuksji. To zupełnie nieoczekiwane w branży, która nie jest znana z podejmowania ryzyka.

Istnieje wiele innych przykładów niekonwencjonalnych kolorów UX stosowanych w praktyce w Internecie, które można wykorzystać do inspiracji.

Zasada 60-30-10

Reguła 60-30-10 to prosta teoria tworzenia dobrze wyważonych i interesujących wizualnie palet kolorów. Chodzi o to, że jeden kolor – na ogół coś dość neutralnego (dosłownie lub psychologicznie) – stanowi 60% palety. Kolejny kolor uzupełniający stanowi 30% palety. A następnie trzeci kolor jest używany jako akcent dla pozostałych 10% projektu.

Ta metoda znacznie ułatwia projektantom rozpoczęcie eksperymentowania z niekonwencjonalnymi paletami kolorów bez wykraczania zbyt daleko poza oczekiwane normy w branży lub marce. Dodanie popu o nieoczekiwanym odcieniu może podnieść projekt, który w przeciwnym razie pasuje do tego, czego oczekuje się od konkretnej firmy. Może to być również pierwszy krok w kierunku stworzenia palety marki, która jest znacznie bardziej przyszłościowa niż jej konkurenci, a tym samym wyróżnia markę i czyni ją bardziej zapadającą w pamięć.

Wniosek

Chociaż teoria kolorów jest złożonym tematem, nauka podstaw nie jest szczególnie skomplikowana. Dzięki temu projektanci mogą wykorzystać swoją wiedzę, aby stworzyć bardziej zróżnicowane i wyrafinowane palety kolorów dla swoich projektów.

Dobrze zaprojektowana paleta kolorów, zwłaszcza ta zawierająca nieoczekiwane odcienie, to nie tylko wybór estetyczny. Może mieć znaczący wpływ psychologiczny na użytkowników, co projektanci UX powinni wykorzystać, aby tworzyć lepsze doświadczenia.

• • •

Dalsza lektura na blogu Toptal Design:

• Psychologia projektowania i neuronauka niesamowitego UX
• Ciemne interfejsy użytkownika. Dobry i zły. Za I przeciw.
• Emocjonalny branding na rzecz zrównoważonego projektowania produktów
• Skorzystaj ze swojej inspiracji – przewodnik po tablicach nastroju
• Projekt perswazyjny: efektywne wykorzystanie zaawansowanej psychologii