Wyobraź sobie klienta szukającego numeru przed spotkaniem lub czytającego ofertę w drodze do domu. Nie ma dużego monitora, myszy ani ochoty ustalać, dlaczego przycisk nie działa. Chce wykonać konkretne zadanie.
Na telefonie zmienia się miejsce na tekst, sposób sterowania i sytuacja użytkownika. Poniższe wskazówki pomogą zamienić ogólne „wersja mobilna jest niewygodna” w listę konkretnych poprawek dla wykonawcy.
Pokaż ofertę przed zbędnymi dekoracjami
Mały ekran nie pomieści wszystkiego jednocześnie. Najpierw wyjaśnij usługę, odbiorcę i kolejny krok. Duża grafika z wersji komputerowej może na telefonie odsunąć potrzebne informacje o kilka ekranów.
Zmieniaj kolejność, skalę i odstępy zamiast ukrywać istotne fakty. Jeśli lokalizacja lub zakres usługi wpływa na decyzję, również użytkownik telefonu musi je poznać. Mniejszy ekran nie powinien oznaczać mniej precyzyjnej oferty.
Czytaj bez powiększania i gubienia wiersza
Otwórz dłuższy fragment i przeczytaj go normalnie. Drobne litery, słaby kontrast i jednolity blok tekstu męczą. Krótkie akapity oraz konkretne śródtytuły pomagają zachować orientację.
Powiększ tekst w przeglądarce. Nagłówki mogą przechodzić do następnego wiersza, ale nie powinny wychodzić poza ekran ani zasłaniać przycisków. Długi adres e-mail albo niemieckie słowo złożone często ujawnia problem niewidoczny przy krótkim tytule.
Zapewnij łatwe otwieranie i zamykanie menu
Pełnoekranowe menu daje linkom więcej miejsca i ułatwia trafienie palcem. Nadal musi mieć wyraźne zamknięcie oraz przewidywalny powrót do strony. Wybranie pozycji powinno przenosić we właściwe miejsce.
Na niskim ekranie lub w orientacji poziomej część pozycji może się nie zmieścić. Zawartość powinna pozostać dostępna przez przewijanie. Sprawdź, czy kontrolki nie chowają się przy krawędzi albo nie nachodzą na siebie.
- Otwórz menu, dotrzyj do ostatniej pozycji i zamknij je.
- Wybierz link i sprawdź faktyczne miejsce docelowe.
- Przetestuj klawiaturę, Escape i powrót fokusu do przycisku menu.
- Sprawdź, czy nie można przypadkiem sterować stroną pod menu.
Wypełnij formularz z otwartą klawiaturą
Klawiatura ekranowa ujawnia problemy niewidoczne w podglądzie komputerowym. Dotknij ostatniego pola, wpisz dłuższą wiadomość i spróbuj dotrzeć do wysłania. Strona powinna pozostawać przewijalna i użyteczna przy aktywnym polu.
W3C zaleca jasne etykiety, instrukcje oraz informacje o błędach. Podpowiedź wewnątrz pustego pola nie zastępuje stałej etykiety, która jest potrzebna również podczas pisania.
Sprawdź typ klawiatury dla telefonu i e-maila. Wyślij błędne dane, popraw błąd i dokończ zadanie. Korekta jednego pola nie powinna niepotrzebnie usuwać pozostałych odpowiedzi.
Obserwuj stronę również podczas ładowania
Duże fotografie i późne przesunięcia zawartości mogą utrudnić korzystanie z ładnej strony. Gdy przycisk przesuwa się po załadowaniu obrazu, palec może trafić w inne miejsce. Spróbuj także połączenia mobilnego, nie tylko szybkiego Wi-Fi.
Core Web Vitals opisują ładowanie, reakcję na interakcje i stabilność wizualną. Pomagają rozpoznawać problemy techniczne, ale nie zastępują sprawdzenia całego zadania. Jeden wynik laboratoryjny nie przedstawia doświadczenia wszystkich odwiedzających.
Użyj tabeli, zdjęcia i linków kontaktowych
Cennik mieszczący się na monitorze może stać się nieczytelny na telefonie. Proste porównanie czasem potrzebuje mniej kolumn, a złożone dane osobnego pomysłu na prezentację. Nadal musi być jasne, do której usługi należy kwota.
Sprawdź kadrowanie fotografii, aby twarze i ważne szczegóły nie znikały. Dotknij telefonu oraz e-maila i oceń ich działanie. Opisz pliki do pobrania. Zwróć uwagę na odstępy między sąsiednimi linkami — samo zmieszczenie elementów nie kończy pracy.
Przejdź jeden pełny scenariusz
Wybierz ważne zadanie, na przykład zapytanie o usługę. Zacznij na stronie głównej i idź zwykłą drogą, bez skrótów. Przeszkoda może znajdować się między menu a formularzem, chociaż oba osobno wyglądają poprawnie.
- Powtórz zadanie na wąskim ekranie i w poziomie.
- Uwzględnij otwartą klawiaturę i błąd formularza.
- Sprawdź większy tekst oraz widoczny fokus klawiatury.
- Jeśli możesz, porównaj iPhone’a z telefonem z Androidem.
Ustal priorytety według wpływu na klienta
Najpierw napraw blokady: niedziałającą wysyłkę, niedostępne menu lub zakryty przycisk. Następnie popraw czytelność, wystającą zawartość i niejasne instrukcje. Dekoracyjne szczegóły mogą poczekać.
W zgłoszeniu podaj urządzenie, przeglądarkę, stronę i kroki wywołujące błąd. „Po otwarciu klawiatury nie mogę dotrzeć do Wyślij” jest użyteczniejsze niż „Telefon źle działa”. Po poprawce powtórz ten sam scenariusz.
