UX w e-commerce: co naprawdę wpływa na konwersję w sklepie online

UX to nie design. Dlaczego ta różnica ma znaczenie

Sklepy internetowe wydają tysiące złotych na redesign. Nowe logo, modne kolory, animacje, nowoczesny layout. Po wdrożeniu konwersja nie rośnie.

Czasem spada.

Dlaczego? Bo design to jak coś wygląda. UX to jak coś działa. Piękna strona, na której użytkownik nie może znaleźć produktu, nie wie ile zapłaci za dostawę i musi wypełnić piętnaście pól formularza - nie sprzedaje. Brzydka strona z przejrzystą nawigacją, jasną ceną i szybkim checkout? Sprzedaje lepiej.

Mam zawodowe zboczenie. Kiedy wchodzę na stronę sklepu, nie patrzę na produkty. Patrzę na to, ile kliknięć dzieli mnie od finalizacji zakupu. I w ilu miejscach po drodze chciałbym zamknąć kartę przeglądarki.

Współczynnik konwersji nie jest wyrokiem wydanym przez branżowy benchmark. Jest wynikiem tego, jak sklep przeprowadza konkretnych klientów przez zakup. Baymard Institute szacuje, że około 70% koszyków w e-commerce jest porzucanych, a duża część przyczyn leży w samym procesie zakupowym. Różnica między sklepem, który pomaga kupić, a sklepem, który stawia przeszkody, nie sprowadza się do estetyki. To kwestia użyteczności.

W tym artykule omawiam cztery obszary UX, które mają bezpośredni wpływ na konwersję: nawigację, kartę produktu, koszyk z checkout i doświadczenie mobilne. Nie teoria UX, tylko konkretne elementy, które możesz ocenić i poprawić w swoim sklepie.

Nawigacja i wyszukiwarka: czy klient znajdzie to, czego szuka

Użytkownik, który nie znajdzie produktu, nie kupi go. Oczywiste? Niby tak. Ale liczba sklepów z nieczytelną nawigacją sugeruje, że wielu właścicieli tego nie docenia. Wysoki bounce rate na stronach kategorii to często objaw źle zaprojektowanej nawigacji, nie nieatrakcyjnej oferty.

Struktura kategorii

Drzewo kategorii powinno odzwierciedlać sposób myślenia klientów, nie wewnętrzną strukturę firmy.

Brzmi banalnie, ale widzę to ciągle. Sprzedajesz odzież, klient myśli: “szukam kurtki zimowej”. A Twoje menu mówi: “Kolekcja AW2026 - Wierzchnia Linia Premium”. No i co z tego? Klient nie zna Twojej wewnętrznej nomenklatury. Klient chce kurtkę.

Zasady budowania kategorii:

• możliwie płytka struktura. Trzy poziomy (kategoria > podkategoria > podpodkategoria) to dobry punkt wyjścia, ale właściwą głębokość trzeba sprawdzić na realnym katalogu i w testach z użytkownikami
• nazwy kategorii powinny być jednoznaczne i opisowe. “Obuwie sportowe” jest lepsze niż “Sport”. “Meble do salonu” jest lepsze niż “Salon”
• każda kategoria powinna zawierać wystarczającą liczbę produktów. Kategoria z 2 produktami wygląda na pustą i obniża zaufanie. Jeśli masz za mało produktów na osobną kategorię, połącz ją z pokrewną

Wyszukiwarka wewnętrzna

Użytkownik wpisujący konkretną frazę w wyszukiwarce zwykle ma bardziej sprecyzowaną intencję niż osoba, która dopiero przegląda kategorie. Dlatego warto mierzyć osobno zachowanie obu grup we własnej analityce, zamiast opierać decyzje na jednej średniej rynkowej.

A teraz zrób test. Wejdź do swojego sklepu i wpisz w wyszukiwarkę nazwę produktu z literówką. Co się stanie?

Jeśli odpowiedź brzmi “Brak wyników” - właśnie tracisz sprzedaż.

