Audyt UX: Kompletna checklista do samodzielnej oceny strony
Audyt UX (audyt użyteczności) nie musi kosztować tysięcy złotych. Z tą checklistą przeprowadzisz go samodzielnie — sprawdzisz 40+ punktów w 6 kategoriach, a dane z Microsoft Clarity pokażą Ci, gdzie są prawdziwe problemy. Poniżej gotowy szablon z systemem oceny: pass / fail / needs work.
Zanim zaczniesz: Zainstaluj Microsoft Clarity na swojej stronie i poczekaj 3–7 dni na zebranie danych. Audyt UX bez danych behawioralnych to zgadywanie — z Clarity to diagnostyka.
System oceny
Dla każdego punktu checklisty użyj trzystopniowej skali:
- PASS — punkt spełniony, nie wymaga zmian
- NEEDS WORK — działa, ale można poprawić
- FAIL — krytyczny problem, wymaga natychmiastowej naprawy
Na koniec policz wynik: każdy PASS = 2 pkt, NEEDS WORK = 1 pkt, FAIL = 0 pkt. Maksimum: 86 pkt. Wynik poniżej 50 pkt oznacza poważne problemy z UX.
1. Nawigacja
| # | Checkpoint | Jak sprawdzić w Clarity | Ocena |
|---|---|---|---|
| 1.1 | Logo linkuje do strony głównej | Dead clicks na logo = brak linka | _ / _ / _ |
| 1.2 | Menu jest widoczne bez scrollowania | Heatmapa: kliknięcia w nawigację vs reszta strony | _ / _ / _ |
| 1.3 | Aktualna podstrona jest oznaczona w menu | Session recording: czy użytkownicy klikają w stronę, na której już są | _ / _ / _ |
| 1.4 | Breadcrumbs na podstronach głębszych niż 2. poziom | Quick back = brak orientacji w hierarchii | _ / _ / _ |
| 1.5 | Wyszukiwarka działa i zwraca trafne wyniki | Dead clicks na ikonę lupy, rage clicks na pole search | _ / _ / _ |
| 1.6 | Menu mobile działa poprawnie (hamburger) | Filtruj: Device=Mobile, sprawdź dead clicks na hamburger menu | _ / _ / _ |
| 1.7 | Maksymalnie 7 pozycji w głównym menu | Heatmapa: które pozycje menu nie są klikane (zbędne) | _ / _ / _ |
2. Treść
| # | Checkpoint | Jak sprawdzić w Clarity | Ocena |
|---|---|---|---|
| 2.1 | H1 jest widoczny above-the-fold i opisuje zawartość strony | Scroll depth: jeśli >80% scrolluje dalej, H1 przyciąga uwagę | _ / _ / _ |
| 2.2 | Tekst jest czytelny (min. 16px, kontrast ≥4.5:1) | Session recording: czy użytkownicy powiększają stronę | _ / _ / _ |
| 2.3 | Akapity max 3–4 zdania, listy zamiast ścian tekstu | Scroll depth: gwałtowny spadek = ściana tekstu odpycha | _ / _ / _ |
| 2.4 | CTA (call-to-action) jest jasny i widoczny | Heatmapa: czy CTA zbiera kliknięcia? Dead clicks = problem | _ / _ / _ |
| 2.5 | Grafiki mają alt text | Audyt w DevTools (nie Clarity) | _ / _ / _ |
| 2.6 | Linki wewnętrzne prowadzą do istniejących stron (brak 404) | Dead clicks na linkach mogą sugerować broken links | _ / _ / _ |
| 2.7 | Social proof (opinie, logo klientów) jest widoczny | Heatmapa: czy sekcja z opiniami zbiera uwagę | _ / _ / _ |
3. Formularze
| # | Checkpoint | Jak sprawdzić w Clarity | Ocena |
|---|---|---|---|
| 3.1 | Formularz ma max 3–5 pól (bez zbędnych) | Session recording: czy użytkownicy porzucają formularz w trakcie | _ / _ / _ |
| 3.2 | Walidacja inline (w czasie rzeczywistym) | Rage clicks na polach = frustracja z walidacją | _ / _ / _ |
| 3.3 | Komunikaty o błędach są jasne i widoczne | Session recording po dead click na submit — czy error jest widoczny | _ / _ / _ |
| 3.4 | Przycisk submit ma czytelną etykietę ("Wyślij zapytanie" ≠ "Submit") | Dead clicks na przycisku = niejasna etykieta lub zepsuty przycisk | _ / _ / _ |
| 3.5 | Potwierdzenie wysłania (thank you page lub komunikat) | Rage clicks na submit po wysłaniu = brak feedbacku | _ / _ / _ |
| 3.6 | Formularze działają na mobile (pola nie wychodzą poza ekran) | Filtruj: Device=Mobile + dead clicks na form elements | _ / _ / _ |
4. Mobile
| # | Checkpoint | Jak sprawdzić w Clarity | Ocena |
|---|---|---|---|
| 4.1 | Strona jest responsywna (brak poziomego scrolla) | Session recording mobile: czy widać horizontal scroll | _ / _ / _ |
| 4.2 | Przyciski mają min. 44x44px (touch target) | Dead clicks obok przycisków = za małe touch targets | _ / _ / _ |
| 4.3 | Tekst jest czytelny bez powiększania | Session recording: pinch-to-zoom to sygnał za małego tekstu | _ / _ / _ |
| 4.4 | Menu mobile działa intuicyjnie | Rage clicks na hamburger menu, dead clicks na overlay | _ / _ / _ |
| 4.5 | Obrazy nie spowalniają ładowania na mobile | Session recording: długi biały ekran na początku | _ / _ / _ |
| 4.6 | Sticky CTA na mobile (widoczny bez scrollowania) | Heatmapa mobile: czy CTA zbiera kliknięcia na dole ekranu | _ / _ / _ |
5. Performance
| # | Checkpoint | Jak sprawdzić | Ocena |
|---|---|---|---|
| 5.1 | First Contentful Paint < 1.5s | PageSpeed Insights / Lighthouse | _ / _ / _ |
| 5.2 | Largest Contentful Paint < 2.5s | PageSpeed Insights / Lighthouse | _ / _ / _ |
| 5.3 | Cumulative Layout Shift < 0.1 | PageSpeed Insights + Clarity (rage clicks na przesuwające się elementy) | _ / _ / _ |
| 5.4 | Interaction to Next Paint < 200ms | PageSpeed Insights + Clarity (rage clicks = wolna reakcja) | _ / _ / _ |
| 5.5 | Obrazy w formacie WebP/AVIF z lazy loading | DevTools → Network tab | _ / _ / _ |
| 5.6 | CSS/JS zminifikowane, brak render-blocking scripts | Lighthouse audit | _ / _ / _ |
| 5.7 | CDN dla zasobów statycznych | DevTools → Network tab (sprawdź headers) | _ / _ / _ |
Core Web Vitals wpływają na SEO. Google bierze pod uwagę LCP, CLS i INP przy rankingu stron. Słaby performance = niższe pozycje + wyższy bounce rate.
6. Accessibility
| # | Checkpoint | Jak sprawdzić | Ocena |
|---|---|---|---|
| 6.1 | Kontrast tekstu ≥ 4.5:1 (WCAG AA) | Lighthouse accessibility audit | _ / _ / _ |
| 6.2 | Wszystkie obrazy mają alt text | Lighthouse / aXe DevTools | _ / _ / _ |
| 6.3 | Nawigacja klawiaturą (Tab) działa logicznie | Test manualny: Tab przez całą stronę | _ / _ / _ |
| 6.4 | Focus indicator jest widoczny | Test manualny: Tab i sprawdź czy widać outline | _ / _ / _ |
| 6.5 | Formularze mają label powiązane z input (for/id) | Lighthouse / dead clicks na label w Clarity | _ / _ / _ |
| 6.6 | Strona ma poprawną hierarchię nagłówków (H1 → H2 → H3) | HeadingsMap extension | _ / _ / _ |
| 6.7 | Animacje nie powodują migotania (<3 błyski/s) | Test manualny | _ / _ / _ |
| 6.8 | lang attribute w tagu <html> | DevTools → Elements: <html lang="pl"> | _ / _ / _ |
Szablon raportu z audytu UX
Po przejściu checklisty, sporządź raport w następującym formacie:
RAPORT Z AUDYTU UX
Strona: [URL]
Data: [YYYY-MM-DD]
Audytor: [Imię]
WYNIK OGÓLNY: [X] / 86 pkt
PODSUMOWANIE:
- PASS: [X] punktów
- NEEDS WORK: [X] punktów
- FAIL: [X] punktów
TOP 5 PROBLEMÓW DO NAPRAWY (priorytet):
1. [Checkpoint] — [Opis problemu] — [Sugerowana naprawa]
2. ...
DANE Z CLARITY:
- Sesje z frustration signals: [X]%
- Najczęstszy problem: [dead clicks / rage clicks / ...]
- Strona z najgorszym scroll depth: [URL]
- Najczęstsze quick backs: [URL → URL]
REKOMENDACJE:
- Natychmiast: [co naprawić w tym tygodniu]
- Krótkoterminowo: [co naprawić w tym miesiącu]
- Długoterminowo: [co zaplanować na przyszłość]
Powtarzaj audyt co kwartał. UX to nie jednorazowy projekt. Strona się zmienia, użytkownicy się zmieniają, technologie się zmieniają. Kwartalna rewizja z danymi z Clarity pokaże Ci, czy naprawy przynoszą efekty.
Następne kroki
- Przejdź przez checklistę punkt po punkcie
- Oznacz FAIL i NEEDS WORK
- Otwórz Clarity i zweryfikuj każdy FAIL danymi behawioralnymi
- Sporządź raport z top 5 problemami
- Napraw problemy w kolejności: FAIL → NEEDS WORK
- Po naprawach — sprawdź w Clarity czy frustration signals spadły
Chcesz automatyczne raporty UX z Clarity?
ClarityInsights analizuje Twoje dane i wysyła cotygodniowy raport AI z rekomendacjami.
Dołącz do waitlisty