ux w sklepie internetowym

UX w sklepie internetowym – Praktyczny Poradnik w 10 krokach

Czas czytania: 17 min.

Co to jest UX (user experience) i jak go wykorzystać do zwiększenia sprzedaży w sklepie internetowym? Poznaj praktyczne porady krok po kroku!

Nie masz czasu na czytanie? Posłuchaj wersji audio!

Subskrybuj ten podcast:
Apple Podcasts | Google Podcasts | Spotify

 

User Experience to bardzo popularny i ważny trend we współczesnym e-commerce.

W 2021 roku klient ma coraz większe wymagania wobec funkcjonalności sklepu i coraz mniej czasu na jego przeglądanie.

Oznacza to więc, że im lepiej zaprojektowany sklep pod kątem UX, tym większa szansa, że odbiorca pozostanie na twojej stronie i nie odejdzie do konkurencji.

Dobrze zbudowana nawigacja, czytelne przyciski wykonywania akcji (CTA) czy inteligentna wyszukiwarka to tylko kilka sposobów na zwiększenie użyteczności strony WWW.

Zacznijmy więc od początku.

 

UX, czyli User Experience (użyteczność) odgrywa bardzo dużą rolę w powodzeniu sklepu online.

Jego głównym celem jest zapewnienie odbiorcy jak najprzyjemniejszego i najłatwiejszego obcowania ze stroną internetową.

 

3 główne cechy User Experience to:

  • użyteczność – pomaga w sposób naturalny dotrzeć do produktu, który odbiorca chce kupić. Ułatwia drogę dotarcia do przedmiotu.
  • dostępność – umożliwia dotarcie do produktu osobom o różnych cechach psychofizycznych, np. niewidomym, dyslektykom.
  • atrakcyjność – przyjemny dla oka wygląd strony sprzyja dokonaniu pomyślnych zakupów.

 

Dobry User Experience wymaga od twórcy strony, by w pierwszej kolejności poznał, kim jest wymarzony odbiorca danego sklepu. Następnie powinien zbadać jego preferencje, by jak najlepiej dostosować funkcjonalności witryny.

 

 

Dlaczego UX jest tak ważny w sklepie internetowym?

 

Unikatowy design i nowatorskie rozwiązania technologiczne mogą zaciekawić odbiorcę, ale to dobrze skonstruowana ścieżka zakupowa odpowiada w dużej mierze za to, czy klient dokona zakupu.

Użyteczność strony jest tym większa, im bardziej jest zbieżna z oczekiwaniami i przyzwyczajeniami docelowej grupy odbiorców.

 

Nawet najpiękniejszy sklep online nie zachęci klienta do zakupu, jeżeli nie wie jak się po nim poruszać.

 

Intuicyjność poruszania się po stronie to więc bardzo ważny czynnik, który powinien być testowany na grupie reprezentatywnej (potencjalnych klientów) za pomocą badań do eye trackingu lub heatmap.

Obecnie na rynku istnieją tanie i świetnej jakości rozwiązania pomagające zrozumieć, jak porusza się po stronie nasz klient. Najpopularniejsze z nich to amerykański HotJar i rosyjski Yandex Metrica.

 

 

10 kroków do świetnego UX sklepu internetowego

 

Krok 0: Pierwsze wrażenie

 

Niezależnie, czy jest to strona główna, czy karta produktu, pierwsze wrażenie ma ogromne znaczenie dla twojego potencjalnego klienta.

W ciągu chwili decyduje on, czy pozostanie na stronie i zaufa sklepowi wystarczająco, by dokonać zakupu.

Dlatego też w User Experience tak ogromną rolę odgrywa rozmieszczenie elementów na stronie, ich rodzaj oraz ogólny design (szata graficzna) strony.

 

Według Conversion XL masz tylko 17 ms (17 tysięcznych sekundy!), by przekonać odbiorcę, że wygląd sklepu jest atrakcyjny. W ciągu 50 ms klient podejmuje decyzję, czy opuścić sklep, czy na nim pozostać.

Im dłużej odbiorca wpatruje się w stronę, tym większa szansa, że rozpocznie jej przeglądanie.

By świadomie ją zwiększyć, szczególnie zadbaj o takie elementy strony jak wyszukiwarka, nawigacja, główna grafika strony (baner, zdjęcie produktu itp.), logo oraz treść.

 

W większości przypadków klienci najpierw oceniają wygląd a dopiero na końcu content.

Zarówno ten pierwszy jak i drugi powinien być dostosowany do potencjalnego odbiorcy – jego charakteru, oczekiwań i przyzwyczajeń.

