Pokażę Ci teraz kilka przykładów jak kontrast może zmienić odbiór elementu.
➡️ Przypadek 1
W przypadku ikon, rzadko kiedy występuje sytuacja, by ikona miała ważniejszą uwagę niż etykieta znajdująca się przy niej. Zazwyczaj uwaga użytkownika powinna być skierowane w pierwszej kolejności na etykietę tekstową, a nie na ikonę.
W tym przykładzie wszystko woła o uwagę i nie wiadomo na czym zawiesić oko. Ikony, tekst oraz strzałki z prawej strony, wszystko posiada taką samą wagę wizualną.
➡️ Przypadek 2
W drugim przykładzie zdecydowałem się nadać niebieski kolor, by zasugerować aktywne łącze. Napis na dole “1h ago” na pewno nie jest tak samo ważny jak tekst i tytuł, dlatego powinien posiadać mniejszą wagę wizualną.
Zmniejszyłem też pogrubienie imienia i nazwiska, ponieważ tytuł nie musi aż tak mocno walczyć o uwagę. Nie przytłaczają go inne elementy, wystarczy ciemniejszy kolor, by przyciągał wzrok.
➡️ Przypadek 3
W tym przykładzie możemy wyróżnić trzy najważniejsze elementy, na które użytkownik powinien zwrócić uwagę w pierwszej kolejności. Jest to tytuł, cena, przycisk akcji. Dlatego zmieniłem kolor ceny oraz zmieniłem grubość fontu w tytule z regular na medium. Podobnie postąpiłem z tekstem na przycisku, gdzie dodatkowo dałem ikonę koszyka, by jeszcze bardziej przyciągał wzrok.
Zredukowałem również kontrast separatorów i ramek, tutaj zdecydowała w głównej mierze estetyka. Ponadto, karta przestała być tak przytłoczona. Wizualnie wygląda to lepiej.
➡️ Przypadek 4
W tym przykładzie moim celem było zminimalizowanie obciążenia poznawczego. Nasz mózg ma ograniczoną moc obliczeniową, a gdy element dostarcza zbyt wielu informacji naraz, może to przytłoczyć użytkownika i sprawić, że zrezygnuje z zadania. W pierwszym przypadku, wszystko woła o uwagę użytkownika, wszystko zdaje się być tak samo ważne. Pogrubiony tytuł oraz przyciski. Chcąc zwrócić uwagę na jakiś element nie zawsze trzeba go powiększać czy pogrubiać. Często wystarczy zmniejszyć wagę innych elementów.
Nadałem niebieski kolor dla elementów, które są aktywne, a nie statyczne. Kolor sugeruje tutaj, że w coś można kliknąć. W pierwszym przypadku wprowadzał w błąd. Zmieniłem też kolor gwiazdek na żółty, ponieważ jest to znany wzorzec i kolor ten pasuje wizualnie do ocen/gwiazdek.
