Dobry projektant rozumie, w jaki sposób użytkownicy przeglądają i przetwarzają informacje online, pamięta też o tym, że treści na stronie są jedynie skanowane przez użytkowników, a wiele elementów jest pomijanych. Ludzie skanują treści na różne sposoby, analizują całokształt, a uwagę zwracają na pojedyncze, interesujące ich elementy. Dzięki wiedzy o sposobie skanowania treści projektanci są w stanie podejmować dużo lepsze decyzje projektowe i umieszczać najbardziej istotne elementy na stronie w taki sposób, aby zostały one zauważone.
Czym są patterny i jakie są ich rodzaje, pisałem już w artykule „Patterny – ogólnie”, a dziś chciałbym przybliżyć Ci jeden z nich, a mianowicie (jak można domyślić się po tytule) Z-pattern. Jednym z podstawowych sposobów oddziaływania projektantów na użytkowników i zwracania uwagi na najważniejsze elementy strony jest projektowanie właśnie w zgodzie z tym wzorcem.
Dlaczego Z?
Idąc za śladem litery „Z”, widzimy, że jest to naturalna droga, jaką pokonuje oko użytkownika, czytając. Schemat ten rozpoczyna się od lewej strony do prawej, następnie przechodzi z góry na dół, zarysowując literę „Z”. Oznacza to, że podczas czytania ludzie, przechodząc z lewego do prawego rogu, zarysowują niewidzialną poziomą linię, a następnie – chcąc powrócić do lewego rogu – przesuwają wzrok po skosie, aby znów przesunąć wzrok od lewej strony do prawej.
W jakich projektach stosować wzorzec Z?
Tworzenie strony internetowej za pomocą Z-patternu pomaga wytworzyć projektantom wizualną hierarchię, za którą ludzie prawdopodobnie będą podążać. Dlatego też wzorzec ten jest doskonałą opcją układu dla projektów stron docelowych otwierających się po kliknięciu. Idealnie nadaje się on do stron reklamowych, jak i pod landing page. Dlaczego? Ponieważ ten wzorzec powinien zawierać mało treści, a za to bardzo wyraźne komunikaty, które będą zwracać uwagę użytkowników i nawoływać do działania.
Projektowanie zgodne ze wzorcem Z
Po pierwsze: musisz zadbać, aby górna pozioma linia (górna linia Z) zawierała elementy, na których Twój odbiorca powinien skupić swoją uwagę w pierwszej kolejności. Z kolei na linii przekątnej niech znajdą się informacje, które są związane z głównym CTA (call to action), czyli nawołaniem do działania. Na ostatniej linii powinny zaś znaleźć się najmocniej wyeksponowane elementy, wzywające do działania. Dzięki stworzeniu stron docelowych według układu Z-pattern możemy doprowadzić do większej liczby konwersji, ponieważ mamy częściową kontrolę nad tym, jak poruszają się oczy odbiorcy i które elementy zwracają jego uwagę.
Na jednym Z się nie kończy
Czasem Z-pattern nie kończy się tylko na pojedynczym „Z” – może być ono rozszerzone, tym samym tworząc serię „zetek”. Ten schemat znany jest również pod nazwą Zig-Zag. Tak powstaje seria wzorców zamiast jednego dużego wzorca. Przypomina to tradycyjny styl czytania, ponieważ czytelnik będzie kontynuował ruch w prawo, a następnie trochę w dół i z powrotem w lewo przed rozpoczęciem kolejnego poziomego ruchu w prawo ponownie.
Wzór Złotego Trójkąta
To jeszcze jeden ze schematów, wywodzących się z Z-pattern. Jeśli weźmiemy pierwszy poziomy i pierwszy ukośny ruch, a następnie domkniemy kształt, otrzymamy trójkąt, którego kąt prosty jest górnym/lewym rogiem. Gdy otrzymamy trójkątny obszar, umiejscowiony na górze strony, wyznaczymy obszar najbardziej widoczny. Według tego wzoru najważniejsze informacje powinny zostać umieszczone wewnątrz niego.
Na koniec muszę dodać, że Twoim zadaniem jako projektanta jest zrozumieć odbiorców i przyszłych użytkowników. Twoim celem nie jest projektowanie pięknych i efektownych interfejsów (choć i te warunki możesz spełniać), ale muszą być przede wszystkim efektywne. Pamiętaj również o badaniach – tutaj przychodzą nam na pomoc rozwiązania eyetrackingowe. Eye-tracking pozwoli na stworzenie mapy cieplnej i zwizualizuje skupienie użytkowników. Dzięki temu sprawdzisz, czy udało Ci się zastosować efektywny wzorzec i czy faktycznie Twoi użytkownicy skupiają wzrok na elementach, na których zależało Ci najbardziej.