User Experience (UX) i CRO w e-commerce – jak poprawić konwersję dzięki UX

Sklepy e-commerce konkurują ze sobą o uwagę klienta nie tylko reklamą, asortymentem, czy cenami. Równie ważnym czynnikiem, który wpływa na zakupy (ich wielkość i częstotliwość), są elementy związane z User Experience (UX) i CRO (Conversion Rate Optimization). Nawet jeśli sklep online generuje ogromny ruch na stronie i sprzedaje wyjątkowe produkty, jego potencjał będzie niewykorzystany, jeśli klienci będą napotykali trudności podczas poruszania się po nim. Jak temu przeciwdziałać?

UX w sklepie internetowym (e-commerce) – na czym polega?

Najprościej mówiąc, user experience w sklepie internetowym polega na projektowaniu pozytywnych doświadczeń klientów podczas poruszania się po nim i zwiększanie jego użyteczności. Dobry UX dla e-commerce sprawia, że wyszukiwanie produktów na stronie jest intuicyjne, wybór produktu jest płynny, bo wszystkie jego niezbędne cechy są jasno i klarownie przedstawione, a proces zakupowy jest szybki i prosty.

Dbając o UX, dba się tak naprawdę o to, aby klient mógł maksymalnie skupić się na zakupach, a nie na funkcjonalnościach strony. Co więcej, powinno to tak funkcjonować już od wejścia do sklepu aż do finalizacji trasakcji (a nawet i później!). Przykładowo klient nie musi długo „rozpracowywać”, jak:

• włączyć filtry,
• posortować produkty,
• dodać produkt do koszyka,
• założyć konto,
• zapłacić.

Jeśli klient przegląda produkty i robi zakupy niemalże automatycznie, oznacza to, że strona jest dobrze zoptymalizowana pod user experience.

Co to jest CRO w kontekście optymalizacji sklepu internetowego?

Optymalizacja sklepu względem CRO (Conversion Rate Optimization) to pójście jeszcze o krok dalej w porównaniu do optymalizacji pod UX. Chociaż tak naprawdę te działania często się płynnie przeplatają.

CRO w e-commerce to dostosowanie sklepu w taki sposób, aby jak najlepiej realizował on cele biznesowe, czyli maksymalizował sprzedaż. Celem jest zwiększenie liczby transakcji bez zwiększania ruchu na stronie (liczby odwiedzających), a więc zwiększenie zwrotu z inwestycji (ROI).

Jak wykryć problemy z user experience w e-commerce?

Audyt UX

Chcąc wykryć problemy na naszej stronie www pod kątem UX, pierwszą opcją jest oczywiście skorzystanie z usług dostępnych na rynku agencji tudzież specjalistów UX/UI/CRO oferujących przeprowadzenie kompleksowych audytów i badań UX, które z pewnością dostarczą mnóstwo ciekawych i przydatnych rekomendacji.

Alternatywą może być także poproszenie grupy znajomych lub współpracowników o wykonanie jakiegoś prostego zadania na Twojej stronie. Przykładowo, jeśli posiadasz sklep internetowy z telefonami i akcesoriami GSM, możesz poprosić o znalezienie wymarzonego modelu smartfona. Idąc dalej, możesz dopytać swoją grupę testerów:

• Czy strona spełniła ich potrzeby i oczekiwania?
• Czy sklep wzbudzał w nich zaufanie?
• Czy korzystanie ze sklepu było intuicyjne?
• Czy interfejs był czytelny i wizualnie „przyjemny dla oka”?
• Co wpłynęło na to, że chcieli dodać produkt do koszyka lub wręcz przeciwnie, co ich zniechęcało?

Poproś uczestników testu o szczerą opinię i komentarz na temat obsługi strony oraz wskazanie ewentualnych elementów, miejsc lub funkcjonalności, które sprawiły im najwięcej problemu. Każdą z sesji nagraj, dzięki czemu zyskasz dodatkowe źródło informacji do późniejszej analizy. Możesz do tego wykorzystać takie narzędzia jak Hotjar czy Microsoft Clarity.

