Podstawy hierarchii wizualnej (dlaczego jest tak ważna dla strony)

hierarchia wizualna

Tworzenie ładnie dobranych kolorystycznie rzeczy, nie jest jeszcze kluczem do sukcesu. Potrzeba trochę więcej trików, aby przekazać wiadomość, która na długo zapadnie w pamięci odbiorcy.

Jednym z „trików”, które pomagają złapać oko odbiorcy, jest hierarchia wizualna. Dobre jej wykorzystanie od razu kieruje wzrok na to, co powinniśmy zobaczyć jako pierwsze, a co ostanie. My nawet nie zdajemy sobie sprawy, że nasz mózg odbierając obraz, od razu układa go według listy, jakie informacje są najważniejsze, a co można wręcz pominąć.

Hierarchia wizualna, 5 podstawowych praktyk

1 | Skala

Rozmiar jest efektownym narzędziem w przyciąganiu oka do danych elementów. Większe obiekty są widoczne szybciej niż małe. Nasz mózg identyfikuje wielkość, jako czynnik wpływający na ważność informacji. Tak więc to, co najważniejsze w danym projekcie powinno być największe. A najmniej ważne rzeczy, najmniejsze. Sporo informacji, do których mamy odnośnik jest np. zapisywana jak najmniejszą czcionką. Z punktu widzenia twórcy, te informacje nie są najważniejsze dla odbiorcy.

hierarchia wizualna

 

2 | Kolor

Kolor, jak rozmiar, daje sygnał naszemu mózgowi, jaką ważność nadać danym informacjom. Nasz wzrok przyciągają szybciej pogrubienia, kontrastowe kolory. Warto przy tworzeniu rzeczy posłużyć się kołem barw, aby znaleźć kontrast idealny.

hierarchia wizualna

3 | Kontrast

Duża różnica w kolorach lub rozmiarach jest sygnałem, że coś jest inne od reszty. Bardziej zwraca na siebie uwagę. Zmiana koloru z jasnego na ciemny, zwykłej czcionki na pogrubioną i powiększoną tworzy kontrast. Tak samo, jak np. na blogach, wyróżnia się nagłówki, aby przyciągnąć czytelnika oko. Jeżeli kogoś nie zainteresuje cały tekst, to może dzięki wyróżnieniu, chociaż dana część.

hierarchia wizualna

4 | Wyrównanie

Ważność elementów jest często tworzona poprzez wyrównanie. Taki zabieg pozwala naszym oczom na podświadomy odbiór informacji. Najczęściej jest to używane przy projektowaniu stron.

hierarchia wizualna

5 | Odległość

Czy coś jest blisko, czy daleko od innych np. informacji pozwala na ich grupowanie względem ważności. Jest to najszybszy sposób na pokazanie, co oko powinno zauważyć pierwsze, a co z informacji może być zauważone trochę później.

hierarchia wizualna

Jak hierarchia wizualna odnosi się do nas?

Skoro jesteśmy w Internecie, warto spojrzeć na różne strony. Dobrze użyta hierarchia, jak już wspominałam, może zachęcić czytelnika lub odstraszyć od zapoznania się z informacjami. Nie chcę nikogo obrażać, ale widzę sporo np. blogów, na których zostaję tylko z grzeczności dla twórcy.

• Wielkie, zbite bloki tekstu.

• Brak przemyślanej listy, kiedy tekst aż sam się o nią prosi.

• Żadnych rzucających się drapieżnie w oczy nagłówków.

Nie wiem, czy nasuwa mi się coś jeszcze z takich grzechów głównych. Dla mnie te strony są trochę niechlujne, a autor ma gdzieś swoich czytelników. Przypomina mi to stare pamiętniki. Sama kiedyś taki pisałam i nie zważałam na długość akapitów, nagłówki, wyróżnienia itp., ale… Ja nie chciałam, aby ktoś to czytał poza mną. Czy blogi też mają nie być przez nikogo czytane?

Tak na marginesie widać, kiedy strona jest zaniedbana przez autora, a kiedy problem leży po stronie technicznej, bo szablon na coś nie pozwala. Sporo rzeczy można obejść, trzeba tylko chcieć. Ale można też pisać tylko dla siebie i ja się nie czepiam.

Jak sprawdzić, czy hierarchia na stronie jest odpowiednia?

Najprostszym sposobem jest zapytanie kogoś. Dobrze jest posadzić kogoś, kto nie zna naszej strony i poprosić, aby wskazał, co widzi jako pierwsze, drugie, trzecie i tak dalej. Warto zapytać kilka osób i wyciągnąć średnią. Może się okazać, że to, co uważamy za odpowiednio wyeksponowane, wcale nie rzuca się w oczy. Uprzedzam, ankieta na blogu się do tego nie sprawdzi. Pytania z odpowiedziami – tak, nie – są kiepskim pomysłem, a co za tym idzie, czytelnik musiałby poświęcić za dużo czasu na uzupełnienie takiej ankiety.

