Co to jest UX i dlaczego jest ważne dla Twojego e-sklepu? (część II)

Jak ułatwić klientowi korzystanie ze sklepu internetowego? To pytanie powinno Ci towarzyszyć przy projektowaniu UX. Pozytywne user experience to bowiem takie tworzenie strony e-sklepu, by zapewnić użytkownikowi płynne przechodzenie do kolejnych kroków w procesie zakupowym oraz eliminowanie z niego niepotrzebnych elementów. W tym artykule przyjrzymy się bliżej takim czynnikom jak budowanie stron produktu i kategorii, koszyka oraz strony składania zamówienia i temu, jak wpływa to na doświadczenia klienta z Twoim e-sklepem.

ux sklepu internetowego

Ta publikacja to część druga artykułu „Co to jest UX i dlaczego jest ważne dla Twojego e-sklepu?”. Kliknij, aby przejść do pierwszej części i przeczytać o tym, czym jest user experience, dostosowywaniu strony do grupy docelowej, projektowaniu elementów graficznych oraz nawigacji w sklepie internetowym.

UX sklepu internetowego

Strony kategorii i produktów

Słowo pisane jest równie ważne na stronie sklepu internetowego co grafiki i zdjęcia. Podstawowym założeniem powinna być jasna i spójna komunikacja, dostosowana do grupy docelowej, zarówno na stronie głównej, jak i karcie produktu.

Strona kategorii

Z poprzedniej części artykułu wiesz już, jak prezentować zdjęcia na stronie kategorii. Teraz czas przyjrzeć się m.in. warstwie tekstowej tego elementu. Pod tym względem najważniejszą kwestią jest opis kategorii, który ma równocześnie informować użytkowników o artykułach, które znajdzie w danej grupie, i pozycjonować Twój sklep w wyszukiwarce.

Jak długi powinien być opis kategorii w e-sklepie? Na to pytanie nie ma jednoznacznej odpowiedzi. Powinien on zawierać wszelkie istotne informacje dotyczące produktów, które znajdziemy na danej podstronie, ale też nie może być zbyt długi i rozwlekły. Pamiętaj, że nadrzędną wartością jest jego użyteczność dla klienta. Unikaj więc frazesów, „lania wody” i nadmiernego przesycania tekstu słowami kluczowymi, które nie powiedzą użytkownikowi nic o produkcie, a skupiaj się na konkretach i unikalności.

content marketing

Jeśli zaś chodzi o umiejscowienie opisu kategorii na stronie, to zależy ono w dużej mierze od jego długości. Dłuższe, kilkuakapitowe teksty warto umieścić w dolnej części – to najczęstsza praktyka sklepów internetowych.

listing produktów i opis kategorii

Opis kategorii widoczny pod listingiem na stronie sklepu Ikea.

💡Dobrą praktyką jest umieszczanie w tekstach linków do innych kategorii w sklepie – zarówno ze względu na użyteczność takiego opisu dla użytkownika, jak i na SEO.

Opis kategorii można też umieścić nad listingiem produktów, jest to jednak dość ryzykowne. Jeśli się na to zdecydujesz, zadbaj, by tekst był na tyle krótki, by klient nie musiał przewijać strony, żeby zobaczyć artykuły.

Jednym z filarów projektowania UX jest skrócenie ścieżki zakupowej klienta. Dlatego też warto już na etapie strony kategorii dać użytkownikowi możliwość dodania produktu do koszyka, umieszczając przycisk z odpowiednim CTA lub ikonę.

dodawanie do koszyka

Fragment strony kategorii w sklepie Ikea przed i po najechaniu kursorem na wybrany produkt – pojawia się wówczas możliwość dodania go do koszyka. W tym przypadku użyto znanego użytkownikowi symbolu graficznego, innym wariantem może być przycisk „Dodaj do koszyka”.

❗Aby opisy kategorii lub produktów spełniały swoją rolę zarówno pod względem UX, jak i SEO, muszą być one unikalne.

Strona produktu

