UX. Co to jest? Zrozum i przetestuj.

Czym UX nie jest: cztery mity, przez które właściciel strony go pomija

Znasz już zadanie z menu Północy. Teraz odłóż na chwilę ekran i spójrz na całą drogę klienta. Cztery poniższe nieporozumienia pokazują, co pomijamy, gdy projekt oceniamy tylko po wyglądzie.

Mit pierwszy: UX to ładny wygląd

Ładny wygląd pomaga, ale niczego nie gwarantuje. Elegancka strona Północy może mieć przycisk „Zamów”, po którym klient nie wie, czy właśnie zapłacił, czy tylko dodał coś do koszyka. Wygląd przyciąga wzrok. Doświadczenie zaczyna się w chwili, gdy ktoś próbuje coś zrobić.

Mit drugi: UX to sprawa projektanta

Projektant potrzebuje wiedzy o zasadach obsługi, godzinach pracy magazynu i pytaniach klientów. Zespół firmy dostarcza ten kontekst, a projektant pomaga przełożyć go na rozwiązanie. Jeśli regulamin mówi jedno, a strona produktu nie mówi nic, żaden projekt graficzny tego nie naprawi. O tym, co klient ma wiedzieć i w którym momencie, decyduje właściciel.

Mit trzeci: UX kończy się na stronie

Prześledź drogę jednego klienta Północy. Składa zamówienie na stronie, dostaje maila z potwierdzeniem, czeka na kuriera, otwiera paczkę, a czasem odsyła niepasujący plecak. Każdy z tych momentów to punkt styku z twoją firmą.

Mail z samym numerem zamówienia, bez słowa o terminie, rodzi to samo pytanie co menu A: „kiedy to dotrze?”. Kartka w paczce z adresem do zwrotu, ale bez opisu kolejnych kroków, może pozostawić klienta z pytaniem do obsługi. Klient nie oddziela strony od reszty. Dla niego to jedna firma.

Mit czwarty: UX robi się raz, przy budowie strony

Strona się zmienia, bo zmienia się firma. Północ dodaje nową metodę dostawy, zmienia przewoźnika albo wprowadza kolekcję zimową. Każda taka zmiana może rozjechać to, co wcześniej było spójne: w stopce zostaje stary termin, a w koszyku widać już nowy.

Dlatego UX jest raczej nawykiem niż projektem. Przy każdej zmianie w ofercie zadaj sobie jedno pytanie: w których miejscach klient o tym czyta i czy wszędzie przeczyta to samo?

Mapa punktów styku Północy

Wypisz w jednej kolumnie wszystkie miejsca, w których klient spotyka firmę: stronę, koszyk, mail z potwierdzeniem, SMS od przewoźnika, paczkę, formularz zwrotu i rozmowę z obsługą. Obok każdego zanotuj, na jakie pytanie klienta ten punkt powinien odpowiadać. Puste pola w drugiej kolumnie wskażą miejsca, które warto sprawdzić dokładniej.

UX, UI, użyteczność i dostępność: czym się różnią w praktyce

Te cztery pojęcia często lądują w jednym zdaniu briefu, jakby znaczyły to samo. Nie znaczą tego samego, ale też ze sobą nie konkurują. Najprościej rozdzielić je pytaniami, które każde z nich zadaje.

Cztery robocze definicje

UI, czyli interfejs użytkownika, to to, co widać i czego się dotyka: przyciski, kolory, typografia, ikony, układ. Pyta: jak to wygląda i jak się tego używa?

Użyteczność mówi, czy osoba z konkretnym zadaniem wykona je sprawnie i bez pomyłek. Pyta: czy konkretna osoba może skutecznie wykonać swoje zadanie w danym kontekście?

Dostępność sprawdza, czy stronę obsłuży także ktoś, kto nie widzi ekranu, nie używa myszy, powiększa tekst albo słabo rozróżnia kolory. Pyta: kogo po drodze wykluczamy?

UX obejmuje wszystkie trzy i do tego to, co dzieje się poza ekranem. Pyta: jak klient przeżył całą sprawę, od pytania do rozwiązania?

Ta sama karta produktu w dwóch wersjach

W demonstracji poniżej pokazujemy notes Północ. Ogólna wersja karty mówi „Pomysł na dobry dzień” i „Sprawdź”. Nie wyjaśnia, jaki to notes ani co zrobi przycisk.

Wersja konkretna podaje format, liczbę stron, modelową cenę i działanie „Dodaj notes do koszyka”. Osobny przełącznik zmienia oprawę: spokojne szkło albo bogatsze światło. Dzięki temu nie trzeba wybierać między atrakcyjnym wyglądem a jasnością.

Wniosek nie brzmi „ładne jest złe”. Złoty przycisk może mieć jasny podpis. UI nie jest przeciwieństwem UX, tylko jednym z jego narzędzi. Problem zaczyna się wtedy, gdy wygląd zastępuje informację.

Jak przełożyć te pojęcia na brief

Zamiast „chcemy nowoczesny UX” napisz, co klient ma móc zrobić, na przykład: „z karty produktu znaleźć rozmiar i termin dostawy bez przewijania całej strony”. Zamiast „ładny design” opisz charakter marki i to, z czym ma się kojarzyć. Jeśli planujesz animacje i efekty, jak na stronach interaktywnych, dopisz, że każdy efekt ma coś wyjaśniać, a nie zasłaniać.

Dzięki temu wykonawca wie, za co odpowiada grafika, a za co treść i układ. Ty z kolei wiesz, o co pytać przy odbiorze.

Sprawdź różnicę na przykładzie

Zmieniaj poniżej dwa ustawienia niezależnie: oprawę i jasność informacji. Użyj przycisku na karcie i sprawdź, czy spodziewałeś się takiego skutku. Każdy wariant pozostaje fikcyjnym przykładem.

Dlaczego UX dotyczy właściciela strony: sygnały problemów w codziennej pracy