Co powinna robić dobra wyszukiwarka:

• autocomplete: podpowiadanie wyników już po wpisaniu 2-3 znaków, najlepiej z miniaturkami produktów i cenami
• tolerancja na błędy: “nikie” zamiast “nike”, “koszula” zamiast “koszulka”. Wyszukiwarka, która na literówkę odpowiada pustą stroną, traci pieniądze
• synonimy: “bluza” i “hoodie”, “kurtka” i “jacket”. Użytkownicy używają różnych słów na ten sam produkt
• strona zerowych wyników: kiedy brakuje dopasowania, wyszukiwarka powinna zaproponować zbliżone produkty, nie pustą stronę

Filtry fasetowe

W sklepie z setkami lub tysiącami produktów filtry są niezbędne. Ale źle zaprojektowane filtry to gorsze niż brak filtrów.

Przerabiałem to z klientem, który miał sklep z odzieżą. Filtry działały, ale po zaznaczeniu rozmiaru strona się przeładowywała. Trzy sekundy ładowania za każdym razem. Przy wyborze rozmiaru i koloru to sześć sekund czekania. Ludzie rezygnowali.

Najważniejsze zasady:

• pokaż liczbę produktów przy każdej opcji filtra (np. “Czerwony (23)” zamiast samego “Czerwony”). Użytkownik musi wiedzieć, czy po kliknięciu zobaczy 100 produktów czy zero
• filtry powinny działać bez przeładowania strony (AJAX). Każde przeładowanie to moment, w którym użytkownik może zrezygnować
• umożliw wielokrotny wybór w ramach jednego filtra (np. rozmiar 42 i 43 jednocześnie)
• pokaż aktywne filtry z opcją łatwego usunięcia (“X” przy każdym wybranym filtrze)

Więcej o technicznych aspektach nawigacji fasetowej i jej wpływie na SEO przeczytasz w bazie wiedzy o nawigacji fasetowej.

Breadcrumbs (ścieżka nawigacyjna)

Breadcrumbs (“okruszki chleba”) to ścieżka nawigacyjna pokazująca, gdzie w strukturze sklepu znajduje się użytkownik. Np. “Strona główna > Odzież > Kurtki > Kurtki zimowe”.

Drobiazg? Może. Ale gdy użytkownik trafia z Google prosto na produkt, breadcrumbs od razu pokazują mu, gdzie jest, i pozwalają jednym kliknięciem wrócić do kategorii. Dają poczucie kontroli i ułatwiają nawigację w górę struktury. Dla tak małego elementu robią zaskakująco dużo.

Karta produktu: decyzja zapada tutaj

Karta produktu to strona, na której użytkownik podejmuje decyzję o zakupie lub rezygnacji. W większości sklepów to strona z najwyższym ruchem i jednocześnie najwyższym potencjałem optymalizacji.

A jednocześnie strona, na którą właściciele sklepów poświęcają najmniej uwagi. Paradoks.

Elementy above the fold

“Above the fold” to to, co użytkownik widzi bez przewijania. Na karcie produktu muszą się tam znaleźć:

• zdjęcie produktu: duże, dobrej jakości, z możliwością powiększenia. Pokaż kilka ujęć odpowiadających na pytania klienta; dla odzieży przyda się zdjęcie na modelu lub modelce, nie tylko na wieszaku
• cena: widoczna natychmiast, bez konieczności szukania. Jeśli produkt jest w promocji: cena regularna (przekreślona) i cena promocyjna. Ukrywanie ceny do momentu „dodaj do koszyka” tworzy niepotrzebną niepewność
• przycisk “Dodaj do koszyka”: kontrastowy kolor, czytelny tekst, duży rozmiar. Nie “Do koszyka”, “KUP”, “Zamów” w trzech różnych miejscach na stronie. Jeden jasny CTA
• dostępność: “W magazynie”, “Ostatnie 3 sztuki”, “Dostępne za 3-5 dni”. Brak informacji o dostępności to niepewność, a niepewność to porzucone koszyki
• informacja o dostawie: koszt i czas. „Darmowa dostawa od 200 zł. Wysyłka w 24h.” W aktualnym badaniu Baymard 39% badanych wskazało dodatkowe koszty jako powód porzucenia zakupu

