Sprawdzone praktyki UX dla E-Commerce

Zanim zajmiemy się tym, jak UX pomaga w uzyskiwaniu lepszych wyników i tworzeniu optymalnego układu na stronie e-commerce (w sklepie internetowym), należy wyjaśnić, czym tak właściwie jest.

UX to skrót od User Experience. Często spotykamy się z tym terminem w kontekście słowa design (UX design lub User Experience Design). Połączenie skrótu UX i słowa design często wprowadza w błąd, sugerując, że UX design jest tym samym co web design (UI), czyli projektowanie stron (ludzie myślą, że chodzi o grafikę i projekt wizualny).

Jednak zadanie UX design jest zgoła inne. W UX designie chodzi o stworzenie relacji pomiędzy użytkownikiem a marką, w której to relacji użytkownik pozostaje w centrum uwagi. To szeroko rozumiany proces projektowy, który towarzyszy produktom lub usługom od momentu ich powstania aż do wprowadzenia na rynek lub wdrożenia do produkcji.

Różnicę między UX a UI design, oraz nie mniej ważne niż projekt wizualny  znaczenie układu strony można wyjaśnić na prostym przykładzie butelek po ketchupie.

Na zdjęciu po lewej stronie widzimy butelki ketchupu zaprojektowane w określony sposób. Można powiedzieć, że na pierwszy rzut oka atrakcyjność wizualna obu butelek jest dobra i spełnia swoje zadanie. Na zdjęciu po prawej stronie widać, że pomimo doskonałego wyglądu obu butelek, doświadczenie z ich użytkowania jest inne, co będzie miało dodatkowy wpływ na decyzje zakupowe klienta. Dlatego na UX należy zwrócić taką samą uwagę, jak na ogólny wygląd wizualny.

Jednym z błędów w branży e-commerce jest to, że nie znamy naszych kupujących i często skupiamy się głównie na danych ilościowych, takich jak analityka, techniczna strona rozwiązania oraz specyfikacja funkcji, które ma zawierać sklep internetowy, ponieważ rozwiążą one nasze konkretne problemy.

Brakuje jednak miejsca dla klientów, przez co nie znamy ich kluczowych obaw i potrzeb ani sposobów ich zaspokojenia, co często przekłada się na rentowność i efektywność e-sklepu oraz prowadzonych kampanii.

Poniższy przykład ilustruje, jak ważne jest skupienie się na poznaniu swojego klienta. Możemy wziąć na przykład dwie osoby z tego samego kraju, w tym samym wieku, posiadające rodzinę, wyjeżdżające na wakacje w te same miejsca. Różnicą między nimi jest jednak np. zawód, styl życia czy religia, co wpływa na ich zachowania zakupowe.

Hierarchia treści i układy stron dla świetnych sklepów internetowych

Omówiliśmy już, czym jest UX, z czym się wiąże i dlaczego jego stosowanie jest kluczowe. Teraz omówimy to pojęcie bardziej szczegółowo na przykładzie strony sklepu internetowego.

Strona główna

Jedną z najważniejszych stron sklepu internetowego jest bez wątpienia strona główna. To pierwsza rzecz, z którą kupujący online mają kontakt po otwarciu e-sklepu, odgrywająca kluczową rolę w podejmowaniu decyzji przez odwiedzających, których możemy podzielić na trzy podstawowe typy:

1. klient, który wszedł do e-sklepu i dokładnie wie, czego chce
2. klient, który ma ogólne wyobrażenie o tym, co chciałby kupić, ale nie wie tego dokładnie
3. klient, który szuka inspiracji, w związku z czym nie ma konkretnego pomysłu na zakup

Każdy klient podchodzi do zakupów inaczej, dlatego układ strony głównej powinien odpowiadać jego zachowaniom zakupowym. Jedną z podstaw jest tworzenie angażujących treści na stronie docelowej, zwłaszcza jeśli dobrze znasz swoich potencjalnych klientów.

Istnieją jednak ogólne zasady dotyczące tworzenia odpowiednich treści dla kupujących online, np. miejsca na banery z promocjami i produktami sezonowymi, na które nie warto przeznaczać niepotrzebnie zbyt wiele przestrzeni, ponieważ nie zawsze przyniosą tyle kliknięć, ile oczekujesz. Wyjątkiem są rabaty sezonowe lub wyjątkowo atrakcyjne zniżki bądź oferty. Pod sekcją banerową warto umieścić podstawowe informacje o zakupach, które interesują użytkownika – politykę zwrotów, opcje płatności, czas dostawy produktów, wysyłkę, reklamacje itp.