Nie potrzebujesz raportu, żeby zobaczyć problemy z UX. Część sygnałów dociera do ciebie podczas zwykłej pracy: w mailach, telefonach i reklamacjach. Chodzi o to, żeby rozpoznać w nich powtarzający się wzór.

Pytanie, które wraca, to wskazówka

Jeśli obsługa Północy regularnie odpowiada na pytanie o termin, warto sprawdzić dostępność i jasność informacji na stronie. Część osób może też szukać potwierdzenia dla nietypowego zamówienia. Powtarzalna odpowiedź jest wskazówką do przeglądu, a nie automatycznym uzasadnieniem przebudowy.

Sygnały do sprawdzenia u siebie

Poniższe przykłady są modelowe i pochodzą z fikcyjnej Północy. Nie mówią, jak często coś się zdarza. Pokazują, gdzie patrzeć i jak czytać to, co tam znajdziesz.

Zwróć uwagę na słowo „może”. Sygnał to hipoteza, nie diagnoza. Niewysłany formularz czasem oznacza zły formularz, a czasem klienta, któremu akurat zadzwonił telefon.

Co zrobić z jednym sygnałem

Wybierz sygnał, który najbardziej obciąża ciebie lub zespół. Znajdź na stronie miejsce, gdzie klient powinien dostać odpowiedź, i sprawdź trzy rzeczy: czy odpowiedź tam jest, czy da się ją znaleźć i czy brzmi jednoznacznie. Dopiero potem myśl o przebudowie.

Jeśli okaże się, że problemów jest więcej i dotyczą całej struktury, to dobry moment na rozmowę o nowej stronie internetowej zamiast kolejnej łatki. Nikt uczciwy nie obieca ci jednak z góry konkretnego efektu takiej zmiany. Można za to sprawdzić, czy po poprawce dane pytanie wraca rzadziej.

Zadania użytkowników strony zamiast zgadywanej persony

Persona w stylu „Anna, 34 lata, lubi kawę i podróże” wygląda profesjonalnie, ale rzadko pomaga podjąć decyzję. Kawa Anny nie powie ci, gdzie wstawić informację o zwrotach. Zadanie klienta to powie.

Czym jest zadanie klienta

Zadanie to konkretna sprawa, z którą ktoś przychodzi na stronę: sprawdzić termin, dobrać rozmiar, oddać produkt, zapytać o zamówienie. Ma początek, koniec i warunek sukcesu. Da się je sprawdzić na własnej stronie w kilka minut.

Przykład z firmy usługowej: klient wybiera zakres prania, sprawdza kalkulator i przygotowuje zdjęcia do wyceny. Taką ścieżkę pokazujemy przy projekcie strony dla firmy obsługującej Gdańsk. Możesz obejrzeć realizację Wyprane3City i porównać funkcje z zadaniami odbiorców własnej strony.

Nie każda wizyta na stronie służy zakupowi. Obecny kursant wraca po harmonogram, a rodzina chce zaplanować wyjazd. Te różnice pokazujemy na przykładzie AKME, Kormorana i Animal Island w trzech ścieżkach użytkownika w naszych realizacjach z Krakowa i okolic.

Skąd wziąć listę zadań

Nie wymyślaj jej przy biurku. Masz trzy źródła, które już działają: skrzynkę mailową, notatki z rozmów telefonicznych i historię wyszukiwarki na stronie, jeśli ją masz. Do tego dochodzą pytania zadawane w sklepie stacjonarnym albo na targach.

Spisuj pytania słowami klienta, nie firmy. Klient nie pyta o „politykę logistyczną”. Pyta: „czy zdąży na piątek?”.

Najważniejsze zadania Północy: wypełniony szablon

Ta lista jest modelowa. Mogłaby tak wyglądać po przejrzeniu skrzynki fikcyjnego sklepu z notesami, plecakami i kubkami.

• Sprawdzić, kiedy dotrze zamówienie. Sukces: klient widzi szacunek, czyli wysyłkę w 1–2 dni robocze i przewóz trwający 1–2 dni, razem z jasną informacją, że to nie gwarancja.
• Dobrać rozmiar plecaka. Sukces: tabela rozmiarów otwiera się z karty produktu i da się ją przeczytać na telefonie.
• Oddać produkt. Sukces: klient wie, czy musi coś zgłosić przed wysyłką i na jaki adres odesłać paczkę.
• Zapytać o konkretne zamówienie. Sukces: formularz prosi tylko o e-mail i opis sprawy.

Co firma chce powiedzieć, a o co pyta klient

Porównaj tę listę ze swoją stroną główną. Często okazuje się, że najwięcej miejsca zajmuje historia marki, a termin dostawy mieści się w jednym zdaniu w stopce. Historia marki ma swoje miejsce. Nie powinna tylko stać przed odpowiedzią, po którą ktoś przyszedł.

Obserwacja zamiast zgadywania

Poproś kogoś spoza firmy o wykonanie jednego zadania z listy i patrz w milczeniu. Nie podpowiadaj i nie tłumacz. Zapisz, gdzie ta osoba się zatrzymała, czego szukała i jakich słów użyła, kiedy nie mogła czegoś znaleźć.

Notatki i zrzuty ekranu z takiej próby są cennym materiałem dla wykonawcy. Jeśli nagrasz też ekran i plik okaże się za duży na maila, zajrzyj do poradnika, jak przesłać duże pliki.

Architektura informacji i menu: jak grupować i nazywać działy

W pierwszym rozdziale menu A i menu B miały tę samą kolejność i tę samą treść. Różniły się tylko nazwami. To dobry punkt wyjścia, bo architektura informacji to nie tylko rysowanie drzewka stron. To także obietnice zapisane w etykietach.

Co obiecuje każda etykieta menu

Etykiety A są ładne i pasują do stylu marki. Ich wada polega na tym, że nie wskazują jednoznacznie zawartości. Klient, który chce coś załatwić, musi zgadywać.

Grupowanie: najpierw zadania, potem działy

