Kompletny przewodnik po projektowaniu witryn eCommerce

Sprzedaż handlu elektronicznego w USA w 2018 r. nadal osiąga nowe szczyty. Na całym świecie handel elektroniczny będzie nadal odnotowywał solidne zyski w wysokości 2,3 biliona dolarów. Ale co sprawia, że ​​jedna strona eCommerce triumfuje nad inną?

Kilka czynników decyduje o ogólnym sukcesie witryny eCommerce, w tym jakość produktu, rozpoznawalność marki, koszty wysyłki, zasady zwrotów, wiarygodność i obsługa klienta. Jednak przemyślane projektowanie doświadczeń użytkownika jest również kluczem do zapewnienia klientom satysfakcjonujących, wolnych od tarcia doświadczeń. Nie tylko przekształci potencjalne kliknięcia w rzeczywiste transakcje eCommerce, ale sprawi, że klienci będą wracać raz po raz.

Oto kompleksowy przewodnik projektowania UX eCommerce dotyczący tworzenia świetnych witryn eCommerce, wraz z przykładami.

Zaprojektuj eCommerce dla zaufania i bezpieczeństwa

Przede wszystkim ważne jest zaprojektowanie strony internetowej, której kupujący poczują, że mogą jej zaufać. Większość kupujących obawia się o prywatność i to, czy witryna będzie chronić ich dane osobowe, zapewniając bezpieczną transakcję. Jeśli witryna nie wydaje się godna zaufania, po prostu zdecydują się na zakupy gdzie indziej.

Oto kilka metod, które komunikują wiarygodność:

• Dołącz przegląd firmy:

  • Podaj ogólne informacje
  • Zdjęcia osób stojących za biznesem
  • Informacje kontaktowe
  • Linki do mediów społecznościowych
  • Strona z często zadawanymi pytaniami (FAQ)

• Opublikuj zasady sklepu i upewnij się, że nie są zbyt trudne do znalezienia:

  • Zasady wysyłki i zwrotów
  • Opisz proces zwrotu i jakie produkty można zwrócić
  • Zapewnij łatwy dostęp do polityki prywatności, która obejmuje dane osobowe i finansowe kupujących (jest to kluczowe)

Pisz prostym językiem i unikaj żargonu prawnego lub wewnętrznego.

• Udostępnij recenzje produktów. Udostępniaj recenzje produktów, aby pomóc kupującym lepiej zrozumieć produkt; pomoże to złagodzić wszelkie obawy, jakie mogą mieć, i zapewni doskonały UX eCommerce. Pójdź o krok dalej, oferując recenzje produktów wraz z dodatkowymi informacjami o recenzentach lub podsumowując recenzje. Ten krok może ułatwić kupującym pełne wykorzystanie opinii innych.
• Korzystaj z bezpiecznego serwera. Kupujący oczekują, że ich dane osobowe będą bezpieczne podczas zakupów online. Certyfikaty SSL (Secure Sockets Layer) uwierzytelniają tożsamość strony internetowej i szyfrują informacje, które muszą pozostać bezpieczne. Jest to niezbędny znak wskazujący, że kasa jest bezpieczna. Zapewnij kupującym, że ich dane są chronione poprzez wdrożenie SSL i wyświetlanie identyfikatorów certyfikatów SSL.

• Dodaj uznane pieczęcie zaufania. Pieczęć zaufania weryfikuje legalność i bezpieczeństwo strony internetowej. Niektóre firmy powiernicze dodają nawet dodatkową warstwę ochrony, oferując ubezpieczenie, jeśli transakcja okaże się oszukańcza. Korzystanie z uznanych pieczęci zaufania zapewnia potencjalnym kupującym bezpieczny proces transakcji, co prowadzi do wzrostu sprzedaży i zapewnia lepszy UX eCommerce.
• Pokaż dbałość o szczegóły. Spraw, aby witryna wyglądała legalnie i profesjonalnie, unikając literówek, brakujących obrazów, uszkodzonych linków, błędów 404 (nie znaleziono strony) lub innych błędów, które zabijają UX w handlu elektronicznym.

Uwagi dotyczące projektowania interfejsu użytkownika w handlu elektronicznym