Zebrane dane warto podzielić w zależności od typu strony, poczynając od strony głównej, poprzez strony kategorii, karty produktowe, a kończąc na koszyku i stronie finalizacji zamówienia. W ten sposób będzie Ci o wiele łatwiej określić, który krok ścieżki zakupowej sprawia najwięcej problemów Twoim potencjalnym klientom.

Analiza statystyk

Nieco innym sposobem na wykrycie potencjalnych problemów na stronie pod kątem UX będzie dokładna analiza danych statystycznych o ruchu. Warto przyjrzeć się ruchowi mobilnemu generowanemu przez stronę oraz zestawić go z konwersjami. Często zdarza się, że choć urządzenia mobilne generują o wiele więcej ruchu na stronie, to właśnie wersja komputerowa znacznie lepiej sprzedaje.

W takim przypadku problemem najczęściej jest niedostosowanie strony do urządzeń mobilnych pod kątem szybkości, UX oraz CRO. Skutkiem tego, nawet jeśli użytkownicy trafiają na Twoją stronę za pomocą smartfonów, z powodu licznych problemów z jej obsługą, zakupu dokonują na wersji komputerowej lub nie dokonują go wcale i przechodzą do konkurencji.

Jakie są najczęstsze błędy UX w sklepach internetowych?

Mnóstwo ludzi przegląda strony za pomocą smartfonów, jadąc w pociągu, czekając na autobus, korzystając z serwisów społecznościowych lub po prostu dla zabicia czasu. W każdej z tych sytuacji szybkie wczytanie oraz wygodne zaprezentowanie zawartości Twojej strony internetowej jest kluczowe.

Powolna, trudna w obsłudze i nieresponsywna strona irytuje użytkowników i prowadzi do utraty potencjalnej konwersji. Twoja strona powinna działać bezproblemowo, aby jej użytkownicy mogli ekspresowo otrzymać pożądane informacje.

Część klientów przeglądając strony na urządzeniach mobilnych, często tylko sprawdza daną ofertę, usługi, dostępne opcje i ceny, a samego zakupu dokonuje na wersji komputerowej lub osobiście w sklepie stacjonarnym. Bardzo często powodem takiej sytuacji jest bariera w postaci problemów z UX w wersji mobilnej strony, do których możemy zaliczyć:

1. Męczące scrollowanie

Przeglądając zawartość długich stron internetowych i chcąc zmienić filtry dla wyświetlanych produktów, często konieczne jest ręczne przewinięcie strony do samej góry. Użytkownicy nie lubią scrollowania, lepszym rozwiązaniem będzie „pływający” pasek filtrów, cały czas widoczny w dolnej części ekranu. Testy pokazują, że w ten sposób możemy zwiększyć długość pojedynczych sesji na stronie.

2. Porównywanie produktów (upewnianie się w decyzji)

Możliwość szybkiego i wygodnego porównania produktów na stronie jest niezwykle ważne dla klientów online i pomaga upewnić się w decyzji zakupowej. Jeśli nie umożliwisz takiej opcji lub funkcjonalność nie zostanie dobrze zaprojektowana, stracisz potencjalnych klientów.

3. Odpowiednia prezentacja produktów

Użytkownicy online przed dokonaniem zakupu chcą być w 100% pewni tego, co kupują. Umieszczenie na stronie faktycznego zdjęcia produktu lub pokoju do wynajęcia to absolutny must-have. Oprócz tego wypróbuj także prezentacje 3D lub krótkie filmy video prezentujące dany produkt.

Możesz również wprowadzać bardziej kreatywne rozwiązania stworzone „na miarę” produktów, które sprzedajesz. Przykładowo, jeśli sprzedajesz kosmetyki do makijażu, możesz tworzyć funkcje, które pomogą klientom wyobrazić sobie kosmetyk na ich twarzy. Natomiast oferując personalizowane kubki z napisem, stwórz kreator, który pokaże wizualizację efektu finalnego. Aktualnie takie rozwiązania stają się coraz tańsze, dzięki niezwykle szybkiemu rozwojowi sztucznej inteligencji. 

