Dziś chciałbym przedstawić Ci kolejny wzorzec projektowy, według którego designerzy mogą tworzyć swoje projekty. Już wcześniej na jego temat pisałem w artykule pt. „Pattern – ogólnie”, dziś jednak chciałbym, abyśmy przyjrzeli się mu nieco bliżej. Zanim projektant wybierze odpowiedni wzorzec do swojego projektu, musi ustalić sposób, w jaki najbardziej prawdopodobne jest, że użytkownicy wyświetlą i będą skanować ten projekt. Wzorzec F jest bardzo ciekawym wzorcem, odzwierciedlającym sposób czytania – już na samym początku zachęca się użytkownika do skupienia uwagi, w lewym górnym rogu umieszczając największą wartość i najciekawsze treści. Z punktu widzenia projektanta dwa pierwsze akapity w bloku treści są najważniejsze. Jeśli akapit nie przykuje uwagi odwiedzającego, ten szybko opuści stronę. Treść zamieszczona w pierwszym punkcie styku użytkownika ze stroną ma go zaangażować do śledzenia dalszych elementów.
Jak wygląda wzorzec F w praktyce?
Po wejściu na stronę uwaga człowieka skupia się na jej górnej części – po to, aby przeczytać najważniejsze nagłówki. Kolejnym etapem jest skierowanie wzroku ku lewej stronie, aby wyłapać wszelkie numeracje czy punktory. Na końcu uwaga znów powraca w prawą stronę, aby przeczytać pogrubiony (odznaczający się) tekst. Podczas wdrażania wzorca F trzeba pamiętać, że wzorzec ten przybiera różne kształty. Co mam na myśli? Czasem odbiorcy Twoich treści będą czytać tylko jedną poziomą linię, co właściwie bardziej będzie przypominało odwróconą literę „L”, inni z kolei swoją uwagę skupią na trzeciej sekcji i podczas takiego czytania powstanie litera „E”. Wzorzec ten nie zawsze zawiera dokładnie trzy części. Kiedy użytkownicy są zaangażowani w czytanie, czyli gdy znajdą coś, co im się podoba, zaczynają czytać normalnie, a więc tworzą poziome linie.
W jakich projektach stosować wzorzec F?
Używamy go we wszystkich projektach, w których treści i informacji jest dużo, ponieważ jest to naturalny sposób czytania i tak użytkownikom jest po prostu łatwiej. Zatem możemy śmiało uznać, że wzorzec ten jest przeznaczony dla stron obfitujących w treści, szczególnie te tekstowe. Pamiętaj jednak, aby umieszczać na początku najważniejsze treści ze względu na malejące zaangażowanie w tym wzorcu.
Projektowanie zgodne ze wzorcem F
Aby wykorzystać wzorzec F, rozpoczynamy projektowanie od lewej strony. Dokładniej: od lewego górnego rogu, w którym zazwyczaj ustawia się logo. Po przeciwnej stronie ustawiamy wyrazisty akcent, który zwróci uwagę użytkowników (można umieścić tam np. zdjęcie ludzkiej twarzy, które z całą pewnością przyciągnie wzrok, lub animację). Co dalej? Kolejny element stawiamy po lewej stronie tak, aby zarysować pionową linię – musi on się znaleźć poniżej zdjęcia. Poniżej tego punktu umieszczamy znów kolejne informacje, tym razem może być ich więcej, jednak warto zastosować tutaj inny font lub inną kolorystykę. Taki zabieg pozwoli zbudować hierarchię informacji i warstwy komunikacji. Na koniec użytkownicy skanują lewą stronę treści w ruchu pionowym.
F-pattern daje projektantowi większą kontrolę nad tym, co jest widziane. Należy pamiętać, aby jeszcze na początku projektowania nadać treściom odpowiedni priorytet, co znacznie ułatwi rozmieszczenie najważniejszych elementów.
Dlaczego wzorzec F?
Wybór wzorca F do Twojego projektu jest równoznaczny z tym, że pomoże Ci on stworzyć projekt z dobrą hierarchią wizualną, który ludzie będą mogli bez trudu skanować. Tutaj muszę zaznaczyć, że układ w kształcie litery F jest wygodny dla większości zachodnich czytelników. Wynika to z faktu, że Ci odbiorcy przez całe życie czytali od góry i od lewej do prawej.
Na koniec warto jeszcze dodać, że należy uważać na nagłówki – jeśli ich treść będzie mało inspirująca czy nudna, szybko można utracić swojego odbiorcę. Wzorzec F charakteryzuje się powtarzalnością, a co za tym idzie – monotonią. Dlatego trzeba przełamać tę schematyczność, wprowadzając elementy, które będą przykuwać uwagę odbiorcy, a także utrzymają jego zaangażowanie.