Strona projektowana pod telefon – o czym pamiętać

Klient, który szuka elektryka w dniu awarii, rzadko siedzi przy biurku. Stoi w korytarzu z telefonem w jednej ręce i latarką w drugiej. Pacjentka szukająca fizjoterapeuty przegląda strony w tramwaju albo w przerwie w pracy. Dla wielu małych firm usługowych to właśnie telefon jest pierwszym, a często jedynym urządzeniem, na którym klient zobaczy stronę.

Google również od kilku lat ocenia strony przede wszystkim na podstawie ich wersji mobilnej. Projektowanie pod telefon nie jest więc dodatkiem do „prawdziwej” strony na komputer. To punkt wyjścia.

„Responsywna” to jeszcze nie „wygodna”

Strona responsywna dopasowuje układ do szerokości ekranu: kolumny układają się jedna pod drugą, zdjęcia się zmniejszają. To dziś standard i każda nowa strona powinna tak działać. Ale strona, która się mieści, nie musi być wygodna.

Różnicę widać w szczegółach. Na stronie dopasowanej tylko technicznie numer telefonu jest gdzieś w stopce, menu ma dwanaście pozycji, a tabela cennika wymaga przewijania na boki. Na stronie zaprojektowanej pod telefon najważniejsze rzeczy są tam, gdzie sięga kciuk, a treść jest ułożona w kolejności, w jakiej klient jej potrzebuje.

Kolejność treści na wąskim ekranie

Na komputerze obok siebie mieszczą się dwie lub trzy kolumny. Na telefonie wszystko ustawia się w jednej, więc trzeba zdecydować, co jest wyżej. Przykładowa kolejność dla strony gabinetu:

1. Nagłówek z nazwą usługi i miejscowością.
2. Przycisk „Umów wizytę” lub „Zadzwoń”.
3. Krótka lista usług z odnośnikami.
4. Najważniejsze informacje praktyczne: godziny, adres, czy jest parking.
5. O specjaliście, opinie, pytania.
6. Pełna sekcja kontaktu.

W firmie remontowej kolejność może wyglądać inaczej: zaraz po nagłówku i telefonie warto pokazać kilka zdjęć realizacji, bo to one najszybciej przekonują, że ekipa zna się na rzeczy. Opis firmy i lista usług mogą poczekać niżej.

Uważaj na elementy, które na komputerze stoją z boku, np. kolumnę z godzinami otwarcia. Po przełożeniu na telefon często lądują na samym dole strony, choć dla klienta są ważniejsze niż historia firmy.

Kciuk zamiast kursora

Myszką można trafić w drobny link. Palcem już nie. Dlatego na telefonie:

• przyciski i linki muszą mieć wygodną wielkość i odstępy, żeby nie trafiać w sąsiedni element,
• najważniejsze działania warto umieścić w dolnej części ekranu, w zasięgu kciuka – np. w przyklejonym pasku z przyciskiem „Zadzwoń”,
• nic nie może działać wyłącznie po najechaniu kursorem, bo na ekranie dotykowym takiego gestu nie ma; rozwijane menu czy opisy zdjęć muszą otwierać się dotknięciem,
• ikona menu (trzy kreski) powinna mieć podpis „Menu” – nie każdy ją rozpoznaje.

Szczegółowo o rozmieszczeniu przycisków piszemy w tekście o przyciskach „Zadzwoń” i „Umów wizytę”.

Tekst, tabele i formularze na małym ekranie

Tekst na telefonie powinien mieć co najmniej taką wielkość, jak domyślny tekst przeglądarki, czyli 16 pikseli. Mniejszy zmusza do powiększania ekranu palcami. Akapity niech będą krótsze niż na komputerze – trzy zdania, które na monitorze zajmują dwie linijki, na telefonie mogą zająć cały ekran. Więcej o wielkości liter, kontraście i długości wiersza przeczytasz we wpisie o czytelności tekstu na stronie.

Szerokie tabele, np. cennik z pięcioma kolumnami, na telefonie się nie mieszczą. Lepiej zamienić je na listę: nazwa usługi, pod nią czas trwania i cena.

Formularze na telefonie wymagają szczególnej troski:

• pole na numer telefonu powinno otwierać klawiaturę numeryczną, a pole na e-mail – klawiaturę ze znakiem @,
• przeglądarka powinna móc podpowiedzieć imię i dane kontaktowe, więc pola muszą być poprawnie opisane w kodzie,
• czcionka w polach nie może być zbyt mała – na iPhone’ach pole z tekstem mniejszym niż 16 pikseli powoduje automatyczne powiększenie ekranu, co dezorientuje,
• mniej pól to mniej pisania kciukiem.

Szybkość i dane komórkowe

Telefon nie zawsze ma dobry zasięg. Strona, która na firmowym światłowodzie otwiera się błyskawicznie, w piwnicy albo na wsi może ładować się bardzo długo. Największym obciążeniem są zwykle zdjęcia w pełnej rozdzielczości z aparatu, wideo w tle i rozbudowane animacje.

Zdjęcia powinny być przygotowane w kilku rozmiarach, tak żeby telefon pobierał mniejszą wersję. Wideo w tle na telefonie zwykle lepiej zastąpić zdjęciem. Każdy dodatkowy skrypt, np. widżet czatu czy licznik odwiedzin, warto ocenić pod kątem tego, czy naprawdę jest potrzebny. O tym, jak szybkość wpływa na wygodę klientów i widoczność w wyszukiwarce, piszemy osobno we wpisie o szybkości strony.

Okienka, które zasłaniają treść

Na komputerze wyskakujące okienko zajmuje fragment ekranu. Na telefonie zasłania zwykle wszystko. Baner cookies, zapis na newsletter, okno czatu i powiadomienie o promocji, pojawiające się naraz, potrafią sprawić, że klient w ogóle nie zobaczy strony. Google w swoich wskazówkach dla właścicieli stron również zwraca uwagę, że natrętne okna zasłaniające treść pogarszają wygodę korzystania ze strony.

Zasada jest prosta: na telefonie jedno okienko naraz, łatwe do zamknięcia, z wyraźnym przyciskiem w zasięgu palca.

Jak testować – na prawdziwym telefonie

Zmniejszone okno przeglądarki na komputerze daje tylko przybliżony obraz. Przed publikacją strony i po każdej większej zmianie przejdź tę listę na prawdziwym urządzeniu:

1. Otwórz stronę na swoim telefonie i na starszym, mniejszym modelu, np. pożyczonym od kogoś z rodziny.
2. Sprawdź stronę przy wyłączonym Wi-Fi, na danych komórkowych.
3. Obróć telefon poziomo i zobacz, czy nic się nie rozjeżdża.
4. Spróbuj zadzwonić, wypełnić formularz i znaleźć godziny otwarcia, trzymając telefon jedną ręką.
5. Wyjdź na zewnątrz i sprawdź, czy tekst jest czytelny w słońcu.
6. Powiększ tekst w ustawieniach telefonu i zobacz, czy strona nadal się nie rozsypuje.

Jeśli możesz, poproś o ten sam test osobę, która nie zna Twojej strony. Ty wiesz, gdzie czego szukać. Klient tego nie wie i to jego doświadczenie pokaże najwięcej.