Jeśli zdecydujesz się na odważny, oryginalny design pełen innowacji w UX musisz się liczyć z tym, że odbiorcy (przynajmniej początkowo) mogą zareagować negatywnie i znacznie częściej opuszczać stronę, niż w przypadku sklepów o bardziej tradycyjnym (znanym) wyglądzie.

 

Nie oznacza to, że wybierając utarte ścieżki nie masz szans na wyróżnienie się spośród konkurencji.

 

 

Krok 1: Strona Główna

 

Strona główna sklepu to twoja wizytówka. Jest najczęściej odwiedzana i powinna pełnić rolę witryny sklepowej. Oznacza to więc, że musisz skupić się na jak najlepszej prezentacji wybranych produktów.

Umieść na niej tylko te produkty i promocje, którymi chcesz się pochwalić – za pomocą sliderów, banerów lub boksów.

W przypadku sliderów bądź szczególnie ostrożny – wielu ekspertów UX uważa, że rozpraszają odbiorcę i utrudniają mu dokonanie pożądanej decyzji.
Jeśli jednak upierasz się, że slidery są ok, to ustaw je tak, by przewijały się wolno i natychmiast zatrzymywały po najechaniu myszką na grafikę.

 

UX w sklepie internetowym

 

Jeżeli twoi klienci kupują produkty przeznaczone konkretnie dla nich (np. ubrania damskie), to możesz od razu przekierować ich do właściwej kategorii głównej, jak robią to niektóre marki modowe.

 

UX w sklepie internetowym

 

 

Elementy strony głównej sklepu internetowego

 

Miejsce powyżej punktu przewinięcia strony

Czyli obszar widoczny bez konieczności scrollowania. Powinieneś traktować go ze szczególną uwagą. To on odgrywa ogromną rolę w komunikacji najważniejszych treści.

Warto więc zastanowić się, jakie banery czy grafiki są naprawdę ważne i atrakcyjne w danym momencie.
Wyprzedaż? Jasne.
Nowa kolekcja? Świetnie!
Kiepski produkt, którego chce się pozbyć dział produktu? Nie do końca…

Skup się na przekazie, usuwając z widoku niesprzedażowe treści, takie jak np. link do nowego tekstu na blogu. Unikaj nadmiaru informacji – odbiorca ucieknie ze strony, jeśli poczuje się przytłoczony.

Na koniec upewnij się, że przekaz jest zrozumiały dla docelowej grupy odbiorców – czy grafiki i copy jasno mówią, co sprzedajesz?

Czy wielkość grafik odpowiada ich ważności? Sprawdź, czy przyciski CTA oraz rozmiar banerów są na tyle zróżnicowane, by odbiorca wiedział, którą grafikę kliknąć w pierwszej kolejności.

 

UX w sklepie internetowym

 

 

Dodatkowe sekcje poniżej punktu scrollowania

Według badania Nielsen Norman Group niestety tylko niewielki odsetek potencjalnych klientów dociera do dołu oglądanej strony. Tylko 17% odbiorców zapoznaje się z elementami widocznymi po przewinięciu, czyli poniżej “the fold”.

Oznacza to, że w dalszym ciągu powinniśmy zapełniać strony treścią w sposób wertykalny, ale w kolejności od najbardziej do najmniej ważnych treści.

 

Nad stopką możesz więc umieścić:

  • boksy inspiracyjne z najnowszymi kolekcjami, odnośnik do trendbooka, polecane kategorie czy aktualności.
  • Jeśli posiadasz bloga firmowego to świetnym rozwiązaniem będzie linkowanie do artykułów właśnie w tym miejscu.
  • Planszę informacyjną, jakie marki produktów oferuje twój sklep – szczególnie użyteczne, gdy jesteś dystrybutorem tzw. “love brandów”, czyli firm wyjątkowo uwielbianych przez twoich
  • potencjalnych klientów

 

Sklep X-KOM w taki sposób zapełnił to miejsce:

 

UX w sklepie internetowym

 

 

Krok 2: Nawigacja sklepu online

 

Równie ważna jak pierwsze wrażenie i widok strony głównej jest nawigacja. To dzięki niej klient powinien szybko i skutecznie odnaleźć poszukiwany produkt.

Współcześnie najpopularniejszym jej typem jest tzw. megamenu. Dzięki niemu możesz przekierować odbiorcę do każdej podkategorii bez przytłoczenia go ogromną ilością nieposortowanych linków.

 