Jedną z ulubionych części dla klientów są listy produktów, które wraz z wysokiej jakości zdjęciami prezentują najpopularniejsze kategorie produktów, takie jak Popularne w kategorii, Najpopularniejsze produkty, Bestsellery w ofercie czy Najpopularniejsze marki. W przypadku niezdecydowanych kupujących strategicznie rozmieszczone szczegółowe opisy produktów mogą być również kluczowe dla zwiększenia konwersji.

.

Rekomendacje produktów i komunikacja rabatowa sprawdzają się głównie u klientów, którzy jeszcze nie zdecydowali, co chcą kupić, lub szukają inspiracji. W przypadku potencjalnych klientów musisz najpierw zdobyć ich zaufanie. Pomogą Ci w tym opinie użytkowników lub weryfikacja z portali z recenzjami.

Dolna część strony głównej służy do komunikowania treści, które witryny e-commerce wykorzystują do wspierania sprzedaży. W większości przypadków ma to formę bloga lub wyświetlanych postów z mediów społecznościowych. Umieszczenie w tej sekcji treści przyjaznych dla SEO może również poprawić widoczność i przyciągnąć ruch organiczny. Jeśli zaangażujesz użytkownika swoimi treściami w tej części, istnieje szansa, że będzie bardziej zmotywowany do zapisania się do newslettera lub obserwowania Twoich profili w mediach społecznościowych, dlatego jest to doskonałe miejsce na ich umieszczenie.

Nagłówek e-sklepu

Strona główna musi zaczynać się od nagłówka, który domyślnie zawiera logo służące do powrotu do strony głównej. Następnie zazwyczaj widoczna jest rozbudowana nawigacja w postaci mega menu. Istotnym elementem jest rozszerzone pole wyszukiwania. Wreszcie nagłówek e-sklepu musi zawierać podstawowe elementy, takie jak koszyk z podsumowaniem wartości, logowanie/rejestrację konta czy przejście do listy życzeń.

Nagłówek jest ważny zwłaszcza dla klientów, którzy wiedzą, czego chcą, i w większości przypadków przechodzą bezpośrednio do wyszukiwarki, co przekłada się na wysokie prawdopodobieństwo zakupu. Z nawigacji korzystają głównie klienci będący na etapie odkrywania produktów w procesie zakupowym, którzy potrzebują więcej czasu na podjęcie decyzji.

Stopka e-sklepu

Stopka to miejsce, w którym kupujący często szuka informacji o realizacji zamówień, opcji płatności, danych kontaktowych, informacji prawnych, odnośników do mediów społecznościowych itp. Jeśli użytkownik przewinie stronę na sam dół, prawdopodobnie czegoś szukał lub spodobały mu się treści w sklepie. Dlatego oprócz obowiązkowych elementów prawnych warto umieścić w stopce linki do głównych kategorii e-sklepu, aby kupujący mogli wygodnie kontynuować przeglądanie.

Nawigacja

Nawigacja i struktura sklepów internetowych mają istotny wpływ na wskaźniki takie jak współczynnik konwersji, sprzedaż czy współczynnik odrzuceń. To logiczne, że jeśli kupujący nie potrafią zorientować się, gdzie i jak znaleźć to, czego szukają, lub w jakim miejscu serwisu się znajdują, opuszczą stronę bez powodu do powrotu. Bez prostej i funkcjonalnej nawigacji nie będą w stanie dowiedzieć się, jak przeglądać katalog produktów, blog, dane kontaktowe czy stacjonarne placówki, przycisk dodaj do koszyka itp.

Gdyby użytkownik miał wyobrazić sobie główną nawigację na stronie lub w sklepie internetowym, zazwyczaj myśli o poziomym menu w nagłówku. Często wykorzystywanym miejscem wspierającym główną nawigację górną jest pasek boczny (sidebar). Gdy użytkownik przechodzi do kategorii najwyższego poziomu, jej podkategorie pojawiają się na pasku bocznym. Elementy nawigacji w pasku bocznym to doskonałe rozwiązanie dla sklepów internetowych lub stron wymagających uporządkowania dużej ilości informacji. Oprócz podkategorii stanowi on idealne miejsce na filtrowanie produktów.