Wygląd i styl strony internetowej jest głównym motorem pierwszego wrażenia. Z badań wynika, że ​​ludzie w ciągu zaledwie 50 milisekund określą, czy podoba im się strona internetowa, czy nie.

Oto kilka podstawowych wskazówek dotyczących projektowania interfejsu użytkownika:

• Śledź tożsamość marki. Branding powinien być widoczny w całej witrynie. Wybierz kolory, które odzwierciedlają markę i ustal styl, aby jasno określić, jakie produkty są sprzedawane. Upewnij się, że doświadczenie marki jest spójne we wszystkich kanałach — online, w sklepie lub na urządzeniu mobilnym. Pomoże to zbudować silną relację marka-klient.
• Przyjmij hierarchię wizualną. Najważniejsze treści powinny być wyświetlane w części strony widocznej na ekranie. W niektórych przypadkach użycie mniejszej ilości pustego miejsca, aby zbliżyć elementy do siebie, jest lepsze niż umieszczanie krytycznych treści w części strony widocznej na ekranie.
• Nie przesadzaj z projektowaniem. Ogranicz formaty czcionek, takie jak krój czcionki, rozmiary i kolory. Gdy tekst za bardzo przypomina grafikę, zostanie pomylony z reklamą. Użyj tekstu i kolorów tła o wysokim kontraście, aby treść była jak najbardziej przejrzysta.
• Trzymaj się znanych symboli. Używaj ikon lub symboli, które są łatwe do zidentyfikowania. Nieznane ikony tylko zdezorientują kupujących. Dobrym sposobem na uniknięcie wszelkich możliwych nieporozumień jest zapewnienie etykiet dla ikon.
• Unikaj wyskakujących okienek. Wyskakujące okienka rozpraszają uwagę. Nawet jeśli zawierają cenne informacje, kupujący z dużym prawdopodobieństwem odrzucą je natychmiast — po ich odejściu, nawet jeśli chcą, trudno jest je ponownie znaleźć.

Znaczenie bezproblemowej nawigacji w witrynie eCommerce

Bez tarcia to sposób na bycie. Nawigacja mówi o tym, jak łatwo ludzie mogą poruszać się po witrynie, znajdować to, czego szukają i wreszcie podejmować działania. Zakupy w handlu elektronicznym powinny być płynne, aby kupujący nie rezygnowali w połowie procesu.

Niektóre kluczowe aspekty projektowania witryn eCommerce dla łatwej nawigacji obejmują:

Dobrze zdefiniowane kategorie produktów

Najwyższy poziom nawigacji powinien pokazywać zestaw kategorii, które oferuje witryna. Grupuj produkty w kategorie i podkategorie, które mają sens. Etykiety kategorii najlepiej sprawdzają się jako pojedyncze słowa opisujące gamę produktów, dzięki czemu kupujący mogą je przeglądać i natychmiast zrozumieć, co reprezentują. Najlepiej przetestować nawigację w witrynie tak często, jak to możliwe, aby uzyskać doskonały UX e-commerce, ponieważ jest to kluczowa funkcja witryny.

Wyszukiwarka produktów

Mówiąc najprościej, jeśli kupujący nie mogą znaleźć produktu, nie mogą go kupić — zbuduj funkcję wyszukiwania, która pomoże im łatwo znaleźć to, czego szukają:

• Spraw, by wyszukiwanie było wszechobecne. Umieść pole wyszukiwania na każdej stronie iw znanych lokalizacjach. Pudełko powinno być widoczne, szybko rozpoznawalne i łatwe w użyciu. Standardowe pozycje do zaimplementowania pola wyszukiwania to prawy górny róg lub górna część strony lub menu główne.
• Obsługuj wszelkiego rodzaju zapytania. Wyszukiwania muszą obsługiwać wszystkie typy zapytań, takie jak nazwy produktów, kategorie i atrybuty produktów, a także informacje związane z obsługą klienta. Dobrym pomysłem jest umieszczenie w polu wejściowym przykładowego zapytania wyszukiwania, aby zasugerować kupującym użycie różnych funkcji.
• Korzystaj z funkcji automatycznego uzupełniania wyszukiwania. Funkcja autouzupełniania ułatwia kupującym znalezienie tego, czego szukają, i zwiększa potencjał sprzedaży, sugerując rzeczy w obszarze, którego już szukają.
• Zezwalaj na sortowanie i filtrowanie wyników. Pozwól kupującym sortować wyniki wyszukiwania na podstawie różnych kryteriów (bestsellery, najwyższa lub najniższa cena, ocena produktu, najnowszy przedmiot itp.), a także eliminować przedmioty, które nie pasują do określonej kategorii.

