Hierarchia wizualna w UX Design

Hierarchia wizualna w UX Design

Pierwsze wrażenie może zdecydować o tym, że ktoś zostanie na Twojej stronie albo opuści ją w ciągu trzech sekund (a może nawet szybciej) i już nigdy nie wróci. Walka toczy się więc o to, co pierwsze rzuci się w oczy użytkownikowi i czy będzie to na tyle obiecujące, że będzie chciał oglądać/czytać dalej. Co może decydować o tym, jakie będzie to legendarne pierwsze wrażenie? Przede wszystkim właściwa hierarchia treści i dobry design (mój wykładowca mawiał, że idealny design jest niewidzialny – nie rozprasza ani nie zakłóca odbioru treści – ale dziś nie o tym). Zrozumienie tego, w jaki sposób wzrok użytkownika bada Twoją stronę i w jakiej kolejności docierają do niego informacje, może być kluczowe dla zapewnienia mu komfortu.

Kluczowe cechy obiektów

Zacznijmy może od tego, jakie cechy obiektów decydują o kolejności ich spostrzegania. Badacze twierdzą, że dla zwykłego przeglądania strony są to: kolor, wielkość, lokalizacja, styl tekstu, kontrast, czy wygląd obrazów. Natomiast dla wyszukiwania konkretnych informacji mają znaczenie dodatkowo również kolejność i sąsiedztwo (bliższe elementy traktowane są jako powiązane ze sobą) 1. Wiedza o tym, jakimi prawami rządzi się przetwarzanie wzrokowe, jest szczególnie istotna, gdy chcesz wpływać na to, co użytkownik zobaczy w pierwszej kolejności.

Większość z nas przegląda strony od góry do dołu i od lewej do prawej, dlatego pierwszeństwo ma to, co znajduje się wyżej i bliżej lewej krawędzi. Porządek ten może jednak zostać zaburzony, gdy elementy strony zostaną zdominowane np. przez jakiś duży obraz.

Co nas rozprasza?

Ale nie tylko. Jeżeli spotykasz na stronie migające obiekty, to z pewnością nie zauważysz pozostałych – często ważniejszych – rzeczy. Inną kwestią jest to, ile na takim portalu wytrzymasz, zanim dostaniesz oczopląsu (prowadząc badania użyteczności, zdarzało mi się słyszeć „jeny tu wszystko do mnie krzyczy” i zdecydowanie nie była to pochwała dla kreatywności designera). Dzięki ewolucji, dla wszystkich właściwie gatunków zwierząt (w tym i dla nas) ruch jest jednym z najbardziej przyciągających wzrok atrybutów obiektu. Miej to na uwadze zanim zdecydujesz się umieścić na stronie pięć różnych sliderów w formie karuzeli.

Oprócz ruchu naszą uwagę zwracają także jaskrawe barwy (tu nawiązania do ostrzegawczych kolorów w świecie przyrody wydają się oczywiste). Lepiej unikać przebodźcowania użytkownika abstrakcyjną kolorystyką. Tym bardziej, że badania dowodzą, że dłużej i chętniej patrzymy na obiekty na jasnym tle (Apple naprawdę wie, co robi).

Ponadto – jak już wspomniałam – większość badań pokazuje, że użytkownik rozpoczyna oglądanie od lewej strony. Niektórzy badacze mówią, że mapa gorących punktów układa się zwykle w kształt litery „F” 2, inni – że litery „L”, ale w obu tych wzorcach kluczowa jest lewa część portalu (wzorce te są jednak mniej zauważalne, jeśli na stronie dominują obrazy 1). Jeżeli tylko nic nie będzie mrugać do użytkownika, to bardzo prawdopodobne, że od tej części rozpocznie przeglądanie. Warto dobrze zastanowić się, co umieścić po tej najbardziej „gorącej” stronie.

pattern F

Badanie eye-trackerem. Źródło: www.nngroup.com2

Jeszcze jednym elementem, który może niespodziewanie zaburzyć hierarchię wizualną na stronie są obrazy przedstawiające ludzi, a w szczególności twarze 3. Jeżeli zdjęcia miały być tylko ozdobnikiem – uważaj. Mogą okazać się zbyt absorbujące, by użytkownik skoncentrował się na treści.

Badanie eye-trackerem. Źródło artykuł: Are people drawn to faces on web pages? 3

Ciekawostką jest fakt, że zatrważająco duża część użytkowników pozostaje „ślepa na banery”, jak to udowodniło badanie już z 1998 roku 4. Mimo iż w przeprowadzonym eksperymencie banery zawierały informacje kluczowe dla wykonania zadania, korzystało z nich tylko 58% uczestników badania (inne elementy strony jak menu, linki, czy tekst, były widoczne dla 94% użytkowników). Zupełnie jakby przeskakiwali je, jak domyślnie ignorowane elementy, mimo iż miały im ułatwiać pracę. Cóż więc, gdy baner nie zawiera interesujących treści? W drugim badaniu z tego samego artykułu autorzy zapytali użytkowników, czy w ogóle zauważyli, że na stronie znajdowały się również bezużyteczne banery. 80% uczestników badania odpowiedziało, że ich nie widzieli. Nie oznacza to oczywiście, że należy zupełnie zrezygnować z takiej formy prezentacji danych. Jeśli jednak zadajesz sobie pytanie „dlaczego tak mało użytkowników klika w tę reklamę?”, to zjawisko „banner blindness” może być rozwiązaniem tej zagadki.

1. Djamasbi, S., Siegel, Tullis, T. “Visual Hierarchy and Viewing Behavior: An Eye Tracking Study,” in Human-Computer Interaction, Design and Development Approaches, Lecture Notes in Computer Science, 2011, (6761:2011), pp. 331-340.
2. Pernice, K.: F-Shaped Pattern For Reading Web Content. https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ (dostęp: maj 2018)
3. Tullis, T., Siegel, M., Sun, E.: Are people drawn to faces on web pages?: Proceedings of the 27th international Conference Extended Abstracts on Human Factors in Computing Systems (2009) 4207-4212
4. Benway, J. P. (1998, October). Banner blindness: The irony of attention grabbing on the World Wide Web. In Proceedings of the Human Factors and Ergonomics Society Annual Meeting (42, nr 5, str. 463-467). Sage CA: Los Angeles, CA: SAGE Publications.

1 komentarz do wpisu “Hierarchia wizualna w UX Design”

Dodaj komentarz