Standardowym i skutecznym rozwiązaniem jest wspomniane już mega menu, będące dużym panelem nawigacyjnym wyświetlanym po najechaniu kursorem myszy na pozycję w menu głównym. To doskonały wybór do umieszczenia wielu elementów w strukturze kategorii produktów lub pokazania większej liczby podstron niższego poziomu. Taki przejrzysty układ oferuje również więcej miejsca, np. na prezentację produktów lub reklam oraz więcej przestrzeni na pozycje menu, co poprawia doświadczenia klientów, zapewniając jednocześnie czytelność całego projektu strony.

Wyszukiwanie i wyniki

Obok menu nawigacyjnego funkcja wyszukiwania jest kluczowym elementem zaspokajania potrzeb klientów i minimalizowania porzuceń koszyka, które mogą wynikać z frustracji. Użytkownicy chętniej wyszukują pożądane artykuły, jeśli wiedzą, że sklep internetowy oferuje poszukiwany przez nich produkt lub kategorię.

Nasze badanie pokazuje, że około 30% użytkowników opuszcza stronę internetową lub sklep online, jeśli nie znajdzie tego, czego szuka. Użytkownicy wybierają między wyszukiwarką a menu nawigacyjnym w zależności od różnych czynników, z których najważniejsze to wspomniane już typy kupujących i ich intencje oraz segmenty produktów, do których należy e-sklep.

Wyniki wyszukiwania również odgrywają odrębną rolę w zachowaniach zakupowych użytkowników. Strony wyników wyszukiwania są bardzo podobne do klasycznych list produktów dostępnych za pośrednictwem menu nawigacyjnego w e-sklepie. Jednak typowym problemem wyszukiwarki jest to, że nie jest wystarczająco inteligentna, aby dostarczać użytkownikowi wyniki odzwierciedlające jego zainteresowania i zachowania zakupowe. Dlatego użytkownicy często trafiają na stronę bez wyników, co w jednej trzeciej przypadków oznacza ich natychmiastowe opuszczenie sklepu.

Drugim częstym problemem jest brak możliwości filtrowania znalezionych produktów na stronie wyników lub ograniczona liczba dostępnych filtrów. Oznacza to, że wyszukiwarka nie obsługuje filtrów fasetowych, a użytkownik musi przeszukiwać wyniki ręcznie, zamiast filtrować produkty zgodnie ze swoimi preferencjami.

Lista produktów

Listy produktów są istotną częścią e-sklepu, która prowadzi kupujących do konwersji na stronę szczegółów produktu. Podstawowy układ listy produktów, a dokładniej wyświetlanych kategorii w e-sklepie, składa się z:

Rozszerzony nagłówek

Rozszerzony nagłówek z nazwą kategorii wraz z opisem miejsca, w którym znajduje się użytkownik. Możesz również pomóc użytkownikom, dodając wskazówki dotyczące wyboru odpowiedniego produktu pod kątem danej etykiety.

Menu okruszkowe (Breadcrumbs)

Menu okruszkowe (breadcrumbs), czyli nawigacja okruszkowa, jest stosowane w połączeniu z wyszukiwarką. Użytkownikom łatwiej jest „przechodzić” do interesującej ich kategorii, gdy nie znają np. jej dokładnej nazwy. Następnie mogą przejść ze szczegółów wyszukiwanego produktu do pożądanej kategorii za pomocą ścieżki okruszkowej.

Opcje sortowania

Opcje sortowania są często używane do wyświetlania podkategorii lub filtrów produktów pod nazwą i opisem kategorii. Zazwyczaj jednak są one domyślnie wyświetlane na pasku bocznym.

Pasek boczny (Sidebar)

Pasek boczny jest często używany do wyświetlania podkategorii, filtrów produktów w kategorii lub wspomnianych filtrów fasetowych w wynikach. Jeśli filtr na pasku bocznym nie jest wystarczająco zoptymalizowany lub struktura kategorii nie jest odpowiednio opracowana, zawartość paska bocznego staje się znacznie dłuższa niż zawartość samej strony, co negatywnie wpływa na zachowanie użytkowników.

Treść

