Im lepiej poznajemy człowieka, jego psychikę, sposób funkcjonowania, tym skuteczniej jesteśmy w stanie odczytać i przewidzieć jego zachowania. Projektując, musimy brać pod uwagę elementy, które będą przykuwać uwagę naszych odbiorców czy też nawoływać do działania. Co jest bardzo ważne: tworząc interfejs i przedstawiając na nim kolejne treści, musimy mieć świadomość, w jaki sposób ludzie skanują treści, aby odpowiednio pokazać najważniejsze elementy i ułatwić naszym odbiorcom poruszanie się po przestrzeni.
Tutaj z pomocą przychodzą nam patterny, czyli – tłumacząc na język polski – wzorce, które mówią nam o sposobie skanowania przez użytkowników treści przedstawianej na interfejsach. Zatem istotne jest, abyśmy uświadomili sobie, że ludzie skanują treści w różny sposób, zanim skupią uwagę na wybranym elemencie, przeskakując wzrokiem z jednego punktu do drugiego, aż coś ich zainteresuje lub wychwycą poszukiwaną frazę.
Na początku muszę zaznaczyć, że to, w jaki sposób ludzie czytają treści w sieci, w dużej mierze zależy od:
- zadania/celu,
- doświadczeń z internetem, witryną lub marką,
- układu strony,
- typu zawartości strony (np. tekst lub obrazy).
Do odkrywania wzorców skanowania interfejsów wykorzystuje się badania eyetrackingowe. Aktualnie istnieje kilka popularnych wzorców skanowania stron internetowych, wśród których są wzorce „F” i „Z”.
Zanim jednak rozpoczniesz projektowanie układu strony, koniecznie znajdź odpowiedzi na następujące pytania:
- kiedy odwiedzający wchodzą na Twoją stronę,
- jakie informacje chcesz, aby zauważyli,
- co chcesz, aby zrobili?
Projektując interfejs zgodnie z wybranym wzorcem, pamiętaj, aby przykuwać uwagę odpowiednimi elementami. Możesz wykorzystać delikatny ruch lub animacje. Musisz również wiedzieć, że jednymi z najbardziej przyciągających uwagę elementów są fotografie, szczególnie te przedstawiające ludzkie twarze. Zwracając twarz na obrazie w stronę elementu CTA, który wzywa do działania, możesz całkowicie zmienić odbiór Twojego projektu. Dlaczego? Jeśli osoba na zdjęciu będzie patrzyła w kierunku elementu, na który użytkownik ma zwrócić uwagę, zrobi to o wiele szybciej.
Na sposób odbioru Twojego projektu może wpływać również wielkość fontu czy kolory przycisków. Pamiętaj również, aby badać efektywność stworzonego układu. W tym celu skorzystaj z urządzeń eyetrackingowych, które śledzą ruch gałek ocznych i tworzą mapy cieplne, które pokażą Ci, gdzie użytkownicy skupiają największą uwagę.
F-pattern
Pierwszym ze wzorców odzwierciedlających ruch gałek ocznych, gdy czytamy treści, jest F-pattern. W przypadku występowania tego wzoru człowiek skupia się na górnej części strony, ponieważ tam znajdują się nagłówki, które są szczególnie ważne. Kolejnym etapem jest ruch oka do lewej strony, gdzie można wychwycić numerację czy punktory, a stamtąd następuje powrót w prawo, w celu przeczytania pogrubionego tekstu.
F-pattern – kiedy używać?
Wzorzec F powinien być stosowany w miejscach, w których mamy do przekazania większą liczbę informacji. Przy korzystaniu z tego wzorca musimy również pamiętać, że zaangażowanie użytkownika na początku zawsze jest większe, potem nieco spada.
Z-pattern
Wzorzec Z jest jednym z najbardziej podstawowych wzorców. Istnieją również jego odnogi, a są nimi wzorce Zig-Zag oraz Wzór Złotego Trójkąta. Zig-Zag to powtarzanie wzoru Z kilka razy w ciągu projektu, co tworzy tak zwany zygzak – stąd też nazwa. Za to Wzór Złotego Trójkąta polega na wyodrębnieniu z litery „Z” trójkąta, w którym – według autorów – powinny znaleźć się najważniejsze informacje, ponieważ to na tym obszarze wzrok użytkowników skupia się najbardziej.
Z-pattern – kiedy używać?
Wzorzec Z jest naturalnym wzorcem czytania – używamy go podczas czytania książek. W interfejsach sprawdza się szczególnie w przypadku stron reklamowych, jak i również podczas tworzenia landing page’ów. Jako wzorzec budujący interfejsy nie powinien zawierać dużo treści, a przedstawiać bardzo wyraźne komunikaty, które nawołują do działania.
Kiedy już zrozumiesz wzorce skanowania oraz wybierzesz te, które będą pasować do Twojego interfejsu, łatwiej będzie Ci umieścić ważne informacje dokładnie w tych miejscach, na które przyszli użytkownicy będą zwracać uwagę. Pamiętaj, że prawidłowo zaplanowana struktura treści jest niezwykle istotna. Nie możemy podchodzić do tego etapu tworzenia lekceważąco, ponieważ szybko stracimy uwagę naszych odbiorców. Co ważne, strony z układem trudniejszym do skanowania mają wyższy współczynnik odrzuceń, a czytelnikom jest o wiele trudniej poruszać się po przestrzeni interfejsu, co oznacza, że frustracja może spowodować, że szybko opuszczą naszą stronę.
Jednak patterny F i Z to nie koniec! Możemy zetknąć się również z wieloma innymi wzorcami odbioru treści znajdujących się na stronie. Warto je poznać, bo, kto wie, być może wykorzystasz któryś z nich w swoim projekcie. Poniżej kilka przykładów.
Spotted pattern
W tłumaczeniu na język polski to fiksacja na konkretnych elementach. W tym wzorcu, w odróżnieniu od wzorca F, użytkownik nie zaczyna czytać od pierwszych zdań, a skupia się jedynie na wybranych elementach, które są umiejscowione w różnych miejscach interfejsu. Elementy, na które zwraca w tym wzorcu uwagę użytkownik to zazwyczaj wyróżniające się w tekście elementy wizualnie. Mogą to być pogrubione słowa, listy, linki, jak również cyfry i słowa z dużymi literami. Tutaj jednak trzeba pamiętać o tym, że to, na co zwróci uwagę użytkownik, zależy od celu jego wizyty na stronie.
Layer-cake scanning pattern
W języku polskim ten wzorzec tłumaczy się jako wzorzec skanowania tortu. Na czym polega ten tajemniczo brzmiący pattern? Nazwa nawiązuje do tortu, gdyż czytelnicy tak, jak i część osób jadających słodycze, mają tendencję do pomijania korpusu tortu, czyli w naszym przypadku ściany tekstu, a także skupiania się głównie na polewie i ciemniejszych środkach, czyli nagłówkach i podtytułach. Musimy więc pamiętać, że ludzie nie mają zazwyczaj ochoty czytać nieistotnych i nieangażujących części tekstu. Co szczególnie ważne: nagłówki dają odbiorcom wgląd to, co jest omawiane w kolejnych akapitach.
Commitment pattern
W języku polskim ten wzorzec tłumaczymy jako wzorzec zaangażowania. Jako projektanci musimy być świadomi, że tylko nieliczni odbiorcy treści są na tyle zmotywowani, aby przeczytać i przejrzeć dokładnie całą zawartość interfejsu, jednak i tacy się znajdą. Stąd też wziął się commitment pattern – w tym wzorcu użytkownik koncentruje się na wszystkich (lub większości słów), jakie znajdują się w tekście. Pojawia się, gdy użytkownicy są bardzo zainteresowani lub zmotywowani do przeczytania treści przedstawianej na stronie. Chcąc uwzględnić ten wzorzec w swoich projektach, należy pamiętać, że zrozumienie tekstu jest lepsze, gdy treści są dobrze podzielone, oznaczone nagłówkami czy gdy posiadają punktory. Skupienie się na ścianach tekstu może być bardzo trudne nawet dla zaangażowanych użytkowników.
Podsumowując: pamiętaj, że użytkownicy, odwiedzający Twoją stronę, zwracają uwagę na jej całokształt. Wszelkie niejasne teksty z kilkunastoma rodzajami formatowania, nieczytelne fonty czy przesadzone i liczne animacje zniechęcają ich. Użytkownicy już od początku wejścia na stronę analizują każdy, nawet najmniejszy szczegół i – choć często robią to nieświadomie – łatwo ich spłoszyć. Trzeba zdawać sobie sprawę, że na zachowanie człowieka wpływa ogromna liczba czynników. Powyżej opisałem najbardziej powszechne wzorce skanowania wzrokiem stron internetowych, jednak to wcale nie oznacza, że tylko takie wzorce są używane. Otóż Twoi odbiorcy mogą skanować i przeglądać strony według własnych wzorów, które nie mają nic wspólnego z opisanymi w tym artykule. To Ty decydujesz, jak szczegółowo odbiorcy zapoznają się z zawartością strony, i od Ciebie zależy ta zawartość. To od układu, jaki zaproponujesz, będzie zależeć efektywne korzystanie z danego produktu, a dzięki odpowiedniemu umiejscowieniu CTA możesz odpowiednio zwiększyć (lub zmniejszyć ;)) liczbę rejestracji czy zakupów dokonanych przez odwiedzających.