Gdy odwiedzający trafia na Twoją stronę, jego wzrok nie czyta podstrony po kolei od góry do dołu. Skanuje ją, przeskakując między elementami, które się wyróżniają. Hierarchia wizualna to zasada projektowania, która decyduje o tym, co zauważy najpierw, co w drugiej kolejności, a co w trzeciej. Bez niej nawet dobrze napisana treść ginie, bo nic nie kieruje wzroku ku temu, co najważniejsze.
Hierarchia wizualna na stronie to celowe uporządkowanie elementów według rozmiaru, koloru, kontrastu, odstępów i położenia, tak by odwiedzający naturalnie skupiali się najpierw na najważniejszych informacjach. Decyduje o tym, czy ktoś zrozumie Twoją propozycję wartości w kilka sekund, czy wyjdzie zdezorientowany, czym zajmuje się Twoja firma. Dobre ułożenie hierarchii to jedna z decyzji projektowych o największym wpływie.
Dlaczego hierarchia wizualna jest ważna?
Odwiedzający poświęcają średnio kilka sekund na decyzję, czy zostać na podstronie. W tym czasie nie czytają akapitów. Skanują nagłówki, obrazy i przyciski, by ocenić, czy to dla nich istotne. Podstrona z mocną hierarchią wizualną od razu komunikuje swój cel. Podstrona bez niej zmusza odwiedzających do większego wysiłku, a większość nie będzie się starać.
Hierarchia napędza też działanie. Gdy główne wezwanie do działania jest wizualnie dominujące, więcej odwiedzających w nie klika. Gdy zlewa się z otaczającą treścią, współczynnik konwersji spada. Związek między hierarchią wizualną a wynikami firmy jest bezpośredni: czytelna hierarchia daje wyraźniejsze ścieżki do działań, które chcesz, by odwiedzający wykonywali.
Jakie narzędzia tworzą hierarchię wizualną?
Projektanci używają stałego zestawu właściwości wizualnych, by ustalić priorytet. Każdą z nich można regulować niezależnie albo łączyć dla silniejszego efektu.
Rozmiar
Większe elementy przyciągają uwagę jako pierwsze. Główny nagłówek 36 pikseli przyciąga wzrok wcześniej niż tekst podstawowy 16 pikseli. Różnice rozmiaru między poziomami nagłówków tworzą wyraźną kolejność czytania. Gdy wszystko na podstronie ma mniej więcej ten sam rozmiar, nic się nie wyróżnia, a odwiedzający nie mają punktu wejścia.
Kolor i kontrast
Elementy o wysokim kontraście na neutralnym tle wymuszają uwagę. Jaskrawy przycisk na białej podstronie trudno przeoczyć. Elementy o niskim kontraście się cofają. Używaj głównego koloru marki oszczędnie, na elementach, które mają największe znaczenie: głównym nagłówku, głównym wezwaniu do działania oraz kluczowych liczbach lub opiniach. Otaczająca treść powinna używać neutralnych tonów, które wspierają, a nie konkurują.
Odstępy i biała przestrzeń
Elementy otoczone białą przestrzenią wydają się ważniejsze niż elementy ściśnięte razem. Hojne odstępy wokół przycisku wezwania do działania sygnalizują, że zasługuje na uwagę. Ciasne układy sprawiają, że wszystko wydaje się równie pilne, a to znaczy, że nic nie wydaje się pilne. Artykuł jak używać białej przestrzeni na stronie opisuje tę zasadę w praktyce.
Położenie
Odwiedzający skanują podstrony według przewidywalnych wzorców, zwykle zaczynając od lewego górnego rogu i przesuwając się w dół. Najważniejsza treść powinna być na górze podstrony, a na telefonie w pierwszym widoku.
Jak zastosować hierarchię wizualną na stronie firmowej
Mocna hierarchia podąża za stałym wzorcem na każdym rodzaju podstrony. Szczegóły się zmieniają, ale struktura pozostaje taka sama.
Hierarchia na stronie głównej
Strona główna potrzebuje najczytelniejszej hierarchii w całej witrynie, bo trafia do najszerszej grupy odbiorców. Główny nagłówek mówi, czym zajmuje się firma. Główny przycisk wezwania do działania znajduje się wyraźnie pod nim. Artykuł jak sprawić, by strona wyglądała profesjonalnie opisuje, jak hierarchia wpisuje się w szerszy cel dopracowanego wyglądu. Artykuł czym jest projektowanie UX wyjaśnia, jak hierarchia łączy się z całym doświadczeniem odwiedzającego.
Jak WEMASY podchodzi do hierarchii wizualnej
Szablony WEMASY są zbudowane z hierarchią wizualną jako podstawową zasadą projektową. Rozmiary nagłówków, styl przycisków, domyślne odstępy i układy bloków treści są ułożone tak, by najważniejsze elementy naturalnie się wyróżniały. Edytor wizualny pozwala dostosować hierarchię, zmieniając poziomy nagłówków, style przycisków i odstępy między sekcjami, przy zachowaniu spójnej struktury na komputerze i telefonie.
Zobacz, co jest w zestawie, na stronie kreatora stron WEMASY albo sprawdź plany na stronie z cennikiem.
Najczęściej zadawane pytania
Czym jest hierarchia wizualna na stronie?
Hierarchia wizualna to takie uporządkowanie elementów podstrony, by odwiedzający najpierw zauważali najważniejsze informacje. Na ustalenie tej kolejności składają się rozmiar, kolor, kontrast, odstępy i położenie. W kreatorze stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Dlaczego hierarchia wizualna jest ważna dla konwersji?
Czytelna hierarchia prowadzi odwiedzających do działania, które chcesz, by wykonali. Gdy wezwanie do działania jest wizualnie dominujące, a propozycja wartości od razu widoczna, więcej odwiedzających rozumie, co zrobić, i to robi. Bez hierarchii wezwania do działania giną wśród konkurujących elementów.
Skąd wiem, czy moja podstrona ma dobrą hierarchię wizualną?
Zmruż oczy i spójrz na podstronę albo obejrzyj ją z daleka. Element, który wyróżnia się najbardziej, powinien być Twoim głównym nagłówkiem lub głównym wezwaniem do działania. Jeśli nic się nie wyróżnia albo dominuje niewłaściwy element, hierarchia wymaga poprawy. Poproś kogoś, kto nie zna Twojej strony, by w pięć sekund wskazał główny przekaz.
Czym różni się hierarchia wizualna od układu?
Układ określa, gdzie na podstronie są umieszczone elementy: kolumny, siatki i kolejność sekcji. Hierarchia wizualna określa, które z tych elementów przyciągają uwagę najpierw dzięki rozmiarowi, kolorowi i kontrastowi. Podstrona może mieć logiczny układ, ale słabą hierarchię, jeśli wszystkie elementy konkurują o uwagę na równi.
Czy hierarchia wizualna działa tak samo na telefonie?
Zasady są te same, ale zastosowanie jest inne. Ekrany telefonów pokazują naraz mniej treści, więc hierarchia musi być ściślejsza. Układaj elementy w pionie według priorytetu. Zadbaj, by główny nagłówek i główne wezwanie do działania pojawiały się, zanim odwiedzający zacznie przewijać. Ogranicz liczbę konkurujących elementów w porównaniu z wersją na komputer.
Czy szablony mogą zapewnić dobrą hierarchię wizualną?
Tak. Dobrze zaprojektowane szablony ustalają hierarchię przez strukturę nagłówków, styl przycisków i domyślne odstępy. Dostosowywanie powinno działać w ramach tej struktury, a nie ją nadpisywać. Zmiana jednego nagłówka na dużo większy albo dodanie wielu jaskrawych przycisków może zepsuć hierarchię, którą daje szablon.