Główną częścią jest treść strony, na którą składają się produkty, przy czym każdy produkt powinien mieć wyświetlone co najmniej:

1. Zdjęcie poglądowe
2. Nazwę produktu
3. Opis produktu
4. Cenę lub wyświetlaną cenę początkową
5. Dostępność produktu lub przewidywany czas dostawy oraz liczbę sztuk w magazynie
6. Przycisk „dodaj do koszyka” – zależy głównie od segmentu. Jeśli to odzież zależna od rozmiaru, nie ma to aż takiego znaczenia, ale jeśli są to na przykład książki, użycie przycisku ma sens
7. Elementy marketingowe – opis nowości, rabat, wyprzedaż, korzystne opakowanie, ostatnie sztuki – to różne formy uatrakcyjnienia produktów dla kupujących
8. Na liście można wyświetlić przy produktach wszystko, wystarczy pomyśleć o kluczowym czynniku lub czynnikach, na podstawie których użytkownik podejmuje decyzje, takich jak liczba kolorów lub inne warianty itp.

Częstym pytaniem jest, jak powinna wyglądać idealna paginacja w e-sklepie oraz czy używać przycisku „pokaż więcej”, czy strzałek. Obie opcje działają dobrze, ale idealnym rozwiązaniem jest ich połączenie, w którym użytkownik sam wybiera rozwiązanie najbardziej mu odpowiadające.

Przy listowaniu produktów unikaj nieskończonego przewijania (infinite scroll), które sprawdza się w zupełnie innych przypadkach przeglądania treści, np. w mediach społecznościowych, galeriach itp., ale nie podczas zakupów.

Karta produktu

Karta produktu jest jedną z głównych stron „konwersyjnych” e-sklepu i to tutaj zapadają najważniejsze decyzje. Kartę produktu możemy podzielić dla użytkownika na dwie zasadnicze części – zakupową i informacyjną.

Część zakupowa

Część zakupowa prezentuje podstawowe parametry i informacje, które bezpośrednio wpływają na decyzję kupującego. Idealna kompozycja tej części karty produktu obejmuje:

Zdjęcia produktu/galeria

Zawsze wyświetlaj jak najwięcej zdjęć produktu – wideo lub recenzję wideo produktu, wszystko w jak najwyższej jakości. Nawet ze zdjęć/filmów produktowych użytkownik czerpie wiele informacji, których może nie być w opisie. W tej sekcji często stosuje się etykiety lub informacje o rabacie/promocji, nowościach bądź różnych nagrodach czy certyfikatach.

Marka produktu

Uwzględnienie marki produktu może ułatwić klientom wyszukiwanie produktów danej marki. Najlepiej, jeśli zawiera krótką informację o ofercie produktowej i branży.

Nazwa produktu

Idealnym dopełnieniem nazwy produktu jest również nazwa marki oraz szczegóły wariantów, takie jak kolory, rozmiar czy materiały (czerwony, metaliczny, XL itp.).

Kod produktu

Ma ogromne znaczenie, zwłaszcza w e-commerce B2B, ale pomaga również kupującym, którzy regularnie kupują te same produkty w sklepach internetowych B2C.

Kategoria

Kategoria, w której znajduje się produkt, odgrywa kluczową rolę w nawigacji użytkownika, zwłaszcza jeśli trafił on na produkt z reklamy lub znalazł go w wyszukiwarce internetowej.

Parametry produktu

Parametry produktu – rozmiar, warianty, kolory itp. – odgrywają kluczową rolę w podejmowaniu decyzji, najlepiej zlokalizowane w pobliżu informacji o dostępności i cenie przy przycisku „dodaj do koszyka”. Gdy użytkownik zmienia dowolny z parametrów, powinien widzieć zmiany w cenie, dostępności lub innych interesujących go wartościach.

Dostępność

Dostępność wyświetlanego produktu w sklepie internetowym i sklepach stacjonarnych.

Dostawa

Szybkość dostawy lub szacowany termin doręczenia – im dokładniejsze szacunki jesteś w stanie podać, tym bardziej zadowolony będzie klient po zakupie.

Przycisk dodania do koszyka