Ostatni punkt powtórzę, bo jest ważny. Jeśli klient poznaje pełny koszt dopiero pod koniec procesu, ryzyko rezygnacji rośnie dokładnie w momencie, w którym był już blisko zakupu.

Social proof: dowody społeczne

Ludzie kupują to, co kupują inni. Social proof na karcie produktu:

• recenzje i oceny: gwiazdki, liczba recenzji i możliwość przeczytania konkretnych doświadczeń. Nie usuwaj automatycznie każdej negatywnej opinii. Profil z samymi idealnymi ocenami może wyglądać niewiarygodnie
• “X osób ogląda ten produkt”: element pilności. Stosuj ostrożnie i uczciwie. Fałszywe liczniki to dark pattern, który niszczy zaufanie
• bestseller / wybór klientów: etykiety oparte na realnych danych sprzedażowych

Uczciwie - to słowo kluczowe. Widziałem sklepy z komunikatem “17 osób ogląda ten produkt” na stronie, która ma 200 wizyt miesięcznie. Na wszystkich produktach łącznie. Klient może i nie policzy, ale podświadomie wyczuje, że coś nie gra.

Opisy produktów

Nie wierzę w długie opisy produktów “dla SEO”. Wierzę w opisy, które odpowiadają na pytania, które klient zadaje sprzedawcy w sklepie stacjonarnym. “Czy to się pierze w pralce?”, “Czy zmieści się w plecaku?”, “Ile to waży?”. To są prawdziwe frazy long-tail.

Większość opisów produktów, które widzę, wygląda tak:

Przed: “Kurtka wykonana z najwyższej jakości materiałów, zapewniająca komfort i ochronę w każdych warunkach pogodowych. Idealny wybór dla osób ceniących styl i funkcjonalność.”

Zero informacji. Mogłoby opisywać każdą kurtkę na świecie.

Po: “Membrana 10 000 mm - nie przemokniesz nawet w ulewnym deszczu. Waży 380 g, zmieścisz ją w plecaku. Kaptur regulowany na trzy sposoby, nie spada przy wietrze.”

Cechy + korzyści. Konkret zamiast marketingowego bełkotu.

Struktura opisu:

• krótki akapit (2-3 zdania) z kluczowymi korzyściami produktu, widoczny od razu pod tytułem
• lista cech / specyfikacja techniczna (rozwijana lub w zakładce)
• dłuższy opis z kontekstem użytkowania (dla kogo jest ten produkt, w jakich sytuacjach się sprawdzi)

Porównywarki i narzędzia pomocnicze

Elementy, które redukują niepewność i ułatwiają decyzję:

• tabele rozmiarów (z konkretnymi wymiarami w centymetrach, nie tylko XS/S/M/L)
• porównywarki produktów (szczególnie w elektronice i AGD)
• wideo produktowe (unboxing, demo)
• sekcja “Często kupowane razem” (cross-selling oparty na danych, nie losowy)

Koszyk i checkout: ostatnia prosta, która zabija konwersje

Między dodaniem produktu do koszyka a finalizacją zakupu giną klienci. Dużo klientów. Baymard Institute szacuje, że duży e-commerce może potencjalnie zwiększyć konwersję o około 35% dzięki poprawie problemów użyteczności checkoutu.

Trzydzieści pięć procent. Nie z nowego ruchu. Nie z nowych reklam. Z ludzi, którzy już chcieli kupić i zrezygnowali, bo im to utrudniłeś.

Guest checkout: nie zmuszaj do rejestracji

W aktualnym zestawieniu Baymard 19% badanych wskazało przymus założenia konta jako powód rezygnacji. Klient chce kupić koszulkę, nie zostać członkiem klubu.

