Rzadko kiedy poruszam tutaj tematyki designu czy grafiki, bowiem marny ze mnie artysta i webdesigner :-) Niemniej warto wspomnieć pewien temat accessibility, tj. wpływ kolorów na nastrój użytkownika.

Być może słyszałeś, że kolor ma duży wpływ na nastrój człowieka, zwłaszcza jeśli chcesz by pozostał na niej kilkanaście minut lub często powracał. Wiedza o kolorach przydaje się niejednokrotnie – podczas zlecania designu czy projektując samodzielnie drobne elementy na stronie, jak formularz, przyciski, tabelki i inne.

Każdy kolor wywołuje w człowieku pewne odczucia, zarówno pozytywne, jak i negatywne. W zależności od intensywności i doboru kolorów możemy na użytkowniku wywołać pewne emocje, skierować do określonych działań czy wyróżnić najkorzystniejsze z naszego punktu widzenia elementy strony.

Dlatego projektując design czy poszczególne elementy strony, należy szczególnie ostrożnie dobierać kolory. Nie chcemy chyba zrażać potencjalnych klientów i powodować, by opuszczali naszą stronę przed dokonaniem ostatecznego zakupu?

Znaczenia kolorów w naszej kulturze

Niniejsza tabelka prezentuje uczucia, jakie wywołują poszczególne kolory strony na odwiedzających – zarówno negatywne, jak i pozytywne:

Oczywiście, aby ten wpływ na emocje i uczucia był odczuwalny u Twoich użytkowników, strona musi być w większości pokryta w odcieniach tego koloru. Dlatego powyższa tabela kolorów ma głównie zastosowanie do całościowej kolorystyki strony, mniejsze elementy mają adekwatny do rozmiarów wpływ.

Z wyczytanych przeze mnie ciekawostek można stwierdzić, że użytkownicy częściej klikają w pomarańczowe / pomarańczowo-czerwone przyciski. Stąd Amazon, lider wśród tego typu badań i testów stosuje głównie przyciski w takich kolorach, celem zachęcenia użytkowników do częstszych zakupów ich produktów :-)

Nie bez powodu także większość reklam uderza nas wielkimi czerwonymi literkami na żółtym tle, celem zwrócenia uwagii.

Dobór kolorystyki na stronie

Jak już wcześniej wspomniałem, należy bardzo ostrożnie dobierać kolory na stronie. Zależnie od tematyki, przeznaczenia i grupy docelowej należy stosować różne schematy kolorów.

Na samym początku musimy zadecydować, jaki będzie kolor przewodni strony. Gdy już tego dokonamy, musimy poszukać kolorów, które będą się ładnie współgrały z naszym kolorem podstawowym (w końcu cała strona nie będzie tego samego koloru). I tutaj dochodzi kolejna ważna rzecz: musimy tak dobierać kolory, by kontrastowały ze sobą.

Jest to bardzo ważna, wręcz elementarna zasada usability, bowiem powoduje, iż strona będzie dostępna zarówno dla osób zdrowych, jak i dla tych z różnymi upośledzeniami wzroku. W związku z tym, możemy niewielkim nakładem pracy ułatwić życie osób niepełnosprawnych.

W sieci istnieje kilka przydatnych narzędzi, które pomogą odpowiednio dobrać paletę kolorów do strony:

• Adobe Kuler – chyba najpopularniejsze tego typu narzędzie, które w prosty sposób pozwala utworzyć paletę kolorów, wspomagając Twoje decyzje i wybory,
• ColourLovers’ Palettes – zbiór ponad miliona gotowych palet kolorów utworzonych przez użytkowników,
• Color Palette Generator – kolejny generator palety kolorów. Generator ten jest o tyle nietypowy, że wczytujesz własną grafikę – zdjęcie czy grafikę, a on wypluwa wartości HEX najczęściej używanych kolorów na tej grafice.
• HSL Color Schemer – bardzo rozbudowany generator palet zawierający chyba najwięcej opcji doboru kolorów w palecie.
• Color Scheme Designer – przyjemne w użyciu narzędzie pozwalające dobrać pełną paletę kolorów dla wybranego koloru podstawowego.

Zanim zabierzemy się do dobierania kolorów przy nowej stronie, warto też przeczytać artykuł Effective Color Contrast, w którym znajdziemy fachowe porady dotyczące doboru odpowiedniego kontrastu.

Podsumowanie

Chociaż dość pobieżnie podszedłem do tematu, warto szerzej zainteresować się psychologią koloru, zwłaszcza w świecie Web. Bardzo często trafiam na strony, których przeglądanie szybko przemęcza oczy, a kolorystyka wręcz razi i zniechęca (mimo ciekawych treści).

Często nawet nie zdajemy sobie sprawy, jak bardzo dobór niewłaściwych kolorów (np. reklamy, strona podsumowująca zakup towaru) odrzuca potencjalnego klienta od dokonania kupna czy wykonania jakiejś operacji.

Temat jest przyjemny, stosunkowo prosty i konieczny do zgłębienia przez każdego, kto ma styczność z interfejsem użytkownika w procesie tworzenia stron internetowych.

Powiązane linki

• Color of the year 2010 – infografika
• What your web design says about you? – infografika