4. Niekompletne informacje o dostępności i kosztach

Informacje o dostępności produktów w magazynie oraz kosztach i szybkości dostawy muszą być widoczne od samego początku, a nie w ostatnim kroku ścieżki zakupowej. Co więcej, transparentność pod kątem metod płatności czy dostawy ma ogromny wpływ na decyzje zakupowe.  Profesjonalny UX sklepu internetowego nie może kończyć się bowiem tylko na przyjaznej prezentacji oferty. Jeśli cała ścieżka zakupowa nie zostanie zoptymalizowana, regularne porzucenia koszyka będą niestety standardem.

5. Brak autouzupełniania

W formularzach na stronie powinny wykorzystywać funkcję autouzupełniania, która pozwoli na ograniczenie wszelkich literówek i błędów, a także przyśpieszy proces wypełniania poszczególnych pól i przyczyni się do poprawy konwersji.

Audyt SEO

Zbadaj jakość swojej witryny pod kątem SEO

Zobacz więcej

UX w ścieżce zakupowej krok po kroku

Menu główne

Dla większości stron internetowych zdecydowanie najwięcej kliknięć generuje główne menu, za pomocą którego użytkownicy sprawdzają, co oferujemy oraz wyszukują pożądanych informacji, usług lub produktów. Tym samym to właśnie tutaj najczęściej zaczyna się ścieżka zakupowa dla naszych potencjalnych klientów. Menu w wersji mobilnej często zastępowane jest przez tzw. hamburger, w którym poszczególne kategorie są ukrywane. W związku z tym warto pomyśleć nad dodatkowym sposobem na zaprezentowanie najważniejszych kategorii lub podstron.

Często wykorzystywanym rozwiązaniem w wersji mobilnej jest menu w formie relacji/historii znanych np. z Instagrama lub jako klasyczny slajder. Testy pokazują, że pokazana w ten sposób lista kategorii na stronie głównej pozytywnie wpływa na wzrost konwersji. Dając użytkownikom więcej opcji znalezienia poszukiwanych przez nich produktów, zwiększamy szansę na konwersję. Jeśli ścieżka zakupowa będzie zbyt skomplikowana, użytkownicy mogą się w niej zgubić i nie dokonać zakupu.

Wyszukiwarka wewnętrzna

Nieco innym sposobem nawigacji na stronie jest wewnętrzna wyszukiwarka, której prawidłowa struktura oraz działanie, to klucz do zwiększenia konwersji. Z wyszukiwarki korzystają przede wszystkim klienci zdecydowani, którzy wiedzą czego konkretnie szukają i co chcą kupić, przez co znacznie częściej konwertują (dokonują zakupu) niż klienci korzystający z menu głównego.

Cechy prawidłowo zbudowanej wyszukiwarki:

• dobrze widoczny pasek wyszukiwania – testy pokazują, że zamiast małej lupy w rogu menu, znacznie lepszym rozwiązaniem jest umieszczenie w nim pełnego pola wyszukiwarki, co przekłada się na wzrost konwersji;
• synonimy – wyszukiwarka powinna być w stanie zwrócić odpowiednie wyniki na podstawie synonimów oraz różnych form dla wpisanego zapytania;
• autouzupełnianie i poprawki literówek – niezwykle pomocne w szczególności dla dłuższych zapytań;
• alternatywne produkty dla braku wyników – nigdy nie zostawiaj klienta z niczym, w przypadku braku wyników na dane zapytanie, zawsze staraj się zaprezentować, chociażby powiązane wyniki;
• zoptymalizowane filtry – na stronie wyników wyszukiwania warto wdrożyć moduł filtrowania, który pozwoli dodatkowo zawęzić zwrócone wyniki i znaleźć pożądany produkt;

