UX w praktyce: Jak projekt Twojej witryny zmienia klik w działanie ebook

Wprowadzenie

Czy wiesz, że to, jak zaprojektowana jest Twoja strona, może decydować o tym, czy zwykły klik zamieni się w pożądane działanie użytkownika? Innymi słowy – dobry UX (User Experience) może sprawić, że odwiedzający Twoją witrynę z przyjemnością wykona na niej to, na czym Ci zależy (np. zakup, rejestrację, kontakt), a zły UX – że ucieknie z frustracją. Ten e-book jest skierowany do początkujących właścicieli stron internetowych: małych firm, blogerów, twórców portfolio, właścicieli sklepów online czy osób tworzących proste landing page’e. Napisany prostym językiem, bez technicznego żargonu i marketingowej nowomowy, krok po kroku wprowadzi Cię w świat UX w praktyce.

Znajdziesz tu wyjaśnienie, czym jest UX i dlaczego warto poświęcić mu uwagę już od pierwszych dni istnienia Twojej strony. Dowiesz się, jak użytkownicy naprawdę przeglądają witryny – zdradzimy ich nawyki i to, na co zwracają uwagę, a co ignorują. Przejdziemy przez różne typy stron (firmowe, blogi, e-commerce, landing page i portfolio) i podpowiemy, na co uważać w każdym z tych przypadków. Pokażemy listę rzeczy, które możesz poprawić samodzielnie od zaraz, oraz omówimy najczęstsze błędy UX, byś mógł ich uniknąć. Wskażemy darmowe narzędzia pomocne w sprawdzeniu użyteczności Twojej witryny. Pokażemy także, jaki wpływ ma UX na konwersję, lojalność klientów i SEO – czyli dlaczego opłaca się dbać o doświadczenia użytkowników.

Na koniec przygotowaliśmy dla Ciebie część praktyczną: ćwiczenia, które pomogą Ci spojrzeć na własną stronę oczami użytkownika (m.in. test 5-sekundowy oraz analiza CTA). W dodatkach znajdziesz wygodne checklisty – listę kontrolną do audytu strony, listę pięciu prostych zmian poprawiających UX oraz szablon do oceny własnej witryny. Wszystko po to, abyś mógł od razu zastosować zdobytą wiedzę w praktyce.

Gotowy? Zanurzmy się więc w świat UX i zobaczmy, jak zmienić klik w działanie!

Rozdział 1: Czym jest UX i dlaczego jest ważny

UX (User Experience) to po polsku doświadczenie użytkownika. Jest to szerokie pojęcie obejmujące wszystko, co odczuwa i czego doświadcza osoba korzystająca z Twojej strony internetowej (lub innego produktu cyfrowego). Mówiąc prościej – UX to wrażenia użytkownika: czy łatwo mu się korzysta z witryny, czy szybko znajduje potrzebne informacje, czy interakcje są dla niego intuicyjne i przyjemne. UX obejmuje m.in. wygląd strony, nawigację, układ elementów, szybkość działania i funkcjonalność – wszystkie te czynniki składają się na końcowe odczucie, z jakim użytkownik opuszcza Twoją witrynę.

Przykład z życia: wyobraź sobie sklep stacjonarny. Wchodzisz do środka i rozglądasz się. Jeśli alejki są wyraźnie oznaczone, produkty ułożone logicznie, obsługa uśmiechnięta, a przy kasie nie musisz stać godzinami – wychodzisz zadowolony i pewnie wrócisz na zakupy. To jest dobre doświadczenie użytkownika. Jeśli jednak w sklepie panuje bałagan, nic nie możesz znaleźć, a sprzedawca ignoruje pytania – prawdopodobnie szybko zniechęcisz się do zakupów tam ponownie. Podobnie działa to w świecie stron internetowych. UX Twojej witryny to właśnie zapewnienie odwiedzającym tak pozytywnego i satysfakcjonującego doświadczenia, jak to tylko możliwe.

UX a UI – czy to to samo?

Często obok skrótu UX pojawia się termin UI (User Interface), czyli interfejs użytkownika. Warto na starcie wyjaśnić różnicę: UI to wygląd i elementy interfejsu, z którymi użytkownik wchodzi w interakcję (przyciski, menu, pola formularzy, grafiki), natomiast UX to całość doświadczenia – a więc UI jest jednym z elementów składających się na UX. Można powiedzieć, że UI to “skórka” strony, a UX – to, co jest pod nią: struktura, logika, płynność działania, emocje towarzyszące użytkownikowi. Dla dobrego UX potrzebne jest więc zarówno estetyczne i przejrzyste UI, jak i przemyślane funkcjonalności oraz wygoda obsługi.

