Mobile-first to nie pomniejszony desktop
Wciąż zdarza się myśleć, że „mobile-first” oznacza po prostu pomniejszenie wersji desktopowej. To błąd.
Mobile-first to podejście, w którym telefon jest punktem startowym.
Dlaczego? Bo dla pokolenia „mobile-only” smartfon jest jedynym ekranem, z którego robią zakupy.
A to oznacza: treści w pierwszej kolejności, wygoda obsługi kciukiem, szybkie płatności w 2–3 kliknięciach i maksymalna wydajność (bo nikt nie czeka na wolno ładujący się sklep).
Desktop? To tylko rozszerzenie, a nie podstawa.
Od czego zacząć design mobile-first?
1. Priorytet treści
Na jednym ekranie – jeden główny cel. Maksymalnie jedno CTA główne (np. „Dodaj do koszyka”) i jedno dodatkowe (np. „Zapisz na liście”).
2. Wydajność
Użytkownik nie poczeka. Strona musi być lekka (start <1,5 MB), szybka (LCP <2,5 s) i stabilna (CLS <0,1). Sprawdź performance sklepu tutaj.
3. Płatności
Nie każ nikomu przebijać się przez pięć ekranów checkoutu. Apple Pay, Google Pay czy BLIK muszą być dostępne już na stronie produktu i w koszyku.
4. Dostępność
WCAG 2.2 AA to nie fanaberia – to podstawa. Chodzi o to, żeby każdy mógł zrobić zakupy, niezależnie od ograniczeń.
UX pod kciuk – czyli jak się projektuje na telefon
Strefy zasięgu
Najłatwiej sięga się do dołu i środka ekranu. Tam powinny być wszystkie kluczowe akcje.
Nawigacja
Dolny pasek (max 4–5 ikon). Sticky CTA na PDP: „Dodaj do koszyka” + cena – zawsze widoczne.
Gesty
Tak, ale z głową. Swipe w karuzeli – tak. Pull to refresh – tak, ale niech będzie też klasyczny przycisk.
Jak ułatwić zakupy?
Wyszukiwarka to królowa
Użytkownik często nie chce „przeglądać” – on chce szybko znaleźć produkt. Dlatego: autosugestie (produkty, kategorie), fokus od razu w polu wyszukiwania i klawiatura aktywna od startu.
Filtry i sortowanie
Nie chowaj ich głęboko. Filtry najlepiej jako bottom sheet, a wybrane opcje pokaż nad listą w formie chipsów.
Strona produktu (PDP)
Co musi być od razu na ekranie?
Zdjęcia (z pinch-to-zoom), cena, wariant, dostępność i sticky CTA „Dodaj do koszyka” + cena.
Dopiero niżej: warianty w formie dużych przycisków, parametry techniczne (w akordeonach) i rekomendacje typu „Kupowane razem”. I jeszcze jedno: zaufanie. Opinie, oceny, ikony zwrotów i gwarancji – to uspokaja użytkownika.
Koszyk i checkout
Koszyk
Pokaż progress do darmowej dostawy, pozwól zmienić ilość od razu, kupon w bottom sheet i CTA „Do płatności” przypięte na dole.
Checkout
Nie zmuszaj do logowania – guest checkout to standard. Kroki powinny być proste i przewidywalne: Email, Dostawa, Adres, Płatność, Podsumowanie. Ekspresowe płatności (Apple Pay, Google Pay, BLIK) – na widoku od razu.
Formularze, które nie męczą
Pola muszą mieć odpowiednie typy (email, tel, kod pocztowy). Klawiatury kontekstowe – obowiązkowe. Autofill i sugestie adresów – wielki plus. Komunikaty błędów jasne i konkretne (nie „Coś poszło nie tak”, tylko „Podaj numer telefonu w odpowiednim formacie (zastosuj placeholder).
Szybkość = konwersja
Obrazy w WebP/AVIF, lazy load poniżej folda. CSS krytyczne inline, reszta z opóźnieniem. Skeletony zamiast spinnerów – użytkownik widzi, że coś się ładuje. Pomoże Tobie w tym ta lekka i szybka aplikacja do kompresji i konwersji zdjęć.
Wygoda i dostępność
Kontrast i czytelność. Obsługa screen readerów. Tryb dark mode. Dynamiczne powiększanie tekstu bez psucia layoutu.
Zaufanie i compliance
Polityka zwrotów i dostawy – widoczna od razu. Opinie i oceny – z filtrowaniem. Odznaki bezpieczeństwa – w rozsądnej ilości. Baner cookies – prosty i jasny (nie agresywny).
Co mierzyć?
⚡️Add-to-cart rate (ile osób z PDP wrzuca do koszyka).
⚡️Completion rate checkoutu.
⚡️Gdzie ludzie najczęściej się zatrzymują i porzucają?
⚡️Które pola w formularzu sprawiają problemy?
Aplikacja czy web?
PWA to złoty środek – działa jak aplikacja, ale bez bariery instalacji. App Clips / Instant Apps są fajne, ale tylko gdy masz dużą bazę userów. Web zawsze zostaje. Pamiętaj o tym i projektuj tak, jakby to była aplikacja.
Mobile-first checklist
✅ Dolna nawigacja + sticky CTA.
✅ Duże, wygodne tap-targety.
✅ Płatności mobilne na PDP i checkout.
✅ Filtry w bottom sheet + chipsy.
✅ Galeria ze swipe i pinch-to-zoom.
✅ Checkout guest-first z autofill.
✅ LCP <2,5 s, CLS <0,1, INP <200 ms.
✅ WCAG 2.2 AA.
✅ Zaufanie widoczne od razu.
✅ Analityka i ciągłe A/B testy.
W skrócie: mobile-first to prostota, szybkość i zero tarcia. Użytkownik nie ma cierpliwości – musisz dać mu zakupy tak proste, jak zamówienie przejazdu w Uberze.