Jeżeli nie chcemy nikogo zatrudniać do pomocy, musimy w jakimś stopniu opanować wiele zagadnień związanych z grafiką. Znowu się powtórzę, jest sporo stron, które nie są przyjazne oku. Przy sprawach bardzo techniczny to nie razi, tam zaglądają tylko naprawdę zainteresowani. Przy innych tematach, jak np. blogi, zła hierarchia wizualna może zniechęcić czytelnika, co odbije się na zaangażowaniu i statystykach.

  • Bardzo ciekawy wpis! Rzeczywiście niektóre elementy wychwytujemy automatycznie i przyciągają od razu naszą uwagę.

  • Przydatny wpis!

  • Poruszasz ostatnio bardzo ważne kwestie, o których nie miałam pojęcia i na które nawet nie zwracałam uwagi. Ale jak tak się nad tym zastanowić to rzeczywiście lepiej odnajduję się w miejscach, gdzie znajduje jakieś kwestie wybijające się na pierwszy plan. Muszę pomyśleć nad tym pokazaniem strony postronnym osobom. Mogą wyjść ciekawe wnioski :)

  • Bardzo przydatny wpis, nie miałam pojęcia o istnieniu tego typu zależności.

  • Wow! Bardzo rzeczowo i przydatnie! :)

  • Świetny wpis! Bardzo ciekawy! Ja czasami zastanawiam się dlaczego ktoś nie widzi niektórych błędów.. nie lubię np. gdy na blogu zbyt dużo się dzieje, nie ma właśnie podziału na żadne akapity, albo jest zbyt kolorowy. Widziałam też blogi, gdzie tekst był pisany kolorową, lub zbyt małą czcionką… automatycznie z takich miejsc się wychodzi

    • Błędów można nie widzieć, nie każdy ma zmysł bardziej artystyczny. Nie każdy też błędy chce widzieć, uważając, że wie lepiej, albo się danej osobie tak podoba, a jak innym nie, inni nie muszą czytać. Wydaje mi się, że jest to też spowodowane podejściem do swojej strony, jak do pamiętnika.

  • Bardzo mądry wpis o estetyce. Przez jakiś czas o tym zapomniałam – robię w pracy wpisy praktyczne (czytaj. żółte podkreślenia, czerwonych liter – serio daje po oczach).
    Druga sprawa, że swoich błędów się nie widzi – dopiero z perspektywy czasu się śmiejemy :)

    • Niektóre informacje powinny dawać po oczach. Miałam ostatnią taką niemiłą sytuację, bo informacja była źle wyeksponowana. Akurat po jakichś 4 miesiącach zawitałam na parkin, który okazał się już płatny. Informacja o tym była na małej, czarnej tablicy z drobnymi białymi literami. Żółty i czerwony kolory byłyby lepsze do informowania o opłacie. Na szczęście mandat anulowali, bo zakupy w sklepie były zrobione, ale to tylko jednorazowo cofają.

  • Lubie czytać blogi, które ładnie wyglądają. O wiele chętniej na nie wracam, niż na takie, które mi się nie podobają – w których za dużo jest kolorów, wszystko jest jakby nieuporządkowane. Myślę, że efekt wizualny to połowa sukcesu bloga.

    • Przyznam się, że wraz z ekipą mamy dużo do poprawienia jeszcze ale każdego dnia małymi krokami staramy się być lepsze :) Twoja strona mi się zawsze podobała i wciąż podoba :)

  • Niby prosta sprawa ale w życiu nie zawsze wychodzi. Niby człowiek coś tam wie i rozumie ale w sobie ma olbrzymią ochotę robić po swojemu. A to o czym napisałaś tyczy się wszystkiego. Od stron internetowych, tekstów, mieszkań po ogrody :)

    • Dlatego myślę, że warto zapytać kogoś o zdanie. A często nawet nie jedną osobę. Tak mamy możliwość wyeliminowania rzeczy zależnych tylko od naszego gustu, a trochę dopasowania do innych.

      • Gotowa więc na jakieś sugestie dla Tentacli :P ?

        • Jeszcze nie gotowa, ale będę myślała, jak to ugryźć. :)

  • Hu hu hu poważny temat! Aż trochę dał mi do myślenia jeśli chodzi o mój blog… :> :)

  • Aga

    Ogromne dzięki za te informacje. Człowiek się stara, żeby było schludnie, atrakcyjnie, czytelnie, ale nie ma lekko :) Ale faktem jest, że „ładne” blogi – spójne kolorystycznie i przejrzyście skomponowane czyta się duuużo lepiej, niż te chaotyczne. Niezależnie od treści, niestety.

  • Bardzo przydatne informacje! Zwykły laik, taki jak ja nie do końca zdaje sobie sprawę z tego, jak ważna jest hierarchia wizualna. A warto o nią zadbać :)

    • My w większości tę hierarchię wykonujemy automatycznie. Nasze oczy mają już swoje przyzwyczajenia przez to, że inni te triki stosują. :)