Strona na telefonie - dlaczego to ekran decyduje o zapytaniach

Właściciel firmy ogląda swoją stronę na komputerze, przy biurku, w spokoju. Jego klient ogląda ją zupełnie inaczej: na telefonie trzymanym w jednej ręce, w samochodzie, w kolejce, między jednym a drugim zajęciem, często przy słabym zasięgu. To dwa różne światy, a projekt strony powstaje zwykle w tym pierwszym. Stąd bierze się cała klasa problemów, których właściciel nigdy nie zobaczy, dopóki ktoś mu ich nie pokaże: numer telefonu, którego nie da się kliknąć, przycisk poza zasięgiem kciuka, formularz zasłonięty klawiaturą, zdjęcia ładujące się kilkanaście sekund. W tym artykule pokazujemy, co dokładnie zmienia się, gdy stroną rządzi mały ekran, których błędów popełnia się najwięcej i jak w kwadrans sprawdzić własną stronę bez żadnych narzędzi.

Kto naprawdę ogląda Twoją stronę

Wyobraźmy sobie dwie sytuacje. W pierwszej właściciel warsztatu siada wieczorem przy komputerze, otwiera swoją stronę i ogląda ją na dużym monitorze. Wszystko jest na miejscu: logo, zdjęcie warsztatu, opis usług w trzech kolumnach, mapka. Strona wygląda porządnie.

W drugiej sytuacji kierowca stoi na parkingu przy zepsutym aucie, ma jedną rękę zajętą, drugą przegląda wyniki wyszukiwania i szuka kogoś, kto go dziś przyjmie. Otwiera tę samą stronę. Najpierw czeka, aż załaduje się zdjęcie warsztatu w rozdzielczości przygotowanej pod duży monitor. Potem przewija przez trzy ekrany opisów, żeby znaleźć numer. Numer jest, ale zapisany w stopce małą czcionką i niemożliwy do kliknięcia. Kierowca przepisuje go z pamięci, myli jedną cyfrę, wraca, próbuje jeszcze raz - albo po prostu cofa się do wyników i dzwoni do następnego warsztatu.

Ta druga sytuacja jest dziś regułą, nie wyjątkiem. Kontakt z firmą usługową zaczyna się najczęściej na telefonie, w ruchu, w konkretnej potrzebie. Dane Google z 2016 roku (USA) pokazują, że 76% osób szukających czegoś w pobliżu na telefonie odwiedza powiązaną firmę w ciągu jednego dnia. To ekstremalnie krótkie okno: decyzja zapada w minutach, nie w tygodniach.

Teza tego artykułu jest prosta: strona firmowa nie jest dziś dokumentem oglądanym na komputerze, tylko narzędziem obsługiwanym kciukiem w niewygodnych warunkach. Wszystko inne - estetyka, rozbudowana treść, efektowne animacje - jest wtórne wobec tego jednego faktu.

Tło: jak mały ekran stał się ekranem podstawowym

Przez pierwszą dekadę stron firmowych telefon był marginesem. Strony projektowano pod monitory o ustalonej szerokości, a wersja mobilna, jeśli w ogóle powstawała, była osobnym, uproszczonym adresem - zwykle uboższym i rzadziej aktualizowanym.

