Strona na telefonie: 5 testów przed publikacją

„U mnie działa” brzmi uspokajająco. Dopóki nie okaże się, że „u mnie” oznacza duży monitor, myszkę i szybkie Wi-Fi.

Klient może otworzyć Twoją stronę jedną ręką, w tramwaju, przez sieć komórkową. Chce sprawdzić ofertę i znaleźć kontakt. Jeśli musi przy tym powiększać tekst albo polować na przycisk, nawet świetna identyfikacja wizualna nie ułatwi mu zadania.

Przed publikacją nowej strony i po większych zmianach przejdź pięć prostych testów. Zacznij od własnego telefonu. Jeśli możesz, powtórz je na drugim urządzeniu. Podgląd mobilny w edytorze pomaga, ale nie pokazuje całego doświadczenia klienta.

1. Tekst i układ: przeczytaj ofertę bez powiększania

Otwórz stronę główną, ofertę i jeden artykuł. Czy tekst da się wygodnie przeczytać? Czy nagłówek mieści się na ekranie, a zdjęcia nie zasłaniają treści? Sprawdź też, czy nic nie wymusza przewijania w bok.

Popatrz na kolejność informacji. Na telefonie elementy często układają się jeden pod drugim. Ważne wyjaśnienie albo przycisk mogą przez to trafić znacznie dalej, niż zakładał projekt.

Prosty test: przeczytaj stronę tak, jakbyś widział ją pierwszy raz. Po pierwszym ekranie spróbuj powiedzieć jednym zdaniem, co firma oferuje i komu pomaga.

2. Menu i przyciski: użyj kciuka zamiast myszki

Otwórz menu, wybierz ofertę i wróć na stronę główną. Sprawdź, czy menu da się zamknąć i czy nie zasłania przycisku, którego właśnie potrzebujesz. Kliknij również linki w stopce.

Przyciski powinny mieć wygodny obszar dotyku i odstęp od sąsiednich odnośników. Mała ikonka może wyglądać elegancko, a jednocześnie wymagać chirurgicznej precyzji. Twoja strona nie powinna organizować egzaminu z celowania.

Prosty test: przejdź od strony głównej do kontaktu jedną ręką. Zwróć uwagę na przypadkowe kliknięcia i miejsca, w których musisz szukać dalszej drogi.

3. Kontakt: sprawdź, czy wiadomość dociera

Wpisz krótki tekst do formularza. Zobacz, czy klawiatura nie zasłania potrzebnych pól, etykiety pozostają czytelne, a ewentualny błąd mówi wprost, co trzeba poprawić.

Następnie wyślij testową wiadomość i sprawdź skrzynkę odbiorczą, także folder spam. Komunikat „wysłano” i reagujący przycisk nie wystarczą do potwierdzenia, że zapytanie rzeczywiście dotarło. Jeśli udostępniasz numer telefonu lub adres e-mail, przetestuj także te odnośniki.

Prosty test: potwierdź cały przebieg od wpisania wiadomości po jej otrzymanie. Testuj na własnym formularzu lub za zgodą osoby, która go obsługuje.

4. Ładowanie: wyłącz Wi-Fi

Otwórz stronę przez sieć komórkową. Sprawdź, czy oferta pojawia się bez długiego oczekiwania na duże zdjęcie, film albo animację. Czy podczas ładowania przycisk zmienia położenie? Czy da się korzystać ze strony, zanim zobaczysz wszystkie ozdobniki?

Jedno otwarcie nie daje pełnego obrazu wydajności. Jest jednak dobrym początkiem i może ujawnić przeszkody, których nie widać przy szybkim połączeniu.

Prosty test: sprawdź stronę główną, ofertę i kontakt. Zanotuj, gdzie czekasz i co w tym czasie możesz zrobić.

5. Droga klienta: wykonaj jedno konkretne zadanie

Przyjmij scenariusz: „Potrzebuję strony dla nowej firmy. Chcę poznać zakres współpracy i zapytać o wycenę”. Przejdź tę drogę od początku do końca.

Czy oferta odpowiada na podstawowe pytania? Czy przycisk wyjaśnia, co stanie się po kliknięciu? Czy formularz wymaga informacji, które faktycznie możesz podać na tym etapie?

Prosty test: poproś kogoś, kto nie zna strony, o wykonanie tego zadania. Obserwuj, gdzie się zatrzymuje. Zamiast podpowiadać, zapytaj później, co było niejasne.

Co poprawić najpierw?

Zacznij od przeszkód, które uniemożliwiają przeczytanie oferty, użycie menu albo wysłanie wiadomości. Potem uporządkuj treść i dopracuj wygląd. Nie każda usterka oznacza konieczność budowania strony od zera.

Jeśli strona działa, ale nadal nie przynosi zapytań, przeczytaj także nasz artykuł „Piękna strona, zero zapytań? 7 rzeczy, które warto sprawdzić”. Znajdziesz go na blogu CREASPACE.

Chcesz sprawdzić lub poprawić swoją stronę? W CREASPACE łączymy projektowanie stron, treści i grafikę. Opowiedz nam o swoim projekcie; ustalimy, od czego warto zacząć.

O zasadach układu mobilnego i wygodnych obszarów dotyku przeczytasz także w materiałach web.dev: Responsive web design basics oraz Accessible tap targets.