Responsywna strona internetowa: co sprawdzić na telefonie?

Klient otwiera ofertę na telefonie, ogląda realizacje i chce zapytać o wycenę. Jeśli menu nie reaguje, zdjęcie zasłania cały ekran, a przycisk wysyłania formularza znika pod klawiaturą, kontakt staje się trudny. Responsywna strona internetowa powinna dopasowywać się do wielkości ekranu i pozwalać wygodnie wykonać konkretne zadanie. Możesz to sprawdzić samodzielnie, przechodząc na telefonie drogę od wejścia na stronę do wysłania zapytania.

Zacznij od rzeczywistej drogi klienta

Wybierz zadanie odpowiadające działalności firmy: znalezienie usługi, obejrzenie projektu, zapytanie o termin albo dodanie produktu do koszyka. Wykonaj je od początku do końca, bez korzystania z komputera.

Zacznij również od podstrony oferty lub realizacji. Klient może trafić bezpośrednio na nią z wyszukiwarki, reklamy czy wiadomości. Powinien od razu rozumieć, czego dotyczy strona i gdzie znajdzie kontakt.

Do pierwszego sprawdzenia wystarczy własny telefon. Przed odbiorem nowej witryny warto jednak powtórzyć próbę na mniejszym ekranie oraz, jeśli masz taką możliwość, w Safari na iPhonie i Chrome na Androidzie. Sprawdź widok pionowy i poziomy. Podgląd mobilny na komputerze pomaga wykryć błędy układu, ale pełny test obejmuje także dotyk, klawiaturę ekranową i zachowanie przeglądarki telefonu.

Menu: czy można dotrzeć do oferty i wrócić?

Otwórz menu, przejdź do jednej z usług, a następnie wróć przyciskiem przeglądarki. Rozwiń także pozycje zawierające podmenu.

Sprawdź, czy:

• przycisk menu jest widoczny i łatwo w niego trafić;
• długie nazwy mieszczą się na ekranie;
• rozwinięte menu można przewinąć, jeśli zawiera wiele pozycji;
• zamknięcie menu jest proste, a jego przycisk pozostaje dostępny;
• dotknięcie pozycji prowadzi do oczekiwanej podstrony;
• podmenu działa po dotknięciu, bez potrzeby najeżdżania kursorem.

Sygnał problemu: kilka razy dotykasz tego samego miejsca albo przypadkowo wybierasz sąsiednią pozycję. Zanotuj, który element sprawia trudność. Pomóc może zwiększenie odstępów, powiększenie przycisku lub uproszczenie nawigacji.

Tekst: czy ofertę da się wygodnie przeczytać?

Przeczytaj opis jednej usługi, trzymając telefon w zwykłej odległości od twarzy. Oceń wielkość liter, odstępy między wierszami i widoczność tekstu na tle. Zwróć szczególną uwagę na napisy umieszczone na zdjęciach — po zmianie kadru mogą znaleźć się na jasnym lub bardzo szczegółowym fragmencie fotografii.

Następnie zwiększ rozmiar tekstu w ustawieniach przeglądarki, jeśli udostępnia taką opcję. Treść powinna pozostać dostępna, bez ucinania nagłówków i nakładania się elementów. Zasadę zachowania treści i funkcji po zmianie wielkości liter opisują wskazówki dotyczące powiększania tekstu w serwisie Gov.pl.

Przesuń stronę delikatnie w bok. Jeśli cała zawartość wyjeżdża poza ekran, sprawdź, gdzie zaczyna się problem. Przyczyną może być zbyt szeroka tabela, zdjęcie albo długi adres. Osobne przewijanie rozbudowanej tabeli bywa przydatne, ale zwykły opis oferty powinien mieścić się w szerokości ekranu.

Galerie: czy zdjęcia pomagają ocenić realizację?

Na stronie pracowni projektowej lub firmy wykonawczej galeria pozwala klientowi ocenić jakość i charakter pracy. Otwórz kilka zdjęć, przejdź do kolejnych i zamknij powiększenie.

Zwróć uwagę na trzy kwestie:

• Kadrowanie. Czy miniatury pokazują istotną część realizacji? Na przykład w projekcie elewacji mocne przycięcie może ukryć znaczną część budynku.
• Obsługę. Czy strzałki i przycisk zamknięcia są widoczne? Jeśli działa przesuwanie palcem, sprawdź również dostępne przyciski.
• Kontekst. Czy przy zdjęciach da się odczytać nazwę projektu i zakres wykonanych prac?