Dlaczego UX jest kluczowy?

Możesz zapytać: po co w ogóle przejmować się UX-em? Czy nie wystarczy mieć ładną strony internetową i ciekawą ofertę? Okazuje się, że UX ma realny wpływ na sukces Twojej witryny i biznesu – wpływa na szereg ważnych wskaźników:

Większa lojalność klientów – Gdy korzystanie z Twojej strony to przyjemność, ludzie będą chcieli do niej wracać. Pozytywne doświadczenia budują zaufanie i przywiązanie. Użytkownik, który z łatwością znajduje to, czego szuka, chętniej ponownie odwiedzi stronę i poleci ją innym. Z kolei złe doświadczenia (np. strona frustracji) sprawiają, że nawet zainteresowany klient może zniechęcić się na dobre. Aż 88% internautów deklaruje, że rzadziej wróci na stronę po złym doświadczeniu – to prawie 9 na 10 osób!

Wyższe konwersje (realizacja celów) – Dobre UX potrafi znacząco zwiększyć konwersję. Jeżeli strona jest intuicyjna, a proces np. zakupu czy rejestracji – prosty i przyjazny, więcej osób doprowadzi swoje działania do końca. Użytkownicy chętniej klikną “Dodaj do koszyka” lub “Wyślij formularz”, jeśli nic ich po drodze nie frustruje. Badania wskazują, że lepszy design interfejsu może zwiększyć współczynnik konwersji nawet o 200%, a ulepszenie UX – nawet o 400%. Innymi słowy, dzięki dbałości o UX możesz potencjalnie zdobyć kilka razy więcej klientów z tej samej liczby odwiedzających!

Niższe koszty obsługi i wsparcia – Gdy strona jest zaprojektowana z myślą o użytkowniku, ten łatwiej samodzielnie znajdzie informacje i rozwiąże problemy. W efekcie rzadziej musi dzwonić lub pisać z pytaniami do firmy. To oznacza mniej pracy dla działu obsługi klienta i realne oszczędności. Krótko mówiąc, intuicyjna witryna “obsługuje się sama”, a Ty możesz poświęcić mniej czasu (lub pieniędzy) na tłumaczenie klientom oczywistości.

Lepszy wizerunek marki – Strona dopracowana pod kątem UX świadczy o profesjonalizmie i trosce o klienta. Użytkownicy podświadomie łączą dobre doświadczenia z pozytywnym odbiorem marki. Jeśli Twoja witryna jest przyjazna, szybka i pomocna, firma wydaje się bardziej godna zaufania i nowoczesna. Natomiast chaos, błędy i niechlujstwo na stronie mogą negatywnie rzutować na postrzeganie całego biznesu.

Większa efektywność wewnętrzna – Choć skupiamy się głównie na użytkownikach zewnętrznych, pamiętaj, że zasady UX można stosować również do narzędzi wewnętrznych (np. intranetu, systemu CMS). Usprawnienia UX mogą poprawić procesy w firmie, oszczędzając czas i zasoby. Ale nawet patrząc tylko na stronę dla klientów – dobrze zaprojektowana, nie wymagająca ciągłego “gaszenia pożarów” (np. tłumaczenia klientom jak coś zrobić), pozwala Ci skoncentrować się na rozwijaniu biznesu, zamiast na wiecznym naprawianiu problemów.

Z drugiej strony, ignorowanie UX może słono kosztować. Użytkownicy w sieci są niecierpliwi i mają masę innych opcji – jeśli Twoja strona ich frustruje, po prostu pójdą do konkurencji. Pomyśl o sobie: ile razy zrezygnowałeś z zakupów lub wypełnienia formularza, bo coś było zbyt skomplikowane lub wolno działało? UX to właśnie sztuka uniknięcia takich sytuacji.

W kolejnych rozdziałach zanurzymy się głębiej w konkretne aspekty UX. Na początek zobaczmy, jak przeciętny internauta przegląda strony internetowe – bo zrozumienie nawyków użytkowników to podstawa, by projektować dla nich lepsze doświadczenia.

Rozdział 2: Jak użytkownicy widzą witryny