Nad nawigacją obecnie bardzo często umieszcza się belkę z kluczowymi informacjami, takimi jak:

  • linki do stron Kontakt, zapisu do newslettera
  • wyróżniki sklepu, jak np. darmowa dostawa, program lojalnościowy

 

UX w sklepie internetowym

 

Ile głównych kategorii powinna zawierać nawigacja? Eksperci uważają, że 7.

Jeżeli posiadasz produkty, które mogą przynależeć do wielu kategorii, umieść je tam, gdzie szukają ich odbiorcy.

Na przykład karty micro SD kupowane są zarówno przez właścicieli smartfonów, jak i lustrzanek.

Pamiętaj – jeżeli klient nie znajdzie produktu w kategorii, którą uzna za właściwą, to dojdzie do wniosku, że sklep takiego w ogóle nie oferuje.

 

W megamenu powinny znaleźć się wszystkie podkategorie oraz maksymalnie 2 kolejne subkategorie.

 

Ich nazwy i typ powinny zależeć od tego, czego najczęściej szukają twoi potencjalni odbiorcy.

 

UX w sklepie internetowym

 

UX w sklepie internetowym

 

Tuż nad, pod lub po prawej stronie nawigacji dodaj kluczowe przyciski w sklepie online: rejestrację/logowanie, koszyk oraz wyszukiwarkę.

 

UX w sklepie internetowym

 

 

Wyszukiwarka – kluczowy element nawigacji

Ogromną rolę w pomyślnym odnalezieniu produktu ma wyszukiwarka.
Dlatego też powinna być zawsze widoczna u góry strony – niezależnie, czy klient odwiedza stronę główną, czy kartę produktu.

W przypadku mniejszych sklepów online wystarczy podstawowa wersja, zawierająca wbudowany słownik synonimów oraz automatyczne podpowiedzi.

Dzięki takiej funkcjonalności osoba szukająca np. huśtawki trafi na fotel wiszący, który również odpowiada wpisanemu zapytaniu. Dodatkowo nie musi wpisywać całej frazy, gdyż po podaniu kilku pierwszych liter danego słowa silnik przeglądarki sam zgadnie, co klient miał na myśli.

 

UX w sklepie internetowym

 

 

Duże sklepy internetowe oraz marketplace powinny zainwestować w znacznie bardziej rozbudowane rozwiązania. Strony takie jak empik.com czy Amazon muszą obsłużyć każdej sekundy tysiące zapytań.

Odpowiedź na każde z nich powinno pojawić się na ekranie użytkownika w ułamkach sekund.
Oznacza to, że silniki wyszukiwarek muszą być odpowiednio rozbudowane, by udźwignąć tak dużą sumę obliczeń.

Dodatkowo klient powinien otrzymać podpowiedzi, ułatwiające poszukiwanie produktu dostępnego w kilku kategoriach.
Na przykład wpisując w wyszukiwarkę nazwisko pisarza Empik zwraca linki do książek, audiobooków i ebooków.

 

UX w sklepie internetowym

 

Na koniec warto umożliwić klientowi wyszukiwanie zaawansowane, dzięki któremu zawęzi wyszukiwanie do konkretnej kategorii, cechy produktu lub nazwy.

 

Przykładowo Morele.net po kliknięciu w wyszukiwaną frazę daje możliwość dokładnego filtrowania zapytania.

 

UX w sklepie internetowym

 

Duka poszła o krok dalej, dając możliwość szczegółowego wyszukiwania już w momencie wpisywania frazy zapytania;

 

UX w sklepie internetowym

 

 

Krok 3: Stopka sklepu internetowego

 

Wszystkie najważniejsze i najpotrzebniejsze linki powinieneś umieścić właśnie tutaj. Oprócz nich dodaj podstawowe informacje o tym, jak i kiedy skontaktować się ze sklepem.

Pogrupuj je według przeznaczenia, by odbiorca łatwo odnalazł poszukiwany odnośnik.

Niektóre istotne elementy możesz wyróżnić piktogramami, np. numer telefonu do sklepu, adres e-mail, czy dostępne płatności.

W stopce możesz zamieścić także odnośniki do swoich mediów społecznościowych.

 

Poniżej znajdziesz przykłady sklepów Zalando oraz X-KOM:

 

UX w sklepie internetowym

 

UX w sklepie internetowym

 

 

Krok 4: Strony kategorii produktowych

 

Ten typ stron w sklepie online szczególnie pomaga tym użytkownikom, którzy są zbyt przytłoczeni megamenu lub jeszcze nie wiedzą dokładnie, czego szukają.
Ułatwia on też znalezienie pożądanego produktu, poprzez zredukowanie liczby kliknięć.

