Motyw jest „mobile friendly”. PageSpeed świeci na zielono. Ktoś nawet dodał przyklejony przycisk Dodaj do koszyka. A jednak sesja na telefonie wciąż umiera w połowie ściany desktopowych resztek – pasek promocyjny, baner cookies, logotypy zaufania, akapit SEO, a potem malutkie zdjęcie produktu. To nie jest mobilna strona produktu. To desktopowy układ wciśnięty w wąski ekran i sprzedawany jako optymalizacja.
Google już indeksuje i ocenia głównie na podstawie mobilnej wersji Twoich stron. Jeśli ścieżka zakupowa działa tylko na szerokim monitorze, nie jesteś „prawie u celu” – mierzysz zły ekran. Towarzysząca mapa tego, co powinno być na stronie produktu, obejmuje pełną listę niezbędnych elementów; ten wpis dotyczy kolejności, w jakiej te bloki lądują, gdy ekran ma 390 pikseli szerokości.
Dobra mobilna strona produktu to problem układania bloków, a nie ich stylowania.
„Mobile optimized” zazwyczaj oznacza, że desktop nadal rządzi
Responsywny CSS sprawia, że kolumny układają się jedna pod drugą. Nie decyduje o tym, co zasługuje na pierwsze przewinięcie kciukiem. Motywy zachowują desktopową kolejność modułów. Aplikacje wstrzykują kod tam, gdzie zawsze to robiły. Nikt niczego nie przeorganizował – telefon po prostu ściska tę samą sekwencję, aż przycisk Dodaj do koszyka ląduje pod trzema blokami, które nie służą do kupowania.
Symptomy są nudne i powtarzalne. Otwórz działający produkt na własnym telefonie – nie podgląd w back office, ale prawdziwy URL z załadowanymi wszystkimi modułami. Jeśli musisz przewijać zbędne dodatki, zanim w ogóle nazwiesz produkt, przeczytasz cenę zgodną z reklamą lub klikniesz Dodaj do koszyka, układ wciąż jest desktop-first. Wyniki szybkości nie naprawią złej kolejności.
Co mobilna strona produktu musi robić na pierwszym ekranie
Każda mobilna strona produktu ma jedno zadanie na pierwszym ekranie: pozwolić komuś podjąć decyzję i zadziałać. Nie „poczuć markę”. Nie „zobaczyć każdy sygnał zaufania”. Zdecydować i zadziałać.
Na tym pierwszym ekranie chroń tylko to, co odblokowuje zakup:
- Tożsamość. Nazwa i wyraźne zdjęcie główne – wystarczająco duże, by produkt był oczywisty bez przybliżania palcami.
- Cena zgodna z kliknięciem. Jeśli reklama lub listing mówiły 47,90 zł, pierwszy ekran nie może ukrywać innej kwoty za zamkniętym akordeonem.
- Kluczowe opcje zakupowe. Rozmiar, kolor, opakowanie – wszystko, co trzeba wybrać, zanim zadziała Dodaj do koszyka. Etykiety, które obcy człowiek potrafi rozszyfrować; kody dostawców i „Rozmiar1 / Rozmiar2” marnują cenne miejsce i kliknięcia. To ten sam żargon produktowy i problem UX, tylko głośniejszy na telefonie.
- Dostępna główna akcja zakupowa. Prawdziwe Dodaj do koszyka (lub Kup), a nie dekoracyjny przyklejony element, który zasłania działający przycisk i nie robi nic pożytecznego.
- Jeden szczery sygnał o stanie magazynowym lub dostawie, gdy zmienia to decyzję – wysyłka w 2 dni, robione na zamówienie, ciężki transport. A nie cała nowela o polityce sklepu.
Wszystko inne czeka poniżej. Opinie, długi opis, powiązane produkty, historia marki – przydatne później, fatalne, gdy wypychają kontrolki zakupowe poza pierwszy ekran.
Desktopowe zrzutowisko: co zazwyczaj kradnie pierwszy ekran
Wciąż widzimy ten sam stos na prawdziwych telefonach. W jednym z audytowanych katalogów nad nazwą produktu znajdowało się pięć przyklejonych pasków – a dwa z nich mówiły to samo. Zwykli podejrzani:
- Dodatki przed produktem. Pasek promocyjny + ogłoszenie + komunikat o ciasteczkach + „pobierz naszą aplikację” – cztery paski, zanim w ogóle załaduje się zdjęcie. Kupujący przyszedł po produkt, nie po billboard.
- Tapeta zaufania zamiast zrozumienia. Rząd logotypów płatności i bezpieczeństwa przed ceną lub zdjęciem. Nerwowe ozdobniki nie zastąpią jasnego przedstawienia produktu.
- Esej SEO pod tytułem. Dwieście słów naszpikowanego słowami kluczowymi wstępu skopiowanego z szablonu desktopowego, przez co cena i opcje zaczynają się poniżej linii zanurzenia na każdym telefonie. Ten tekst został napisany dla Google, nie dla osoby trzymającej telefon – a Google świetnie czyta go z dalszej części strony.
- Cross-sell przed Dodaniem do koszyka. Karuzele „Może Ci się również spodobać” walczące o strefę kciuka, podczas gdy główny produkt wciąż nie ma wybranego rozmiaru.
- Galeria, która pożera ekran. Ogromne miniatury lub slider, który wymaga trzech pociągnięć palcem, zanim pojawi się cena – w porządku na desktopie, niegrzeczne na telefonie.
- Przyklejony UI, który kłamie. Pływający pasek, który zasłania prawdziwe Dodaj do koszyka, albo przyklejony przycisk, który jest wyłączony bez żadnego błędu, ponieważ jakaś opcja jest pusta. Podgląd wyglądał czysto; działająca strona z modułami już nie.
Nic z tego nie wymaga budżetu na redesign. Wymaga kogoś, kto przyzna, że desktopowa kolejność przetrwała „projekt mobilny”.
Zmień kolejność, zanim zaczniesz przebudowę
Wybierz stronę, na której mobilna strona produktu generuje ruch i słabe konwersje. Otwórz ją na prawdziwym telefonie. Zrób zrzut pierwszego ekranu. Następnie wypisz każdy widoczny blok od góry do dołu – paski, zdjęcie, tytuł, cena, moduły, przyciski. Oznacz każdy blok jako kluczowy dla zakupu lub szum.
Jeśli szum znajduje się nad elementami kluczowymi dla zakupu, przenieś go lub usuń. Pozycje w motywie i zaczepy modułów (hooki) na pierwszym miejscu: w PrestaShop to kolejność hooków na stronie produktu, w Shopify kolejność sekcji w edytorze motywu, w WooCommerce to, co ułożył page builder. Nie kupuj kolejnej aplikacji „mobile UX”, dopóki obecny układ nie będzie szczery. Redesign, który zachowuje tę samą kolejność modułów, to tylko odmalowanie zrzutowiska.
Strony kategorii mają inne zadanie – orientacja nad siatką produktów – więc nie kradnij stamtąd poprawek; jeśli to strona listingu jest bałaganem, zacznij od tego, jaka powinna być treść strony kategorii ecommerce. Ten audyt dotyczy jednego adresu URL produktu.
Po Dodaniu do koszyka: co wciąż zasługuje na miejsce
Gdy ścieżka zakupowa jest nienaruszona, reszta strony może zapracować na swoje utrzymanie: specyfikacje, pielęgnacja, dopasowanie, FAQ, które zabija prawdziwe obiekcje, porównanie z pokrewnymi produktami. Na stronie takiej jak mobilna strona produktu te bloki muszą znajdować się po ścieżce decyzyjnej – nie mogą jej przerywać. Ta sama zasada, co na pełnej mapie strony produktu z towarzyszącego wpisu, przycięta do ekranu wielkości kciuka.
Uwagi o platformach bez kazań o CMS-ach
PrestaShop, Shopify, WooCommerce – ten sam rodzaj awarii. Podgląd w back office to nie jest działający sklep. Aplikacje i moduły wstrzykują się późno: narzędzia do ciasteczek, upselle, czat, paski powiadomień. Przeprowadź audyt na prawdziwym telefonie po twardym odświeżeniu, wylogowany – na średniej klasy Androidzie, którego faktycznie noszą Twoi klienci, a nie na flagowcu przy biurowym Wi-Fi.
Sklepy wielojęzyczne otrzymują dodatkową ranę. Tytuły i krótkie opisy w językach FR/DE/PL są często dłuższe niż angielski szkic. Na desktopie wzruszasz ramionami. Jednak gdy to mobilna strona produktu, dłuższy ciąg znaków spycha cenę i Dodaj do koszyka o kolejne pół ekranu w dół. Przetłumacz znaczenie, a potem przytnij długość dla telefonu – nie ograniczaj się tylko do tłumaczenia.
Jeśli brakuje odpowiedzi, napraw to najpierw
Zmiana kolejności nie uratuje strony, która nigdy nie odpowiada na pytania, co to jest, ile kosztuje ani kiedy dotrze. Najpierw napraw te odpowiedzi zakupowe na pełnej stronie produktu. Jeśli one istnieją, a telefon wciąż grzebie je pod desktopowymi resztkami, Twoja mobilna strona produktu nie potrzebuje kolejnej odznaki optymalizacji – potrzebuje krótszego stosu.