Wyobraź sobie, że wchodzisz na nową stronę internetową. Ile czasu dajesz jej, żeby Cię zainteresowała, zanim klikniesz “wstecz” lub zamkniesz kartę? Większość ludzi potrzebuje zaledwie ułamka sekundy, by wyrobić sobie pierwsze wrażenie. Badania pokazują, że około 50 milisekund (0,05 sekundy) wystarczy, by użytkownik ocenił, czy strona mu się podoba i czy zostanie na niej dłużej. To mniej więcej tyle, co mrugnięcie okiem! Pierwsze wrażenie często opiera się na wyglądzie – layout, kolorystyka, obrazek w tle, czy strona wygląda na nowoczesną i profesjonalną. Ale co dzieje się potem, gdy już postanowi zostać choć chwilę?

Skanują, nie czytają – czyli F-pattern i przeglądanie wzrokiem

Wbrew temu, co może nam się wydawać jako autorom stron, użytkownicy rzadko czytają całą treść od deski do deski. W rzeczywistości zazwyczaj przeskanowują wzrokiem stronę, wyłapując tylko co ważniejsze elementy. Już w 2008 roku analizy wskazywały, że przeciętny internauta podczas wizyty czyta maksymalnie 28% tekstu na stronie, a zwykle bliżej 20%. Resztę po prostu pomija lub prześlizguje się wzrokiem. Dzieje się tak, bo w sieci jesteśmy zalewani informacjami – nauczyliśmy się szybko oceniać, czy coś jest dla nas istotne.

Jednym z najbardziej znanych odkryć w badaniach użyteczności jest tzw. wzorzec czytania w kształcie litery F (ang. F-shaped pattern). Polega on na tym, że użytkownicy przeglądają stronę internetową wzrokiem tworząc kształt przypominający literę F. Co to dokładnie znaczy? Oto typowy schemat:

Najpierw rzut oka poziomo po górnej części strony – użytkownik czyta (lub skanuje) pierwszy nagłówek, kilka pierwszych zdań albo menu u góry. To pozioma linia na górze litery “F”.

Następnie przesuwa wzrok nieco niżej i znowu skanuje poziomo krótszy fragment – np. podtytuł lub wyróżniony akapit. To tworzy drugą, krótszą linię poziomą (środek “F”).

Wreszcie przesuwa się w dół wzdłuż lewej strony ekranu – szybko przelatuje wzrokiem w dół listę punktów lub początek kolejnych akapitów. To pionowa kreska litery “F” po lewej stronie.

Innymi słowy, użytkownicy dużo uwagi poświęcają górze strony i jej lewej stronie, natomiast im niżej i dalej w prawo, tym uwagi mniej. Rzadko kto czyta linijka po linijce cały akapit do końca, zwłaszcza jeśli jest on szeroki. W praktyce taki sposób patrzenia powoduje, że na mapach cieplnych (heatmapach) obrazujących skupienie uwagi, widać coś na kształt litery F – czerwone (najczęściej oglądane) obszary u góry i po lewej, a reszta coraz mniej intensywna.

Przykładowa mapa cieplna z badania eyetracking (śledzenia ruchu oczu) pokazująca schemat przeglądania strony w kształcie litery “F”. Czerwony kolor oznacza miejsca, na które użytkownicy patrzyli najczęściej. Widać wyraźnie poziome “linie” na górze i nieco niżej oraz pionowy “pas” po lewej stronie – stąd nazwa F-pattern.

Co to oznacza dla Ciebie? Musisz projektować i pisać treści z uwzględnieniem tego, że użytkownik najpierw patrzy na górę strony i na lewe krawędzie tekstu. Kilka praktycznych wskazówek wynikających z F-pattern:

Umieść najważniejsze informacje u góry strony – ponieważ to tam pada pierwsze spojrzenie. Jeśli użytkownik w ciągu pierwszych sekund nie dostanie sygnału, o co chodzi w witrynie i co może na niej zrobić, prawdopodobnie straci zainteresowanie. Dlatego kluczowe rzeczy (np. nagłówek z wartością oferty, główny komunikat, menu nawigacyjne) powinny znajdować się wyraźnie w górnej części, tzw. above the fold (czyli zanim trzeba zacząć przewijać stronę). Pierwsze dwa akapity powinny zawierać najważniejszy przekaz, bo użytkownik może nie dotrzeć wzrokiem do czwartego czy piątego. W jednym z zaleceń ekspertów NN/g czytamy: “pierwsze dwa paragrafy muszą zawierać najważniejsze informacje; zaczynaj nagłówki i akapity od słów niosących znaczenie…” – to właśnie dlatego, że późniejsze linijki mogą już zostać tylko przeskanowane pobieżnie.

Twórz chwytliwe, informacyjne nagłówki i początki zdań