Mobile commerce - optymalizacja sklepu dla telefonów
70%+ ruchu e-commerce to mobile, ale konwersja na mobile jest o 50% niższa niż na desktop. Problem? Sklepy projektowane dla desktop, wyświetlane na telefonie. Pokażę Ci jak to naprawić.
Krótka odpowiedź
Dlaczego mobile ma niższą konwersję
Typowa sytuacja:
- Desktop conversion: 3%
- Mobile conversion: 1.5%
- Mobile traffic: 70%
- = tracisz ogromną sprzedaż
Problemy mobile:
- Strona projektowana dla desktop
- Za wolne ładowanie (mobile = często 3G/4G)
- Małe przyciski, trudno kliknąć
- Skomplikowana nawigacja
- Checkout nie dostosowany
- Pop-upy blokujące ekran
Zachowania mobile users:
- Przeglądają, porównują
- Mniej cierpliwości (3s max na ładowanie)
- Często przerywają, wracają później
- Kupują prostsze produkty impulsowo
Podstawy mobile UX
Touch-friendly elementy:
- Przyciski min. 44x44px (Apple guideline)
- Odstępy między klikalnymi elementami
- Większy tekst (min. 16px base)
Nawigacja:
- Hamburger menu (kontrowersyjne ale standard)
- Sticky header z koszykiem
- Wyszukiwarka widoczna
- Breadcrumbs dla orientacji
Strona produktu:
- Zdjęcia pełnej szerokości, swipe gallery
- Sticky "Dodaj do koszyka"
- Accordion dla długich opisów
- Warianty jako przyciski (nie dropdown)
Koszyk:
- Mini-cart (slide-in, nie nowa strona)
- Edit quantity inline
- Usuń jednym kliknięciem
Eliminuj:
- Hover effects (nie ma hover na touch)
- Zbędne animacje (wolne)
- Multi-column layout na małych ekranach
Szybkość mobile
Dlaczego kluczowa:
- 53% opuszcza stronę >3s ładowania
- Google preferuje szybkie strony (ranking)
- Mobile często na wolniejszym połączeniu
Metryki:
- LCP (Largest Contentful Paint): <2.5s
- FID (First Input Delay): <100ms
- CLS (Cumulative Layout Shift): <0.1
- Google PageSpeed Insights: >70 mobile
Optymalizacje:
- Lazy loading obrazów
- WebP format (30% mniejszy)
- Critical CSS inline
- Defer non-critical JS
- CDN (Cloudflare)
- Cache (LiteSpeed Cache, WP Rocket)
Hosting:
- Szybki serwer (LiteSpeed)
- Blisko użytkowników (EU dla PL)
- HTTP/2, HTTP/3
AMP:
- Accelerated Mobile Pages
- Ultra szybkie, ale ograniczone
- Dla bloga/content, nie dla sklepu
Mobile checkout
Uproszczenie:
- Jeszcze mniej pól niż desktop
- Autouzupełnianie numeru karty (kamera)
- One-tap payment (Apple Pay, Google Pay)
Wpisywanie danych:
- Odpowiednie typy inputów (tel, email)
- Klawiatura numeryczna dla kodu pocztowego
- Autofill adresu (Google Places)
Progress:
- Widoczny progress bar
- Numerowane kroki
- Możliwość cofnięcia
Payment:
- BLIK (6 cyfr, szybko)
- Apple Pay / Google Pay (one-tap)
- Zapisane karty
Po zakupie:
- Potwierdzenie na ekranie
- Link do śledzenia (nie wymagaj logowania)
Testowanie mobile
Nie tylko resize okna:
- Chrome DevTools (F12 → Toggle device)
- To tylko symulacja!
- Nie uwzględnia: wydajności, połączenia, touch
Prawdziwe urządzenia:
- Testuj na iPhone i Android
- Różne rozmiary ekranów
- Różne przeglądarki (Safari, Chrome mobile)
Narzędzia:
- BrowserStack (emulacja wielu urządzeń)
- Google PageSpeed Insights (mobile score)
- Google Mobile-Friendly Test
- Hotjar/Clarity (nagrania sesji mobile)
User testing:
- Poproś 5 osób o zakup na telefonie
- Obserwuj gdzie mają problemy
- Feedback > analytics
Metryki do śledzenia:
- Bounce rate mobile vs desktop
- Conversion rate mobile vs desktop
- Pages per session mobile
- Cart abandonment mobile