Opis kategorii powinien być odpowiednio długi, by Google docenił stronę pod kątem SEO, ale na tyle krótki, by nie sprawiać wrażenia odpychającego dla klientów.

Jeśli zdecydujesz się na tekst zawierający ponad 1000 znaków rozważ umieszczenie go na dole strony, tuż nad stopką. Krótkie opisy mogą znajdować się tuż pod tytułem strony.

 

Stronę kategorii możesz zbudować na dwa sposoby.

  1. Zawarcie na niej wszystkich produktów umieszczonych w danej kategorii. Takie rozwiązanie ma dużą wadę – odbiorca ma duży problem z filtrowaniem produktów wg podkategorii.
  2. Lepiej więc skorzystać z boksów linkujących do poszczególnych podkategorii wraz z grafikami, które przyciągają wzrok i pomagają szybko odnaleźć interesującą podkategorię.

Jeżeli kategoria zawiera ich bardzo wiele, rozważ wyselekcjonowanie najpopularniejszych, by klient nie poczuł się przytłoczony nadmiarem opcji.
Innym pomysłem może być dodanie linków do pozostałych podkategorii – bez zdjęcia ilustrującego.

 

Zobacz jak robi to Amazon:

UX w sklepie internetowym

 

 

Pod boksami możesz umieścić bestsellery danej kategorii lub listing wszystkich produktów w niej zawartych. W drugim przypadku pamiętaj, by na stronie kategorii włączyć filtrowanie po kolorze, rozmiarze, kolekcji itp. Rozmieść filtry od najbardziej popularnego do najmniej.

Według badania Nielsena, to właśnie strony podkategorii z mieszanym typem elementów (boksy + listing) generowały najlepsze wyniki.

 

 

Krok 5: Strona z listą produktów

 

Tego typu stroną jest każdy listing produktów – w kategorii, podkategorii lub subkategorii.

 

Jakie elementy główne powinien zawierać listing?

Strona z lista produktów powinna zawierać nie tylko konkretne produkty, ale również opis potrzebny do pozycjonowania jej w wyszukiwarkach.

Podobnie jak w przypadku stron kategorii warto dłuższy opis umieścić nad stopką a krótszy pod tytułem strony.

Zdjęcie prezentowanego produktu może zawierać labelkę, czyli etykietę informującą o tym, w jakiej promocji znajduje się towar lub czy jest nowością/bestsellerem.
Tego typu zabieg zwiększa CTR (klikalność) produktu, jednocześnie dostarczając większej liczby informacji na ograniczonej przestrzeni.

 

Przykład zastosowania etykiet w sklepie Empik:

UX w sklepie internetowym

 

 

Po najechaniu na zdjęcie główne dobrym pomysłem będzie zaprezentowanie produktu w użyciu, np. za pomocą zdjęcia wizerunkowego lub minifilmu. Możesz również skorzystać z przewijania zdjęć za pomocą karuzeli lub slajdów.

 

UX w sklepie internetowym

 

To, jak wyglądać powinien listing zależy w dużej mierze od typu produktów, które sprzedajesz.

 

Przykłady listingów produktowych

 

Sklepy z artykułami elektronicznymi, RTV, AGD itd.

Sklepy z elektroniką zdają sobie sprawę, że klient podejmuje decyzję o kliknięciu w produkt na podstawie o wiele większej liczby informacji, niż osoba odwiedzająca sklep home decor lub markę modową.

Widzimy więc często, że w sklepach takich jak Morele, Komputronik, X-KOM czy RTV Euro Agd oprócz zdjęcia produktów już na samym listingu możesz dowiedzieć się wiele o danym przedmiocie.
Dodatkowe informacje umieszczane są zwykle po prawej stronie lub pod zdjęciem i nazwą produktu.

Weź pod uwagę podstawowe potrzeby twojego klienta.

Wybierając laptopa najprawdopodobniej chce dowiedzieć się np. jaką przekątną ekranu ma dany model, jaki procesor i kartę graficzną zawiera.

W listingu z pralkami automatycznymi kluczowymi informacjami będą za to szerokość urządzenia, klasa energetyczna i pojemność.

Jeżeli sklep umożliwia pozostawienie komentarza z oceną, to również rating powinien znaleźć się na listingu produktów.

 

Poniżej znajdziesz przykład listingu Komputronika:

UX w sklepie internetowym

 

 

Sklepy odzieżowe, home decor i księgarnie

W przeciwieństwie do nich, sklepy takie jak Zara, Duka, Ikea czy Mango pokazują jedynie zdjęcie, nazwę i cenę produktu.