Weź listę zadań z poprzedniego rozdziału i zapytaj: które z nich klient uzna za tę samą sprawę? Dostawa i zwroty lądują razem, bo obie dotyczą paczki w drodze. Tabela rozmiarów należy do produktów, a nie do poradnika, bo klient szuka jej przy plecaku.

Ile pozycji w menu i jak głęboko

Nie ma magicznej liczby pozycji w menu. Jest za to prosta zasada: każda pozycja musi się na tyle różnić od pozostałych, żeby klient nie wahał się między nimi. Z głębokością jest podobnie. Jeśli do terminu dostawy trzeba schodzić przez kolejne poziomy podmenu, znalezienie informacji może wymagać zbędnego wysiłku.

Sortowanie kart: niech klient pogrupuje treść

Wypisz na kartkach tematy ze strony: „termin dostawy”, „tabela rozmiarów”, „historia marki”, „zwrot plecaka”. Poproś osobę spoza firmy, żeby ułożyła je w stosy, które jej zdaniem do siebie pasują, i nazwała każdy stos. Nie oceniaj. Słuchaj, jakich słów używa, bo to gotowy materiał na etykiety.

Test drzewa: czy klient trafi w gotowe menu

Test drzewa odwraca kierunek. Masz już propozycję menu zapisaną jako zwykła lista działów i poddziałów, bez grafiki. Dajesz komuś krótką historię, na przykład „zamawiasz prezent na sobotę, sprawdź, kiedy dotrze”, i prosisz o wskazanie, gdzie by kliknął. Zapisujesz pierwszy wybór i to, czy ta osoba musiała się cofać.

Ćwiczenie z menu Północy działa na podobnej zasadzie, ale jest demonstracją, a nie badaniem. Prawdziwy test robisz na własnym menu i z ludźmi, którzy go wcześniej nie widzieli.

Język interfejsu: przyciski, etykiety i komunikaty, które mówią, co się stanie

Krótkie teksty w interfejsie łatwo pominąć, bo wyglądają na drobiazg. Tymczasem to one mówią klientowi, co się wydarzy po kliknięciu, co poszło nie tak i co zrobić dalej. Przycisk to obietnica zapisana w dwóch słowach.

Przycisk opisuje działanie

„OK”, „Dalej” i „Wyślij” pasują do wszystkiego, więc niewiele mówią. Lepiej nazwać skutek: „Dodaj do koszyka”, „Przejdź do płatności”, „Wyślij pytanie”. Klient przed kliknięciem wie, co zrobi, i nie boi się, że przypadkiem coś zamówi.

Słowa klienta, nie żargon firmy

W magazynie Północy mówi się „realizacja”, „kompletacja” i „indeks”. Klient mówi „wysłanie”, „pakowanie” i „ten model”. Jeśli w koszyku widnieje „Status: w kompletacji”, firma rozmawia sama ze sobą. „Pakujemy twoje zamówienie” znaczy to samo, tylko jest skierowane do klienta.

Koszyk Północy przed zmianą i po zmianie

Poniższe pary przygotowaliśmy na potrzeby poradnika. Nie są gotowymi formułkami do skopiowania, tylko pokazują sposób myślenia.

Komunikat błędu: co się stało i co zrobić

Dobry komunikat odpowiada na dwa pytania: co poszło nie tak i co mogę z tym zrobić? Nie obwinia klienta i nie pokazuje kodów technicznych. „Błąd 422” nic nie mówi komuś, kto chce kupić plecak.

Pusty ekran też coś komunikuje

Pusty koszyk, brak wyników wyszukiwania, brak zamówień na koncie. Każdy taki ekran może powiedzieć, dlaczego jest pusty, i zaproponować kolejny krok. Samo „Brak wyników” zostawia klienta w ślepym zaułku, a zdanie „Nie mamy plecaków w tej pojemności. Sprawdź większą pojemność albo zapytaj o dostawę” otwiera dwie drogi.

Informacja zwrotna na stronie: czy klient widzi, co się dzieje

Klient klika i czeka na znak. Jeśli go nie dostanie, zaczyna zgadywać: klika jeszcze raz, odświeża, dzwoni. Każda z tych reakcji jest rozsądna, a każda może narobić kłopotu.

Dodanie do koszyka z potwierdzeniem i bez niego

Wersja bez potwierdzenia: klient klika „Dodaj do koszyka” przy plecaku Północy i nic się nie zmienia, bo licznik koszyka jest mały i schowany w rogu. Klient klika drugi raz. W koszyku lądują dwa plecaki, a zauważy to dopiero przy płatności albo po otwarciu paczki.

Wersja z potwierdzeniem: po kliknięciu przycisk na chwilę zmienia napis na „Dodano do koszyka”, licznik się zwiększa, a obok pojawia się krótka informacja z nazwą produktu, rozmiarem i dwiema drogami: „Przejdź do koszyka” albo „Kupuj dalej”. Klient wie, co się stało, i sam decyduje, co dalej.

Cztery momenty, w których strona musi się odezwać

Kliknięcie. Przycisk reaguje od razu, choćby zmianą wyglądu. Jeśli akcja potrwa, pokaż, że trwa, i zablokuj ponowne kliknięcie, żeby nic nie poszło dwa razy.

Ładowanie. Gdy coś się wczytuje, klient powinien to widzieć. Kręcący się znaczek wystarczy na krótką chwilę. Przy dłuższym czekaniu dopisz, co się dzieje, na przykład „Sprawdzamy dostępność rozmiaru”.

Wysłanie formularza. Samo „Dziękujemy” to za mało. Napisz, co będzie dalej: dokąd przyjdzie odpowiedź i orientacyjnie kiedy, jeśli naprawdę to wiesz.

Potwierdzenie zamówienia. Pokaż numer zamówienia, podsumowanie, przewidywany termin z zastrzeżeniem, że to szacunek, oraz informację, że mail z potwierdzeniem jest w drodze. Klient może zachować ten ekran, dlatego zadbaj o czytelne podsumowanie i dostęp do szczegółów.