Ze strony kategorii klient trafia na kartę produktu. To zazwyczaj w tym miejscu podejmuje decyzję o dodaniu artykułu do koszyka, powinno się więc tu znaleźć jak najwięcej praktycznych informacji o produkcie. Jeśli więc chodzi o sam opis produktu, warto ograniczyć się wyłącznie do kilku zdań:

opis produktu

Krótki opis na karcie produktu w sklepie Zara.

Bardziej szczegółowe informacje dotyczące danego artykułu – np. jego wymiarów czy wskazówek dotyczących konserwacji, możesz zaprezentować formie rozwijanej listy:

strona produktu

Karta produktu w sklepie Zalando.

Jak widzisz na przykładzie powyżej, strona produktowa nie służy jedynie zaprezentowaniu samego artykułu. Dobrą praktyką jest umieszczenie tutaj informacji np. o przewidywanym terminie dostawy, prawie do zwrotu czy gwarancji, słowem – wszelkich komunikatów niosących za sobą wartość dla klienta i zachęcających go do dokonania zakupu.

efektywna strona produktu

No i wisienka na torcie, czyli przycisk dodający produkt do koszyka. Ten musi się odróżniać od pozostałej części tekstu – najlepszą praktyką jest umieszczenie go na tle w innym kolorze. Aby przekonać użytkownika do kupienia towaru, możesz też poinformować go o tym, w jak dużej ilości dostępny jest dany produkt, oraz o trwającej obecnie promocji, dzięki której nabędzie artykuł w bardziej przystępnej cenie. Na stronie produktu warto umieszczać też kody rabatowe.

dodaj do koszyka

Widoczna możliwość dodania produktu do koszyka w sklepie Zalando.

❗Jeśli dany produkt zdążył się wyprzedać, koniecznie poinformuj klienta o spodziewanym terminie uzupełnienia magazynu. Zaoferuj też wysłanie powiadomienia e-mail, kiedy towar będzie już dostępny.

Karta produktu to świetne miejsce, by wykorzystać up- i cross-selling. Po dodaniu produktu do koszyka, możesz zaproponować klientowi podobne lub uzupełniające artykuły. Na tym etapie daj też użytkownikowi możliwość kontynuowania zakupów lub przejścia do koszyka, by przyspieszyć i ułatwić cały proces.

cross-selling

Komunikat po dodaniu produktu do koszyka w sklepie Sephora.

Koszyk sklepu internetowego

Podczas gdy na strona produktu jest miejscem, gdzie warto umieścić jak najwięcej CTA i informacji mających na celu przekonać klienta do dokonania zakupu, tak na stronie koszyka lepiej postawić na minimalizm. W tym miejscu bowiem konsument podejmuje ostateczną decyzję o finalizacji transakcji, a zbyt duże nasycenie komunikatami może go zdekoncentrować.

📚Przeczytaj też: Jak zwiększyć wartość koszyka zakupowego? 5 porad

Na stronie koszyka najważniejszą informacją jest podsumowanie zamówienia, czyli zaprezentowanie wszystkich produktów (wraz z ich zdjęciami i doprecyzowaniem wariantu, np. kolorystycznego) oraz ich liczby. Na tym etapie powinieneś również dać klientowi możliwość dodania kolejnego (lub kilku kolejnych) takich samych artykułów a także ich usunięcia.

koszyk sklepu internetowegi

Strona koszyka w sklepie Douglas. Na tym etapie możesz pokazać, jak dużo klient zaoszczędzi dzięki promocji, wyróżniając niższą cenę odmiennym kolorem.

CTA, jakim warto umieścić na stronie koszyka, jest informacja o kwocie brakującej do darmowej dostawy. W widocznym miejscu powinna się również znaleźć możliwość wpisania kodu rabatowego oraz, rzecz jasna, całkowita kwota zamówienia (z wliczonymi kosztami dostawy; najlepszą praktyką jest branie pod uwagę najdroższej opcji, klient będzie mógł ją zmienić na kolejnym etapie).