Ten trend ulega jednak powolnej przemianie. Konsument coraz częściej interesuje się, z jakiego materiału zrobiona jest sukienka albo z jakiego tworzywa wykonano blat stołu.

 

UX w sklepie internetowym

 

 

Sklepy typu marketplace

W przypadku sklepów typu marketplace istotną rolę odgrywa również fakt, kto sprzedaje produkt oraz jak długo trzeba czekać na dostawę.

 

UX w sklepie internetowym

 

 

Na koniec pamiętaj o filtrowaniu produktów – im więcej możliwości zawężania wyszukiwania tym lepiej. Dopilnuj jednak, by klient nie mógł zawęzić filtrowania tak bardzo, że skończy z pustą stroną bez ani jednego widocznego przedmiotu.

 

UX w sklepie internetowym

 

 

Krok 6: Karta produktu

 

Nowoczesna karta produktu to nie tylko zdjęcie, opis, cenę i przycisk “Kup teraz”. Coraz częściej marki orientują się, że klient chce wiedzieć o przedmiocie jak najwięcej, pragnie sprawdzić jego stan w salonie stacjonarnym lub porównać go z innym – podobnym produktem.

Warto mu to umożliwić, pamiętając, aby nadmiar informacji nie był zbyt przytłaczający.

 

Jak stworzyć przejrzystą kartę produktu?

Umieść najważniejsze informacje u góry strony a te szczegółowe u dołu (poniżej punktu przewijania).

Zasada tego typu nazywana jest czasem układaniem treści warstwami (layering).

Świetnie radzą sobie z tym firmy technologiczne, które muszą upchnąć na stronie produktu ogrom informacji, od czysto marketingowych po bardzo techniczne.

 

Oto kilka prostych wytycznych, jak to zrobić:

  • podsumowanie najważniejszych cech produktu u góry strony
  • linki do poszczególnych sekcji tuż pod kluczowymi informacjami
  • informacje marketingowe wraz ze zdjęciami wizerunkowymi poniżej
  • szczegółowe dane techniczne na samym końcu

 

Zobacz kartę produktu w sklepie X-KOM:

 

1.Widok po załadowaniu strony.

UX w sklepie internetowym

 

2. Widok po przewinięciu strony.

UX w sklepie internetowym

 

UX w sklepie internetowym

 

Podobnie jak w przypadku strony głównej, na ekranie widocznym po wczytaniu strony odbiorca powinien widzieć tylko kluczowe informacje, takie jak:

  • ciasteczka, które szybko przekierowują do kategorii
  • nazwa produktu
  • zdjęcie
  • cena
  • model do wyboru
  • kolor/rozmiar do wyboru
  • krótkie podsumowanie produktu
  • przycisk KUP TERAZ
  • przycisk “Dodaj do schowka/listy życzeń”
  • wyróżniki sklepu, takie jak darmowa dostawa, dostawa do salonu stacjonarnego czy raty

 

Pamiętaj, że nie tylko marki sprzedające elektronikę powinny kłaść duży nacisk na dokładne i ciekawe opisy produktu. Również firmy oferujące ubrania, zabawki, akcesoria do domu odchodzą powoli od niemal pustych kart produktu.

Im więcej szczegółów, tym lepiej, co pokazuje sklep Tchibo (kolejne grafiki pokazują informacje widoczne w miarę przewijania w dół):

 

UX w sklepie internetowym

UX w sklepie internetowym

UX w sklepie internetowym

UX w sklepie internetowym

 

 

Dlaczego powinieneś zamieścić jak najwięcej informacji o produkcie?

Współczesny konsument uwielbia porównywać produkty i ma coraz większą wiedzę o jakości materiałów i użytej technologii produkcji (trend eco friendly, no waste itp.).

Istnieje więc spore ryzyko, że nie zdobywając tych informacji od ciebie, klient znajdzie je u konkurencji. I już nigdy więcej nie zajrzy do twojego sklepu.

Otwartość i szczerość sprzyja również zaufaniu do twojej marki. Firma, która coś ukrywa od razu postrzegana może być jako ta, która ma ku temu powód. Negatywny, oczywiście.

 

 

Dlaczego dobre zdjęcie ma znaczenie?

Na dobre UX składa się również jakość i ilość zdjęć produktu.

Poza głównym poglądowym, powinieneś również postarać się o szczegółowe zdjęcia najważniejszych elementów produktu.

Odbiorca nie ma możliwości, by dotknąć produkt i poczuć jego fakturę. Warto więc wykonać zdjęcie macro, pokazujące z bardzo bliska jakość jego wykonania.

