eCommerce UX – podstawowe strategie i zasady projektowania

Ponieważ ogólny krajobraz handlu detalicznego wciąż ewoluuje, a tradycyjne sieci walczą, rynek eCommerce jest gotowy do wzrostu. Oczekuje się, że do 2021 r. globalna sprzedaż eCommerce wzrośnie do ponad 4,48 biliona dolarów, czyli ponad dwukrotnie więcej niż w 2017 r.

Sprzedawcy i projektanci eCommerce, którzy zwracają szczególną uwagę na wrażenia użytkownika i stosują się do standardowego zestawu zasad projektowania UX eCommerce dla przepływu zakupów przez klientów, mogą wykorzystać ten wzrost rynku i uzyskać wymierne zyski finansowe.

Przepływ zakupów to ogólna podróż użytkownika, która po prawidłowym wdrożeniu skutkuje większą liczbą zakupów impulsowych, mniejszą liczbą porzucanych koszyków i wyższą ogólną konwersją.

Podróż użytkownika obejmuje:

• Odkrywanie strony internetowej
• Wyszukiwanie i przeglądanie produktów
• Strona produktu
• Wózek
• Sprawdzić
• Potwierdzenie

W tym artykule omówiono te kluczowe punkty podróży użytkownika oraz sposób, w jaki projektanci handlu elektronicznego mogą sprawić, że obsługa klienta będzie przyjemna, prosta i bezproblemowa.

Odkrywanie stron internetowych

Wyraźne pozycjonowanie marki

Odwiedzający tworzą pierwsze wrażenie witryny w zaledwie 50 milisekund. Witryna eCommerce musi przyciągnąć uwagę użytkownika, jasno i szybko pokazując, co sprzedaje i gdzie pasuje na całym rynku.

Na przykład witryna sklepu z luksusową biżuterią prawdopodobnie będzie wyglądać i działać zupełnie inaczej niż witryna oszczędnego sklepu z dużymi pudełkami. Bang & Olufsen, wysokiej klasy detalista z elektroniką, podkreśla jakość swojej marki, używając eleganckich czcionek, wyrafinowanej palety kolorów i eleganckich obrazów produktów.

Pokaż trafne wezwania do działania

Gdy użytkownik wejdzie na stronę główną, pozdrów go aktualną treścią i konkretnymi wezwaniami do działania (CTA). Duży obraz banera odpowiadający aktualnemu sezonowi lub konkretnemu wydarzeniu wraz z odpowiednim CTA pomaga użytkownikowi przejść do kolejnego etapu procesu zakupowego. Tworząc wezwania do działania, unikaj ogólnych wyrażeń, takich jak „rozpocznij”, które nie mówią wyraźnie użytkownikowi, co będzie dalej.

Polaroid stworzył skuteczne wezwanie do działania w okresie świątecznym, pomagając użytkownikom, którzy kupowali prezenty. Zamiast używać ogólnej frazy, Polaroid użył „Sklepu prezentów”, co jasno pokazuje, że użytkownik zostanie przeniesiony do obszaru witryny z propozycjami prezentów.

Dostosuj strony docelowe do SEO

Łącząc hasła wyszukiwane przez użytkownika z wyszukiwarek, takich jak Google, z określonymi stronami docelowymi, sprzedawcy eCommerce mogą przechwycić użytkowników, którzy mają misję znalezienia określonego produktu.

Gdy użytkownik czegoś szuka, istnieje duża szansa, że ​​chce to kupić. Utworzenie niestandardowej strony docelowej dla popularnych haseł wyszukiwania produktów zwiększa szansę sprzedawcy na zdobycie sprzedaży (i być może także na zdobycie nowego klienta). Firma papiernicza Papier dobrze sobie z tym radzi, tworząc stronę specjalnie przygotowaną do zaproszeń ślubnych, która pojawia się w wynikach wyszukiwania Google.

Wyszukiwanie i przeglądanie produktów

Zapewnij wyszukiwanie na miejscu

Choć może się to wydawać dość proste, wiele witryn nadal nie oferuje ogólnego wyszukiwania w całej witrynie, a jeśli tak, nie jest odpowiednio zoptymalizowane. Ale wyszukiwanie w witrynie ma fundamentalne znaczenie dla solidnych zakupów w handlu elektronicznym.

Według Invesp 60% zakupów online nie jest impulsywnych. Ludzie często wiedzą, czego szukają, a wpisanie zapytania w pasku wyszukiwania w witrynie eCommerce — na przykład nazwa produktu lub numer modelu — jest znacznie szybsze niż przeszukiwanie opcji menu.

Dodatkowe funkcje, takie jak wyszukiwanie predykcyjne lub autouzupełnianie, pomagają użytkownikom szybko zobaczyć opcje. Apple stosuje tę taktykę z polem wyszukiwania, które dynamicznie aktualizuje się za pomocą szybkich łączy do produktów i popularnych sugerowanych wyszukiwań.

Inspiruj odwiedzających w trybie odkrywania

