Strona mobile first – bo tam jest większość Twoich klientów

Wyobraź sobie typową chwilę, w której ktoś trafia na Twoją stronę. Nie siedzi przy biurku z dużym monitorem i myszką. Stoi w kolejce, leży na kanapie albo czeka na autobus, trzyma telefon w jednej dłoni i przewija kciukiem. Tak właśnie dziś wygląda większość wizyt na stronach małych firm. Klient nie „przegląda witryny", tylko szybko sprawdza na telefonie, czy warto zostać, czy lepiej wrócić do wyników wyszukiwania.

Mimo to wiele stron wciąż powstaje tak, jakby świat zatrzymał się na komputerze. Projekt wygląda świetnie na szerokim ekranie, a na telefonie tekst jest za drobny, przyciski uciekają poza kadr, a formularz prosi o cierpliwość anioła. Skoro to telefon jest miejscem, w którym spotykasz większość klientów, to właśnie od telefonu warto zacząć projektowanie. Na tym polega podejście mobile first i o nim jest ten artykuł.

Dlaczego mobile first

Mobile first to prosta zmiana kolejności myślenia. Zamiast najpierw zaprojektować stronę pod duży ekran, a potem na siłę upychać ją na telefonie, robimy odwrotnie: najpierw projektujemy wersję na telefon, a dopiero potem rozbudowujemy układ na większe ekrany. Telefon jest punktem wyjścia, a nie wersją okrojoną, którą dorabia się na końcu w pośpiechu.

Skąd ta kolejność? Z liczb. W większości branż ponad połowa ruchu na stronie pochodzi dziś z telefonów, a w wielu sektorach w Europie jest to nawet 60–70% wizyt. Dla wielu lokalnych usług, sklepów i gabinetów telefon to po prostu domyślny ekran, a komputer staje się wyjątkiem, nie odwrotnie. Jeśli projektujesz głównie pod komputer, optymalizujesz stronę dla mniejszości odwiedzających.

Jest jeszcze drugi powód, czysto techniczny. Google od lat stosuje tak zwane mobile-first indexing, czyli do oceny i pozycjonowania strony bierze pod uwagę przede wszystkim jej wersję mobilną. Innymi słowy: to, jak Twoja strona wygląda i działa na telefonie, wpływa na to, gdzie pojawi się w wynikach wyszukiwania, nawet dla osób szukających na komputerze. Słaba wersja mobilna to nie tylko gorsze wrażenie klienta, ale też realnie niższa widoczność.

Warto więc raz na zawsze przestawić myślenie. Telefon nie jest sytuacją awaryjną ani wersją „na szybko". To miejsce, w którym najczęściej zapada decyzja, czy klient do Ciebie napisze, zadzwoni albo kupi. Strona zaprojektowana w pierwszej kolejności pod ten ekran zwyczajnie częściej spełnia swoje zadanie.

Częste błędy na telefonie

Większość problemów z wersją mobilną nie wynika ze złej woli, tylko z tego, że stronę oceniano na dużym ekranie, gdzie wszystko ładnie się mieści. Na telefonie te same decyzje zaczynają boleć. Oto błędy, które spotyka się najczęściej i które realnie odbierają klientów.

• Za drobny tekst – treść, którą trzeba powiększać palcami, żeby cokolwiek przeczytać. Klient nie będzie się męczył, po prostu wyjdzie.
• Klikalne elementy za blisko siebie – linki i przyciski stłoczone tak gęsto, że trudno trafić w ten właściwy bez pomyłki.
• Poziome przewijanie – strona „wystaje" poza szerokość ekranu i trzeba ją przesuwać na boki. To prawie zawsze znak, że układ nie został dopasowany do telefonu.
• Ciężkie zdjęcia i wolne ładowanie – duże pliki, które na komputerze ładują się błyskawicznie, na telefonie potrafią ciągnąć się sekundami, a klient czeka tylko chwilę.
• Wyskakujące okna zasłaniające ekran – pop-upy, których krzyżyk do zamknięcia jest mikroskopijny albo schowany poza widokiem, przez co cała strona staje się bezużyteczna.
• Menu trudne do otwarcia – ukryta nawigacja, w którą ciężko trafić albo która działa kapryśnie, więc klient nie wie, jak dostać się do oferty czy kontaktu.
• Formularze nie do wypełnienia kciukiem – pola za małe, źle ułożone, wymuszające ciągłe przewijanie i powiększanie zamiast spokojnego wpisania danych jedną ręką.
• Treść ukryta lub ucięta – ważne informacje, które na telefonie znikają, chowają się pod elementami albo zostają obcięte przy krawędzi ekranu.

