Czerwone światło każe zatrzymać samochód. Czerwona etykieta w sklepie może oznaczać promocję. Ten sam odcień na formularzu często sygnalizuje błąd, a na opakowaniu może być po prostu znakiem marki. Żeby odczytać znaczenie czerwieni, korzystasz też z miejsca, napisu i tego, co już znasz.
Barwa nie działa w pojedynkę
Mówiąc „czerwony”, upraszczamy kilka cech naraz. Liczą się odcień, jasność i nasycenie, ale również wielkość plamy, kontrast z tłem, sąsiednie kolory oraz miejsce w hierarchii informacji. Czerwony napis o niskim kontraście może być mniej widoczny niż czarny przycisk na jasnym tle.
Do tego dochodzi kontekst. Kolor ostrzegawczy działa inaczej niż kolor produktu spożywczego. Barwa znana z bankowości pojawi się w aplikacji dla dzieci i zacznie współpracować z inną typografią, ilustracją oraz językiem.
Badania wymagają dopowiedzenia warunków
Przegląd Andrew Elliota zbiera badania nad kolorem i funkcjonowaniem psychologicznym. Autor opisuje obiecujące wyniki, ale podkreśla, że pole jest stosunkowo młode, a znaczenie mają warunki eksperymentu, kontekst i różnice między badanymi. To dobry powód, by ostrożnie traktować zdania typu „niebieski zawsze buduje zaufanie” albo „czerwony automatycznie zwiększa sprzedaż”. Pełny przegląd jest dostępny w artykule Elliota.
Wynik laboratoryjny dotyczący uwagi, pobudzenia czy wykonania zadania nie staje się sam z siebie rekomendacją dla identyfikacji wizualnej. Po drodze są jeszcze kategoria produktu, kultura, rozpoznawalność marki, czytelność oraz cel interfejsu.
Znaczenie powstaje w użyciu
Na stronie usługowej kolor może pełnić kilka ról. Może oznaczać działanie, rozdzielać sekcje, sygnalizować status albo budować rozpoznawalność. Problem zaczyna się, gdy jeden akcent ma jednocześnie znaczyć „kliknij”, „to ważne”, „to dekoracja” i „tu jest błąd”. Odbiorca widzi kolor, ale nie zna reguły.
Przy projekcie przypisuję więc kolorom role. Sprawdzam je na przycisku, komunikacie błędu i zwykłym tekście. Jeśli wszystkie wyglądają podobnie, trzeba wyraźniej odróżnić to, co można kliknąć, od informacji i dekoracji.
Sprawdź kolory na swojej stronie
Otwórz ważną podstronę i wypisz wszystkie kolory, które odrywają wzrok od tła. Przy każdym odpowiedz na trzy pytania:
- Co oznacza? Prowadzi do działania, oznacza stan, porządkuje treść czy tylko dekoruje?
- Czy ta rola jest powtarzalna? Czy ten sam kolor znaczy to samo w formularzu, menu i kartach?
- Czy informacja przetrwa bez barwy? Status błędu, aktywny element i ważny komunikat powinny mieć również tekst, ikonę albo zmianę formy.
Na końcu sprawdź kontrast tekstu i elementów interaktywnych. Psychologiczne skojarzenie nie pomoże osobie, która nie może przeczytać etykiety przycisku.
Wróć teraz do czerwonego komunikatu w formularzu. Czy wskazuje pole do poprawy i wyjaśnia, co wpisać? Jeśli po usunięciu koloru nadal wiesz, co zrobić, masz coś więcej niż dobraną próbkę czerwieni: zrozumiałą informację.
Źródło
- Elliot, A. J. (2015). Color and psychological functioning: a review of theoretical and empirical work.