Ważne: zawsze optymalizuj obie ścieżki zakupowe, zarówno tę, w której użytkownik przechodzi przez kategorie i różne filtry, zanim trafi na produkt docelowy, jak i tę, w której korzysta z wewnętrznej wyszukiwarki.

Porównywarka produktów

Każdy klient przed dokonaniem zakupu porównuje dany produkt z innymi dostępnymi na rynku, w szczególności w przypadku zakupów online. Właśnie dlatego porównywarka, zaraz obok wyszukiwarki, jest jedną z najważniejszych funkcjonalności na stronie z punktu widzenia UX oraz CRO.

Wdrażając porównywarkę, pamiętaj o jej odpowiedniej budowie oraz funkcjach. Klient musi szybko dostać jasną informację, czym konkretnie różnią się poszczególne produkty. Świetnym sposobem na ułatwienie wyboru produktu będzie wyróżnienie 2-3 najważniejszych funkcji różniących dane produkty na poziomie listingu. Jest to niezwykle ważne w szczególności w wersji mobilnej strony, gdzie nie ma miejsca na zaprezentowanie ich kompletnej listy.

Porównywane produkty powinny być zawsze widoczne na ekranie, bez konieczności przewijania zawartości wyświetlacza (poziomy slajder). Zamiast rozbudowanych widoków, stosuj proste, klasyczne tabele, zawierające konkretne „suche” dane na temat obu urządzeń.

Strona mobilna vs aplikacja sklepu online

Posiadając zarówno stronę www, jak i aplikację mobilną, pamiętaj, aby zawsze inwestować i wdrażać te same zalecenia na obu platformach. Klienci mają w zwyczaju przechodzić z jednej na drugą i z powrotem. Sprawdź, jak Twoi klienci szukają informacji i produktów, które oferujesz, jak dokonują zakupu, jak wchodzą w interakcję z Twoim brandem i bądź tam, gdzie są Twoi klienci.

Jak optymalizować UX pod mobile i desktop? Praktyczne wskazówki

1. Optymalizuj ścieżkę zakupową pomiędzy platformami – daj użytkownikowi szansę na poznanie Twojej strony, za wszelką cenę unikaj pop-upów, a jeśli musisz, wyświetlaj je we właściwym momencie, np. po wykonaniu jakiegoś zadania, nigdy losowo. Wyświetlanie ogromnego okna pop-up z zachętą do pobrania Twojej aplikacji bezpośrednio po wejściu na stronę nie jest dobrą praktyką. Zamiast tego stosuj mniejsze, dobrze widoczne banery, wyglądające jak jej integralna część, a nie irytujący dodatek. Nie zapomnij dodać jasnej i konkretnej informacji, dlaczego warto w tym momencie zainstalować aplikację, używaj chwytliwych ikon i symbolów. Dodając na stronie takie funkcjonalności jak Lista życzeń lub Ulubione produkty upewnij się, że są one zintegrowane i dostępne zarówno z poziomu strony, jak i aplikacji.
2. Konsekwentny design – jeśli posiadasz stronę www oraz aplikację, używaj tego samego designu dla obu platform. Podobnie przygotowując aplikację na różne systemy, np. iOS i Android, Twoja strona i aplikacja powinna wyglądać i działać tak samo. Punkt ten jest ważny w szczególności dla nawigacji na stronie, która powinna być skonstruowana w ten sam sposób.
3. (Krótsza) koncentracja uwagi – podczas korzystania z urządzeń mobilnych użytkownik może się bardzo łatwo rozproszyć i przerwać zakupy, np. dostając SMS, telefon lub powiadomienie push up. W związku z tym projektując strony i aplikacje mobilne, niezwykle istotne jest, aby maksymalnie zainteresować użytkownika i skupić jego uwagę. Priorytetyzuj elementy na stronie, w szczególności dla części above the fold, gdzie powinny znaleźć się Twoje propozycje wartości, przycisk CTA i przyciągające uwagę zdjęcia, np. oferowanych produktów.
4. Postrzegana szybkość strony – z powodu wielu bodźców zewnętrznych, które mogą odwrócić uwagę internautów korzystających ze smartfonów, niezwykle istotne jest, aby w 100% wykorzystać czas użytkownika obecnego na naszej stronie. Oprócz samego przyśpieszenia strony bądź aplikacji korzystaj z różnych rozwiązań, informujących użytkowników, że na stronie cały czas coś się dzieje. Na przykładzie wczytywania kolejnych elementów strony, mogą to być animacje pokazujące postęp wczytywania się serwisu. W ten sposób zajmiemy i odwrócimy uwagę użytkowników, zmniejszając ryzyko opuszczenia strony.
5. Ergonomia mobilna – nie wszyscy zdajemy sobie sprawę, jak istotna jest dolna część ekranu na urządzeniach mobilnych. Z uwagi na obsługę smartfona za pomocą kciuka, jest to idealne miejsce na dodatkowe menu na stronie, przyciski nawigacyjne, ale także istotne CTA, przyciski, małe pop-upy.
6. Tryb offline – dla strony www oraz aplikacji przygotuj specjalne widoki dedykowane dla trybu offline, co umożliwi użytkownikowi interakcję z Twoim brandem nawet podczas chwilowej utraty połączenia z Internetem. W takich sytuacjach warto wyświetlić użytkownikom krótki komunikat z opcją kontaktu, np. nr telefonu.

