Ładna strona to dopiero początek. Co robi dobry UX?
Strona może wyglądać świetnie i jednocześnie utrudniać kontakt z firmą. Przyczyna często tkwi w drobiazgach: niezrozumiałej nazwie usługi, braku ważnej informacji lub formularzu, który wymaga zbyt wiele. UX pomaga zobaczyć te przeszkody z perspektywy klienta.
01 / Hierarchia treści
Prosta droga do kontaktu.Rozumiem → Sprawdzam → Wybieram → PytamSpis treści · 6 części
01UX strony internetowej: co właściwie oceniamy?02Pierwszy ekran powinien pomóc się zorientować03Informacje powinny pojawiać się przed decyzją04Formularz powinien ułatwiać rozpoczęcie rozmowy05Zrób prosty test, zanim przebudujesz całą stronę06Co mierzyć po poprawkach?Najważniejsza myśl
Dobry UX ułatwia wykonanie konkretnego zadania. Oceniaj stronę, przechodząc ścieżkę klienta, a nie oglądając wyłącznie jej pierwszy ekran.01. UX strony internetowej: co właściwie oceniamy?
UX, czyli doświadczenie użytkownika, obejmuje to, jak człowiek rozumie stronę i jak mu się z niej korzysta. UI dotyczy interfejsu: między innymi przycisków, typografii, kolorów i układu elementów. Te obszary mocno się łączą, ale atrakcyjny wygląd sam w sobie nie potwierdza użyteczności.
Przyjrzyjmy się fikcyjnej firmie organizującej warsztaty ceramiczne. Jej strona ma piękne fotografie i przycisk „Odkryj doświadczenie”. Użytkownik szuka jednak czegoś bardzo konkretnego: warsztatu dla dwóch osób w sobotę, bez wcześniejszego doświadczenia. Dopóki nie znajdzie terminu, ceny i informacji o poziomie zajęć, trudno mu zdecydować o zapisie.
Dla tej firmy sensownym zadaniem testowym będzie: „Znajdź zajęcia dla początkujących w najbliższy weekend i sprawdź, jak zarezerwować dwa miejsca”. Ocena oparta na tym zadaniu daje bardziej użyteczny wynik niż pytanie „Czy podoba Ci się strona?”.
02. Pierwszy ekran powinien pomóc się zorientować
Na początku sprawdź, czy odbiorca rozpoznaje ofertę, miejsce świadczenia usługi i możliwy następny krok. Nie każda firma potrzebuje identycznego nagłówka. Potrzebuje jednak informacji odpowiadającej sytuacji klienta.
W przykładzie warsztatów zamiast hasła „Odkryj swoją kreatywną stronę” można przetestować „Warsztaty ceramiczne dla początkujących w Warszawie”. Niżej: czas trwania, informacja o materiałach oraz przycisk „Sprawdź terminy”. Oryginalne hasło może zostać jako element charakteru marki, ale nie powinno być jedynym opisem oferty.
Warto również dopasować wejście do źródła ruchu. Osoba klikająca reklamę konkretnego warsztatu powinna trafić do informacji o tym warsztacie. Odesłanie jej na ogólną stronę główną dokłada poszukiwanie czegoś, co już wybrała.
03. Informacje powinny pojawiać się przed decyzją
Rozpisz pytania, które trzeba rozstrzygnąć przed kontaktem lub zakupem. W przypadku warsztatów mogą to być: poziom trudności, długość zajęć, lokalizacja, dostępne terminy i zawartość ceny. Następnie sprawdź, gdzie na stronie znajduje się każda odpowiedź.
| Pytanie odbiorcy | Miejsce odpowiedzi | Następny krok |
|---|---|---|
| Czy to dla początkujących? | Początek opisu warsztatu | Poznanie programu |
| Czy pasuje mi termin? | Lista dostępnych terminów | Wybór zajęć |
| Co obejmuje cena? | Przy cenie i zapisie | Rezerwacja |
| Co, jeśli mam pytanie? | Obok formularza | Kontakt z organizatorem |
To przykładowe mapowanie, a nie obowiązkowy układ każdej witryny. Jego celem jest sprawdzenie, czy ważne informacje są dostępne wtedy, gdy ktoś ich potrzebuje.
Nielsen Norman Group opisuje między innymi zasadę rozpoznawania informacji zamiast zmuszania użytkownika do ich zapamiętywania [1]. Praktyczne zastosowanie: przy rezerwacji pokaż wybrany termin i nazwę warsztatu, zamiast oczekiwać, że klient będzie pamiętał je z poprzedniego ekranu.
04. Formularz powinien ułatwiać rozpoczęcie rozmowy
Każde pole obowiązkowe powinno mieć uzasadnienie w procesie obsługi. Jeśli do odpowiedzi wystarczą e-mail i treść pytania, obowiązkowy adres firmy może być zbędny. Z drugiej strony rezerwacja konkretnego terminu może wymagać liczby uczestników. Skracanie formularza bez uwzględnienia celu również bywa błędem.
Zwróć uwagę na etykiety i komunikaty. W3C zaleca jasne instrukcje dotyczące pól, wymaganych danych oraz ich formatu. Podpowiedź wewnątrz pola nie powinna zastępować etykiety [2]. Po rozpoczęciu wpisywania użytkownik nadal powinien widzieć, czego dotyczy pole.
Warto zmienić ogólne „Nieprawidłowe dane” na komunikat wskazujący problem: „Wpisz adres e-mail w formacie nazwa@domena.pl”. Po błędzie zachowaj pozostałe wpisane informacje. Po wysyłce pokaż potwierdzenie i opisz następny krok, bez obiecywania terminu odpowiedzi, którego firma nie utrzyma.
05. Zrób prosty test, zanim przebudujesz całą stronę
Poproś osobę, która nie zna projektu, o wykonanie jednego zadania na telefonie. Daj jej sytuację i cel, ale nie podpowiadaj, gdzie kliknąć. Obserwuj, w którym miejscu zatrzymuje się, wraca albo zadaje pytania.
Zapisz wynik w trzech kolumnach: zaobserwowany problem, możliwa przyczyna, pomysł poprawy. „Nie zauważyła przycisku” to obserwacja. „Przycisk ma za słaby kontrast” jest hipotezą, którą trzeba sprawdzić. Być może właściwą przyczyną jest położenie przycisku albo jego niezrozumiała nazwa.
Taki test nie daje reprezentatywnych statystyk o wszystkich klientach. Może jednak ujawnić przeszkodę, której twórca strony przestał dostrzegać. Po zmianie warto ponownie sprawdzić tę samą ścieżkę.
06. Co mierzyć po poprawkach?
Wybierz miarę związaną z celem strony: poprawnie wysłane zapytania, zakończone rezerwacje albo kontakt dotyczący właściwej usługi. Sam wzrost kliknięć przycisku nie oznacza, że firma otrzymuje więcej sensownych zgłoszeń.
Porównując wyniki, uwzględnij zmianę kampanii, sezonu i liczby odwiedzin. Kilka zapytań w jedną lub drugą stronę przy małym ruchu nie wystarcza, by przypisać sukces kolorowi przycisku. Na początku korzystaj także z jakościowej informacji od klientów: o co pytają i czego nie mogli znaleźć.
Chcesz sprawdzić swoją stronę z perspektywy klienta? Prześlij adres oraz opisz, co odwiedzający powinien na niej zrobić. W Wizards & Strawberries możemy zacząć od oceny tej ścieżki i wskazania zakresu zmian. Napisz do nas.
Źródła
[1] Nielsen Norman Group: 10 heurystyk użyteczności.
[2] W3C WAI: instrukcje w formularzach.
Warsztaty ceramiczne są przykładem ilustracyjnym, nie opisem wyników konkretnego klienta.