Chociaż wielu kupujących ma na myśli konkretny przedmiot do zakupu, nie wszyscy odwiedzający są tak pewni. Według Nielsena Normana istnieje pięć rodzajów kupujących w handlu elektronicznym, z których jednym jest „przeglądarka”. Przeglądarki niekoniecznie szukają czegoś konkretnego. Raczej spokojnie rozglądają się dookoła, aby zobaczyć, czy znajdą coś interesującego.

Witryny eCommerce mogą wspierać kupującego w trybie odkrywania, pokazując mu nowe lub najlepiej sprzedające się produkty i pozwalając mu łatwo i szybko zobaczyć kategorie produktów.

Etsy angażuje przeglądarki, pokazując im to, co jest obecnie popularne, a także wyraźnie wyświetlając ogólne kategorie produktów, zarówno w nawigacji, jak i na stronie głównej.

Użyj filtrów i wyszukiwania aspektowego

Wyszukiwanie aspektowe wykorzystuje filtrowanie i idzie o krok dalej, umożliwiając użytkownikom jednoczesne wybieranie wielu atrybutów.

Podczas tworzenia filtrów, zamiast ograniczać opcje do ogólnych kryteriów, takich jak rozmiar, kolor lub cena, dodaj określone filtry dla kategorii specyficznych dla sprzedawanych produktów. Tymi filtrami mogą być takie elementy, jak dopasowanie lub materiał na ubrania, czcionki lub okazja na zaproszenia, a także rozmiar ekranu lub procesor na gadżety.

Gdy użytkownik zastosuje filtry, w interfejsie użytkownika powinno być natychmiast widoczne, jakie filtry zostały zastosowane. Użytkownik powinien również mieć możliwość łatwego usuwania zastosowanych filtrów.

ASOS pokazuje szczegółowy zakres filtrów dla każdej kategorii i wyraźnie pokazuje, które filtry zostały zastosowane.

Strona produktu

Wyraźnie wyświetlaj podstawowe działania

Użytkownik nigdy nie powinien zastanawiać się, jak zrobić coś ważnego, na przykład umieścić produkt w koszyku. Wyświetlaj podstawowe działania, takie jak „dodaj do koszyka” lub „kup teraz” jako przyciski, i umieść je w widocznym miejscu na ekranie w stosunku do reszty treści.

Sprzedawca detaliczny artykułów gospodarstwa domowego Lowe's informuje użytkownika, jak dodać produkt do koszyka za pomocą dużego, zielonego przycisku jako jednej z najbardziej widocznych rzeczy na stronie.

Podaj szczegółowe informacje o produkcie

Pokaż wysokiej jakości, profesjonalne zdjęcia i szczegółowe opisy, aby pomóc kupującym zrozumieć produkt.

Korzystaj z progresywnego ujawniania i hierarchii wizualnej, aby zapewnić użytkownikowi odpowiednią ilość informacji zgodnie z potrzebami. Natychmiast przekaż im najważniejsze informacje, a następnie dodaj szczegóły w dalszej części strony dla użytkowników, którzy chcą dowiedzieć się więcej.

Podziel długie opisy na sekcje; na przykład przegląd, rozmiary/wymiary, szczegółowe funkcje i informacje o wysyłce. Korzystanie z nawigacji rozwijania/zwijania dla dodatkowych sekcji, tak jak robi to Myprotein, pomaga utrzymać użytkownika przed uczuciem przytłoczenia.

Buduj zaufanie klientów

Unikaj pozostawiania klientów zgadujących opcji wysyłki, dostępności produktów i zasad zwrotów. Upewnienie się, że wszystkie te informacje są łatwo dostępne, co buduje zaufanie i zaufanie klientów oraz może pomóc skłonić niepewnego klienta do zakupu. Wiedza, czy i jak mogą coś zwrócić, pomaga im podejmować bardziej świadome decyzje.

ASOS wyraźnie wyświetla ważne informacje o wysyłce i zwrocie na każdej stronie produktu, korzystając z modalności, do której można uzyskać dostęp z linku pod nazwą każdego produktu.

Dodaj dowód społeczny

Dowód społeczny to koncepcja, która oznacza, że ​​na ludzi wpływa zachowanie innych. Koncepcja ta jest częścią zasad perswazji dr. Roberta Cialdiniego (wiodącego badacza w nauce o wpływie) i okazała się skuteczna.

Sprzedawcy handlu elektronicznego mogą zwiększyć zaufanie kupujących dzięki dowodom społecznościowym, dodając oceny klientów, recenzje i komentarze. Produkty na Amazon często mają tysiące recenzji, a użytkownicy mogą je sortować według poziomu gwiazdek.

Wózek sklepowy

Pokaż przejrzyste podsumowanie zamówienia