Nie polegaj tylko na kolorze ani ruchu

Zielona ramka pola albo podskakująca ikona koszyka to za mało. Osoba, która nie rozróżnia kolorów, korzysta z czytnika ekranu albo wyłączyła animacje w systemie, może tego nie zauważyć. Zawsze dodaj krótki tekst. Jeśli używasz animacji, uwzględnij ustawienie ograniczenia ruchu i pokaż wtedy zmianę stanu bez efektu.

Komunikat nie wyprzedza faktów

Napis „Zamówienie wysłane” wolno pokazać dopiero wtedy, gdy paczka naprawdę wyjechała z magazynu. Wcześniej uczciwiej jest napisać „Zamówienie przyjęte”. Rozbieżność komunikatu i rzeczywistego stanu utrudnia ocenę, czy kolejne informacje są wiarygodne.

Formularze bez frustracji: etykiety, pola wymagane i komunikaty błędów

Formularz to miejsce, w którym klient przestaje czytać i zaczyna pracować. Każde niejasne pole, każdy komunikat w stylu „błąd” i każde skasowane dane to powód, żeby odłożyć sprawę na później. A „później” często znaczy „nigdy”.

Pytaj tylko o to, czego naprawdę potrzebujesz

Formularz Północy „Pytanie o zamówienie” potrzebuje dwóch rzeczy: adresu e-mail, żeby móc odpisać, i opisu sprawy. Jeśli klient zna numer zamówienia, wpisze go w opisie. Adres zamieszkania, telefon czy data urodzenia nie są tu do niczego potrzebne i tylko wydłużają drogę.

Przy każdym polu zapytaj siebie: co zrobimy z tą informacją? Jeśli odpowiedź brzmi „może się przyda”, usuń pole.

Widoczna etykieta przy każdym polu

Każde pole potrzebuje stałej, widocznej etykiety, która mówi, co wpisać. W kodzie etykieta powinna być powiązana z polem, na przykład przez atrybut for, który wskazuje identyfikator pola. Wtedy czytnik ekranu odczyta nazwę pola, a kliknięcie w etykietę ustawi kursor w polu. Szczegóły opisują wytyczne W3C o etykietach w formularzach.

Placeholder nie zastępuje etykiety

Szary tekst w środku pola, na przykład „imie@przyklad.pl”, znika, gdy klient zaczyna pisać. Wtedy nie widać już, o co pole pytało. Placeholder może podpowiedzieć format, ale nazwa pola musi zostać widoczna.

Pola wymagane i komunikaty o błędach

Oznacz pola wymagane słowem, nie samą gwiazdką czy kolorem. Gdy klient wyśle formularz z błędami, pokaż na górze krótki komunikat, że coś wymaga poprawy, a szczegóły umieść przy konkretnych polach. „Wpisz adres e-mail w formacie nazwa@domena.pl” pomaga. „Nieprawidłowe dane” nie pomaga.

Najważniejsze: nie kasuj tego, co klient już wpisał. Poprawia się jedno pole, a reszta zostaje na miejscu.

Czego walidacja nie sprawdzi

Formularz może sprawdzić, czy adres ma poprawną budowę. Samo sprawdzenie formatu w przeglądarce nie potwierdza istnienia skrzynki ani poprawności każdej litery w domenie. Dlatego po wysłaniu warto pokazać adres, na który przyjdzie odpowiedź, żeby klient mógł go jeszcze raz przeczytać.

Wypróbuj formularz ćwiczeniowy

Poniżej znajdziesz formularz Północy przygotowany do ćwiczenia. Nic nie zostanie wysłane. Zostaw puste pole albo wpisz adres bez małpy i zobacz, jak wygląda podpowiedź.

Zapobieganie błędom na stronie i łatwe cofnięcie pomyłki

Ludzie się mylą. Klikają obok, robią literówki, zmieniają zdanie. Dobra strona nie udaje, że tak nie jest: albo nie dopuszcza do pomyłki, albo pozwala ją szybko naprawić.

Zapobiegaj tam, gdzie się da

Najlepszy błąd to taki, do którego nie doszło. Jeśli plecaka o pojemności 30 l nie ma w magazynie, nie pozwól go wybrać i napisz dlaczego, zamiast pokazywać błąd dopiero w koszyku. Jeśli odbiór osobisty jest możliwy tylko w dni robocze, kalendarz nie powinien pokazywać weekendów jako dostępnych.

Usunięcie z koszyka z opcją „Cofnij” i bez niej

Klient przewija koszyk Północy na telefonie i przypadkiem dotyka ikony kosza przy plecaku. W wersji bez cofnięcia produkt znika, a klient musi wrócić do katalogu, odszukać model, wybrać kolor i rozmiar. Kilka kroków za jedno niechcący dotknięte miejsce.

W wersji z cofnięciem produkt znika, a w jego miejscu pojawia się komunikat „Usunięto plecak Północ, pojemność 20 l” z przyciskiem „Cofnij”. Jedno dotknięcie i wszystko wraca. Nie trzeba wtedy pytać „Czy na pewno?” przy każdym usunięciu, bo cofnięcie rozwiązuje sprawę lepiej.

Kiedy pytać o potwierdzenie

Okno z pytaniem o potwierdzenie ma sens przy działaniach, których nie da się odwrócić, takich jak trwałe usunięcie konta, którego dany serwis nie pozwala cofnąć. Przyciski powinny wtedy mówić, co robią: „Usuń konto” i „Zachowaj konto”. Pytanie przy każdym drobiazgu uczy klikać „Tak” bez czytania.

W naszym ćwiczeniu z menu przycisk zerowania nie ma cofnięcia. To świadoma decyzja: tracisz tylko dwie krótkie próby, więc wystarczy jednoznaczna nazwa. Przy koszyku pełnym produktów rachunek wygląda inaczej.

Błąd, komunikat, droga naprawy