Zwieńczeniem strony koszyka sklepu internetowego jest widoczny i wyróżniony przycisk przenoszący na stronę składania zamówienia (np. „Do kasy”). Jeśli podstrona jest obszerna i wymaga przewinięcia, warto umieścić taki przycisk zarówno w jej górnej, jak i dolnej części, co będzie ułatwieniem dla użytkownika:

koszyk sklepu internetowego

Strona koszyka w sklepie Douglas po przewinięciu. Widoczna jest też opcja „Kupuj dalej”, przenosząca użytkownika na poprzednią stronę.

Strona składania zamówienia (checkout)

Czas na ostatni, ale jakże ważny pod względem projektowania UX sklepu internetowego krok – stronę składania zamówienia. Nieodpowiednio skonstruowana, mało intuicyjna i składająca się z mnóstwa kroków może zniechęcić użytkownika do dokonania zakupu, co skończy się porzuconym koszykiem. Podobnie jak w przypadku poprzedniego etapu, warto na tej stronie unikać elementów mających rozproszyć klienta.

One step checkout

Projektując UX e-sklepu i stronę składania zamówienia, masz do wyboru dwa modele: taki, w którym wszelkie informacje dotyczące zakupu znajdują się na jednej stronie, lub gdy te są podzielone na kilka podstron. Ten pierwszy nosi nazwę one step checkout.

one step checkout

One step checkout w sklepie eobuwie.

Zaletą takiego rozwiązania jest fakt, że klient może zapoznać się z wszelkimi niezbędnymi danymi dotyczącymi zamówienia w jednym miejscu, i nie musi cofać się na żadną stronę, by upewnić się co do np. zawartości koszyka czy metody płatności. Wystarczy kilka kliknięć, by sfinalizować transakcję. Jednak z drugiej strony, tak duża liczba komunikatów może zwyczajnie przytłoczyć klienta, a cały przekaz – stracić na czytelności.

Ciężko jednoznacznie rozstrzygnąć, czy lepszym rozwiązaniem będzie one step checkout, czy taki składający się z kilku kroków umieszczonych na osobnych podstronach. Odpowiedź właściwą dla Twojego sklepu mogą przynieść jednak testy A/B.

Rejestracja i logowanie

Rejestracja w sklepie internetowym i zostawienie adresu e-mail może wiązać się dla Twojego klienta z dodatkowymi korzyściami. Jednak dla wielu użytkowników procedura ta oznacza dodatkowy, zbędny krok w procesie zakupowym. A gdy zobaczą na dodatek, że rejestracja jest obowiązkowa, tym chętniej porzucą koszyk.

Dlatego podstawą przy projektowaniu UX jest zaoferowanie możliwości dokonania zakupu jako gość. Nie oznacza to jednak, że nie możesz zachęcać klientów do rejestracji – np. oferując zniżkę na pierwsze zakupy po zapisie na newsletter czy rabaty po przystąpieniu do programu lojalnościowego. Najlepszą praktyką jest podział pierwszej strony całego procesu na trzy części – z logowaniem, rejestracją i możliwością zakupu bez rejestracji. Spójrz np., jak robi to H&M:

rejestracja i logowanie w sklepie internetowym

Rejestracja, logowanie i zakup jako gość w sklepie H&M.

💡Aby jeszcze bardziej skrócić proces rejestracji lub logowania, zintegruj swój sklep z Facebookiem – dzięki temu użytkownik będzie mógł za pomocą jednego kliknięcia dołączyć do grona Twoich klientów.

Jeśli zaś chodzi o sam formularz rejestracji czy adresu, na który ma zostać dostarczona paczka (w przypadku wyboru kontynuowania jako gość) zadbaj, by kupujący musiał podać wyłącznie najważniejsze dane i postaw na minimalizm. Konieczność podawania zbyt dużej liczby informacji może skutecznie zrazić klienta do dalszych zakupów.

Wybór metody dostawy i płatności

Kolejnym krokiem, po zalogowaniu czy rejestracji, powinien być wybór metody dostawy zamówienia. Pokaż wszystkie dostępne opcje wraz z ich kosztem, a także przewidywany czas przesyłki lub datę wysłania towaru.