Optymalizacja sklepu internetowego pod UX – checklista

1. Kluczowe CTA widoczne bez scrollowania – tak istotne elementy karty produktowej, jak cena oraz przycisk „Dodaj do koszyka” powinny być dobrze wyróżnione i widoczne zaraz po wejściu na daną stronę (above the fold). Podczas scrollowania warto wykorzystać wspomniany już pływający pasek (floating bar), dzięki czemu cena oraz przycisk będą cały czas na widoku, a umieszczone w nim przyciski, w zasięgu kciuka, którym najczęściej obsługujemy smartfon.
2. Szybka rejestracja z wykorzystaniem zewnętrznych kont – proces założenia konta na stronie powinien zajmować jak najmniej czasu i być możliwie najprostszy. Dodaj możliwość ekspresowej rejestracji z wykorzystaniem kont w ramach Facebooka, Gmaila, LinkedIna itd. W ten sposób znacznie przyśpieszysz proces rejestracji i zmniejszysz prawdopodobieństwo wystąpienia ewentualnych błędów podczas wypełniania danych. Zwróć uwagę, że podczas zakupów na urządzeniach mobilnych użytkownicy często są już zalogowani, np. do swojego konta Gmail w przeglądarce.
3. Odpowiednio oznaczone błędy w formularzach – wszelkie błędy podczas wypełniania formularzy na stronie powinny być od razu oznaczane. Oprócz standardowego czerwonego koloru warto wykorzystywać także ikony i symbole, które dodatkowo zwrócą uwagę klientów (np. wykrzyknik lub krzyżyk). Pamiętaj, że pośród Twoich klientów mogą trafić się osoby z wadami wzroku (np. daltonizm). Po wysłaniu błędnie wypełnionego formularza przewiń od razu stronę do problematycznego miejsca, razem z krótkim komentarzem.
4. Propozycja wartości (standardy usług) – wyróżnij na stronie zalety Twojego sklepu/strony oraz oferowanych produktów/usług (value proposition). Informacje te powinny być widoczne dla użytkownika przez cały czas, tj. zarówno na stronie głównej, jak i z poziomu kategorii i kart produktowych. Na karcie produktowej dobrze jest umieścić je w pobliżu przycisku „Dodaj do koszyka”, co może pozytywnie wpłynąć na decyzje zakupowe. Nie zawsze cena decyduje o zakupach, ale też jakość usług i oferowane korzyści, np. ekspresowa wysyłka, szybka dostawa, bezpłatny zwrot itd. Pokaż klientowi, dlaczego powinien dokonać zakupu w Twoim sklepie, a nie u konkurencji i wskaż, co zyskuje.
5. Odpowiedni typ klawiatury dla liczb – upewnij się, czy pola w formularzu na stronie służące do wprowadzania liczb zostały odpowiednio zaprogramowane (kod pocztowy, nr telefonu, liczba produktów). Po ich wybraniu na urządzeniu użytkownika powinna być wywoływana klawiatura numeryczna z dużymi łatwo klikalnymi przyciskami zamiast domyślnego alfabetu. Takie rozwiązanie znacznie ułatwi prawidłowe wypełnienie formularza oraz ograniczy potencjalne błędy w zamówieniach.
6. Ograniczona nawigacja w koszyku – ogranicz nawigację na stronie na poziomie koszyka do elementów bezpośrednio z nim związanych, zmniejszając ryzyko opuszczenia koszyka bez dokonania zakupu. Dobrym pomysłem będzie ukrycie menu głównego lub linku do strony głównej, aby maksymalnie skupić uwagę użytkownika na koszyku i dokończeniu procesu zakupu.
7. Pełne i przejrzyste informacje na temat dostawy – dodaj na stronie pełne informacje na temat dostępności produktów, terminu, kosztów i form dostawy. Informacje te powinny być cały czas widoczne, najlepiej już obok przycisku „Dodaj do koszyka”. Klienci nie lubią negatywnych niespodzianek w postaci dodatkowych, początkowo ukrytych kosztów, które zostają im przedstawione dopiero w ostatnim kroku ścieżki zakupowej, co często przeważa o decyzji zakupowej.