Każdy z tych błędów z osobna wygląda niewinnie, ale razem tworzą stronę, którą po prostu trudno obsłużyć w biegu. Część z nich, zwłaszcza wolne ładowanie, ma też ścisły związek z tym, jak Google ocenia stronę. Jeśli chcesz zrozumieć tę warstwę bez wchodzenia w kod, zajrzyj do tekstu Core Web Vitals dla nieprogramistów.

Kciuk i strefy dotyku

Kiedy ktoś korzysta z telefonu jedną ręką, a robi tak większość ludzi, głównym narzędziem staje się kciuk. To zmienia wszystko. Mysz na komputerze dociera wszędzie z taką samą łatwością, a kciuk nie. Ma swój naturalny łuk ruchu, swoje strefy łatwego i trudnego zasięgu, i to one decydują, czy obsługa strony jest wygodna, czy męcząca.

W uproszczeniu ekran telefonu można podzielić na trzy obszary. Dolna i środkowa część to strefa łatwego zasięgu, do której kciuk dociera bez wysiłku. Górne rogi, zwłaszcza ten przeciwny do trzymającej ręki, to strefa trudna, do której trzeba przekładać telefon albo pomagać sobie drugą dłonią. Im ważniejszy element, tym bliżej wygodnej strefy powinien się znaleźć.

Stąd prosty wniosek: najważniejsze przyciski wezwania do działania i podstawowa nawigacja powinny być w zasięgu kciuka, a nie chować się w górnym rogu, gdzie trudno je nacisnąć. Numer telefonu, przycisk „Napisz do nas" czy „Zamów" warto trzymać tam, gdzie naturalnie ląduje palec, a nie tam, gdzie akurat zostało miejsce w układzie.

Liczy się też sam rozmiar i rozmieszczenie elementów dotykowych. Przyjmuje się, że minimalny wygodny cel dotyku ma około 44–48 pikseli, czyli mniej więcej tyle, co opuszek palca. Mniejsze przyciski to loteria, w której łatwo trafić w sąsiedni element. Do tego dochodzą odstępy: nawet duże przyciski sklejone ze sobą prowadzą do pomyłek, dlatego między klikalnymi elementami trzeba zostawić oddech. Duże, czytelne przyciski z wyraźnym opisem to nie kwestia estetyki, tylko tego, czy klient w ogóle da radę z Tobą skontaktować się jednym kciukiem.

Jak testować bez wiedzy technicznej

Dobra wiadomość jest taka, że nie musisz znać się na kodzie ani na narzędziach dla programistów, żeby ocenić własną stronę na telefonie. Wystarczy potraktować ją tak, jak zrobiłby to klient, i uważnie obserwować, gdzie zaczyna się tarcie. Oto kilka prostych sposobów, które możesz przejść samodzielnie.

• Otwórz własną stronę na swoim telefonie i spróbuj wykonać konkretne zadanie, na przykład znaleźć cenę albo wysłać formularz kontaktowy. Nie czytaj jej jak właściciel, tylko działaj jak klient, który ma cel.
• Poproś kilku znajomych o test – daj im to samo zadanie i nic nie podpowiadaj. Świeże oczy wyłapią rzeczy, których Ty już nie widzisz, bo znasz stronę na pamięć.
• Użyj trybu mobilnego w przeglądarce na komputerze – możesz włączyć tryb deweloperski i podejrzeć widok telefonu albo po prostu mocno zwęzić okno przeglądarki i sprawdzić, czy układ się nie rozjeżdża.
• Skorzystaj z darmowych narzędzi Google – test optymalizacji mobilnej oraz PageSpeed Insights pokażą, jak strona radzi sobie na telefonie i jak szybko się ładuje, w prostej, czytelnej formie.
• Notuj, gdzie się gubisz – każde miejsce, w którym musisz powiększać, szukać przycisku albo zastanawiać się, co zrobić dalej, to potencjalny punkt, w którym tracisz klienta.

Taki test zajmuje kilka minut, a daje zaskakująco dużo. Najczęściej okazuje się, że problem nie leży w wyglądzie strony, tylko w drobnych przeszkodach, które utrudniają najprostsze działania. To zresztą sedno dobrego projektowania, o którym piszemy szerzej w tekście o tym, czym jest UX.

Jeśli po takim przejściu masz listę miejsc, w których strona stawia opór na telefonie, jesteś już znacznie dalej niż większość firm. Mobile first nie jest modnym hasłem, tylko uznaniem prostego faktu: skoro większość Twoich klientów jest na telefonie, to właśnie tam strona musi działać bez zarzutu.

Autor

Madina Karwat

madinakarwat.pl