metody dostawy

Wybór metody dostawy w sklepie Decathlon. W górnej części widzimy też wszystkie kroki wymagane do złożenia zamówienia, co daje użytkownikowi informację co do przebiegu całego procesu nawet przed jego rozpoczęciem.

Następny etap to wybór metody płatności. Analogicznie jak przy poprzednim kroku poinformuj w prosty i widoczny sposób, jakie są koszty poszczególnych opcji. Pamiętaj, że duża liczba metod płatności to dla użytkownika sygnał, że Twój sklep jest wiarygodny.

💡Dobą praktyką jest umieszczanie zawartości koszyka zarówno na stronie z wyborem metody dostawy, jak i płatności, wraz z kosztami zamówienia.

Strona z podsumowaniem i podziękowaniem za zamówienie

Udało się! Klient zdecydował się na zakupy w Twoim sklepie. Aby docenić jego decyzję, a równocześnie zapewnić go, że cały proces przebiegł sprawnie, jako ostatni etap pokaż podsumowanie zamówienia (zawartość koszyka, wybraną metodę płatności oraz dostawy), a także podziękowanie za wybór Twojej firmy. Potwierdzenie transakcji koniecznie wyślij też na podany wcześniej e-mail.

Jeśli kupujący zdecydował się na dokonanie zakupu jako gość, możesz w tym miejscu ponownie zaproponować rejestrację i wymienić związane z nią korzyści, a także zachęcić klienta do odwiedzenia profili sklepu w social mediach.

reklama facebook

Jak analizować UX strony sklepu internetowego?

Wiesz już, że pozytywne UX ma ogromny wpływ na postrzeganie Twojego e-sklepu oraz konwersję. Jak jednak sprawdzić, że strona faktycznie jest użyteczna, a wprowadzane zmiany rzeczywiście mają przełożenie np. na mniejszą liczbę porzuceń koszyka?

Najlepszym sposobem na sprawdzenie UX Twojego sklepu jest badanie z udziałem użytkowników z grupy docelowej. Warto powtarzać je w odniesieniu do każdego etapu procesu zakupowego, na etapie powstawania najważniejszych zmian, które mogłyby wpłynąć na użyteczność witryny. Pozwoli to uniknąć błędów przy projektowaniu UX.

Jak pozyskać takich testerów? Zachęć do przetestowania strony samych klientów, wysyłając zaproszenie do udziału w testach w newsletterze, social mediach czy umieszczając informację na samej stronie głównej, a następnie organizując zdalny test UX (np. za pomocą aplikacji do webinarów). Zadając odpowiednie, konkretne pytania dotyczące np. umiejscowienia danego przycisku, uzyskasz uwagi i sugestie. Jeśli dysponujesz odpowiednim budżetem, możesz zlecić audyt UX wyspecjalizowanej agencji lub zatrudnić profesjonalnych testerów.

Aby wysiłki związane z projektowaniem użyteczności przyniosły efekty, warto na bieżąco monitorować zachowania klientów – podstawowym narzędziem w tym przypadku będzie Google Analytics. Sprawdzaj, na jakim etapie użytkownicy porzucają koszyk, czy klikają w określone i odnotowuj zmiany w zachowaniu po wprowadzeniu każdej zmiany na stronie sklepu. Niezwykle istotne jest też dostosowanie wersji mobilnej sklepu – pamiętaj, że nie zawsze to, co działa na desktopie, będzie równie efektywne na smartfonie. Na bieżąco sprawdzaj też, co robi konkurencja.

Nouveau call-to-action

Pamiętaj, że inwestycja w pozytywne UX to sposób na przyciągnięcie klienta i zatrzymanie go na swojej stronie. Im lepsze wrażenia z zakupów, bardziej intuicyjny interfejs i mniej skomplikowany proces zakupowy, tym lepiej – zarówno dla kupującego, jak i, w dłuższej perspektywie, dla Ciebie.

0 komentarzy