Zawsze oferuj opcję zakupu bez rejestracji (guest checkout). Po finalizacji zamówienia możesz zaproponować założenie konta (“Chcesz śledzić zamówienie? Ustaw hasło.”). To jest uczciwa wymiana - najpierw dajesz wartość, potem prosisz o coś w zamian.

Wskaźnik postępu

Klient powinien wiedzieć, ile kroków pozostało do końca zamówienia. Pasek postępu (np. „Koszyk > Dostawa > Płatność > Potwierdzenie”) redukuje poczucie niepewności i pomaga zrozumieć strukturę procesu.

To jest jak składanie stołu z IKEA. Jeśli wiesz, że masz dwanaście kroków i jesteś na ósmym, dasz radę. Jeśli nie wiesz, ile jeszcze przed Tobą - rezygnujesz po trzecim.

Przejrzyste koszty

Najczęstsze przyczyny porzucania koszyka to nieoczekiwane koszty. Zasady transparentności:

• pokaż koszt dostawy od razu (na karcie produktu lub w podsumowaniu koszyka, nie dopiero na ostatnim kroku checkout)
• pokaż próg darmowej dostawy i ile brakuje do jego osiągnięcia (“Dodaj produkty za 37 zł, żeby otrzymać darmową dostawę”)
• pokaż pełną cenę z VAT (w Polsce to standard, ale na platformach z zagranicy zdarzają się ceny netto)
• nie dodawaj ukrytych opłat (opłata za płatność, “opłata manipulacyjna”, dodatkowe ubezpieczenie zaznaczone domyślnie)

Ukryte opłaty to najszybszy sposób, żeby stracić zaufanie klienta. Na zawsze.

Metody płatności

W Polsce trzy metody płatności dominują w checkoutach e-commerce:

• BLIK: jedna z najważniejszych metod płatności w polskim e-commerce, szczególnie w zakupach mobilnych. W 2025 roku użytkownicy wykonali BLIKIEM 1,4 mld płatności online. Jeśli nie akceptujesz BLIKA, nie zmuszaj klientów do zmiany przyzwyczajeń — napraw checkout
• przelewy online (PayU, Przelewy24, tpay): standard. Użytkownicy oczekują, że zobaczą logo swojego banku
• płatności kartą: Visa, Mastercard. Ważne szczególnie dla klientów zagranicznych i transakcji cyklicznych

Dodatkowe metody, które warto rozważyć:

• płatności odroczone: PayPo, Twisto i BLIK Płacę Później. Mogą podnosić konwersję i wartość koszyka, szczególnie przy droższych zakupach. W jednym z opublikowanych case studies PayPo średnia wartość transakcji z PayPo była o 13% wyższa — traktuj to jako przykład do sprawdzenia na własnej marży i zwrotach, nie obietnicę wyniku
• raty: dla produktów z wyższej półki cenowej (elektronika, meble, sprzęt sportowy)

Sygnały zaufania

Przy checkout użytkownik podaje dane osobowe i dane płatnicze. To moment, w którym potrzebuje potwierdzenia, że jest bezpiecznie:

• ikona kłódki i informacja o szyfrowaniu SSL
• logotypy akceptowanych metod płatności
• informacja o polityce zwrotów (“30 dni na zwrot bez podawania przyczyny”)
• dane kontaktowe (numer telefonu, e-mail) widoczne w procesie zamówienia
• logotypy zaufanych organizacji (Trusted Shops, Opineo, Google Reviews)

Jeden krok czy wiele kroków?

One-page checkout vs. multi-step checkout. Badania nie dają jednoznacznej odpowiedzi, która opcja jest lepsza. Zależy od kontekstu:

• one-page checkout sprawdza się w sklepach z prostymi zamówieniami (mało opcji dostawy, jedna metoda płatności)
• multi-step checkout sprawdza się, gdy jest dużo opcji i pól do wypełnienia, bo rozdziela informacje na mniejsze, strawne porcje