Możesz także zainwestować w sprzęt do fotografii 360 stopni. Sklep X-KOM korzysta z tego typu technologii, dzięki czemu klient może obejrzeć produkt z każdej strony.

 

UX w sklepie internetowym

 

 

Filmy pokazujące produkt w użyciu (np. Decathlon) lub na modelce dodają kontekst do prezentowanego towaru. Na wideo o wiele łatwiej wyobrazić sobie rzeczywisty rozmiar produktu oraz jak wygląda w życiu realnym.

UX w sklepie internetowym

 

Dół karty produktu – idealne na upselling i crosseling

Największe sklepy online od lat umożliwiają klientom dobranie produktów komplementarnych do zamawianego towaru.

 

Sposób klasyczny

Te z największym budżetem bazują przy tym na marketing automation, który dobiera produkty wyświetlane w sekcji pod konkretnego użytkownika.

Podstawowy element tego typu powinien zawierać jeden lub dwa wiersze: pierwszy z produktami ostatnio przeglądanymi a drugi z “wybranymi dla ciebie” lub “inni kupili również”.

W ten sposób nieinwazyjnie skłaniamy odbiorcę do kupienia np. akcesoriów do wybranego smartfona.

 

UX w sklepie internetowym

 

Taką samą sekcję możemy umieścić również na stronie koszyka.

 

Sposób bardziej nowoczesny

Firmy sprzedające elektronikę poszły o jeden krok naprzód w upsellingu, umożliwiając odbiorcom wybór dodatkowych akcesoriów niemal od razu po wczytaniu się strony.

Spójrz na przykład sklepu Apple. Firma próbuje zachęcić odbiorcę do zakupu sprzętu z mocniejszym procesorem lub większą liczbą RAMu.

 

UX w sklepie internetowym

 

 

Krok 7: Koszyk

 

Optymalizując widok koszyka powinieneś zwrócić uwagę zarówno na wygląd strony po kliknięciu w odpowiedni button przekierowujący, jak i design tzw. mini koszyka.

 

Koszyk główny

Tego typu strona nie powinna obfitować w materiały promocyjne, czy inne rozpraszacze zachęcające do przejścia na inną podstronę.

W koszyku klient upewnia się, że wybrał pożądane produkty. Z związku z tym poza zdjęciem, nazwą produktu, liczbą sztuk i ceną warto poinformować odbiorcę o wybranym kolorze, rozmiarze, czy modelu towaru.

W tym miejscu konsument dokonuje również niezbędnych poprawek. Daj mu więc możliwość zmiany ilości dodanych produktów oraz przycisk usuwania całej pozycji z koszyka.

Wiele sklepów online już w koszyku umożliwia wybór sposobu dostawy.
Dzięki temu zabiegowi klient na bardzo wczesnym etapie dowiaduje się o dodatkowych kosztach i może podjąć decyzję o tym, czy przejść do następnego etapu finalizacji zamówienia.

Możesz również pokusić się o dodanie panelu wyboru sposobu płatności, ale w większości przypadków jest on dostępny pod koniec wpisywania danych w checkoucie.

Zobacz poniższy przykład sklepu Morele.net:

 

UX w sklepie internetowym

 

 

Minikoszyk

To dzięki niemu twój potencjalny klient wie, ile i jakie produkty dodał do koszyka, bez konieczności przejścia na dedykowaną podstronę.

Warto, by button reprezentujący minikoszyk zawierał informację o liczbie towarów w koszyku.

Po kliknięciu w niego lub najechaniu na przycisk, odbiorca powinien zobaczyć wszystkie dodane produkty, wraz z możliwością ich szybkiego usunięcia z koszyka.

 

UX w sklepie internetowym

 

 

Krok 8: Rejestracja w sklepie online

 

Rejestracja w każdym typie serwisu internetowego powinna przebiegać szybko i sprawnie.

Dlatego też większość sklepów online nie wymaga rejestracji konta, umożliwiając zakup jako gość.

Zarówno, gdy chcesz namówić klienta do rejestracji, jak i przeprowadzić go przez proces wpisywania danych jako gość, skup się na jak największym minimalizmie.

Zastanów się, jakie dane są niezbędne do złożenia i realizacji zamówienia. Usuń niepotrzebne pola formularza, takie jak płeć czy data urodzenia. W dobie RODO nie tylko nie są “UX friendly”, ale też mogą stanowić podstawę do zainteresowania się UODO twoją firmą.