Filtrowanie produktów

Im więcej możliwości wyboru, tym trudniej wybrać. Pomóż kupującym znaleźć odpowiednie produkty, wdrażając filtry. Pomoże im to zawęzić wybór i bezpośrednio przejść do pożądanego asortymentu produktów.

Szybki podgląd produktu

„Szybki podgląd” skraca czas potrzebny kupującym na znalezienie odpowiedniego produktu, eliminując niepotrzebne wczytywanie stron. Zazwyczaj szczegóły produktu są wyświetlane w oknie modalnym nad przeglądaną stroną. Nie próbuj pokazywać wszystkich szczegółów produktu, zamiast tego dołącz link do pełnej strony produktu, aby wyświetlić pełne szczegóły. Pamiętaj również o dodaniu wyraźnie umieszczonego przycisku „Dodaj do koszyka” oraz funkcji „Zapisz na liście życzeń”.

Specjalne oferty

Kupujący zawsze szukają ofert specjalnych, rabatów lub najlepszych ofert. Wyświetlaj ekskluzywne oferty, aby kupujący o nich wiedzieli. Nawet jeśli różnice cenowe nie są tak duże, psychologiczne poczucie oszczędzania pieniędzy stwarza iluzję posiadania przewagi.

Projekt strony produktu eCommerce

Aby zapewnić wyjątkowy UX eCommerce, gdy kupujący z powodzeniem znajdą poszukiwany produkt, pozwól im dowiedzieć się o produkcie. Zaprojektuj stronę produktu, która zapewni wrażenia jak najbardziej zbliżone do osobistych zakupów, dołączając wiele zdjęć, szczegółowe opisy oraz wszelkie inne przydatne i powiązane informacje o produkcie. Przyjrzyjmy się dokładniej, co to oznacza.

Zapewnij wspaniałe obrazy produktów

Dzięki eCommerce kupujący nie mogą dotknąć, poczuć ani wypróbować produktu. Zamiast tego wszystko zależy od tego, co widzą w Internecie. Dlatego dostarczenie zdjęć produktów, które wyraźnie pokazują wszystkie aspekty produktu, ma kluczowe znaczenie. Oto lista kontrolna dla doskonałych zdjęć produktów:

• Użyj białego tła. Tło dla zdjęć produktów nie powinno rozpraszać ani kolidować z samym produktem. Białe tło sprawdza się najlepiej, ponieważ pozwala wyróżnić się produktowi i pasuje do niemal każdego stylu lub schematu kolorystycznego.
• Używaj wysokiej jakości dużych obrazów. Dobre zdjęcia sprzedają produkt. Obrazy wysokiej jakości przyciągają uwagę kupujących i pokazują im dokładnie to, co kupują. Posiadanie dużych obrazów pozwala kupującym powiększyć i szczegółowo przyjrzeć się produktowi.

• Użyj różnych obrazów. Wyświetlaj produkt pod różnymi kątami i uwzględnij zbliżenia, aby zapewnić pełniejszy obraz produktu. Widok 360 stopni, na którym mogą poruszać produktem, to dobry sposób na zapewnienie wrażeń zbliżonych do fizycznego wejścia do sklepu i zaangażowania się w niego. VR eCommerce to kolejna fala tego doświadczenia.
• Użyj wideo. Filmy mają możliwość dostarczenia dużej ilości informacji w krótkim czasie. Wykorzystaj film, aby pokazać produkt w użyciu i podać jak najwięcej informacji funkcjonalnych.
• Bądź konsekwentny. Używaj obrazów, które są spójne na wielu stronach, a także zgodne z wyglądem i stylem pozostałej części witryny. Dzięki temu wszystko będzie wyglądać na czyste i uporządkowane. Główny obraz produktu powinien być taki sam we wszystkich obszarach witryny, takich jak informacje o produktach lub w sekcji polecanych produktów.