Każdy błąd na stronie sprawdzaj w trzech krokach. Co się stało? Czy komunikat mówi o tym po ludzku? Czy klient ma jedną oczywistą drogę dalej? Jeśli brakuje któregokolwiek ogniwa, klient zostaje z problemem sam.

Strona 404 też jest komunikatem

Link ze starego newslettera prowadzi do plecaka, którego już nie sprzedajesz. Zamiast samego „Nie znaleziono strony” pokaż wyszukiwarkę oraz linki do aktualnej kolekcji i do kontaktu. Jeśli wiesz, że model wycofano, napisz to wprost i zaproponuj podobny.

Po błędzie dane zostają

Po błędzie zachowaj koszyk i dane, które można bezpiecznie zachować w danym procesie. Nie utrwalaj danych płatniczych na własną rękę. Jasno pokaż, co się zapisało i jak wznowić zadanie.

UX na telefonie: cele dotyku, menu, klawiatura i ukryta treść

„Na telefonie się wyświetla” to dopiero początek. Liczy się to, czy da się na nim coś załatwić jedną ręką, w tramwaju, przy słabym zasięgu. To przykładowe warunki, które warto uwzględnić podczas sprawdzania sklepu.

Menu Północy na wąskim ekranie

Na komputerze menu B pokazuje cztery podpisane działy. Na telefonie często zostaje z niego tylko ikona trzech kresek w rogu. Wiele osób ją rozpozna, ale nie wszyscy. Dopisz obok słowo „Menu”, a po otwarciu pokaż te same etykiety co na komputerze, w tej samej kolejności. Klient nie powinien uczyć się drugiej nawigacji.

Wielkość celów dotyku

Palec to nie kursor. Przyciski ustawione za blisko siebie kończą się trafieniem obok, a wtedy wracamy do poprzedniego rozdziału i opcji „Cofnij”.

WCAG 2.2 w kryterium 2.5.8 na poziomie AA wymaga, żeby cel dotyku miał co najmniej 24 na 24 piksele CSS albo spełniał jeden z wyjątków. Wyjątkiem jest na przykład wystarczający odstęp od sąsiednich celów albo link w zwykłym tekście. Szczegóły znajdziesz w opisie kryterium minimalnego rozmiaru celu w WCAG 2.2.

To minimum standardu, a nie poziom wygody. W wygodniejszym wariancie demonstracji przyciski mają 48 pikseli wysokości, a w ciasnym 24 piksele. Większy cel zostawia więcej miejsca na palec. Rekomendację wygody odróżniamy od minimum standardu.

Formularze i klawiatura ekranowa

Klawiatura ekranowa zasłania dużą część ekranu. Pole, w którym klient pisze, i komunikat o błędzie przy nim muszą pozostać widoczne. Dla adresu e-mail ustaw odpowiedni typ pola, żeby telefon pokazał klawiaturę z małpą. Dla numeru telefonu pokaż klawiaturę z cyframi.

Treść schowana w zakładkach i rozwijanych panelach

Na wąskim ekranie kusi, żeby wszystko zwinąć. Przy informacjach dodatkowych to rozsądne. Termin i koszt dostawy przy karcie produktu nie są jednak dodatkiem. Jeśli klient musi rozwinąć kilka paneli, żeby dowiedzieć się, kiedy dostanie plecak, odpowiedź staje się trudniejsza do znalezienia.

Sprawdzaj na prawdziwym telefonie

Podgląd w przeglądarce na komputerze pomaga, ale nie pokaże, jak trzyma się telefon ani dokąd sięga kciuk. Weź własny telefon do jednej ręki, drugą schowaj do kieszeni i spróbuj znaleźć termin dostawy.

W ćwiczeniu poniżej możesz sprawdzić menu Północy w ramce telefonu i porównać warianty.

Dostępność strony jako część UX: klawiatura, fokus, kontrast i opisy

Dostępność nie jest nakładką dla wąskiej grupy. To warunek, żeby ze strony w ogóle dało się skorzystać, gdy ktoś nie używa myszy, powiększa tekst, słucha strony przez czytnik ekranu albo ma akurat rękę w gipsie. Dobrze zrobiona ułatwia życie wszystkim.

Przejdź menu Północy samym klawiszem Tab

Wróć do ćwiczenia z menu z pierwszego rozdziału i odłóż mysz. Potem wykonaj te kroki.

1. Użyj Ctrl+L (na Macu Command+L), a potem Tab, aby przejść z paska adresu do strony. Dojdź do przycisku rozpoczęcia ćwiczenia i uruchom go klawiszem Enter.
2. Przy każdym naciśnięciu sprawdź, czy widać, gdzie jesteś. Aktywny element powinien mieć wyraźny obrys.
3. W wersji A otwórz klawiszem Enter dział „Warto wiedzieć”. Przejdź przyciskiem do wersji B i otwórz „Dostawa i zwroty”. Sprawdź, czy widzisz odpowiedź i możesz przejść dalej.
4. Naciśnij Shift+Tab, żeby cofnąć się o krok. Kolejność powinna być logiczna, bez skoków po ekranie.
5. Zrób to samo na swojej stronie: od samej góry aż do przycisku wysyłania formularza kontaktowego.

Jeśli na którymś kroku znikniesz z oczu samemu sobie albo utkniesz, osoba korzystająca tylko z klawiatury utknie w tym samym miejscu.

Kontrast i powiększanie tekstu

Szary tekst na jasnoszarym tle wygląda subtelnie na dobrym monitorze, a w słońcu na telefonie przestaje być widoczny. Sprawdzaj kontrast narzędziem, nie na oko, i osobno dla każdej pary kolorów: tekstu, obrysu zaznaczenia, przycisków i komunikatów o błędach. Powiększ też stronę w przeglądarce i zobacz, czy nic na siebie nie nachodzi.

Teksty alternatywne dla zdjęć