Najważniejszy przycisk na stronie powinien być zawsze wyraźnie widoczny i jednoznaczny. Bez względu na to, w którym miejscu witryny się znajduje, zawsze musi być jasne, że służy do dodania do koszyka. Projekt przycisku powinien współgrać z tym, jak zamierzasz sprzedawać produkty, oraz z konkretnym segmentem działalności. Na przykład, jeśli sprzedajesz produkty takie jak luksusowe motocykle elektryczne online, możesz z powodzeniem użyć eleganckiego czarnego przycisku z napisem „Kup”. Jeśli jednak sprzedajesz i dostarczasz żywność, bardziej odpowiedni będzie zapewne zielony przycisk z napisem „Do koszyka”. Przycisk zazwyczaj zawiera pole z liczbą sztuk, jaką użytkownik może lub chce dodać do koszyka.

Cena produktu

Najbardziej decydujący element zakupu. W sklepach internetowych często korzysta się z promocji i rabatów, dlatego ważne jest ich odpowiednie komunikowanie. Jeśli przeceniasz produkt, wyświetl etykietę rabatu oraz cenę pierwotną. Przecenianie wszystkich produktów jednocześnie nie jest najlepszym rozwiązaniem, ponieważ może obniżyć poczucie ich wyjątkowości.

Funkcje dodatkowe

Funkcje dodatkowe, takie jak lista życzeń, udostępnianie czy tabela rozmiarów, to powszechne elementy, do których użytkownik jest przyzwyczajony lub których oczekuje na karcie produktu. Krótki opis produktu, odsyłający do części informacyjnej strony, zazwyczaj umieszcza się pod nazwą produktu.

Część informacyjna

Część informacyjna karty produktu składa się głównie z głównego opisu produktu i jego właściwości. Powinna również zawierać galerię, zdjęcia produktu, recenzje lub prezentacje wideo, tabelę wszystkich parametrów produktu, opis producenta oraz różne dodatkowe materiały do pobrania.

W tej sekcji często znajduje się miejsce na opinie klientów lub pytania odwiedzających, np. dyskusję w formie Q&A. Same opinie są dla użytkowników cennym źródłem informacji, a jednocześnie budują wiarygodność sklepu internetowego. Im lepiej opracowana jest karta produktu i im dokładniej opisane są produkty, tym większe prawdopodobieństwo, że użytkownicy dokonają zakupu w sklepie.

Karta produktu to doskonałe miejsce, w którym za pomocą rekomendacji możemy szybko pomóc użytkownikom odkryć inne produkty lub kategorie w ofercie sklepu. Rekomendacje warto umieścić bezpośrednio pod główną sekcją zakupową na karcie produktu, aby zyskały wystarczająco dużo przestrzeni i nie odwracały niepotrzebnie uwagi od głównego produktu.

Przy wyświetlaniu rekomendacji należy uważać, aby użytkownik nie pomylił ich na przykład ze wspomnianymi wariantami. Te powinny znajdować się wyżej, w pobliżu przycisku zakupu i parametrów produktu.

Koszyk zakupowy

Koszyk to brama do procesu zakupowego. W porównaniu z innymi częściami witryny koszyk posiada uproszczony interfejs, który pomaga użytkownikowi skupić się na sfinalizowaniu zakupu i zapobiega porzucaniu koszyka. Często stosowaną funkcją koszyka jest licznik czasu dla produktów, który informuje użytkowników, że produkty będą w nim zarezerwowane tylko przez określony czas, motywując ich do szybszego podejmowania decyzji i zakupu.

Idealna struktura koszyka zakupowego składa się z następujących elementów i parametrów:

• Uproszczony nagłówek bez nawigacji – pozwala szybko wrócić do poprzedniej strony lub strony głównej oraz zobaczyć kolejne kroki procesu zakupowego, które czekają na użytkownika
• Informacja o darmowej dostawie lub gratisie działającym na tej samej zasadzie – najlepiej umieszczona pod nagłówkiem, a nad podsumowaniem produktów
• Podsumowanie produktów w koszyku – domyślnie powinno wyświetlać produkty z ceną końcową oraz możliwością zmiany ich liczby lub usunięcia z koszyka. Produkty muszą prezentować wybrane parametry oraz umożliwiać przejście do ich karty w sklepie
• Końcowa cena produktów – wyświetlana bezpośrednio za podsumowaniem produktów i miejscem na kod kuponu rabatowego
• Szacowany czas dostawy i linki do polityki zwrotów – po dodaniu produktów do koszyka dedykowana sekcja ze szczegółami zamówienia może zawierać zarówno szacowany czas dostawy, jak i zwięzłe omówienie polityki zwrotów
• Rekomendacje produktów – koszyk to idealne miejsce na wsparcie zakupu rekomendacjami. Miejscem na ich umieszczenie jest przestrzeń tuż nad lub pod przyciskami „Wróć” i „Sfinalizuj zakup”. Pozycja zależy od zawartości produktów w rekomendacji. Jeśli blok z produktem zawiera zbyt wiele parametrów i zajmuje za dużo miejsca na wysokość, umieszczamy je na samym dole, ale jeśli jest kompaktowy i niezbyt wysoki, możemy bez przeszkód umieścić go nad wspomnianymi przyciskami – przyciągnie wtedy większą uwagę użytkownika. Nigdy jednak nie umieszczaj rekomendowanych produktów w podsumowaniu koszyka powyżej dodanych artykułów. Wprowadzi to w błąd użytkowników, którzy spodziewają się zobaczyć zupełnie inne produkty, co może skłonić ich do opuszczenia witryny.

Najlepiej, jeśli już w tej sekcji poinformujesz użytkowników, jakie metody płatności i opcje wysyłki możesz im zaoferować przy zakupie, bez konieczności przechodzenia do kolejnych kroków tylko po to, by sprawdzić te informacje. W ten sposób poprawisz swoje statystyki i zmniejszysz współczynnik odrzuceń.

Proces zakupowy

Najczęściej stosowanym procesem zakupowym jest proces wieloetapowy. W przeciwieństwie do rozwiązań alternatywnych, takich jak proces jednoetapowy/jednostronicowy, przynosi on więcej korzyści i możliwości.

Proces jednoetapowy jest skuteczny głównie na początku działalności sklepu internetowego lub w prostszych przypadkach – na przykład gdy sklep nie oferuje wielu metod płatności i opcji dostawy w procesie zakupowym, a użytkownicy nie kupują zazwyczaj wielu produktów naraz.

Wadą jest jednak pomiar procesu zakupowego, ponieważ cały proces składa się tylko z jednego kroku. Każde opuszczenie zakupu przez użytkownika oznacza porzucenie całego procesu; na tej podstawie trudno ocenić, gdzie leżał problem.

Zaletami wieloetapowego procesu zakupowego są w szczególności przejrzystość oraz znacznie lepszy pomiar przechodzenia przez proces zakupowy dzięki podziałowi na kilka kroków:

Koszyk zakupowy lub podsumowanie koszyka

Podsumowanie produktów, które klient zdecydował się dodać do koszyka.

Wybór płatności i dostawy

Ta część procesu zakupowego jest prosta, pod warunkiem jednak, że wszystkie opcje są dla użytkownika wystarczająco opisane i opatrzone wszelkimi kluczowymi informacjami – nie tylko nazwą wyboru i opłatą, ale także dodatkowymi szczegółami, takimi jak: wybór dostawy kurierem, z jakiej firmy kurierskiej korzystasz, czy dostawa towaru odbywa się tylko w dni robocze, czy również w weekendy, data, kiedy klient może spodziewać się towaru itp.

Jeśli klient wybierze odbiór osobisty, powinien mieć możliwość wyboru sklepu i automatycznie zobaczyć godziny otwarcia, dokładny adres sklepu, najlepiej również telefon oraz oczywiście datę, kiedy będzie mógł odebrać towar. Użytkownicy często odwiedzają opcje dostawy i płatności, aby dowiedzieć się, jaka będzie ostateczna cena zakupu z dostawą i kiedy otrzymają przesyłkę, nawet jeśli nie zdecydowali jeszcze o sfinalizowaniu zakupu.

Logowanie na konto oraz wprowadzanie danych rozliczeniowych i do wysyłki

Dla użytkownika jest to często najbardziej frustrujący etap zakupu, ponieważ zazwyczaj wiąże się z wypełnianiem formularzy. Nawet jeśli użytkownik się nie loguje, możemy uprościć proces wypełniania formularza, ograniczając się do imienia i nazwiska, numeru telefonu i adresu e-mail. Waliduj każde pole w trakcie wypełniania, aby użytkownik wiedział, że wprowadził poprawne dane. Pytaj o dane etapami; jeśli użytkownik jest zainteresowany rejestracją, pola do wpisania hasła wyświetl dopiero po zaznaczeniu tej opcji. W kolejnych krokach będziesz potrzebować adresu rozliczeniowego i adresu do wysyłki.