Podaj odpowiednią ilość informacji o produkcie

Przekaż kupującym szczegółowe informacje o produkcie, aby mogli podjąć świadomą decyzję o zakupie. Pokaż dostępność, opcje dla różnych rozmiarów lub kolorów, wymiary, tabelę rozmiarów, użyte materiały, całkowity koszt, gwarancje i nie tylko. Im mniej pozostałych pytań dotyczących produktu, tym większe prawdopodobieństwo, że dokonają zakupu.

Zatrudnij przekonujący projekt

Zgodnie z zasadą niedoboru, ludzie przypisują wyższą wartość przedmiotom, których brakuje, a niższą przedmiotom, których jest dużo. Stwórz poczucie pilności w procesie sprzedaży, pokazując niedobór — wyświetlaj liczbę pozostałych produktów, wyszarzaj rozmiary, których nie ma w magazynie, lub pokaż terminy sprzedaży. Niedobór zmotywuje potencjalnych nabywców do działania.

Coraz częściej firmy korzystają z zaawansowanych badań psychologicznych i aby zwiększyć zaangażowanie i zakupy, przekształciły to, co kiedyś było sztuką, w naukę. Przekonujący design w eCommerce to bardzo skuteczny sposób na przyciągnięcie większej liczby zakupów.

Pokaż powiązane i polecane produkty

Wyświetlaj podobne produkty, które kupujący mogą również polubić, a które pasują do bieżącego produktu lub produktów kupionych przez innych. Może to być wyświetlane na stronie ze szczegółowymi informacjami o produkcie lub w koszyku i pomoże kierować kupującym do produktów, które spełniają ich potrzeby, potencjalnie zachęcając ich do kontynuowania zakupów — to świetny sposób na sprzedaż krzyżową powiązanych produktów.

Projekt koszyka na zakupy

Koszyk jest niezbędny, ponieważ to w nim kupujący przeglądają wybrane produkty, podejmują ostateczną decyzję i przechodzą do kasy. Podstawowym celem koszyka na zakupy jest doprowadzenie kupujących do kasy. Poniżej znajdują się wskazówki dotyczące projektowania koszyka na zakupy, który będzie przyjazny dla użytkownika i zachęci kupujących do dalszych zakupów.

• Użyj wyraźnego wezwania do działania (CTA). Podstawowym wezwaniem do działania na stronie koszyka powinien być przycisk kasy. Użyj jasnych kolorów, wielu klikalnych obszarów i prostego języka, aby przycisk kasy był widoczny, prosty i łatwy w użyciu.
• Przekaż odpowiednią informację zwrotną. Upewnij się, że kiedy produkt zostanie dodany do koszyka, zostanie to natychmiast i wyraźnie potwierdzone. Kupujący są zdezorientowani nieodpowiednimi opiniami, takimi jak wyświetlanie niepozornego tekstu potwierdzenia. Dobrym pomysłem jest użycie animacji, ponieważ ruch przyciąga ludzkie oko.
• Użyj widżetu mini koszyka. Pozwól kupującym dodawać produkty do koszyka bez opuszczania strony, na której się znajdują, korzystając z minikoszyka. Pozwala im również nawigować, odkrywać i dodawać więcej produktów. Widżety mini-koszyków powinny zawsze prowadzić do pełnego koszyka na zakupy.

• Wyświetl szczegóły produktu. Wyświetlanie w koszyku szczegółów, takich jak nazwy produktów, zdjęcia, rozmiary, kolory i ceny, pomaga kupującym zapamiętać każdy produkt, a także porównać produkty. Połącz produkty w koszyku z ich pełnymi stronami produktów, aby kupujący mogli w razie potrzeby przejrzeć więcej szczegółów.
• Spraw, aby koszyk był łatwo edytowalny. Możliwość usuwania, zapisywania na później lub zmiany szczegółów, takich jak rozmiar, kolor lub ilość, powinna być łatwo dostępna.
• Unikaj zaskoczenia nieoczekiwanymi kosztami wysyłki i podatkami. Nieoczekiwane koszty wysyłki to jeden z głównych powodów, dla których kupujący porzucają koszyki. Umieść opcje wysyłki i podatki z dokładną kalkulacją kosztów i przewidywaną datą dostawy z góry.

