5 filarów hierarchii wizualnej w projektowaniu stron internetowych
25 wrz

5 filarów hierarchii wizualnej w projektowaniu stron internetowych

Wizualna hierarchia jest połączeniem użyteczności, tego jak strona wpływa na danego użytkownika oraz tego, czy strona po prostu wygląda ładnie. Wizualna hierarchia interfejsu opiera się na tych samych zasadach estetyki stosowanych przez mistrzów renesansu, ale dodatkowo, pod płaszczem layoutu, strona musi spełniać swoje konkretne zadania – promować konkretne treści, zachęcać użytkowników do rejestracji oraz do podejmowania działań w obrębie witryny. Oczywiście w zależności od konkretnego przeznaczenia strony, standardów i priorytetów ważność określnych elementów może się różnić.  Opiszemy jednak pięć najbardziej podstawowych elementów projektowania stron, na które trzeba zwracać uwagę na początku.

1. Rozmiar

Zarówno estetyka i czytelność zaczyna się od dobrania odpowiednich proporcji. Większe jest bardziej zauważalne, ale nie zawsze jest lepsze. Najważniejsze elementy powinny być największe, jednak gdy przejdziemy do szczegółów, stają się bardziej skomplikowane.

Jedną z zasad Prawo Fittsa jest to, że obiekty o większym rozmiarze – te, w specjalnie klikalnym obszarze – są łatwiejsze do wychwycenia. Innymi słowy, użytkownik wywiera mniej wysiłku do kliknięcia większych elementów.

Oczywiście, to nie znaczy, że każdy klikalny przycisk robić na takiej samej zasadzie jak okienko „Pobierz” z 10-krotnie większym rozmiarem. Subtelność i harmonia między elementami są kluczem.

Oprócz elemntów klikalnych rozmiar odgrywa istotną rolę w pozostałych skłądowych wygladu strony. W zależności od różnic między nimi, większe elementy mogą zdominować naszą witrynę. Warto też stosować zasadę kontrastu. Można osiągnąć te same korzyści poprzez nadanie grupie elementów mniejszego rozmiaru, zamiast jednemu elementowi większego.

Odnośnie rozmiaru w tekstach, pewne wytyczne mogą dać badania Smashing Magazine z 50 popularnych stron internetowych. Można z nich uśrednić pewne wielkości, które dają dobre efekty wizualne:Nagłówki: 18-29 pikseli
Sekcja body: 12-14 pikseli
2. Kolor
Wybór koloru, nawet jeśli nas stronie dominują odcienie bieli, czerni czy szarości, będzie miał ogromny wpływ na sposób w jaki użytkownicy postrzegają Twoją witrynę.

Każdy kolor ma swoje własne odniesienia psychologiczne i pewną hierarchię. Na przykład czerń i czerwień są dobre w elementach, na które mamy zwrócić szczególną uwagę, a delikatne żółte czy kremowe odcienie służą raczej za tło, elementy nierzucające się na pierwszy plan.

Podobnie jak z rozmiarami można manipulować kolorami na zasadach kontrastu – manipulując odcieniami przeciwnymi (znanymi jako kolory uzupełniające) zwraca się uwagę na oba. 

Ma to ogromny wpływ w hierarchii wizualnej, przykładowo umieszczenie żółtego napisu na niebieskim tle mocniej rzuci się w oczy w porównaniu do bardziej stonowanej treści.

3. Layout

Układ strony internetowej jest najbardziej bezpośrednim sposobem kontroli hierarchii określonych elementów strony. W zależności od roli danej treści można nią manipulować i dostosowywać do widoku strony w przeglądarce.
Główna treść zawsze jest skoncentrowana na środku ekranu, jednak ważne jest, by sekcja nawigacji strony była również dobrze dostępna. Zazwyczaj umieszcza się ją u góry, czasem z boku – niezależnie od pozycji warto pomyśleć, o użyciu efektu, dzięki któremu wraz z przewijaniem strony w dół samo menu będzie cały czas w tym samym miejscu. Przy dużej ilości treści naprawdę ułatwia to nawigowanie w obrębie witryny.

Layout strony musi przede wszystkim zapewniać jej przejrzystość i użyteczność – wzrok użytkownika musi się od razu kierować na najważniejsze elementy strony. Całość jako struktura powinna przypominać wiersze i kolumny z których wyłaniają się odpowiednie sekcję zhierarchiwizowane według tego, która z zawartych w nich treści powinna zostać najpierw przeczytana przez użytkownika.

4. Rozstaw elementów

 Niejako kontynuacją poprzedniego punktu jest rozstaw – a więc odpowiednie skalowanie odległości poszczególnych elementów layoutu strony internetowej.  Bliskość jest potężnym narzędziem dla projektanta stron internetowych, gdyż może sugerować znaczenie i funkcjonalność danego elementu przy użyciu tylko odpowiedniego wizualnego przedstawienia go. Zasady Gestalt, z wizualno-psychologicznej szkoły myślenia z początku XX wieku, doprowadziły do ​​odkrycia, że ​​użytkownik ma tendencję do postrzegania elementów umieszczonych blisko siebie, jako mające podobne funkcje.
Innym aspektem jest wykorzystanie pustej przestrzeni. Błędem jest traktowaie spacji i przerw jedynie jako niezagospodarowaną pstą przestrzeń, a nie jako narzędzie do projektowania. Odpowiednia ilość pustej przestrzeni pomiędzy kluczowymi elementami może postawić je w centrum uwagi. Zbyt mała natomiast, może je zlać z resztą treści.
5. Stylowanie

W tworzeniu stron nie ma jednej, konkretnej drogi, która zawsze da idealny efekt. Ważny jest też osobisty styl, korzystanie z tekstur, grafiki i typów obrazowania, które wpływają na hierarchię wizualną i pozwalają wyrazić osobowość twórcy w projekcie.

Jednym z najpotężniejszych narzędzi stylistycznych są tekstury. Gdy tylko stosuje się je właściwie, dodając głębię i atmosferę nie tracąc na funkcjonalności i przejrzystości. Odpowiednia grafika, stylowanie dają nie tylko ogromne efekty wizualne, ale także pomagają hierarchizować poszczególne elementy. Kluczem jest jednak zawsze przejrzystość i umiar – przy dużej ilości grafiki i efektów łatwo osiągnąć rezultat odwrotny od zamierzonego. Stosując grafikę jako tło dobrze żeby było w pewnym stopniu „wygaszone”, można to łatwo osiągnąć nakładając odpowiedni filtr – w zależności od kolorystyki strony – bieli lub czerni. 

Leave a reply