Zdjęcie plecaka na karcie produktu potrzebuje opisu tego, co widać i co jest ważne przy decyzji, na przykład koloru i kroju. Ozdobna grafika w tle nie potrzebuje opisu wcale. Nie wpisuj tam słów kluczowych, bo ten tekst jest dla człowieka.

Nagłówki i linki, które mówią, dokąd prowadzą

Czytnik ekranu pozwala skakać po nagłówkach jak po spisie treści. Strona bez nagłówków odbiera tę możliwość. Z linkami jest podobnie: pięć linków „kliknij tutaj” brzmi w czytniku jak pięć razy to samo, a „Zobacz tabelę rozmiarów” mówi, co czeka po kliknięciu.

Czego te testy nie zastąpią

Opisane sprawdzenia wyłapią częste przeszkody. Nie są audytem i nie przesądzają, czy cała strona spełnia wymagania prawne albo normy. Do tego potrzebny jest pełny przegląd według aktualnych wytycznych.

Wydajność, którą człowiek czuje na telefonie

Co czuje osoba, zanim ktoś otworzy raport

Ktoś otwiera telefonem stronę gabinetu, żeby sprawdzić wolny termin wizyty. Stuka „Pokaż terminy” i nic się nie dzieje, więc stuka ponownie. Nie wie, czy strona przyjęła gest, i zaczyna wątpić, czy rezerwacja w ogóle działa.

Skok układu myli palec. Doładowany baner przesuwa przycisk „Zarezerwuj”, w który ktoś właśnie celuje, i palec trafia w sąsiedni link. Odśwież na telefonie stronę główną i kartę produktu bez przewijania: jeśli przycisk zmienia miejsce po wczytaniu czcionek lub zdjęć, układ jest niestabilny.

Trzy miary Core Web Vitals i dwa rodzaje pomiaru

Opis Core Web Vitals obejmuje trzy miary. LCP to czas wyrenderowania największego widocznego elementu treści, INP opisuje opóźnienie reakcji strony na interakcje w trakcie wizyty, a CLS mierzy niespodziewane przesunięcia układu. Dobry wynik ocenia się na 75. percentylu rzeczywistych wizyt, osobno dla telefonów i komputerów; progi są w tabeli. INP nie jest czasem dojścia do pełnej gotowości strony, a FID nie jest już główną miarą, zaś sam próg nie gwarantuje pozycji w wyszukiwarce. Odsyłacz do opisu jest w źródłach.

Test laboratoryjny robisz w kontrolowanych warunkach: pomaga porównać wersje i znaleźć techniczną przyczynę opóźnienia. Dane z rzeczywistych wizyt obejmują różne urządzenia, sieci i sposoby korzystania. Gdy oba wyniki się rozchodzą, sprawdź warunki testu i zakres danych. Nasze ćwiczenia z menu nie mierzą Core Web Vitals.

Ręczne sprawdzenie na telefonie i kolejność poprawek

Wybierz jedną ważną podstronę, np. formularz rezerwacji, i otwórz ją na telefonie przy zwykłym i słabszym łączu. Zapisz, co pojawia się pierwsze, kiedy przycisk reaguje i czy coś się przesuwa. To obserwacja, nie pomiar Core Web Vitals, ale podpowiada, gdzie szukać: w rozmiarze głównego zdjęcia, w skryptach zajmujących przeglądarkę albo w braku zarezerwowanego miejsca na media.

Tabela mówi, co mierzyć, a nie dlaczego wynik spadł. Każdą przyczynę sprawdzaj osobno, a odroczenie czatu czy dalszej galerii przetestuj najpierw w kopii strony i porównaj pomiar po zmianie. Dopiero potem planuj większą przebudowę.

Gdy chcesz przejść od obserwacji do pomiaru, skorzystaj z instrukcji w poradniku o darmowych narzędziach SEO. Pokazujemy tam, jak oddzielić laboratoryjny test PageSpeed od danych użytkowników i zapisać wniosek bez zgadywania przyczyny.

Czytelność: odpowiedź, zanim ktoś zacznie szukać

Najważniejsza informacja w pierwszym zdaniu

Każda podstrona odpowiada na jedno główne pytanie i ta odpowiedź powinna paść na górze. Na stronie kontaktowej to godziny i sposób umówienia wizyty, na karcie produktu cena, dostępność i warunki zakupu, przy rezerwacji wolne terminy. Dalsze akapity wyjaśniają wyjątki, ale nie zastępują pierwszego zdania.

Sprawdź to prosto: zakryj wszystko poza pierwszym ekranem telefonu. Jeśli godziny przyjęć są tylko w stopce, a numer telefonu siedzi w grafice, odpowiedź jest schowana.

Nagłówki, długość wiersza i napisy na przyciskach

Ułóż nagłówki tak, by samo ich czytanie streszczało stronę, np. „Godziny przyjęć”, „Jak umówić wizytę”, „Dojazd”, „Kontakt”. Jeden akapit niech niesie jedną myśl, a na komputerze trzymaj tekst w wąskiej kolumnie. Gdy czytanie idzie ciężko, porównaj osobno szerokość kolumny, wielkość pisma, odstępy i kontrast.

Przycisk nazwij czynnością: „Zarezerwuj termin”, „Wyślij zapytanie”, „Dodaj do koszyka”. „Kliknij tutaj” i „Dalej” nie mówią, co się stanie. Ten sam cel nazywaj w całym serwisie tak samo.

Przed i po: formularz zapytania

Wersja przed: „Skontaktuj się z nami, odpowiemy najszybciej, jak to możliwe”. Nie wiadomo, co wpisać ani kiedy spodziewać się odpowiedzi. Wersja po mówi, jakich informacji firma potrzebuje do wyceny i w jakim czasie zwykle odpisuje, o ile ten czas jest naprawdę sprawdzony. Dopisz, że to typowy przebieg, a nie obietnica.

Odsyłacz jest dobry, gdy prowadzi do doprecyzowania, a zły, gdy zastępuje zdanie, które miało paść na tej stronie. Obok linku zostaw krótką zapowiedź, np. „zasady odwołania rezerwacji są w regulaminie”. Zamiast „Dowiedz się więcej” napisz, czego ktoś się dowie.