Niezależnie od formatu: redukuj liczbę pól do minimum. W benchmarku Baymard przeciętny checkout zawierał 11,3 pola, choć większości sklepów wystarcza około 8. Nie pytaj o „drugie imię” ani o dane, których naprawdę nie potrzebujesz do realizacji zamówienia.

Serio. Kiedyś analizowałem checkout, który miał osobne pola na: ulicę, numer budynku, numer klatki, numer mieszkania, piętro. Pięć pól na sam adres. Formularz wyglądał jak wniosek o paszport.

Mobile: nie adaptacja, a priorytet

W wielu sklepach urządzenia mobilne odpowiadają już za większość wizyt, ale udział różni się zależnie od branży i źródła ruchu. Sprawdź własne dane w GA4. Jeśli Twój sklep nie działa dobrze na telefonie, możesz tracić znaczną część potencjalnych klientów.

Nie “wersja mobilna”. Nie “responsywność”. Priorytet.

Kciuk-friendly CTAs

Przycisk “Dodaj do koszyka” musi być w zasięgu kciuka. Na telefonie trzymanym jedną ręką naturalna strefa kciuka to dolna połowa ekranu. Przyciski w górnej części ekranu są trudniejsze do tapnięcia.

Dobrym punktem odniesienia jest obszar dotykowy co najmniej 44 × 44 punkty, zgodny z Apple Human Interface Guidelines. Wejdź na swój sklep na telefonie i spróbuj trafić kciukiem w przycisk „Dodaj do koszyka”. Jeśli regularnie dotykasz sąsiedniego elementu, obszar aktywny jest za mały albo elementy są zbyt ciasno rozmieszczone.

Sticky add-to-cart

Na mobilnych kartach produktu przycisk “Dodaj do koszyka” powinien być przyklejony do dolnej krawędzi ekranu (sticky). Gdy użytkownik przewija opis produktu, recenzje czy specyfikację, przycisk jest zawsze widoczny.

Bez sticky CTA użytkownik, który zdecydował się kupić po przeczytaniu recenzji, musi przewinąć z powrotem na górę strony, żeby znaleźć przycisk.

To traci konwersje. Dosłownie dlatego, że ktoś nie chciał scrollować.

Uproszczone formularze

Na telefonie wpisywanie tekstu jest wolne i frustrujące. Każde pole formularza, które da się wyeliminować, to zysk konwersyjny:

• autouzupełnianie adresu (integracja z Google Places lub bazą kodów pocztowych)
• numeryczna klawiatura dla pól z numerami (telefon, kod pocztowy, numer karty) przez atrybut inputmode="numeric" w HTML
• automatyczne przejście do następnego pola po wypełnieniu poprzedniego
• zapisywanie postępu (jeśli użytkownik zamknie przeglądarkę i wróci, formularz powinien pamiętać wcześniej wpisane dane)

Ten drugi punkt - klawiatura numeryczna - to zmiana na jedną linijkę kodu HTML, a robi różnicę. Nic nie irytuje bardziej niż wpisywanie numeru telefonu na klawiaturze z literami.

Płatności mobilne

Poza BLIK-iem warto rozważyć także:

• Apple Pay / Google Pay: użytkownik może zapłacić bez ręcznego przepisywania danych karty. Wpływ wdrożenia mierz osobno dla urządzeń i przeglądarek, które obsługują daną metodę
• BLIK One Click: automatyczne potwierdzenie bez wpisywania kodu (wymaga zgody w aplikacji bankowej)

Jak mierzyć wpływ UX na konwersję

Optymalizacja UX bez mierzenia wyników to strzelanie w ciemno. Potrzebujesz danych, żeby wiedzieć, gdzie są problemy i czy zmiany przynoszą efekty.

Lejek konwersji w GA4