Możesz ułatwić użytkownikom wypełnianie adresów za pomocą autouzupełniania adresu rozliczeniowego lub dostawy. Jeśli użytkownik wpisze ulicę i numer domu, nie musi martwić się wypełnianiem innych, zbędnych pól. Wprowadzanie danych zazwyczaj kończy się wyrażeniem zgód. Postaraj się maksymalnie uprościć tę część i sformułować ją jak najprzystępniej. W sekcji danych osobowych często pojawia się możliwość dodania przez klienta uwag do zamówienia, ale jeśli nie masz pewności, że ich nie przeoczysz, lepiej w ogóle z nich zrezygnować, zmniejszając w ten sposób ryzyko negatywnych doświadczeń użytkownika.

Podsumowanie całego zakupu + sprawdzenie wprowadzonych danych

Użytkownik może chcieć coś zmienić, dlatego warto umożliwić mu przejście do dowolnego kroku bezpośrednio z samego zestawienia, bez konieczności klikania przycisków „Wstecz” i „Dalej”. Na tym etapie musi widzieć wszystkie istotne dane potrzebne do podjęcia decyzji i złożenia zamówienia. Nie zapomnij więc poinformować go o ostatecznej cenie zakupu i – najlepiej – o jak najdokładniejszym szacowanym terminie doręczenia zamówienia.

Po złożeniu zamówienia najlepiej, aby użytkownik trafił bezpośrednio do bramki płatności, a dopiero po opłaceniu na tzw. stronę z podziękowaniem („Thank you page”) – unikniesz w ten sposób sytuacji, w której zamknie on stronę przed przekierowaniem do płatności, co w ostatecznym rozrachunku utrudnia proces zakupowy nie tylko jemu, ale i Tobie. Strona z podziękowaniem jest z założenia również częścią procesu zakupowego i dostarcza przede wszystkim informacji o pomyślnym dokonaniu zakupu. Jej wielką zaletą jest możliwość pozyskania informacji od klienta za pomocą prostego formularza.

Między innymi na tej stronie możesz motywować anonimowego lub zalogowanego użytkownika do stania się lojalnym klientem i dokonywania kolejnych zakupów za pomocą ofert specjalnych czy kodów rabatowych, bądź też kierować go do innych treści w sklepie internetowym, takich jak rekomendacje produktów lub na przykład zoptymalizowane pod kątem SEO artykuły na blogu, albo też skonfigurować kampanie e-mailowe z ofertami.

Zakupy mobilne

Zakupy mobilne to rosnący trend, a telefony komórkowe odgrywają coraz ważniejszą rolę w zachowaniach zakupowych użytkowników. Powszechną praktyką jest przeprowadzanie researchu przed zakupem, na podstawie którego użytkownicy decydują później, czy i gdzie kupić dany produkt. Co ciekawe, według najnowszych danych 69% klientów szuka informacji o produktach głównie na urządzeniach mobilnych.

Na rosnący trend zakupów mobilnych wpływa wiele czynników, takich jak postęp technologiczny, zasięg i dostępność szybkiego internetu, przystępność cenowa urządzeń mobilnych, usługi płatności mobilnych, takie jak Apple Pay i Google Pay, ale także wsparcie ze strony sklepów internetowych poprzez rozwijanie własnych aplikacji e-commerce i dążenie do zapewnienia użytkownikom jak najlepszych doświadczeń zakupowych. Jednym ze sposobów na uzyskanie pozytywnego doświadczenia użytkownika jest zrozumienie, w jaki sposób użytkownik obsługuje urządzenie mobilne.

Układ strony i mapa cieplna

Dzięki testom z użytkownikami oraz analizie zachowań kupujących możemy określić, w jaki sposób użytkownicy wchodzą w interakcję z ekranem, wyświetlając mapy cieplne. W ten sposób możemy precyzyjnie określić, jak zaprojektować interfejs aplikacji lub strony internetowej, aby użytkownik mógł z niej wygodnie korzystać. Każdy kolor wyjaśnia, jak łatwo korzysta się z poszczególnych części ekranu.

