Kolor pomaga, ale nie powinien być jedyną wskazówką
Kolor pozwala szybko zauważyć ważny element. Czerwone obramowanie może zwrócić uwagę na pole formularza, a zielone oznaczenie odróżnić dostępną pozycję w katalogu od niedostępnej. Problem pojawia się wtedy, gdy znaczenie da się odczytać tylko z barwy. Jeśli pod formularzem widnieje instrukcja „popraw pola zaznaczone na czerwono”, część osób może nie wiedzieć, które pola wymagają uwagi ani co należy w nich zmienić.
Barwy mogą wyglądać inaczej na różnych ekranach i w różnym oświetleniu. Nie każdy użytkownik rozróżnia je w ten sam sposób; ktoś może też korzystać z ustawień zmieniających wygląd strony. Dodatkowa wskazówka słowna lub graficzna pomaga w każdej z tych sytuacji. Nie trzeba rezygnować z koloru. Warto po prostu zadbać, by najważniejsza informacja pozostała zrozumiała również bez niego.
Formularze: pokaż, gdzie jest błąd i jak go poprawić
Wyobraź sobie formularz kontaktowy, w którym po wysłaniu tylko dwa pola zmieniają obramowanie na czerwone. Użytkownik musi sam odgadnąć, czy pole jest puste, czy wpisano w nim nieprawidłową wartość. Lepszym rozwiązaniem jest komunikat przy konkretnym polu, na przykład „Wpisz adres e-mail” albo „Sprawdź format adresu e-mail”. Kolor może nadal podkreślać błąd, lecz to tekst wyjaśnia, co się stało.
Przy dłuższym formularzu przydaje się również krótkie podsumowanie u góry, informujące, że niektóre pola wymagają poprawy. Nazwy pól powinny pozostawać widoczne, a wskazówki nie powinny znikać po rozpoczęciu wpisywania. Dzięki temu użytkownik nie musi polegać na pamięci ani porównywać odcieni obramowania. Taka zasada sprawdza się zarówno w prostym formularzu zapytania na stronie firmy, jak i przy dodawaniu wpisu do katalogu.
Linki, przyciski i statusy potrzebują wyraźnego znaczenia
Jeśli link w akapicie różni się od zwykłego tekstu wyłącznie kolorem, można go łatwo przeoczyć. Wyróżnienie podkreśleniem sprawia, że jego funkcja jest czytelniejsza także bez rozpoznawania barwy. Warto również pisać zrozumiałe nazwy odnośników: „Zobacz cennik” mówi więcej niż „Kliknij tutaj”, zwłaszcza gdy na stronie jest wiele podobnych linków.
Podobnie jest ze statusami. W katalogu usług sama zielona lub szara kropka przy pozycji nie mówi każdemu, czy usługa jest dostępna. Dodaj słowa „Dostępna” i „Niedostępna”. Jeśli przy zamówieniu lub zgłoszeniu występuje kilka etapów, nazwij je zamiast oznaczać wyłącznie kolorowymi znacznikami. Ikona może być pomocna, ale nie zawsze jest jednoznaczna. Krótka etykieta zwykle najlepiej wyjaśnia, co oznacza dany stan.
Wykresy i ilustracje: daj czytelnikowi więcej niż legendę barw
Na blogu lub stronie firmowej wykres może porównywać kilka kategorii. Gdy serie odróżniają tylko kolory, odczytanie wyniku zależy od tego, czy odbiorca rozpozna każdy odcień i dopasuje go do legendy. Można zastosować podpisy bezpośrednio przy słupkach, różne wzory lub kształty znaczników oraz krótkie objaśnienie najważniejszego wniosku pod wykresem. Nie chodzi o dodawanie wszystkich oznaczeń naraz, lecz o wybór takich, które ułatwią zrozumienie danych.
Jeżeli ilustracja niesie istotną informację, nie przenoś jej znaczenia wyłącznie do czerwonych i zielonych fragmentów. Podpis lub odpowiednio opisany obraz może przekazać to, co użytkownik powinien z niego wynieść. Element czysto dekoracyjny nie potrzebuje natomiast rozbudowanego wyjaśnienia. Pomocne pytanie brzmi: czy osoba, która nie widzi kolorów na tej ilustracji, nadal zrozumie jej główny przekaz?
Prosty przegląd strony przed publikacją
Przejdź przez najważniejsze podstrony i poszukaj miejsc, w których kolor oznacza błąd, sukces, aktywną zakładkę, dostępność albo kategorię. Następnie wyobraź sobie stronę w odcieniach szarości. Czy nadal wiadomo, który element jest linkiem, które pole trzeba poprawić i jaki jest status pozycji? Jeśli nie, dodaj nazwę, podkreślenie, wyraźny kształt lub inne oznaczenie niezależne od barwy.
Na koniec sprawdź, czy dodatkowe wskazówki są spójne. Ten sam status powinien mieć tę samą nazwę w całym serwisie, a komunikaty błędów powinny wyjaśniać działanie, nie tylko sygnalizować problem. Zachowaj też czytelny kontrast tekstu względem tła: uzupełnienie koloru słowami niewiele pomoże, jeśli trudno je przeczytać. Takie drobne poprawki ułatwiają korzystanie ze strony wielu osobom, bez konieczności przebudowy całego projektu.