Po zamknięciu galerii sprawdź, czy wracasz w miejsce, z którego ją otwarto. Przeniesienie na początek długiej strony utrudnia dalsze oglądanie portfolio.

Formularz: przejdź całą drogę do wysłania

Formularza nie da się ocenić wyłącznie po wyglądzie. Wypełnij go na telefonie i wyślij oznaczoną wiadomość testową.

Wpisywanie danych

Dotknij kolejno każdego pola. Sprawdź, czy klawiatura nie zasłania miejsca wpisywania, a widok przesuwa się tak, żeby aktywne pole pozostało widoczne.

Nazwy pól powinny być czytelne także po rozpoczęciu pisania. Sam napis wewnątrz pustego pola może zniknąć po wpisaniu pierwszej litery, utrudniając sprawdzenie danych.

Zobacz również, czy pole adresu e-mail ułatwia wpisanie znaku „@”, a pole telefonu pozwala wygodnie podać numer z prefiksem kraju. Jeśli można dodać załącznik, spróbuj wybrać zdjęcie lub dokument z telefonu.

Błędy i potwierdzenie

Wyślij formularz z pustym wymaganym polem, a następnie z błędnym adresem e-mail. Komunikat powinien wskazywać, co poprawić. Sprawdź, czy wcześniej wpisana wiadomość pozostaje zachowana.

Po poprawnym wysłaniu powinno pojawić się jednoznaczne potwierdzenie. Zweryfikuj także, czy zapytanie rzeczywiście dotarło do firmowej skrzynki. Sam komunikat na stronie nie wystarcza do sprawdzenia całej drogi wiadomości.

Przyciski kontaktowe: sprawdź ich działanie i położenie

Dobra strona firmowa na telefonie umożliwia kontakt w chwili, gdy klient podejmie decyzję. Dotknij numeru telefonu i sprawdź, czy urządzenie proponuje połączenie z właściwym numerem. Przycisk adresu e-mail powinien otwierać tworzenie wiadomości z prawidłowym odbiorcą, jeśli na urządzeniu skonfigurowano odpowiednią aplikację.

Oceń też podpisy przycisków. „Zapytaj o wycenę” jasno wskazuje następny krok. Ogólne „Dalej” może wymagać zgadywania.

Jeżeli przycisk kontaktowy jest stale przyklejony do dolnej krawędzi ekranu, przewiń stronę do końca i otwórz klawiaturę formularza. Sprawdź, czy nie zasłania treści, zgód ani przycisku wysyłania.

Pierwsza wizyta i wolniejsze połączenie

Otwórz witrynę w nowej sesji prywatnej, aby zobaczyć ją z perspektywy nowego użytkownika. Sprawdź baner dotyczący plików cookie, okno promocji i czat. Przyciski tych elementów powinny mieścić się na ekranie, a po dokonaniu wyboru klient powinien móc swobodnie korzystać ze strony.

Następnie odśwież witrynę przy słabszym połączeniu. Obserwuj, czy można przeczytać ofertę przed załadowaniem wszystkich zdjęć oraz czy pojawiające się grafiki nie przesuwają przycisku w chwili dotknięcia.

W sklepie powtórz próbę od wyboru wariantu produktu do podsumowania zamówienia. Zakończ ją przed zakupem lub skorzystaj z uzgodnionego trybu testowego.

Jak zgłosić problem wykonawcy strony?

Zapisuj usterki tak, aby druga osoba mogła je odtworzyć. Do zgłoszenia dodaj adres podstrony, model telefonu, nazwę przeglądarki, wykonane kroki i zrzut ekranu.

Zamiast „formularz źle działa” napisz: „Po dotknięciu pola wiadomości klawiatura zasłania przycisk wysyłania. Przewinięcie formularza nie pozwala go odsłonić”.

Najpierw poprawiaj problemy uniemożliwiające kontakt lub zakup, następnie utrudnienia w czytaniu i nawigacji, a później drobne niedoskonałości wyglądu. Po wdrożeniu poprawek wykonaj ponownie te same zadania. Wracaj do tej listy również po dodaniu nowej galerii, formularza lub banera — każdy z tych elementów może zmienić wygodę korzystania ze strony na telefonie.