Twoja strona właśnie została przeprojektowana. Na dużym monitorze w sali konferencyjnej wygląda świetnie; wszyscy znają ofertę i potrafią zrealizować zamówienie z zamkniętymi oczami. Jednak klient trafia na stronę z telefonu, nic nie wie o firmie i wychodzi przy pierwszym punkcie, który budzi jego wątpliwości. Dlatego sprawdzenie, czy strona ładnie wygląda, nie wystarczy.
Pierwotną wersję tej checklisty traktowaliśmy jako szeroką listę dla stron internetowych i sklepów online. Z czasem pojawiły się w niej narzędzia i pojedyncze zasady, które nie były uniwersalne. Ta wersja wraca do podstaw: co użytkownik powinien móc zrobić, co trzeba zweryfikować i jak wykryć problem, zanim zaczniesz inwestować w ruch.
Najpierw określ trzy najważniejsze ścieżki
Audyt UX całej strony może łatwo przerodzić się w sto komentarzy. Dlatego przed otwarciem analityki wybieram trzy ścieżki, które mają największe znaczenie dla biznesu. Zwykle są to:
- nowy odwiedzający rozumie ofertę i wysyła zapytanie,
- klient znajduje produkt, dodaje go do koszyka i płaci,
- obecny klient znajduje pomoc, dokument lub dane kontaktowe.
Dla każdej ścieżki zapisz punkt wyjścia, oczekiwany koniec i główną przeszkodę. Dzięki temu nie wypełniasz checklisty mechanicznie. Sprawdzasz, czy strona wspiera konkretną decyzję.
1. Oferta musi być jasna dla osoby, która nie uczestniczyła w spotkaniu
- Czy na pierwszym ekranie widać, co oferujesz i dla kogo?
- Czy główny nagłówek opisuje efekt lub problem, a nie firmowy slogan?
- Czy kolejny krok jest widoczny bez przeszukiwania menu?
- Czy odwiedzający potrafią odróżnić poszczególne usługi lub opcje?
- Czy podajesz warunki i ograniczenia, które rzeczywiście wpływają na decyzję?
Przetestuj to z kimś, kto nie zna firmy. Daj tej osobie kilka sekund, zamknij stronę i zapytaj, czym zajmuje się firma oraz co zrobiłaby dalej. To nie jest badanie naukowe, ale szybko ujawnia język zrozumiały wyłącznie dla osób wewnątrz firmy.
2. Nawigacja musi działać bez zastanawiania się i bez myszy
- Czy nazwy elementów odpowiadają temu, czego szukają odwiedzający?
- Czy działają linki, logo i powrót do poprzedniego kroku?
- Czy menu mobilne jest czytelne, można je zamknąć i nie zasłania ważnych treści?
- Czy przy dłuższej strukturze wiadomo, gdzie znajduje się użytkownik?
- Czy do każdego ważnego elementu sterującego można dotrzeć klawiszem Tab?
- Czy podczas korzystania z klawiatury fokus jest widoczny i użytkownik nie zostaje uwięziony?
Dostępność nie jest specjalnym trybem dla kilku osób. Wystarczający kontrast pomaga także podczas korzystania z telefonu w słońcu, a przejrzysty formularz pomaga osobie działającej w pośpiechu. Do szybkiego sprawdzenia możesz użyć Easy Checks z W3C. To pierwszy przegląd, a nie potwierdzenie pełnej zgodności z WCAG.
3. Treść musi prowadzić wzrok i wspierać decyzję
- Czy istnieje jeden główny nagłówek i logiczna struktura kolejnych nagłówków?
- Czy akapity są czytelne, a ważne informacje łatwe do znalezienia podczas skanowania?
- Czy linki i przyciski opisują rezultat kliknięcia?
- Czy znaczenie zależy wyłącznie od koloru, obrazu lub efektu po najechaniu?
- Czy informacyjne obrazy mają znaczący tekst alternatywny?
- Czy animacje odwracają uwagę od oferty i czy użytkownicy mogą uwzględnić preferencje ograniczonego ruchu?
Sam wyrazisty kolor nie tworzy przycisku konwersji. Najpierw musi być jasne, co wydarzy się po kliknięciu. „Wyślij” to opis techniczny. „Umów rozmowę wstępną” zmniejsza niepewność.
4. Formularz powinien pytać tylko o to, co firma rzeczywiście wykorzysta
- Czy każde pole ma widoczną etykietę powiązaną programistycznie?
- Czy wiadomo, które dane są wymagane i dlaczego są potrzebne?
- Czy użytkownik może wypełnić formularz na telefonie i za pomocą klawiatury?
- Czy komunikat błędu wyjaśnia zarówno problem, jak i sposób jego naprawy?
- Czy poprawnie wpisane dane pozostają po wystąpieniu błędu?
- Czy po wysłaniu użytkownik otrzymuje jasne potwierdzenie i informację o tym, co wydarzy się dalej?
W swoim poradniku dotyczącym dostępnych formularzy W3C zaleca proszenie wyłącznie o dane potrzebne do ukończenia procesu. Każde dodatkowe pole wymaga uwagi i zwiększa nakład pracy związanej z obsługą danych. Jeśli firma nie wykorzysta informacji, usuń to pole.
5. Sklep online musi obsłużyć cały zakup, a nie tylko piękną stronę produktu
Kategorie i wyszukiwanie
- Czy filtry odpowiadają sposobowi, w jaki ludzie wybierają, i czy można je łatwo wyczyścić?
- Czy stan braku wyników jest użyteczny i oferuje inną drogę?
- Czy karta produktu zawiera nazwę, cenę, dostępność i czytelny obraz?
- Czy sortowanie i filtrowanie pozostają użyteczne na telefonie?
Szczegóły produktu
- Czy przed dodaniem do koszyka wyjaśniono opcje, cenę, VAT, dostępność i dostawę?
- Czy zdjęcia pokazują to, co klient musi ocenić?
- Czy przycisk dodania do koszyka jest widoczny i nie zasłania treści?
- Czy produkt niedostępny lub wycofany oferuje alternatywę i sensowny sposób powrotu?
Koszyk i zamówienie
- Czy można zmienić produkt, opcję i ilość bez utraty pozostałych danych?
- Czy końcowa cena, wraz z dostawą i opłatami, jest znana odpowiednio wcześnie?
- Czy unikasz wymagania rejestracji bez biznesowego powodu?
- Czy nieudana płatność przywraca użytkownika do zrozumiałego stanu?
- Czy potwierdzenie zamówienia jest jednoznaczne i zapobiega przypadkowemu ponownemu zakupowi?
Zasada „w koszyku nie może być nawigacji” nie zawsze jest prawdziwa. Przy prostym zakupie ograniczenie rozpraszaczy może pomóc. Przy złożonej ofercie klient potrzebuje jednak znaleźć warunki lub szczegóły produktu. Testuj zachowanie, a nie ogólną zasadę.
6. Strona musi działać na telefonie, przy wolnej sieci i w obliczu błędu
- Czy główna treść ładuje się szybko, bez dużych przesunięć układu?
- Czy strona reaguje na kliknięcia i pisanie bez zauważalnego opóźnienia?
- Czy obrazy mają właściwe wymiary i ładują się tylko w potrzebnej jakości?
- Czy wadliwy zewnętrzny skrypt może zablokować zamówienie lub formularz?
- Czy kluczowe ścieżki działają w aktualnych popularnych przeglądarkach i na prawdziwych telefonach?
- Czy monitorujesz dostępność i błędy na ważnych etapach?
Wynik laboratoryjny to wskazówka, a nie rezultat biznesowy. Obserwuj także prawdziwych użytkowników i główną ścieżkę. Piksel reklamowy nie może być ważniejszy niż przycisk Kup.
7. Weryfikuj pomiar testem, a nie sprawdzaniem, czy kod istnieje
Dla każdej ważnej ścieżki wykonaj testowe zapytanie lub zamówienie. Sprawdź, czy zdarzenie jest wysyłane raz, z prawidłową nazwą, wartością, walutą i identyfikatorem transakcji. Następnie zweryfikuj, czy system docelowy je widzi i czy odpowiada rzeczywistemu zamówieniu.
- Czy zakup jest wysyłany wyłącznie przez otwarcie adresu URL podziękowania?
- Czy zdarzenie jest powielane po odświeżeniu strony?
- Czy tagi respektują status zgody?
- Czy warstwa danych zawiera dane osobowe, których nie powinna zawierać?
- Czy kontener obejmuje wyłącznie usługi używane przez firmę?
- Czy istnieje osoba odpowiedzialna za pomiar i zapis ostatniego sprawdzenia?
Informacje dotyczące wdrożenia znajdziesz w poradniku Jak prawidłowo skonfigurować Google Tag Manager; znaczenie zdarzeń wyjaśnia poradnik Google Analytics 4. Nagrania sesji lub mapy cieplne mogą ujawnić ślepe punkty, ale używaj ich celowo, z zamaskowanymi polami wrażliwymi i zgodnie z zasadami zgody. Nagrywanie wszystkiego „na wszelki wypadek” nie jest planem badawczym.
Jak korzystać z checklisty bez comiesięcznych warsztatów
- Wybierz jedną najważniejszą ścieżkę i przejdź przez nią na telefonie.
- Zrób to samo, korzystając wyłącznie z klawiatury.
- Poproś osobę spoza firmy o wykonanie zadania i nie naprowadzaj jej.
- Zapisz, gdzie się wahała, a nie swoje proponowane rozwiązanie.
- Zweryfikuj problem w analityce, obsłudze klienta lub kolejnych testach.
- Usuń jedną przeszkodę i przejdź ponownie przez całą ścieżkę, wraz z pomiarem.
Nie próbuj ogłaszać, że strona jest „ukończona pod względem UX”, po jednej rundzie. Oferta, urządzenia i oczekiwania ludzi się zmieniają. Celem checklisty jest regularne znajdowanie najdroższych punktów tarcia i decydowanie, co naprawić w pierwszej kolejności.
Jeśli chcesz przeanalizować stronę w szerszym kontekście biznesowym, skorzystaj także z checklisty marketingu internetowego. Jeśli potrzebujesz ustalić priorytety dotyczące UX, pomiaru i pozyskiwania, opisz swoją główną ścieżkę przez stronę kontaktową.