Zanim kupujący zakończy zakup, pokaż mu jasne i zwięzłe podsumowanie zamówienia, które zawiera zakupione przedmioty, ilość i cenę każdego przedmiotu oraz sumę zamówienia. Zezwól użytkownikowi na edycję dowolnych elementów, które mogą chcieć zaktualizować lub usunąć, i unikaj niespodzianek związanych z opłatą za wysyłkę, dołączając podsumowanie wysyłki.

Modist pokazuje zarówno czytelne podsumowanie zamówienia, jak i paragon. Użytkownik może łatwo zarządzać wybranymi przez siebie przedmiotami (przenieść do listy życzeń, usunąć, zmienić ilość) i zobaczyć zarówno podsumowanie, jak i szczegółowy podział kosztów wysyłki i podatków.

Sprawdzić

Pozwól użytkownikom wymeldować się jako goście

Zakupy impulsowe stanowią prawie 40% wszystkich pieniędzy wydawanych w eCommerce. Wyeliminuj dodatkową przeszkodę związaną z utworzeniem konta lub zalogowaniem się, umożliwiając kupującym wymeldowanie się jako goście. Podczas procesu wymeldowania jako gość prosta integracja w celu utworzenia konta może przekształcić niektórych gości w użytkowników konta.

Aesop umożliwia użytkownikom łatwe wymeldowanie się jako goście, jednocześnie dając możliwość zalogowania się lub zarejestrowania. Zapewnienie wielu opcji w jednym formularzu usuwa potencjalne blokowanie zakupów dla tych, którzy chcą szybko płacić, ale także daje szansę na to użytkownikom, którzy chcą się zarejestrować.

Przekazuj wizualną informację zwrotną podczas procesu realizacji transakcji

Dołączenie paska postępu pomaga klientom zrozumieć, na jakim etapie procesu płatności się znajdują i ile im zostało do ukończenia.

Apple pokazuje użytkownikowi każdy krok w procesie i umożliwia mu nawigację między krokami za pomocą łączy postępu. Postęp jest zapisywany, więc użytkownik nie traci nic podczas przechodzenia między krokami.

Użyj popularnych metod płatności

Oprócz umożliwienia płatności za pomocą głównych kart kredytowych dodanie innych popularnych metod płatności, takich jak PayPal, może zwiększyć konwersję dla kupujących, którzy nie chcą przekazywać informacji o swojej karcie kredytowej.

W Holandii iDEAL jest często używany do transakcji eCommerce, a 60% holenderskich konsumentów użyło go podczas niedawnego zakupu. Sprzedawca odzieży Scotch & Soda umożliwia kupującym dokonywanie transakcji za pomocą iDEAL i PayPal.

Potwierdzenie zamówienia

Wyświetl szczegółowe potwierdzenie zamówienia po zakupie

Gdy klient sfinalizuje zakup, przekaż mu potwierdzenie zawierające pomyślne przetworzenie płatności i szczegóły dostawy, takie jak adres, metoda dostawy i oczekiwana data dostawy.

Ta koncepcja wiadomości e-mail z potwierdzeniem dla Amazon pokazuje numer zamówienia, przedstawia przegląd zakupionych produktów oraz podaje datę wysyłki i kilka zaleceń dotyczących przyszłych zakupów.

Wysyłaj informacje o zamówieniach i wysyłce za pośrednictwem poczty e-mail

Oprócz ekranu potwierdzenia wysłanie wiadomości e-mail z potwierdzeniem pomaga na bieżąco informować użytkownika o statusie jego zakupu. Chociaż wszyscy klienci powinni otrzymać potwierdzenie e-mailem, jest to szczególnie przydatne w przypadkach, gdy użytkownicy wymeldowali się jako goście i nie mają konta w witrynie, aby sprawdzić swoje wcześniejsze zamówienia.

Jeśli coś zmieni się w zamówieniu, na przykład opóźnienie w dostawie, wyślij aktualizację. Po wysłaniu przedmiotu wyślij wiadomość e-mail z numerem śledzenia.

Streszczenie

Zasady przedstawione w tym artykule stanowią punkt odniesienia dla punktów styku podróży użytkownika, których powinien przestrzegać każdy projektant eCommerce, ale to dopiero początek. Aby uzyskać dodatkowe informacje na temat bardziej szczegółowych informacji na temat mobilnego UX eCommerce, odwiedź stronę eCommerce for the Mobile Experience lub przeczytaj więcej o projektowaniu strony docelowej Jak projektować skuteczne strony docelowe.

Rosnący rynek eCommerce stwarza wiele możliwości dla detalistów. Ci, którzy dostrzegają znaczenie UX i stosują najlepsze praktyki na drodze użytkownika eCommerce, mogą pozostać konkurencyjni i pozytywnie wpłynąć na wyniki finansowe.

• • •

Dalsza lektura na blogu Toptal Design:

• Wybitne trendy w handlu elektronicznym i ich wpływ na projektowanie (z infografiką)
• UX eCommerce dla doświadczeń mobilnych
• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Kompletny przewodnik po projektowaniu witryn eCommerce
• Przeprojektowany e-commerce: jak drobne zmiany spowodowały poważne ulepszenia UX