Mobile UX: 7 błędów które tracą 30% konwersji

Google rekomenduje minimum 44x44px dla elementów interaktywnych. Apple Guidelines mówią o 44pt. Widzę sklepy z przyciskami 24x24px (social icons), linkami w nawigacji 28px wysokości, checkboxami 16x16px. Użytkownik klika w próżnię, frustruje się, wychodzi.

Naprawa: min-height: 44px; min-width: 44px dla wszystkich elementów interaktywnych. Social icons otoczone blokiem o min 44x44px. Sprawdzaj w Chrome DevTools → Lighthouse → "Tap targets".

Na telefonie wpisywanie adresu, emaila i numeru karty to koszmar. Browser potrafi to wypełnić automatycznie z zapisanych danych — ale tylko jeśli pole ma prawidłowy atrybut autocomplete. Bez niego użytkownik musi wpisywać ręcznie. Dropout rate na checkout rośnie o 30-40% przy braku autocomplete.

Naprawa: Dodaj atrybuty: autocomplete="email" dla emaila, "name" dla imienia i nazwiska, "tel" dla telefonu, "street-address", "postal-code", "cc-number", "cc-exp", "cc-csc" dla płatności. Pełna lista na MDN.

Karuzele na mobile są udowodnioną katastrofą UX. Według badań Nielsen Norman Group, 1% użytkowników klika slajdy poza pierwszym. Reszta myśli, że strona jest statyczna, lub nie widzi że jest więcej contentu. Sklepy chowają bestsellery w slocie 3 karuzeli i dziwią się, że produkt nie sprzedaje.

Naprawa: Bento grid zamiast karuzeli. Na mobile: 2 kolumny produktów z scroll pionowym. Widać od razu co jest w ofercie, bez ukrytego contentu. Wyjątek: carousel dla full-bleed hero images, gdzie każdy slide widoczny z paginacją dots.

Ktoś trafia na stronę po raz pierwszy, jeszcze nie wie co sprzedajesz, a już dostaje popup "Zapisz się do newslettera -10%". Na mobile ten popup często zasłania połowę ekranu. Google's Page Experience penalizuje intrusive interstitials — popup może zepsuć SEO. Conversion rate na popup natychmiastowy: 0.5-1%. Po 30 sekundach: 3-6%.

Naprawa: Delay minimum 30 sekund lub po scrollu 60% strony. Na mobile: popup max 50% wysokości ekranu z wyraźnym X. Exit-intent trigger zamiast time trigger — pojawia się gdy kursor idzie do paska adresu (desktop) lub po 120 sekundach (mobile).

Na desktop fold jest przy ~900px. Na mobile 320-420px. Strony zoptymalizowane pod desktop często chowają CTA ("Zarezerwuj", "Kup teraz", "Zadzwoń") poniżej hero tekstu, który na telefonie zajmuje cały ekran. Użytkownik nie scrolla — myśli, że to strona statyczna, albo po prostu wychodzi.

Naprawa: Sticky CTA bar na mobile — pasek na dole ekranu z główną akcją. Albo: hero CTA zawsze widoczny w pierwszych 100vh. Sprawdzaj w Chrome DevTools z symulatorem iPhone 12 (390x844px).

Użytkownik wypełnia krok 1 (dane osobowe), klika "Dalej" i widzi krok 2 (adres). Nie wie, ile kroków zostało. Dropout rate na checkoucie rośnie wykładniczo przy każdym nieprzewidywalnym kroku. Brak progress bar = brak poczucia kontroli = porzucenie koszyka.

Naprawa: Progress indicator sticky na górze: "Krok 2 z 4: Adres dostawy" + pasek postępu (50%). W WooCommerce można to dodać przez hook lub plugin. W custom checkout: prosty div z CSS width % i label kroku.

Cookie banner musi być widoczny, ale nie musi blokować całej strony. Fullscreen overlays (czarne lub białe tło pokrywające wszystko) to dark pattern i naruszenie RODO guidelines EROD. Użytkownik widzi ścianę tekstu zamiast strony, na którą chciał wejść. Współczynnik odrzuceń rośnie, średni czas na stronie spada.

Naprawa: Cookie banner jako pasek dolny lub modal max 60% ekranu z scroll pod spodem. Treść strony widoczna (choć rozmyta lub przyciemniona). Dwie równoważne opcje: "Akceptuj" i "Odrzuć". Możliwość zmiany ustawień po fakcie przez link w stopce.