Podstawy projektowania: hierarchia wizualna i kontrasty

Podstawy projektowania: hierarchia wizualna i kontrasty

Niezależnie czy projektujemy stronę, aplikację, plakat teatralny czy logo, chcemy, aby pewne elementy rzuciły się w oczy szybciej niż pozostałe. Na przykład jeśli zerkniemy na rozkładówkę magazynu – w pierwszej kolejności zobaczymy tytuł (dzięki temu wiemy o czym będzie artykuł), następnie wstęp i nagłówki, a dopiero potem tekst akapitowy. Na samym końcu zwrócimy uwagę na podpisy pod zdjęciami, przypisy i numery stron. Takie uporządkowanie treści to właśnie hierarchia wizualna.

Możecie też obejrzeć film na ten temat!

Hierarchia informacji – po co się ją stosuje?

Hierarchia pozwala uporządkować projekt i nadać poszczególnym elementom stopień ważności. Dzięki niej wiemy, na które elementy zwracać uwagę w pierwszej kolejności. Nadawanie odpowiedniej hierarchii elementom w projekcie jest podstawową umiejętnością, bez której ciężko będzie Wam tworzyć skuteczne projekty. Pozwala po prostu skupiać uwagę użytkownika w odpowiednich punktach i sugerować kierunek w jakim powinien podążać jego wzrok.

Jak budować hierarchię informacji?

Na hierarchię informacji wpływa kilka zmiennych, o których opowiadałam Wam już w poprzednich częściach. Wszystko sprowadza się do nadawania kontrastów elementom. Przez kontrasty rozumiemy rozróżnienie elementów względem siebie, a nie tylko kontrast kolorystyczny! Jak w takim razie nadawać kontrasty? Zaraz Wam opowiem, ale zacznijmy od najprostszej rzeczy.

Położenie
Najpierw pozycja obiektu. Na przykład układając słowa od lewej do prawej, będziemy czytać je właśnie w tej kolejności (inaczej będzie w kulturach, gdzie czytamy na odwrót). Podobnie z ułożeniem od góry do dołu. Oczywiście warto zaznaczyć, że z tym patrzeniem od lewej do prawej sprawa nie jest aż tak banalna. Musimy wspomnieć jeszcze o wzorcach, które pokazują nam w jaki sposób skanujemy treści – np. w internecie. Na podstawie badań eyetrackingowych, czyli takich badających ruch gałek ocznych, udało się wytypować kilka takich wzorców. Wśród nich jest chociażby tak zwany F-pattern, który pokazuje, że najwięcej uwagi skupiamy na liniach tekstów znajdujących się najwyżej i pierwszych słowach wersów poniżej. A potem tracimy nimi zainteresowanie.

hierarchia wizualna

Oprócz tego wzorca, opisanych zostało jeszcze kilka, ale z nim najczęściej możecie spotkać się we wszelkiej maści opracowaniach w internecie. I jak to bywa z materiałami w sieci, bardzo często dochodzi do nadinterpretacji lub złego tłumaczenia. Dlatego chętnie zaproszę Was do przeczytania tekstu autorów badań, w którym znajdziecie najwięcej rzetelnych informacji (niestety po angielsku: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).

Skala
Rozmiar również ma znaczenie. Jeżeli wyróżnimy jeden z obiektów skalą, może wydawać się ważniejszy od innych – automatycznie będziemy kierować wzrok w jego stronę. Ale, ale – wszystko opiera się na bazie kontrastu, więc równie dobrze możemy jeden element bardzo zmniejszyć i w ten sposób, właśnie on będzie mógł przyciągnąć uwagę.

skala w projektowaniu

Barwa
Warto wspomnieć również o kolorze. Mając trzy czarne obiekty i jeden czerwony, to właśnie ten w kolorze zwróci na siebie uwagę (i na odwrót, jeśli będziemy mieć same czerwone elementy i jeden czarny, to zwrócimy najpierw uwagę na ten czarny). W przykładzie czarno-białej pracy, wyróżnienie kolorem jest bardzo łatwe do osiągnięcia. Ale co jeśli wszystko jest kolorowe?

barwa w projektowaniu

Pamiętacie odcinek o barwie? Podawałam tam jej składowe – jasność i nasycenie. Jeżeli barwy są stonowane, narzucenie koloru intensywnego wyróżni wybrany element. Przy ciemnych kompozycjach, jasny kolor zwróci większą uwagę i na odwrót – jeśli wszystko będzie jasne, ciemna plama wyjdzie na przód.

nasycenie koloru

Co oprócz tego?
Duża odległość – przestrzeń, którą otoczycie najważniejszy obiekt, może sprawić, że właśnie ten element skupi wzrok naszych użytkowników. O tak zwanych white spaces opowiadałam Wam całkiem niedawno, więc jeśli chcecie zgłębić ten temat, wpadnijcie tu: na blogowy wpis.

white spaces w projektowaniu

Również forma obiektu, a zwłaszcza wyróżniające się kształty mogą pomóc nam w uzyskaniu odpowiedniego efektu. Załóżmy, że stworzyliśmy bardzo prosty, minimalistyczny projekt, pełny geometrycznych form. Jeżeli wrzucimy do niego kształt, który będzie bardziej organiczny, wręcz (mogłoby się wydawać) trochę niepasujący do reszty, to właśnie on może zacząć grać pierwsze skrzypce.

forma w projektowaniu

Podsumowując. Tworząc kontrasty między elementami i wybierając dominantę ustalimy właśnie hierarchię. Najważniejszy element przyciągnie uwagę w pierwszej kolejności, zadbajmy więc o to, by oko dalej było prowadzone po projekcie. Hierarchię ustalimy przez stosowanie takich zabiegów jak ułożenie elementów na odpowiednich pozycjach, zmieniając skalę, nadając odpowiednie kolory czy dbając o odpowiednie marginesy.

kanal na youtube