Projektowanie stron e-commerce — mobilne rozwiązania

Projektowanie stron e-commerce to dziś przede wszystkim projektowanie pod kciuk. Ponad 70% transakcji w sklepach internetowych w Polsce jest finalizowanych na smartfonach, a Google indeksuje wyłącznie wersję mobilną. Jeśli Twój sklep nie jest zoptymalizowany pod mobile-first, tracisz nie tylko klientów, ale i pozycje w wyszukiwarce. Poniżej konkretne rozwiązania, które wdrożysz od zaraz.

Mobile-first to nie opcja, a fundament

Mobile-first oznacza, że projektujesz interfejs najpierw dla ekranu 320-375px, a dopiero potem skalujesz w górę. To odwrócenie tradycyjnego myślenia. W praktyce:

• Ustal breakpointy na 320px, 480px, 768px, 1024px. Nie ufaj domyślnym ustawieniom frameworków.
• Zredukuj liczbę elementów na stronie głównej do maksymalnie 5-7 sekcji. Każdy dodatkowy blok to dłuższy czas ładowania i większe ryzyko porzucenia.
• Testuj na fizycznych urządzeniach – emulatory w Chrome DevTools nie oddają realnego zachowania dotykowego i wydajności baterii.

Przykład: Zamiast slidera z 5 banerami (który na mobile i tak nie działa), postaw na jeden statyczny hero image z jednym CTA. Zwiększa to CTR o 30-40% w porównaniu do karuzeli.

UX na małych ekranach – konkretne reguły

Rozmiar elementów dotykowych

• Minimalny obszar klikalny: 48x48px (zalecenie Google Material Design). Mniejsze przyciski powodują frustrację i błędy.
• Odstępy między elementami: minimum 8px. Zbyt ciasne ułożenie prowadzi do przypadkowych kliknięć.

Formularze i inputy

• Pola formularza powinny mieć wysokość minimum 44px.
• Etykiety umieszczaj nad polem, nie wewnątrz (placeholder znika po wpisaniu tekstu).
• Autouzupełnianie – włącz atrybut autocomplete dla adresu, emaila, kodu pocztowego. To skraca czas wypełniania formularza o 40%.

Czytelność treści

• Czcionka: minimum 16px dla tekstu podstawowego. Mniejsza zmusza do zoomowania.
• Kontrast: współczynnik minimum 4.5:1 dla tekstu (WCAG AA). Sprawdź narzędziem WebAIM Contrast Checker.
• Długość linii: maksymalnie 60-70 znaków. Na mobile to naturalne, ale na tabletach kontroluj szerokość kontenera.

Szybkość mobilna – liczby i narzędzia

Google Core Web Vitals to wytyczne, które bezpośrednio wpływają na ranking. Dla e-commerce kluczowe są:

• LCP (Largest Contentful Paint): poniżej 2.5 sekundy. Obrazy produktów to najczęściej największy element. Rozwiązanie: używaj WebP z atrybutami loading="lazy" i sizes. Serwuj obrazy o szerokości 480px dla mobile.
• FID (First Input Delay): poniżej 100 ms. Winowajcą jest ciężki JavaScript. Rozwiązanie: odrocz ładowanie skryptów analitycznych i czatów za pomocą defer lub async. Wdróż code splitting dla React/Vue.
• CLS (Cumulative Layout Shift): poniżej 0.1. Najczęściej powodują go dynamicznie wczytywane reklamy, fonty i obrazy bez zadeklarowanych wymiarów. Rozwiązanie: zawsze dodawaj width i height do <img> oraz <video>. Używaj font-display: swap dla czcionek.

Narzędzia do audytu: PageSpeed Insights (rzeczywiste dane z Chrome UX Report), Lighthouse w trybie mobilnym, WebPageTest z lokalizacją Warszawa.

Nawigacja i koszyk na telefonie – ergonomia zakupów

Nawigacja

• Menu hamburger jest akceptowalne, ale tylko jako ostateczność. Lepiej sprawdza się dolny pasek nawigacyjny (bottom navigation) z 4-5 ikonami: Strona główna, Kategorie, Koszyk, Konto, Wyszukiwarka.
• Wyszukiwarka musi być widoczna od razu – nie chowaj jej za ikoną lupy. Pole wyszukiwania na górze ekranu zwiększa konwersję o 15-20%.
• Filtry i sortowanie umieść w rozwijanym panelu bocznym (drawer), nie na osobnej stronie. Użytkownik nie chce tracić kontekstu listy produktów.

Koszyk

• Przycisk „Dodaj do koszyka” musi być zawsze widoczny bez scrollowania (above the fold). Na karcie produktu umieść go na dole ekranu, przyklejony (sticky).
• Miniaturka koszyka w prawym górnym rogu z liczbą produktów. Po dodaniu produktu pokaż mikroanimację (np. przesunięcie ikony) i przycisk „Przejdź do koszyka” lub „Kontynuuj zakupy”.
• Proces checkoutu maksymalnie w 3 krokach: Koszyk → Dane dostawy i płatność → Podsumowanie. Żadnych rejestracji przed zakupem (gość checkout).

Przykład: Sklep odzieżowy zamiast 5-etapowego formularza wdrożył jednostronicowy checkout z autouzupełnianiem adresu. Współczynnik porzuceń koszyka spadł z 72% do 58%.

Najczęstsze błędy w projektowaniu mobilnym e-commerce

1. Zbyt małe przyciski CTA – „Dodaj do koszyka” o wysokości 30px to proszenie się o niską konwersję. Minimum 48px.
2. Brak widocznego koszyka – schowany za hamburgerem lub w ogóle niewidoczny. Użytkownik nie wie, czy cokolwiek dodał.
3. Przeładowanie strony głównej – 15 sekcji, slider, pop-upy, czat. Ładowanie trwa 8 sekund. Użytkownik odchodzi po 3.
4. Ignorowanie gestów dotykowych – pinch-to-zoom zablokowany, swipe nie działa w galerii produktów. To blokuje naturalne zachowania.
5. Brak responsywnych tabel – porównanie produktów wyświetla się w poziomym scrollu, który użytkownik musi przeciągać. Zamiast tego użyj listy akordeonowej.
6. Automatyczne odtwarzanie wideo – zużywa transfer i denerwuje. Zawsze dawaj przycisk „Play”.
7. Zbyt długie formularze rejestracji – 10 pól to za dużo. Zbieraj tylko imię, email i hasło. Resztę dopytaj przy składaniu zamówienia.

Podsumowując: Mobilne e-commerce to gra o milisekundy i piksele. Zastosuj mobile-first, zoptymalizuj Core Web Vitals, uprość nawigację i koszyk. Testuj na prawdziwych urządzeniach, nie w emulatorze. Każdy z tych kroków bezpośrednio przekłada się na wyższy ranking i większą sprzedaż.

To działa najlepiej nie w pojedynkę, lecz jako element usprawnienie ścieżki zakupu — bo w e-commerce pojedyncza poprawka rzadko przesuwa wynik, a system poprawek owszem.