Bardzo dużym ułatwieniem może być też automatyczne zapisywanie adresu e-mail jako loginu i prośba o ustawienie hasła już po dokonaniu zamówienia.

Klientów możesz zachęcić do szybkiego założenia konta poprzez benefity dostępne wyłącznie dla zarejestrowanych, jak np. śledzenie przesyłki z panelu lub szybkie zwroty.

 

UX w sklepie internetowym

 

 

Krok 9: Przejście do kasy – Checkout

 

Oto najważniejszy i najbardziej krytyczny panel jeśli chodzi o finalne dokonanie zakupu.

 

Jeśli twój checkout jest źle skonstruowany to istnieje spora szansa, że wiele osób opuści ją bez finalizacji transakcji.

 

Tuż pod tytułem strony warto umieścić pasek postępu wypełniania danych. Dzięki niemu klient dokładnie wie, na którym etapie dochodzi do płatności i sprawdzenia poprawności uzupełnionego formularza.

 

Zadbaj więc, by pola formularza były logicznie pogrupowane.

 

W podsumowaniu zamówienia warto dać możliwość powrotu do edycji pól formularza oraz sposobu dostawy.

 

Wiele sklepów internetowych na tej stronie usuwa pasek nawigacji. Ma to na celu skłonienie odbiorcy, by zakończył proces zakupowy i nie był rozpraszany przez żadne dodatkowe elementy. Jedynym sposobem na opuszczenie strony jest w takim przypadku kliknięcie w logo sklepu.

 

UX w sklepie internetowym

 

 

Na samym końcu checkoutu dodaj przycisk do dokonania zakupu, który przekieruje na stronę operatora płatności. Możesz także wyciągnąć opcje płatności z osobnej podstrony, aby zwiększyć zaufanie odbiorcy do twojego sklepu.

 

Zobacz jak robi to Komputronik:

UX w sklepie internetowym

 

 

Krok 10: Podziękowanie za złożenie zamówienia

 

Po dokonaniu płatności przekieruj klienta na stronę potwierdzenia dokonania zakupu. Ten zabieg zapewni go, że wszystko poszło po jego myśli.

Warto, by zawierała podsumowanie całego zamówienia wraz z możliwością założenia konta jednym kliknięciem, o ile odbiorca wybrał zakup bez rejestracji.

 

 

Krok ostatni: Prędkość wczytywania stron

 

Im szybciej strona zostanie wczytana, tym większa szansa na konwersję. Współczesny klient czeka maksymalnie 5 sekund zanim opuści stronę przed jej załadowaniem. Niemal połowa z nich wyjdzie z niej już po 2 sekundach czekania.

Musisz więc zadbać, by twój sklep online uruchamiał się niemal błyskawicznie.

 

Jak tego dokonać?

 

  • używaj CDN do hostowania całej strony lub tylko multimediów – za jego pomocą możesz umieścić fragmenty strony www na wielu serwerach na świecie.

Ten zabieg potrafi znacząco przyspieszyć wczytywanie strony, ponieważ klient pobiera jego zawartość z wielu miejsc jednocześnie.

Jeżeli posiadasz odbiorców z wielu krajów na świecie, to ich czas wtyczywania strony również ulegnie ogromnej poprawie.

Obecnie najpopularniejszym CDN na świecie jest Claudflare.

 

  • zadbaj o cachowanie zasobów – nie wszystkie pliki twojego sklepu online muszą być pobierane za każdym razem, gdy odbiorca wchodzi na stronę. Wiele z nich może być pobranych do pliku cache komputera klienta, dzięki czemu kolejnym razem wczytają się błyskawicznie.

 

  • zoptymalizuj obrazki – im cięższe zdjęcie, tym wolniej będzie się wczytywać strona.

W przypadku stron takich jak Strona Główna liczba grafik, które muszą zostać pobrane może wynosić nawet dziesiątki!

Dlatego też każdy obrazek powinien posiadać odpowiedni rozmiar (czyt. nie za duży na konkretne potrzeby) i wagę.

Jeśli chcesz samodzielnie skompresować obrazki zanim wrzucisz je na stronę, to polecam ci narzędzie online Compressor.io.

 

  • kup dobry hosting – nie warto oszczędzać na komputerze, na którym stoi twoja strona.

W przypadku sklepu o małym miesięcznym ruchu koszt hostingu powinien zamknąć się w 200 zł, a większego w 1000 zł. Nie są to ogromne kwoty, biorąc pod uwagę znaczny wzrost prędkości wczytywania strony.

 

  • stosuj kompresję gzip – polega na bezstratnym skompresowaniu plików twojego sklepu www. Dzięki temu komputer klienta pobierze je z serwera znacznie szybciej.

 

