To kolejność rzeczy, nic innego, nic wymyślnego. Ustala się na jej podstawie ważność stanowiska, jakie zajmujesz w firmie, hierarchizujesz też rzeczy do zrobienia danego dnia. W designie też odgrywa znaczącą role. Odpowiada na pytanie: Jak to zrobić żeby użytkownik zwrócił uwagę na tek konkretny element, jako pierwszy? I tu pojawia się …
DOMINACJA
Nie, nie chodzi tu o dominacje nad światem. Dominacja jest bardzo ważną częścią zasad wizualnej hierarchii. Oznacza nic innego jak ważność. To dzięki użyciu dominacji na stronie wiesz, co masz zrobić jako pierwsze, a co możesz zrobić później. Wystarczy użycie jednego scentralizowanego elementu na zdjęciu, który tak przyciągnie Twój wzrok i nie zwrócisz nawet uwagi na otaczające go środowisko.
W pierwszej kolejności zauważyłeś jabłko, po jakim czasie napis „hello” znajdujący się na obrazku? I wcale nie chodzi o wielkość elementu, jeśli będzie dużo negatywnej przestrzeni i tak skupi na sobie główną uwagę.
Niekoniecznie negatywna przestrzeń musi być biała, nawet jeśli będzie zawierała jakiś wzór to i tak umieszczenie na niej obiektu przyciągnie wzrok. Obiekt jest w takim przypadku anomalią dla oka ludzkiego. Jak to się dzieje? Ludzkie oko jest ciekawe. Kontrast, ustawienie i wygląd to jak krzyk "Hej, ja tu jestem, patrz na mnie". Przykładowo zwróćmy uwagę na stronę Adobe.
Skupienie uwagi na obrazku na środku jest niemal koniecznością. Obrazek wyróżnia się znacznie większą ilością kolorów w porównaniu do pozostałych sekcji. Z lewej i prawe strony użycie negatywnej przestrzeni sprawia, że jest jeszcze lepiej widoczny. A pomimo tego, poprzez zastosowanie kontrastu nie mamy problemu z zauważeniem przycisku PLAY. Dominacja to nie tylko podkreślenie jednego głównego elementu wizualnego na stronie, możemy mieć ich kilka. Tworzymy tym samym tak zwane punkty skupienia, czyli miejsca gdzie człowiek ma spojrzeć w pierwszej kolejności. Ty, jako projektant pokazujesz użytkownikowi jak ma wędrować jego wzrok po Twojej stronie. Prowadzisz go przez kolejne części na wyświetlaczu. Widać tutaj znaczące powiązanie z wcześniej opisywaną przeze mnie Harmonią, w artykule o zasadach, które należy przestrzegać podczas projektowania stron. Musisz się upewnić, że jeżeli wybierzesz obrazek, jako dominującą część Twojej strony to jej pozostałe elementy też będą w jakiś sposób zhierarchizowane. Na co użytkownik ma zwrócić uwagę w drugiej kolejności? Co zobaczy jako trzecie? Osiągnąć to możesz poprzez wielkość tekstu, kolor danej czcionki, zastosowanie pogrubienia. Bo …
DOMINACJA OPIERA SIĘ NA KONTRAŚCIE
Ważność zaznaczamy kolorem. Część, która w sposób znaczący ma skupić na sobie naszą uwagę wprowadzamy najwięcej aktywności wizualnej.
Najlepszymi przykładami są strony przekazujące informacje ze świata. Musisz być w stanie określić, co jest najważniejszą częścią. Pominę obrazek, który poprzez zastosowanie wyrazistych kolorów ma wpłynąć na Twoje zainteresowanie danym artykułem, znajdujący się pod nim napis jest znacznie większy i pogrubiony do tego wpływ na jego czytelność ma użycie białego tła. Ale nie chodzi tu tylko o kolory. Przykład poniżej budzi zainteresowanie nie ze względu na barwy, ale przez to co jest na nim przedstawione. Wielu ludzi zastanawia się jak będzie wyglądała nasza przyszłość a dynamika tu przedstawiona wpływa na wyobraźnie, kto nie chciałby przeczytać takiego artykułu?
Trudniejszym zadaniem jest stworzenie aplikacji, w której praktycznie wszystko może być tak samo ważne. Zobacz jak poprzez zastosowanie białej przestrzeni i kontrastu aplikacja Aliexpress nadal pozostaje czytelna. Wyszarzenie tła obrazków z danej kategorii wpływa również na skupienie atencji użytkownika. Podobnie jak z jabłkiem na wyrazistym tle, to też jest anomalia.
A co stałoby się gdybyśmy tego nie zastosowali? Jeśli nie ma wyraźnej dominacji elementy ze sobą konkurują, a gdy tak się dzieje mamy problem ze skupieniem się na konkretnych rzeczach na stronie. Musimy też bardzo uważnie postępować z kontrastem, gdy nie odseparujemy od siebie czysto części to powstanie tak zwany wizualny hałas. Wtedy użytkownik zacznie się gubić i gdy odnalezienie tego, czego szuka na stronie wymagać będzie od niego większego wysiłku i długiego czasu najnormalniej w świecie zrezygnuje i poszuka innej strony. Brak dominacji znacząco na to wpłynie, bo nie będzie wiedział, od czego zacząć. Strona musi mieć określoną hierarchie, przesłanie. Nie chodzi o to ze jest za dużo rzeczy, bo ich może być niewiele. Taka osoba powie Ci ze jest zbyt zajęta, aby przeglądać to wszystko, przyszła tu w konkretnym celu i chce to znaleźć w jak najkrótszym czasie. Poprzez na przykład podświetlenie jednego elementu a ściemnienie pozostałych osiągamy dominacje - ta mała zmiana może zmienić cale postrzeganie strony. Jeśli np. wszystko w aplikacji jest w jednym kolorze to wystarczy ze wyszarzymy środkowa sekcje.
Połączenie, które zawsze wygrywa to...
Te trzy kolory to najmocniejsze trio w kwestii kontrastu. Nie dziwi mnie, że tak też nazywa się jedna z najbardziej znanych firm meblowych.
To teraz w ramach relaksu trochę matematyki…
WIĘKSZY ROZMIAR = WIĘKSZA DOMINACJA
Jeżeli ustawimy obok siebie dwa elementy tego samego koloru i kształtu, faktycznie zwycięży ten większy. Nie ma co do tego wątpliwości. Ale wielkość to nie jedyna droga do pokazania dominacji, jak już wcześniej wspominaliśmy.
WIĘCEJ KONTRASTU = WIĘCEJ DOMINACJI
Kontrast komplementuje rozmiar, więc w tym przypadku to mniejszy kształt wygrywa zawody dominacji. Przez to że jest ciemniejszy staje się bardziej wyrazisty i w efekcie to on przyciąga wzrok. Tak jak na przykład na stronie zapisania się na LinkedIn, pierwsze co rzuca Ci się w oczy na tle szarego formularza to dwa duże ciemne przyciski.
WIĘCEJ NEGATYWNEJ PRZESTRZENI = WIĘCEJ DOMINACJI
O tym również wspominałam już wcześniej. Element umieszczony centralnie ze znaczą negatywną przestrzenią oddzielającą go od pozostałych elementów sprawi , że dla nas jako odbiorcy jest to pierwszy punkt na którym się skupimy. Wręcz jakby krzyczał "Hej, jestem tutaj. Patrz na mnie!". Przykładów nie musimy szukać daleko. Zwróć uwagę na stronę Google.
Wiele osób tak skupia się na scentralizowanym oknie wyszukiwania, który znajduje się zaraz pod nazwą, że w to miejsce chcąc dostać się na pocztę wpisuje „gmail” nie zauważając nawet, że link do niej znajduje się w prawym górnym rogu.
Ok, opisaliśmy już jak to jest z tą dominacją. Przyszedł czas na …
WYRÓWNANIE
Gdy jesteś odpowiedzialny w firmie za ulepszenie już istniejącego projektu, albo zmianę istniejącego WYRÓWNANIE jest najważniejszą zasadą wizualnego designu. Gdy robiąc obiad wsypujesz pokrojone warzywa do garnka i nie zastanawiasz się, gdzie dokładnie się znajduje wszystko może wypaść na kuchenkę tworząc niezły misz-masz . A raczej nikt nie lubi takiego nieporządku. Nie musisz od razu tworzyć nie wiadomo jak skomplikowanych projektów, ale wystarczy, że zastosujesz wyrównanie a Twój projekt stanie się bardziej czytelny i prostszy w obsłudze, a co za tym idzie stanie się bardziej wartościowy.
Wszystkie obiekty zaczynają się tutaj w innym punkcie. W efekcie oko ludzkie próbuje jakoś to sobie poukładać i skacze pomiędzy nimi, co nie jest dobrą praktyką. Nie ma tutaj balansu, rytmu i harmonii. Jest tutaj za dużo wizualnych ścieżek, którymi może podążać użytkownik i żadna z nich nie współgra ze sobą.
Wyrównanie powyżej nie jest idealne, ale sprawia, że już z o wiele większa łatwością udaje nam się skanować oczami zawartość strony. Musimy postarać się, aby w naszym projekcie znajdowało się jak najmniej ścieżek do podążania. Usunęłam też zamykanie poszczególnych sekcji w ramki. Teraz już odchodzi się od takiego projektowania ze względu na to, że w naszym projekcie wprowadzają one więcej szumu, a nie są niezbędne. Wystarczy tylko negatywna przestrzeń pomiędzy nimi, aby uzyskać efekt odseparowania. Jeżeli nie ma dominacji w projekcie, taki sam efekt skupienia i odseparowania osiągnąć możemy właśnie poprzez wyrównanie, wydaje się to prosta zasada, ale ma wielką moc. Gdy wyrównujemy elementy, nie możemy zapomnieć też o ich pogrupowaniu. Możemy to osiągnąć poprzez ...
ODLEGŁOŚĆ
Jest to sygnał że dane elementy są w jakiś sposób ze sobą powiązane, zachodzi między nimi relacja.
Mając nawet takie same grupy elementów, ale znajdujące się od siebie w znacznej odległości możemy stwierdzić, że to dwie oddzielne grupy. Nie muszą mieć tego samego znaczenia, tej samej zawartości. Ale wystarczy, że znacznie zmniejszymy tą odległość i już możemy przypuszczać, że elementy te są ze sobą powiązane.
Odległość często jest w stanie przebić różnicę koloru pomiędzy elementami lub też występującego pomiędzy nimi kontrastu.
Nawet, jeśli wyraźnie jedno kółko jest innego koloru i wyraźnie kontrastuje z resztą. To poprzez odległość nadal są to dwie oddzielne grupy. Taka zmiana może nam jedynie sugerować, że te poszczególne elementy są ważniejsze.
Powyżej widzimy pasek dolny znajdujący się na stronie Reserved, dzięki zastosowaniu tu odległości widzimy podział pomiędzy e-sklepem, sklepami stacjonarnymi a nawet oddzielenie mojego konta od marka reserved. Elementy powiązane ze sobą znajdują się od siebie w bliskiej odległości. W ten sposób przekaz staje się czytelniejszy i pomaga człowiekowi sprawnie poruszać się na stronie. Poprzez hierarchizacje znacznie ułatwiamy użytkownikowi poruszanie się po naszej stronie. Ważnym jest by nie czuł on się przytłoczony ilością informacji, teraz już wiesz jak taką samą ich ilość przekazać w sposób, który będzie dla niego przyjemniejszy w odbiorze. Wizualne przedstawienie tych zasad znajdziesz na stronie Visual hierarchy - graphic design principles.
Trzymam kciuki!
Jeśli masz jakieś pytania, wątpliwości lub chcesz podzielić się swoją wiedzą z danego tematu - czekam na Twoją wiadomość w komentarzu :)
Komentarze
Prześlij komentarz