Projekt kasy e-commerce

Stylowy i modny design nie decyduje o sukcesie witryny eCommerce ani nie musi zapewniać doskonałego UX eCommerce. Sukces eCommerce mierzy się tylko liczbą dokonanych zakupów. Oto kilka sposobów na zbudowanie dobrze zaprojektowanej strony kasy, która przyczyni się do udanej konwersji:

• Oferuj różne opcje płatności. Różni kupujący mają różne preferencje, jeśli chodzi o dokonywanie płatności. Zapewnij jak najwięcej opcji płatności (w zależności od grupy docelowej), aby poszerzyć bazę klientów i ułatwić kupującym zrealizowanie zamówienia.
• Nie komplikuj. Zminimalizuj liczbę pól i kroków, aby sfinalizować zakup. Domyślne używanie adresu dostawy jako adresu rozliczeniowego to dobry sposób na zminimalizowanie liczby pól — najlepiej zaprojektować jednostronicową kasę, na której kupujący mogą przeglądać swój koszyk i wprowadzać informacje o dostawie i płatności.

• Spraw, aby rejestracja była opcjonalna. Zmuszenie kupujących do utworzenia konta przed pierwszym zakupem odstraszy kupujących. Daj im możliwość zarejestrowania się po zakończeniu zakupu i podkreśl korzyści płynące z rejestracji, prosząc ich o rejestrację. Korzyści obejmują szybszą realizację transakcji dzięki danym osobowym, takim jak zapisany adres wysyłki lub informacje o płatności, oraz dostęp do ekskluzywnych ofert, które są dostępne tylko dla zarejestrowanych członków.
• Używaj wyraźnych wskazań błędów. Nie ma nic bardziej frustrującego niż niemożność dokonania zakupu lub niezorientowanie się, dlaczego. Zamiast pokazywać błędy po przesłaniu formularza, wyświetlaj powiadomienia o błędach w czasie rzeczywistym. Umieść jasne i zwięzłe komunikaty o błędach bezpośrednio nad lub obok produktu wymagającego korekty, aby kupujący je zauważyli i zrozumieli.

• Utrzymuj ludzi na bieżąco. Korzystając z wielostronicowej kasy, dołącz pasek postępu, który pokazuje, ile jeszcze kroków pozostało do sfinalizowania zakupu. Wyeliminuje to wszelkie niejasności i zapewni kupującym, że są na dobrej drodze. Po zakończeniu zakupu wyświetl potwierdzenie zamówienia i status zamówienia ze śledzeniem przesyłki.
• Zaoferuj wsparcie. Dołącz czat na żywo lub numer kontaktowy w całym procesie realizacji zakupu, aby kupujący, którzy mają pytania, mogli szybko uzyskać odpowiedzi, zamiast opuszczać witrynę i iść gdzie indziej.

Streszczenie

Kupujący online oczekują bezproblemowych doświadczeń bez względu na wszystko. Projektując witrynę eCommerce, nie chodzi tylko o zbudowanie strony internetowej, ale także o stworzenie sklepu internetowego, który przekształci pasywnych kupujących w płacących klientów.

Mamy nadzieję, że ten przewodnik po projektowaniu witryn eCommerce pomoże Ci w podjęciu niezbędnych decyzji projektowych w celu zbudowania wspaniałego UX eCommerce, który jest profesjonalny, atrakcyjny, przyjazny dla użytkownika i sprawia, że ​​kupujący wracają po więcej razy. Szybki wzrost i stosunkowo niski udział w rynku oznaczają, że nowi gracze wciąż mają ogromne możliwości wyprzedzenia tradycyjnych liderów branży.

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – podstawowe strategie i zasady projektowania
• UX eCommerce dla doświadczeń mobilnych
• Jak przyciągnąć kupujących eCommerce poprzez projektowanie UX?
• Przeprojektowany e-commerce: jak drobne zmiany spowodowały poważne ulepszenia UX