Podsumowanie

Rynek e-commerce w Polsce coraz bardziej się rozwija, co powoduje, że konkurencja staje się również coraz silniejsza. Aby nadążyć za rynkiem, ale również za potrzebami swoich klientów, trzeba sobie uświadomić, jak ogromną rolę odgrywa obecnie UX i UI w sklepach internetowych. Pamiętaj jednak, żeby podchodzić rozważnie do zmian. Planując działania ukierunkowane na poprawę user experience, poproś UX designera, albo inną osobę odpowiedzialną za zmiany, o przeprowadzenie testów A/B, aby sprawdzić, która wersja strony bardziej przypadnie do gustu Twoim klientom.

Testy A/B checklista:

• minimalny czas trwania – 2 tygodnie
• minimalna liczba osiągniętych konwersji – 200
• przygotowuj 2-3 różne rozwiązania danego problemu
• testuj na różnych rynkach
• przeprowadzaj 1 test jednocześnie
• nie testuj w czasie świąt, okresów wyprzedaży, itp.
• dokumentuj wyniki badań i testów
• testuj nowe narzędzia i funkcjonalności
• mierz jak zmiany UX wpływają na konwersje

FAQ

Czym jest UX w e-commerce?

UX (User Experience) w e-commerce to ogół wrażeń i doświadczeń klienta podczas korzystania ze sklepu internetowego, obejmujący łatwość nawigacji, czytelność oferty oraz intuicyjność procesu zakupu.

---

Jak doświadczenie użytkownika (UX) wpływa na sprzedaż w e-commerce?

Dobry UX usuwa bariery na ścieżce zakupowej i buduje zaufanie i lojalność, co bezpośrednio przekłada się na wyższy współczynnik konwersji i rzadsze porzucanie koszyków.

---

Czy UX i CRO w e-commerce to to samo?

Nie, to różne pojęcia: UX skupia się na satysfakcji i wygodzie użytkownika, podczas gdy CRO (optymalizacja konwersji) dąży stricte do maksymalizacji wyników sprzedażowych, choć obie dziedziny ściśle ze sobą współpracują.

---

Jak badać zmiany UX na stronie sklepu online?

Najskuteczniejszą metodą są testy A/B porównujące różne wersje strony oraz analiza danych jakościowych i ilościowych (np. mapy cieplne, nagrania sesji) w celu zrozumienia zachowań użytkowników.

---

Spodobał Ci się ten artykuł?

Zapisz się na newsletter - nie spamujemy!