Zastrzeżeń nie wycinaj

Zdanie „to typowy czas, nie gwarancja” brzmi mniej gładko, więc kusi, by je usunąć. Zostaw je, bo bez niego zakres czasu czyta się jak obietnicę. Skróć słowa, przenieś wyżej, ale nie usuwaj sensu. Sprawdź też, czy karta produktu nie obiecuje czegoś innego niż strona z warunkami.

Zaufanie budowane ze zgodnych faktów

Warunki, koszt i kontakt tam, gdzie zapada decyzja

Na karcie produktu i przy rezerwacji pokaż warunki zgodne z rzeczywistą obsługą: czas realizacji, koszt dostawy albo zasady odwołania wizyty oraz kontakt. W fikcyjnym modelu Północy przyjęliśmy wcześniej przykładowy czas przygotowania i przewozu; to ilustracja, nie termin do wklejenia w dowolnym sklepie. Jeśli produkt wymaga dodatkowej pracy, np. nadruku, opisz ten wyjątek przy nim.

Ta sama informacja od strony do wiadomości

Wypisz na kartce ścieżkę: karta produktu lub formularz rezerwacji, podsumowanie, mail potwierdzający, przypomnienie albo status. W każdym punkcie ma paść ta sama informacja z tym samym zastrzeżeniem. Jeśli mail mówi „wyślemy dzisiaj”, a regulamin coś innego, popraw mail, nie naginaj regulaminu. Status „w realizacji” bez daty jest uczciwszy niż fałszywa data z szablonu.

Czego nie dokładać dla uspokojenia

Nie wstawiaj opinii, których nikt nie napisał, nawet przykładowych gwiazdek. Licznik „oferta kończy się za 00:09” przy produkcie dostępnym cały sezon uczy, że pośpiech jest dekoracją. Naprawdę mały stan pokaż jako liczbę, bez migającego zegara. Gdy opinii brak, zostaw zdjęcie, warunki i kontakt.

Dane w formularzu i zasady zwrotu

W formularzu zapytania zwykle wystarczą e-mail i opis sprawy; numer zamówienia czy preferowany termin można dopisać w treści. Nie dokładaj pól na wszelki wypadek, takich jak data urodzenia czy drugi telefon.

Przy zwrocie lub odwołaniu wizyty opisz tylko to, co firma naprawdę robi: dokąd odesłać towar, kiedy przychodzi odpowiedź i kto ponosi koszt. Nie przepisuj cudzych terminów z internetu i nie traktuj tego tekstu jak porady prawnej. Opis musi uwzględniać zasady obowiązujące firmę, a brakujące warunki ustal przed publikacją.

Sprawdzenie przed publikacją

Zanim opublikujesz zdanie o czasie realizacji, przejdź do końca testowe zamówienie lub rezerwację i porównaj rzeczywisty komunikat ze zdaniem na stronie. Gdy obsługa go nie potwierdza, nie zamieniaj tego w hasło „ekspres”. Napisz węższą prawdę albo wstrzymaj obietnicę.

Test z człowiekiem zamiast domysłów

Czym jest ta sesja, a czym nie

Ćwiczenie z początku poradnika pokazuje różnicę między etykietami, ale nie jest testem skuteczności dwóch wersji: drugą znasz już po obejrzeniu pierwszej. Tu opisujemy badanie jakościowe, czyli obserwację, jak konkretne osoby wykonują zadania. Pomaga rozpoznać problemy i ich przyczyny. Samo nie określa wielkości efektu zmiany w całej grupie odbiorców; do porównania wybranej miary służy test A/B z następnego rozdziału.

Północ dostarcza przykładowych scenariuszy; demonstracyjny sklep nie realizuje zamówień, płatności ani obsługi przesyłek.

Jak prowadzić sesję

Poproś osobę, która nie układała strony, o cztery zadania i mów językiem klienta, nie nazwami z menu. Nie podpowiadaj „wejdź w kontakt” ani nie wskazuj palcem przycisku. Patrz na ekran, milcz, gdy ktoś błądzi, i zapisuj fakty, nie oceny.

Jedna sesja daje hipotezy. Druga osoba z tym samym scenariuszem pomaga sprawdzić, czy trudność nie wynikała tylko ze stylu pierwszej.

Cztery przykładowe zadania

Dopasuj scenariusze do tego, co naprawdę działa na Twojej stronie. Przykłady: 1) znajdź, w jakich godzinach można umówić wizytę i jak się skontaktować; 2) zarezerwuj wolny termin na wybrany dzień; 3) na karcie produktu ustal cenę, dostępność i koszt dostawy; 4) wyślij przez formularz zapytanie o wycenę. Upewnij się, że środowisko testowe pozwala to zrobić bez prawdziwej rezerwacji i zakupu.

Przykład zapisu, nie wynik

Trzecia kolumna jest obowiązkowa, bo bez niej hipoteza po jednej osobie twardnieje w pewnik. Nie dopisuj procentów ani zdań „klienci uważają”. Po dwóch sesjach porównaj powtarzalne obserwacje, a resztę zostaw otwartą.

Dane, które same niczego nie tłumaczą

Obserwacja osobno od wyjaśnienia

Zapisuj fakt i przyczynę w dwóch osobnych zdaniach. Fakt: część osób opuszcza formularz rezerwacji na etapie wyboru godziny. Zdanie „pewnie przez za mało terminów” jest hipotezą, a nie odczytem z licznika. Liczby z ćwiczenia na makiecie nie są prognozą sprzedaży ani rezerwacji.

Cztery źródła i ich ślepe plamy

Lejek pokazuje, gdzie ubywa osób między kartą produktu, koszykiem a płatnością, ale nie mówi dlaczego. Zdarzenie „kliknięto Sprawdź koszt dostawy” potwierdza kliknięcie, nie zrozumienie odpowiedzi.