GA4 pozwala zbudować lejek ścieżki zakupowej. Jeśli masz skonfigurowane zdarzenia enhanced e-commerce, możesz zobaczyć dokładnie, gdzie użytkownicy odpadają:

• strona kategorii > strona produktu (ile % przechodzi?)
• strona produktu > dodanie do koszyka (ile % dodaje?)
• dodanie do koszyka > rozpoczęcie checkout (ile % przechodzi dalej?)
• rozpoczęcie checkout > zakup (ile % finalizuje?)

Każdy spadek na lejku to potencjalne miejsce do optymalizacji. Spadek 80% między “dodaniem do koszyka” a “checkout” to sygnał alarmowy. Nie “ciekawy insight”. Sygnał alarmowy.

Heatmapy i nagrania sesji

Narzędzia takie jak Hotjar lub Microsoft Clarity nagrywają sesje użytkowników i generują mapy ciepła pokazujące, gdzie klikają i jak daleko przewijają. Zakres planów i limity zmieniają się, dlatego przed wdrożeniem sprawdź aktualną ofertę oraz ustawienia prywatności.

Na co zwracać uwagę:

• “rage clicks” (wielokrotne szybkie kliknięcia w jeden element, sygnał frustracji)
• użytkownicy scrollujący w górę i w dół, szukając czegoś
• na którym polu formularza użytkownik rezygnuje

Rage clicks to moja ulubiona metryka. Kiedy ktoś klika pięć razy w element, który nie jest klikalny, mówi Ci coś ważnego. Mówi: “myślałem, że to jest przycisk, i jestem wściekły, że nie jest”.

15-minutowy audyt UX

Nie masz budżetu na pełny audyt UX? Zrób to sam w 15 minut. Weź telefon, otwórz swój sklep i spróbuj kupić produkt. Zwracaj uwagę na:

1. Czy na stronie głównej widać od razu, co sprzedajesz?
2. Czy wyszukiwarka jest widoczna i działa poprawnie?
3. Czy kategorie mają logiczne nazwy?
4. Czy na karcie produktu widzisz cenę, zdjęcie i przycisk “Dodaj do koszyka” bez przewijania?
5. Czy informacja o kosztach dostawy jest widoczna?
6. Czy mogę kupić bez zakładania konta?
7. Czy checkout nie wymaga zbędnych informacji?
8. Czy mogę zapłacić BLIK?
9. Czy strona szybko reaguje i stabilnie ładuje najważniejszą treść?
10. Czy na mobile wszystko jest czytelne i klikalne?

Każde “nie” to miejsce, w którym tracisz konwersje. Zacznij od naprawienia tych punktów, zanim zainwestujesz w redesign. Poważnie - te dziesięć pytań to lepszy punkt wyjścia niż połowa audytów UX, za które agencje biorą kilkanaście tysięcy złotych.

Jeśli potrzebujesz profesjonalnego audytu UX lub badań użyteczności, napisz do nas.

Narzędzia

Hotjar

Heatmapy, nagrania sesji i ankiety na stronie. Przed instalacją określ, które podstrony i etapy lejka rzeczywiście chcesz obserwować.

Microsoft Clarity

Heatmapy, nagrania sesji oraz detekcja „rage clicks” i „dead clicks”. Dla wielu sklepów będzie wystarczającym punktem startowym, o ile narzędzie zostanie skonfigurowane z poszanowaniem prywatności użytkowników.

GA4 Explorations

Wbudowane w GA4. Pozwala tworzyć niestandardowe raporty: lejki konwersji, ścieżki użytkowników, analizę kohortową. Wymaga konfiguracji zdarzeń e-commerce.

PageSpeed Insights

Bezpłatne narzędzie Google do pomiaru szybkości strony i Core Web Vitals. W badaniu Portent serwisy e-commerce ładujące się w sekundę miały 2,5 raza wyższy współczynnik konwersji niż te ładujące się w pięć sekund. Nie ma wymówki, żeby tego nie sprawdzić. Potem mierz efekt na własnych użytkownikach.