Co to jest UX (user experience) i jak go wykorzystać do zwiększenia sprzedaży w sklepie internetowym? Poznaj praktyczne porady krok po kroku!
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.
Spis treści
-
- Co to jest UX?
- Dlaczego UX jest tak ważny w sklepie internetowym?
- 10 kroków do świetnego UX sklepu internetowego
- Krok 0: Pierwsze wrażenie
- Krok 1: Strona Główna
- Krok 2: Nawigacja sklepu online
- Krok 3: Stopka sklepu internetowego
- Krok 4: Strony kategorii produktowych
- Krok 5: Strona z listą produktów
- Krok 6: Karta produktu
- Krok 7: Koszyk
- Krok 8: Rejestracja w sklepie online
- Krok 9: Przejście do kasy – Checkout
- Krok 10: Podziękowanie za złożenie zamówienia
- Krok ostatni: Prędkość wczytywania stron
- PODSUMOWANIE
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ę.
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.
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.
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:
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
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.
Tuż nad, pod lub po prawej stronie nawigacji dodaj kluczowe przyciski w sklepie online: rejestrację/logowanie, koszyk oraz wyszukiwarkę.
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.
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.
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.
Duka poszła o krok dalej, dając możliwość szczegółowego wyszukiwania już w momencie wpisywania frazy zapytania;
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:
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.
- 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.
- 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:
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:
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.
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:
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.
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ę.
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.
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.
2. Widok po przewinięciu strony.
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ół):
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.
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.
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.
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.
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:
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.
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.
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.
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:
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
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/