maciek_loch [11:42 AM] ```

Spis treści >> Idealny lauout

Idealny layout strony – dla użytkownika, a nie dla krytyka sztuki

Piotr Sobieszczak

Intuicyjna nawigacja, zrozumiałe działanie przycisków i łatwo dostępne najważniejsze informacje stanowią o sile użyteczności dobrze zaprojektowanej strony internetowej. Przejrzystość i czytelność zdecydowanie zwiększają pozytywne odczucia podczas kontaktu potencjalnego klienta z marką. Kluczem jest zatem bezcenna wiedza o tym, co sprawia największy problem. Aby ją zdobyć należy nieustannie „podglądać" użytkownika.

Strona ideał – kluczowe zasady

Stworzenie czytelnej strony sprawia, że użytkownicy nie będą męczyć się podczas jej przeglądania, a znajdowanie interesujących informacji nie będzie problematyczne. Tym właśnie w skrócie jest web usability, którego podstawową zasadą jest orientacja na użytkownika.


Na kodeks web usability składa się przede wszystkim:

Przejrzystość – strona powinna być estetyczna i posiadać „przyjazne” kolory.

Intuicyjność – użytkownicy cenią sobie przewidywalność i umieszczanie kluczowych elementów i przycisków w „klasycznych miejscach. Moduł logowania, rejestracji, powrotu do strony głównej, dane kontaktowe firmy to składniki, których znalezienie powinno zajmować jak najmniej czasu.

Przyjazność użytkownikowi (user friendly) – zbudowana "dla", a nie "przeciwko" użytkownikowi .

Funkcjonalność – krótkie proste formularze, zrozumiałe działanie przycisków akcji (tzw. call to action), znajomo brzmiące polecenia i komunikaty.

Prędkość działania - możliwie krótki czas ładowania się strony.


Podobnie jest w przypadku landing page. Ważne jest, aby wszystkie elementy współgrały ze sobą, cel strony był jednoznacznie określony, a jego realizacja bezproblemowa.


Weryfikacja tego czy strona faktycznie jest użyteczna i czy powyższe zasady zostały w pełni zastosowane odbywała się dotychczas przede wszystkim poprzez badania fokusowe, które miały na celu sprawdzenie poziomu satysfakcji użytkowników. W tym celu zatrudniani byli wykwalifikowani testerzy.


Wygoda przeglądania treści musi być poddawana sprawdzianom na każdym etapie prac, jest to niekończący się proces. W jego centrum znajduje się człowiek, a konkretnie doświadczenia związane z surfowaniem po stronie. Dokonując analizy użyteczności i optymalizując stronę, należy zatem wziąć pod uwagę przyzwyczajenia, preferencje oraz ograniczenia internauty, a także szybkość wczytywania zawartości serwisu.

Metody badań

Jeszcze do niedawna popularnym sposobem analizy zachowań użytkowników był eye tracking, polegający na wykorzystaniu specjalistycznej aparatury w celu nagrywania ruchów gałek ocznych. W tym celu należało przygotować odpowiednią i drogą aparaturę, zrekrutować ludzi do testów i dopiero wykonać pomiar, a następnie zakończyć proces. Co więcej osoba poddawana badaniu była tego świadoma co oznaczało, że zachwiany został współczynnik naturalnych, spontanicznych reakcji. Obecnie dostępne narzędzia służące do pomiaru analizy zachowania użytkowników (np. Analyzeo) pozwalają na wykonywanie badań bez wiedzy i zgody użytkowników. Co ważne, ich wynik dostępny jest praktycznie od ręki.


Zalet mousetrackingu jest wiele, ale niewątpliwie do najważniejszych należą prostota instalacji usługi (wklejenie skryptu w kod html strony zajmuje maksymalnie 2 minuty) i interpretacja wyników. W celu odczytania danych nie trzeba tworzyć działu analitycznego i zatrudniać specjalistów. Raporty wykonywane przy użyciu narzędzi mousetrackingowych generują zebrane informacje w postaci intuicyjnych map kolorów (heatmap). I tak np. na załączonym poniżej przykładzie widać, że użytkownik skupia się najpierw na lewej, górnej części ekranu, skąd następnie jego uwaga podąża na prawo. Po jakimś czasie pada ona znów na lewo i podąża w dół. Użytkownik rysuje na ekranie niewidzialną ścieżkę w kształcie litery F (F-pattern). Badania wykazują, że F-pattern jest generalnym wzorem standardowych zachowań odbiorców treści internetowych. Stosując się do niego, warto zadbać, by elementy mające przyciągnąć klientów w pierwszej kolejności znalazły się w tym miejscu witryny, na które kierowane jest pierwsze spojrzenie. Punktem tym jest lewa górna część strony.

Uwaga użytkowników układa się w literę "F".

dobry landing layout strony heatmapa

Trzeba jednak pamiętać, że nie wszyscy odbiorcy i nie na każdej stronie WWW zachowują się w identyczny sposób. Inaczej bowiem patrzą osoby surfujące po sieci dla zabicia czasu, a jeszcze inaczej użytkownicy szukający konkretnych informacji lub produktów. Jak wykazał inżynier firmy Dell, Sav Shrestha, o ile wzrok człowieka surfującego bez konkretnego celu rzeczywiście wędruje po umownej ścieżce litery F, o tyle internauta poszukujący konkretnych danych stara się „objąć” oczami całą stronę Skanuje on stronę, wychwytując przyciągające informacje, takie jak wyróżnione fragmenty tekstu, które znajdują się lewej i po części w prawej.


Moustracking pozwala jednak nie tylko na określenie, które części strony są atrakcyjne, ale również które elementy należy poprawić.


Przykład analizy przy użyciu raportu z kliknięć (clickmapa). Clickmapy służą do obrazowania statystyk klikalności w konkretne pola na stronie – zarówno hiperłączy, jak i nieklikalnych. Dzięki temu widać, że użytkownicy intuicyjnie chcą by po ich działaniu została wywołana jakaś akcja – np. pop-up lub nowa podstrona.

Rozkład klików zwizualizowany za pomocą clickmapy

dobry landing layout strony klikmapa

Pomocna w ramach analizy jest również mapa przewijania (scrollmapa) dzięki, której w łatwy sposób można ocenić, jak daleko „sięgają” scrollem użytkownicy i tym samym gdzie kończy się poświęcana stronie uwaga. Wiedzę tę można wykorzystać np. do podniesienia wyżej pola formularza zbierającego dane lub sekcji reklamowych.

Przykład scrollmapy – umieszczenie reklamy wyżej pozwoli na większy zasięg

dobry landing layout strony scrollmapa

Wielokrotnie usłyszeć można zarzuty, że metoda eyetrackingowa jest rzeczywiście kosztowna, ale za to daje bardziej precyzyjne wyniki ponieważ bada ze uwagę ze 100% skutecznością nagrywając gałkę oczną. Okazuje się, że argumenty te mają oczywiście swoje racje, ale badania pokazują, że korelacja pomiędzy tym jak użytkownik klika i jak patrzy wynosi około 87%. Bierze się to stąd, że często przeglądając treści klikamy lub podążamy wzrokiem za kursorem, który wyznacza nam kierunek czytania.

Jak przygotować landing page?

Z problemem rozmieszczenia elementów i treści na landing page spotyka się wielu autorów. W większości kopiują oni gotowe rozwiązania, w postaci szablonów oferowanych przez wykorzystywany edytor landing page.

Nie zawsze należy polegać na gotowcach. Projektując landing page warto pamiętać o ogólnych zasadach web usability. Nie należy natomiast zapominać o specyfice stron docelowych i ich celach:

  • Lewy narożnik jest miejscem, w którym warto umieścić logo.
  • Najbardziej widocznym elementem tekstowym powinien być nagłówek, który jest tożsamy z treścią przekazu marketingowego.
  • Poniżej nagłówka warto umieścić dodatkową treść, która zachęci odwiedzającego do skonwertowania.
  • Po prawej stronie należy ulokować formularz, wraz z czytelnym call-to-action.

Całość widoczna na pierwszym ekranie, tak jak w przypadku badań mousetrackingowych, kształtem przypomina literę F (F-pattern).

dobry landing layout strony landingi

Rozmieszczenie elementów na stronie internetowej ma znaczenie

Typowe elementy strony – czyli nagłówek, zasadnicza treść, menu z odnośnikami do podstron oraz stopka – powinny być rozmieszczone zgodnie z hierarchią ważności poszczególnych elementów oraz części strony, a tę wyznacza przedstawiony wcześniej mechanizm postrzegania.


Ogólne zasady mówią więc, że lewy górny narożnik zarezerwowany jest dla logo firmy. Ma to szczególne znaczenie w przypadku stron pełniących funkcję wizytówki firmy oraz sklepów internetowych. W to miejsce wzrok internauty trafi z pewnością, a tym samym szanse na zapamiętanie marki są duże. Po prawej stronie często umieszcza się link do strony logowania lub okno wyszukiwarki np. produktów. Wyraźnie widoczne powinny być też linki prowadzące do danych kontaktowych, informacji o zasadach kupowania, współpracy czy promocjach. Poniżej należy umieścić wycentrowane menu główne, a po lewej stronie menu podręczne, które nie powinno być zbyt długie. Najlepiej zaprojektować podmenu w postaci np. listy rozwijanej niż zbyt długą kolumnę przycisków. W przypadku sklepów internetowych należy przede wszystkim przemyśleć kwestię kategorii produktów i zaprojektować menu obejmujące ich podstawowe grupy oraz podmenu uwzględniające bardziej szczegółowy zakres asortymentu. Podstawowe kategorie produktów powinny być widoczne z poziomu strony głównej, zaś kolejne podkategorie wyświetlać się po kliknięciu w nazwę nadrzędną.


W projektowaniu strony dobrą praktyką jest przestrzeganie zasady: od ogółu do szczegółu, która porządkuje informacje i zarazem ułatwia nawigowanie.

Dobrze wykorzystać pierwszą stronę

W przypadku serwisów informacyjnych sprawa wygląda inaczej. Specyfika takich stron wymusza dużą ilość informacji tekstowych. Widać jednak, że najważniejsze i najświeższe informacje umieszczane są bliżej lewej krawędzi strony i tuż poniżej głównego menu, zaś lista pozostałych informacji znajduje się po prawej stronie lub pod wiadomościami głównymi.

Portal wp.pl najważniejsze wiadomości prezentuje w wyraźny sposób.

dobry landing layout strony wp

Czytelność strony zwiększa pozostawianie prześwitów między jej elementami, jednak niezbyt dużych, ażeby poruszanie się po stronie nie wymagało zbyt długiego przewijania. Dobrą zasadę stanowi także unikanie rozmieszczania zbyt wielu treści w pionie tak, by ich przejrzenie wymagało przewinięcia strony najwyżej kilkukrotnie.


Jeśli struktura informacji wymaga utworzenia kolejnych podstron, na przykład w sklepach internetowych, dobrym pomysłem jest opublikowanie mapy strony (site map). Powinna być ona umieszczona na oddzielnej podstronie, do której można łatwo trafić z każdego miejsca w serwisie. Użytkownik musi bowiem zawsze orientować się, w którym miejscu się znajduje i czego może się spodziewać.

Najlepsze strony – skarbiec pomysłów

O tym, jak kryterium użyteczności realizują najlepsi i jak kreatywnie traktują opisane powyżej zasady, informuje między innymi serwis awwwards.com, który może być kopalnią inspiracji dla projektantów stron. Prezentuje on również stale uaktualniane rankingi najlepiej zaprojektowanych witryn internetowych. Należy jednak pamiętać, że strona internetowa w założeniu nie ma być arcydziełem tylko przede wszystkim przejrzystym i przyjaznym miejscem pozyskiwania informacji.

Ładne, czy użyteczne?

Oczywiście gusta i potrzeby są różne i nie da się zadowolić wszystkich. Trzeba znaleźć złoty środek, to znaczy tak zoptymalizować treści zawarte na stronie oraz jej wygląd, żeby zachęcić internautę do przebywania na niej jak najdłużej. Pomocne jest to, że zachowania użytkowników stron internetowych można zmierzyć i to coraz dokładniej. Otrzymane wyniki pozwalają nam na modyfikowanie stron w taki sposób, żeby licznik odwiedzin szybko szedł w górę, a czas przebywania na stronach się wydłużał. Okazuje się bowiem, że treść, nawet wyjątkowa, to nie wszystko.

Walka o zmysły internautów

Kluczowym zmysłem w internecie jest oczywiście wzrok i to on odgrywa największą rolę w przykuwaniu uwagi odwiedzających. Efekty dźwiękowe w postaci podkładu muzycznego lub nagrań audio służą jedynie uatrakcyjnieniu i przekazywaniu pewnych treści. Na wizualny aspekt strony składają się elementy graficzne (zdjęcia i kolory) oraz typograficzne, czyli wygląd tekstu (np. wielkość i krój czcionki, podział na akapity, rozmieszczenie śródtytułów). Wszystkie one mają znaczenie. Oczywiście wizyta na stronie ma na celu poszukiwanie konkretnych informacji, ale to, jak zostaną one podane, może zachęcać do zapoznania się z daną witryną albo wręcz przeciwnie. Strony nieczytelne, przeładowane elementami graficznymi będą raczej zniechęcać użytkowników.


Znajomość sposobu, w jaki internauci czytają teksty, decyduje o metodzie ich pisania (o ich długości, dzieleniu akapitów, rozplanowaniu tytułów, kroju i rodzajach zastosowanej czcionki). Dowiedziono bowiem, że przeważnie czytamy kilka pierwszych linijek, a potem skanujemy wzrokiem tekst, wyłapując wyróżnione elementy, na przykład słowa i frazy napisane większą lub pogrubioną czcionką.

Walka o zmysły internautów

dobry landing layout strony

Strony skrojone na miarę

Dbałość o to, by witryna budziła zainteresowanie, przekształciła się obecnie w prawdziwy przemysł. Walka o uwagę internauty trwa i wykorzystuje się w niej coraz nowocześniejsze narzędzia, które niczego nie pozostawią przypadkowi. Czasy stron z dobranymi bez zastanowienia kolorami i grafiką wołającą o pomstę do nieba minęły bezpowrotnie, dlatego warto zainteresować się rozwiązaniami, które dają możliwość dogodzenia użytkownikowi.




_
Piotr Sobieszczak

Chief Marketing Officer w Analyzeo

Współzałożyciel agencji interaktywnej AlterPage i szef marketingu w Analyzeo. Szuka niekonwencjonalnych rozwiązań, dzięki czemu trafia w gusta nawet najbardziej niezdecydowanych klientów. Doświadczenie zdobywał współpracując m.in. z takimi markami jak LOT, Agora czy Eniro. Finalista m.in. Agora Startup Fest 2015, Bavaria Demo Day 2015, laureat konkursu Power of Content Marketing Awards Szpalty Roku za magazyn interaktywny Shopandmore.lot.com i nagrody głównej Ekomers 2015 z narzędziem Analyzeo w kategorii rozwiązanie IT. Autor publikacji o marketingu w sieci i analizowaniu stron www.

Chcesz dostawać informacje o kolejnych akcjach?

Wiesz już wszystko?

Wypróbuj Landingi

Zakładam konto >>
Chcesz być na bieżąco? Zapisz się na newsletter!
Zapisz mnie

Wiesz już wszystko? Wypróbuj Landingi

Zakładam konto >>
×