Wywiad daje powód słowami jednej osoby i nie wolno przeliczać go na wszystkich. Mapa kliknięć pokazuje miejsce dotknięcia, ale nie to, czy był to zamiar, pomyłka po skoku układu, czy złość na martwy przycisk.

Wejście z wyszukiwarki znaczy, że ktoś szukał, a nie że dostał odpowiedź. Intencję, np. „godziny otwarcia”, łączysz z widocznością dopiero po sprawdzeniu, czy odpowiedź stoi na górze strony. Jak mierzyć widoczność bez obiecywania pozycji, opisuje osobny materiał o SEO.

Brief testu A/B przed startem

Test A/B porównuje dwie wersje na losowo przydzielonych osobach i odpowiada na pytanie, czy zmiana coś zmienia. Nie mówi dlaczego; to nadal zadanie badania jakościowego z poprzedniego rozdziału. Zanim cokolwiek uruchomisz, wypełnij poniższy brief.

Metryki nie licz wyłącznie wśród osób, które kliknęły zmieniany element, bo samo kliknięcie może zależeć od wersji. Nie kończ testu wcześniej tylko dlatego, że jedna wersja chwilowo prowadzi. Wielkość próby zależy od obecnego poziomu metryki, najmniejszej różnicy wartej zauważenia i akceptowanego ryzyka błędnych wniosków; ten poradnik nie zastępuje tego obliczenia i nie podaje progów.

Nie odczytuj zwycięzcy z demonstracyjnego zestawienia. To ćwiczenie, a nie fakt o Północy.

Przegląd ręczny, punkt po punkcie

Jak przejść przez stronę

Przegląd zrób samodzielnie, na telefonie i komputerze, na kilku kluczowych podstronach: kontakt, rezerwacja, karta produktu, formularz zapytania. To ręczne sprawdzenie, czy zadanie da się skończyć, a nie automatyczny audyt, ocena zgodności z WCAG ani norma prawna. Przy każdym punkcie zapisz adres, krótki cytat i to, co stało się po stuknięciu.

Sześć obszarów przeglądu

Menu: czy nazwy mówią językiem klienta i czy kontakt oraz rezerwacja są łatwe do znalezienia. Treść: czy najważniejsza odpowiedź stoi na pierwszym ekranie, a karta produktu pokazuje cenę, dostępność i koszt przed zakupem. Formularz: czy ma tylko potrzebne pola, a błąd pojawia się przy polu z informacją, co poprawić.

Telefon: czy kciuk trafia w przycisk bez zahaczania o sąsiedni, tekst da się przeczytać bez powiększania, a przy słabszym łączu pierwsze stuknięcie działa. Dostępność: czy formularz rezerwacji da się przejść klawiaturą, widać aktywne pole, a błąd jest zrozumiały bez samego koloru. Zaufanie: czy nie ma wymyślonych opinii ani sztucznych liczników, a zasady zwrotu lub odwołania opisują tylko potwierdzoną praktykę.

Jak działa lista poniżej

Lista poniżej ma 16 pytań z tych obszarów. Przy każdym wybierasz „działa”, „do poprawy” albo „nie wiem”, a narzędzie układa z odpowiedzi listę działań, którą można pobrać jako plik TXT. Działa lokalnie w przeglądarce, nic nie wysyła i nie skanuje strony: porządkuje wyłącznie Twoje odpowiedzi.

„Nie wiem” to też informacja, bo wskazuje punkt do sprawdzenia, np. w sesji z człowiekiem. Dowód i wagę zapisuj osobno w notatkach.

Dowód i waga zamiast ogólnej oceny

Dowód to adres podstrony, krótki cytat i zdanie o tym, co zrobiono i co było widać; samo „słabo” nie wystarcza. Wagę oznacz tymczasowo jako blokadę zadania, poważne utrudnienie albo drobiazg. To hipoteza przed testem z człowiekiem, nie ranking do publikacji.

Co poprawiać najpierw w Północy

Trzy wagi i nakład pracy

Blokada oznacza, że ktoś nie kończy zadania: nie znajduje godzin kontaktu, nie może zarezerwować terminu albo dostaje obietnicę sprzeczną z rzeczywistą obsługą. Poważne utrudnienie oznacza, że kończy, ale błądzi, stuka drugi raz albo pisze maila, żeby coś zrozumieć. Drobiazg to odstęp czy ikona bez wpływu na decyzję.

Najpierw bierz blokady o małym nakładzie pracy. Każda waga pozostaje hipotezą, dopóki nie potwierdzi się w przeglądzie i w teście z człowiekiem.

Przykładowa kolejka dla Północy

Ikony i drobne odstępy zostaw na koniec. Dwie sesje nie są uniwersalnym progiem decyzji: oczywistej usterki technicznej nie trzeba trzymać do kolejnego badania, a przy niejasnej przyczynie zaplanuj dalsze obserwacje. Projektanta wołaj, gdy nowe zdanie rozbija układ telefonu, a nie po to, by odświeżyć wygląd przed naprawą obietnicy.

Brief dla osoby wdrażającej

Zmieść brief na jednej stronie: kontekst (fikcyjny sklep Północ i pytania o czas realizacji, koszt oraz kontakt), cytat obecnego tekstu, obserwację i osobno hipotezę. Dopisz zakazy: nie usuwać zastrzeżeń, nie dodawać opinii ani liczników, nie zmieniać zabezpieczeń.

Odbiór następuje, gdy nowa osoba bez podpowiedzi kończy zadanie, wszystkie miejsca mówią to samo, a telefon na słabszym łączu nie gubi stuknięcia. Ten warunek sprawdź ponownie po wdrożeniu, nie w dniu pisania założeń. Jeśli wdrożenia nie robisz samodzielnie, brief jest początkiem rozmowy o stronie, nie obietnicą sprzedaży ani pozycji; opis współpracy przy projekcie strony jest osobno, żeby brief miał adresata.

Pytania o UX, które warto wyjaśnić