Informacje te stanowią dla nas kluczowy element podczas projektowania interfejsu użytkownika oraz rozmieszczenia najważniejszych elementów, ponieważ właściwe umiejscowienie tych elementów na ekranie znacząco poprawia doświadczenia cyfrowe – przestrzeń ekranu na urządzeniach mobilnych jest w porównaniu z tradycyjnymi ekranami komputerów znacznie ograniczona.

Kluczowe elementy sklepu internetowego w widoku mobilnym:

Nagłówek

Nagłówek powinien spełniać określone parametry, aby służyć jako praktyczny element nawigacyjny; powinien być również kompaktowy, niezbyt wysoki, aby nie zabierać użytkownikowi miejsca na treść, co utrudniłoby poruszanie się po sklepie. Powinien zawierać logo z możliwością przejścia do strony głównej. Często stosuje się tzw. pływający nagłówek, czyli nagłówek, który jest widoczny przez cały czas, nawet podczas przewijania strony.

Logo

Uproszczona wersja logo z łatwością mieści się na ekranie telefonu i nie zajmuje dużo miejsca.

Menu hamburgerowe

Istotna część nagłówka, pod którą zwykle ukrywa się nawigację oraz koszyk zakupowy pokazujący minimalną liczbę dodanych produktów.

Pasek wyszukiwania

Pasek wyszukiwania w pełnej krasie, najlepiej nieukryty za ikoną lupy, nie powinien odbierać użytkownikom wygody podczas przeglądania sklepu internetowego. Kluczowe elementy dobrego projektu paska wyszukiwania to stałe umiejscowienie, odpowiedni rozmiar pozwalający na wpisanie długich zapytań oraz pomocny tekst zastępczy (placeholder), który stanowi wskazówkę dla użytkowników.

Wyszukiwanie mobilne

Zoptymalizowana i funkcjonalna wyszukiwarka na urządzeniach mobilnych odgrywa kluczową rolę w ścieżce zakupowej użytkownika odwiedzającego sklep internetowy. Optymalizacja polega na poprawnym rozmieszczeniu elementów i skonfigurowaniu ich interakcji tak, aby maksymalnie uprościć sterowanie użytkownikowi, na przykład poprzez:

• Kompaktowe wyświetlanie autouzupełniania wraz z paskiem wyszukiwania na całym ekranie urządzenia – znacząco zwiększa przejrzystość i łatwość korzystania z wyszukiwarki
• Autouzupełnianie – wyświetla wyniki już od pierwszego wpisanego znaku, a po otwarciu rekomenduje kategorie, najczęściej wyszukiwane frazy, ulubione produkty lub artykuły oraz inne treści
• Podczas przeglądania wyników w autouzupełnianiu klawiatura wirtualna jest automatycznie ukrywana, dzięki czemu użytkownik ma wystarczająco dużo miejsca na przeglądanie produktów
• Wyniki są uporządkowane w zakładkach według kluczowych parametrów, pomiędzy którymi użytkownik może klikać lub przechodzić poprzez zwykłe przesunięcie palcem

Funkcjonalność wyszukiwarki polega na jej zachowaniu podczas interakcji z użytkownikiem. Trafne wyszukiwanie powinno zawsze prowadzić użytkownika do odpowiedniego wyniku i uwzględniać jego naturalne zachowanie, niezależnie od tego, jak wpisze frazę wyszukiwania – czy popełni w tytule literówki, użyje slangu czy archaizmu itp.

Podsumowanie

Użytkownicy bardziej niż kiedykolwiek poszukują spersonalizowanych doświadczeń. Dlatego dla biznesu online ładnie wyglądająca strona internetowa to za mało. Sukces zależy teraz od głębokiego zrozumienia potrzeb klientów, przełożonego na przemyślany projekt UX, który obejmuje przejrzyste listingi produktów, intuicyjną nawigację oraz strategie minimalizowania porzucania koszyków. Musisz stworzyć bezproblemowe doświadczenie, aby odnieść sukces, w przeciwnym razie ryzykujesz utratę klientów już po ich pierwszej wizycie. Mamy nadzieję, że ten wpis na blogu pomoże Ci zrozumieć, jak skuteczne może być właściwe wykorzystanie UX, aby uczynić Twój biznes online bardziej atrakcyjnym i zdobyć więcej klientów.

Najczęściej zadawane pytania