Zmiana przyszła wraz z upowszechnieniem smartfonów i szybkiego internetu mobilnego. W Polsce 87,6% osób w wieku 16-74 lat regularnie korzysta z internetu, a 95,9% gospodarstw domowych ma do niego dostęp (GUS, „Społeczeństwo informacyjne w Polsce w 2024 r."). Dostęp przestał być barierą - barierą stało się to, czy strona daje się wygodnie obsłużyć w warunkach, w których klient faktycznie z niej korzysta.

Warto uporządkować pojęcia, bo krążą w obiegu w postaci haseł. Strona responsywna to jedna strona, która sama układa treść pod rozmiar ekranu - inaczej na telefonie, inaczej na tablecie, inaczej na monitorze. Podejście mobile first oznacza projektowanie najpierw dla małego ekranu, a dopiero potem rozbudowywanie układu dla większych; to odwrotność dawnej praktyki. Obszar dotyku to minimalna powierzchnia, jaką musi mieć element, żeby dało się w niego trafić palcem bez pomyłki - w praktyce znacznie większa niż to, co wystarcza kursorowi myszy.

Luka w powszechnym rozumieniu tematu jest następująca: „strona jest responsywna" traktuje się jako koniec dyskusji. Tymczasem responsywność mówi tylko tyle, że treść się mieści. Nie mówi, czy jest czytelna, czy kolejność sekcji ma sens na małym ekranie, czy przycisk kontaktu jest w zasięgu kciuka i czy strona zdąży się załadować, zanim klient straci cierpliwość. To są cztery osobne pytania i na każde trzeba odpowiedzieć osobno.

Czas ładowania: najdroższa sekunda w całej firmie

Zacznijmy od tego, co da się zmierzyć. Badanie Google z 2017 roku pokazało, że gdy czas ładowania strony na telefonie rośnie z jednej do trzech sekund, prawdopodobieństwo jej opuszczenia rośnie o 32%. Przy wydłużeniu do dziesięciu sekund - o 123%. To dane zagraniczne i dotyczą szerokiego zbioru stron, ale mechanizm nie zależy od kraju: człowiek czekający na zawartość ekranu, której nie widzi, w każdej chwili może wrócić do wyników wyszukiwania.

Co w małych firmach najczęściej wydłuża ten czas? Niemal zawsze zdjęcia. Fotografia z aparatu ma dziś kilka megabajtów i rozdzielczość wielokrotnie większą niż potrzebna. Wgrana bez przygotowania na stronę, na telefonie w słabym zasięgu ładuje się wieki. Strona z dziesięcioma takimi zdjęciami w galerii realizacji potrafi być cięższa niż cały film krótkometrażowy.

Drugim źródłem opóźnień są dodatki doklejane do strony przez lata: wtyczki do czatów, liczniki, mapy, karuzele, skrypty statystyk. Każdy z osobna wydaje się drobiazgiem. Razem tworzą warstwę, która musi się załadować, zanim klient zobaczy cokolwiek użytecznego.

Kciuk, nie kursor: co się zmienia w układzie

Palec jest znacznie mniej precyzyjny niż kursor myszy, a telefon trzyma się zwykle jedną ręką. To ma trzy praktyczne konsekwencje.

Elementy do klikania muszą być duże i oddalone od siebie. Dwa odnośniki umieszczone jeden pod drugim w odstępie kilku pikseli działają bez zarzutu na komputerze i są loterią na telefonie. Najczęstsza ofiara: numer telefonu i adres e-mail wciśnięte obok siebie w stopce.

Najważniejsze działania powinny być w zasięgu kciuka. Kciuk osoby trzymającej telefon w jednej ręce swobodnie sięga dolnej i środkowej części ekranu. Górny róg - ten, w którym tradycyjnie umieszcza się menu - jest najtrudniej dostępny. Stąd bierze się popularność przycisku kontaktu zakotwiczonego przy dolnej krawędzi.

Kolejność sekcji ma większe znaczenie niż na dużym ekranie. Na monitorze klient ogarnia wzrokiem kilka elementów naraz. Na telefonie widzi jeden po drugim, w narzuconej kolejności. Jeśli między nagłówkiem a informacją o usłudze wciśniesz długi opis historii firmy, klient przewinie go w najlepszym razie z niecierpliwością, a w gorszym wcale.

Warto też pamiętać o dwóch drobiazgach, które kosztują nieproporcjonalnie dużo. Numer telefonu powinien być zapisany tak, żeby dało się w niego kliknąć i od razu zadzwonić - jeśli klient musi go przepisywać, część pomyłek nigdy nie wróci. A czcionka musi być czytelna bez powiększania; tekst, który wymaga rozsuwania palcami, jest tekstem, którego nikt nie czyta.

Ta sama treść, inna hierarchia

Najczęstsze nieporozumienie przy przenoszeniu strony na małe ekrany brzmi: „trzeba skrócić treść". Nie trzeba. Trzeba ją inaczej uporządkować.

Klient na telefonie nie czyta mniej - czyta selektywnie i w innej kolejności. Najpierw upewnia się, że trafił, gdzie chciał (czy to firma z mojej okolicy, czy robi to, czego szukam). Potem szuka jednej konkretnej informacji, która rozstrzyga jego sprawę: ceny, godzin, terminu, zakresu usług. Dopiero jeśli obie odpowiedzi go zadowolą, zaczyna czytać dłuższe fragmenty.

Z tego wynika porządek, który sprawdza się w większości firm usługowych:

Osobna uwaga należy się tabelom i cennikom. Szeroka tabela z pięcioma kolumnami jest nieczytelna na telefonie, niezależnie od tego, jak dobrze wygląda na monitorze. Na małym ekranie lepiej sprawdza się rozbicie jej na karty - jedna pozycja, jedna cena, jedno wyjaśnienie - albo przewijanie poziome z wyraźną sygnalizacją, że dalej jest ciąg dalszy.

Na telefonie nie skracamy treści. Zmieniamy kolejność tak, żeby odpowiedź na najważniejsze pytanie klienta była wyżej niż nasza opowieść o sobie.

Dwie szkoły i nasze stanowisko

W dyskusji o stronach na małe ekrany ścierają się dwa podejścia i oba mają sensowne argumenty.

Szkoła wizualna stawia na wrażenie: duże zdjęcia, pełnoekranowe kadry, płynne animacje. Argument jest mocny - wygląd realnie wpływa na ocenę firmy. Badania nad wiarygodnością stron pokazują, że znacząca część osób ocenia wiarygodność witryny między innymi po jej ogólnym wyglądzie: układzie, typografii i kolorach (Stanford Persuasive Technology Lab, Fogg i in., 2002 - badanie wskazało 46,1%). Słabość tej szkoły ujawnia się na słabym łączu: to, co miało budować zaufanie, staje się powodem, dla którego klient nie zobaczy niczego.

Szkoła użytkowa stawia na sprawność: mało grafiki, szybkie ładowanie, treść na wierzchu. Argument równie mocny - strona ma doprowadzić do kontaktu, a nie zachwycać. Jej słabość to ryzyko, że firma zostanie odebrana jako tania i przypadkowa, zwłaszcza w branżach, w których estetyka jest częścią usługi.

Nasze stanowisko: zacząć od sprawności, potem dołożyć tyle wrażenia, ile strona uniesie bez utraty tempa. W praktyce oznacza to jedno duże, dobrze przygotowane zdjęcie zamiast pięciu ciężkich, treść czytelną bez powiększania i przycisk kontaktu dostępny na każdym ekranie. Firmy, w których wygląd jest częścią oferty - gabinety kosmetyczne, fryzjerzy, fotografowie - mogą i powinny pozwolić sobie na więcej obrazu, ale pod warunkiem, że materiał zostanie przygotowany pod internet, a nie wgrany prosto z aparatu.

Praktyka: kwadrans, który wystarczy na diagnozę

Poniższy przegląd nie wymaga żadnych narzędzi ani wiedzy technicznej. Potrzebny jest telefon i piętnaście minut.

Wyjdź z domu albo wyłącz wi-fi. Testuj na danych komórkowych, najlepiej nie w idealnym zasięgu. To warunki, w których ogląda Cię klient.

Włącz stoper i wejdź na stronę. Zanotuj, po ilu sekundach zobaczyłeś treść, a nie białe tło.

Nie przewijaj przez pięć sekund. Zapisz, czego dowiedziałeś się z pierwszego ekranu. Czy wiadomo, co robisz i gdzie działasz?

Spróbuj zadzwonić jednym kliknięciem. Jeśli musisz przepisywać numer, masz pierwszy błąd do naprawy.

Wypełnij własny formularz kciukiem. Sprawdź, czy klawiatura nie zasłania pól i czy przy numerze telefonu podnosi się klawiatura numeryczna. Więcej o samym formularzu piszemy w tekście o formularzu kontaktowym.

Znajdź cenę i godziny. Policz, ile razy trzeba przewinąć. Jeśli więcej niż trzy, informacja jest za nisko.

Obróć telefon poziomo. Sprawdź, czy nic się nie rozjeżdża - to częsty, niezauważany błąd.

Największą trudnością we wdrożeniu poprawek bywa przywiązanie do układu, który dobrze wygląda na monitorze właściciela. Warto wtedy pamiętać, że monitor właściciela to jedyny ekran, na którym strona nie musi się sprawdzać - bo właściciel i tak wie, jak się skontaktować z własną firmą.

Perspektywy: coraz mniej cierpliwości, coraz krótsza droga

Kierunek zmian jest przewidywalny i warto go uwzględnić, planując stronę na kilka lat.

Po pierwsze, wymagania wobec szybkości będą rosnąć, nie maleć. Im lepsze łącza i sprawniejsze telefony, tym mniejsza tolerancja na czekanie. Strona, która dziś ładuje się „akceptowalnie", za dwa lata będzie odbierana jako powolna.

Po drugie, skraca się droga między znalezieniem firmy a kontaktem. Coraz więcej decyzji zapada bez wchodzenia głęboko w stronę - na podstawie wizytówki, pierwszego ekranu i jednej informacji, która rozstrzyga. To premiuje strony, które najważniejsze rzeczy mówią od razu, i karze te, które budują napięcie przez trzy sekcje.

Po trzecie, rośnie znaczenie dostępności rozumianej szeroko: czytelnych czcionek, odpowiedniego kontrastu, opisów zdjęć, możliwości obsługi jedną ręką. To nie jest wyłącznie kwestia wygody osób z ograniczeniami - to ta sama grupa rozwiązań, która ratuje każdego klienta patrzącego w telefon w słońcu, w rękawiczkach albo w pośpiechu.

Podsumowanie

Postawiliśmy tezę, że strona firmowa jest dziś narzędziem obsługiwanym kciukiem w niewygodnych warunkach, a nie dokumentem oglądanym przy biurku. Wszystkie omówione wątki do niej prowadzą.

Szybkość jest warunkiem wstępnym - strona, która się nie załaduje, nie ma szansy przekonać nikogo, a największym winowajcą są zwykle nieprzygotowane zdjęcia. Układ musi liczyć się z kciukiem: duże elementy do klikania, najważniejsze działania w dolnej części ekranu, klikalny numer telefonu. Treści nie skracamy, tylko porządkujemy tak, żeby odpowiedź na pytanie klienta padła wcześniej niż nasza opowieść o firmie. A cała diagnoza mieści się w kwadransie z własnym telefonem w ręku, bez żadnych narzędzi.

Jeśli po takim teście widzisz, że Twoja strona sprawdza się tylko na monitorze, masz gotową listę rzeczy do naprawy - i wiesz już, dlaczego mimo odwiedzin przychodzi mało zapytań. Więcej typowych usterek zebraliśmy w tekście o błędach na stronie firmowej. A jeśli wolisz, żeby ktoś zrobił to za Ciebie i od razu porządnie, napisz do nas - projektujemy od małego ekranu w górę, bo to tam klient podejmuje decyzję. Zakres prac i ceny znajdziesz w cenniku.

Najczęstsze pytania

Czy strona na telefonie musi wyglądać tak samo jak na komputerze?

Nie musi i zwykle nie powinna. Na małym ekranie ta sama treść układa się w jedną kolumnę, część elementów zmienia kolejność, a niektóre - jak rozbudowane tabele - wymagają innej formy. Chodzi o to, żeby klient dostał te same informacje, a nie identyczny obrazek.

Jak sprawdzić, czy moja strona dobrze działa na telefonie?

Najprościej: weź swój telefon, wyłącz wi-fi i wejdź na stronę z danych komórkowych, tak jak zrobiłby klient w drodze. Spróbuj w jednej ręce znaleźć numer, zadzwonić i wysłać wiadomość. Wszystko, co Cię zirytuje, irytuje też klientów.

Ile czasu ma strona na załadowanie się na telefonie?

Mniej, niż się wydaje. Badanie Google z 2017 roku pokazało, że przy wydłużeniu ładowania z jednej do trzech sekund prawdopodobieństwo opuszczenia strony rośnie o 32%, a przy dziesięciu sekundach o 123%. To dane zagraniczne, ale mechanizm jest uniwersalny: im dłużej trwa czekanie, tym więcej osób rezygnuje.

Co najczęściej psuje stronę na małym ekranie?

Ciężkie zdjęcia wgrane w oryginalnym rozmiarze, numer telefonu zapisany jako obrazek lub tekst bez możliwości kliknięcia, zbyt mała czcionka, przyciski położone zbyt blisko siebie i menu, które zasłania całą treść. To pięć problemów odpowiadających za większość zgłoszeń, jakie widzimy przy przebudowach.

Czy warto robić osobną stronę mobilną?

Nie. Osobna wersja pod telefony to rozwiązanie sprzed lat, które podwaja pracę przy każdej zmianie treści i łatwo się rozjeżdża. Dziś standardem jest jedna strona, która sama układa się pod rozmiar ekranu.

Czy strona na telefonie ma znaczenie dla widoczności w Google?

Wygoda korzystania na telefonie i szybkość ładowania należą do sygnałów branych pod uwagę przy ocenie stron. Nikt uczciwie nie obieca konkretnej pozycji, ale strona wolna i niewygodna na małym ekranie zaczyna wyścig z wyraźną stratą - i traci klientów niezależnie od wyszukiwarki.

Mam stronę sprzed kilku lat. Poprawiać czy robić nową?

Jeśli treść jest aktualna, a problem dotyczy układu i szybkości, czasem wystarczy poprawka. Jeśli strona powstała, gdy telefon był dodatkiem, zwykle taniej i szybciej wychodzi zbudowanie jej od nowa na współczesnych zasadach niż łatanie starego układu.