Powyższe przykłady to oczywiście jedynie maleńki czubek całej góry lodowej możliwych usprawnień.

By przetestować, jak Google widzi prędkość twojego sklepu wejdź na stronę Google Speed Insights. Po przeprowadzonym badaniu uzyskasz informacje, co warto poprawić na stronie, aby zmniejszyć jej czas wczytywania.

 

 

PODSUMOWANIE

 

To nie była ani łatwa ani krótka droga, ale udało się! Przebrnąłeś przez 10, a w zasadzie to aż dwanaście kroków do świetnego UX twojego sklepu internetowego.

Kluczowa rzecz, którą musisz zapamiętać jest prosta: dowiedz się kim są twoi klienci oraz jakie mają oczekiwania.

Następnie usprawnij stronę zgodnie ze zdobytymi danymi. Współczesne narzędzia do badania wrażeń użytkownika na szczęście nie są bardzo kosztowne i nie wymagają ogromnego zasobu wiedzy na temat badań UX.

To, jak intuicyjny w obsłudze twój sklep online odgrywa ogromną rolę w całkowitej liczbie transakcji.

Warto więc poznać podstawy User Experience i wdrożyć je od dziś!

Jeśli chcesz dowiedzieć się od samego Google jak poprawić UX strony, to przeczytaj ten potężny raport (ponad 100 stron!).

 

 


Dowiedz się więcej o tym, jak prowadzić skuteczny sklep online! Przeczytaj moje inne artykuły:

Testy A/B – Poradnik dla Początkujących

Jak uniknąć błędów statystycznych w testach A/B?

Jak pisać świetne opisy produktów – zgodne z SEO i twoim brandingiem? Kompleksowy poradnik


 

 

Bibliografia

Ten tekst powstał na podstawie mojej wiedzy i ponad 40 rzetelnych źródeł, z których najważniejsze (i najciekawsze) to:

https://www.ecommerceceo.com/ecommerce-user-experience/
https://conversionxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/
https://www.nngroup.com/articles/ecommerce-homepages-listing-pages/
https://www.spotstudio.net/blog/ux/ultimate-guide-ecommerce-ux-design/
https://tubikstudio.com/ux-design-for-e-commerce-principles-and-strategies/
https://www.toptal.com/designers/e-commerce/ecommerce-ux-design-principles
https://www.loop54.com/knowledge-base/ecommerce-site-search-and-navigation-ux-design-guide
https://www.nngroup.com/articles/scrolling-and-attention/
https://uxstudioteam.com/ux-blog/e-commerce-ux/
https://conversionxl.com/ecommerce-best-practices/
https://www.bitcatcha.com/blog/x-examples-perfect-ecommerce-ux-design-x-bad-ones/
https://medium.com/@floship/ecommerce-ux-mastery-best-practices-and-ui-patterns-to-follow-ed5af051a96a
https://services.google.com/fh/files/events/pdf_retail_ux_playbook.pdf
https://onilab.com/blog/ux-playbook-for-retail-google/
https://econsultancy.com/93-ecommerce-ux-features-that-create-user-flow/
https://conversionxl.com/blog/ecommerce-ux/
https://www.nngroup.com/articles/ecommerce-expectations/



Pomogłam? Oceń ten artykuł!

Sprawdź swoją wiedzę w teście Facebook Ads!

Test poziomujący składa się z 3 etapów. Każdy zawiera 5 pytań na danym poziomie. Na końcu testu zostaniesz przekierowany/a do spersonalizowanej platformy edukacyjnej :).

Trwa wczytywanie
Spis treści
Darmowa Szkoła Reklamy

W 100% darmowa, 7-dniowa Szkoła Reklamy poprowadzi Cię krok po kroku od tworzenia konta firmowego aż do tworzenia reklam!

Powiązane artykuły

Ogarnij Facebook Ads od A do Z:

Artykuły

darmowe i płatne, znajdujące się w Ads Hubie.

Kurs wideo

ponad 8h uporządkowanej, aktualnej wiedzy o Meta Ads.

Podręcznik do reklam

ponad 600 stron zaawansowanej, praktycznej i aktualnej wiedzy o Meta Ads.

Kurs skalowania reklam

1,5h szkolenia o zaawansowanych taktykach skalowania Meta Ads.

Możesz także wejść nieco wolniej w naukę, dołączając do darmowej 7-Dniowej Szkoły Reklamy.

Chcesz być na bieżąco z newsami o Meta Ads?