Wskazówki dotyczące projektowania Shopify i najlepsze praktyki UX

Shopify obsługuje ponad pół miliona firm eCommerce w 175 krajach. Od 2012 r. liczba sprzedawców na platformie Shopify rosła średnio o 74% rocznie, a sprzedawcy ci osiągnęli ponad 55 miliardów dolarów sprzedaży, dzięki temu, że Shopify jest obecnie jedną z najbardziej znanych i najłatwiejszych w użyciu platform eCommerce.

Dzięki Shopify, który zajmuje się domenami, hostingiem, całym zapleczem i niektórymi funkcjami frontonu, możesz poświęcić więcej czasu, pieniędzy i zasobów na projektowanie UX. Oczekuje się, że do 2021 r. sprzedaż w handlu elektronicznym na całym świecie osiągnie nowy rekord, wynoszący 4,9 biliona dolarów, a ponieważ niespełniający standardów projekt UX jest jednym z największych przyczyniających się do porzuconych kas, jest więcej niż jasne, że wdrażanie najlepszych praktyk w handlu elektronicznym nadal będzie bardzo skuteczne.

W tym artykule omówimy najważniejsze wskazówki dotyczące projektowania Shopify.

Jakie funkcje ma Shopify?

Shopify dostarcza wszystkie funkcje, których można oczekiwać od najlepszej platformy eCommerce:

• Integracja z zewnętrznymi bramkami płatniczymi, takimi jak Stripe i PayPal
• Dostęp do Shopify Payments bez opłat w porównaniu z opcjami zewnętrznymi
• Możliwość umożliwienia płatności kartą podarunkową lub kredytem sklepowym
• Konfigurowalna strona kasy (tylko dla klientów Shopify Plus)
• Możliwość kont użytkowników lub kasy gości
• Strony statyczne (np. Polityka prywatności lub Regulamin)
• Strony docelowe z treściami promocyjnymi
• Dostęp na hasło dla sklepów w fazie rozwoju
• Warianty produktów z licznymi opcjami, które można dostosować
• Inteligentne kolekcje do automatyzacji kategoryzacji produktów
• Funkcja wyszukiwania i tagowania ułatwiająca odkrywanie produktów
• Funkcjonalność bloga z możliwością osadzania produktów w postach
• API, które pomaga programistom w tworzeniu dynamicznych stron internetowych i aplikacji mobilnych

Zwiększanie odkrywania produktów eCommerce

Podobnie do sposobu, w jaki sklepy stacjonarne są zorganizowane według działów, aby klienci mogli znaleźć określone produkty, pytając pracownika, kupujący online muszą mieć możliwość przeglądania, filtrowania i wyszukiwania, aby mogli łatwo znaleźć to, czego szukają. szybko .

40% klientów eCommerce porzuca strony, których ładowanie trwa dłużej niż 3 sekundy, co sugeruje, jak bardzo są niecierpliwi, jeśli chodzi o odkrywanie produktów. Na szczęście Shopify ma wiele funkcji, które ułatwiają tworzenie niestandardowej nawigacji, organizowanie produktów i kategorii oraz wdrażanie funkcji wyszukiwania.

Niestandardowa nawigacja

Przedstawienie klientowi zbyt wielu opcji może spowodować paraliż analityczny (gdy dostępnych jest zbyt wiele opcji, aby skutecznie podjąć decyzję, powoduje frustrację i porzucenie). Projektując niestandardową nawigację, możemy priorytetyzować produkty i „kolekcje”, które konwertują najskuteczniej — na przykład wyświetlając w widoczny sposób kolekcję „Biurko”, jeśli produkty na biurko są najbardziej popularne. Te niestandardowe nawigacje można również edytować w Shopify CMS, aby umożliwić swobodne testowanie A/B.

Wizualnie najlepiej konwertujące motywy Shopify wyraźnie wyświetlają tytuł kolekcji i wykorzystują wystarczającą ilość pustego miejsca, aby pomóc użytkownikowi łatwo zidentyfikować to, czego szuka wśród wszystkich oferowanych produktów, kolekcji i stron.

Kolekcje

Kolekcja to zorganizowana grupa podobnych produktów. Produkty mogą być sortowane ręcznie w kolekcje lub mogą być sortowane automatycznie na podstawie dopasowanych kryteriów (np. jeśli tytuł produktu zawiera określone słowo kluczowe, ma przypisany określony tag lub mieści się w określonym przedziale cenowym). Kolekcje mogą być również tymczasowe (tj. sezonowe lub w przypadku wyprzedaży ograniczonej czasowo), dzięki czemu projekty witryn Shopify są zawsze odpowiednie, aktualne, a przede wszystkim wysoce konwertujące.

Chociaż te kolekcje są definiowane za kulisami, projektanci handlu elektronicznego powinni mieć świadomość tej funkcji podczas projektowania dla Shopify.

Tagi produktów

Wyświetlane/widoczne tagi pomagają klientom znaleźć podobne produkty, a jak wspomniano powyżej, mogą być również używane wewnętrznie do tworzenia kolekcji. Jednak największą zaletą tagów jest to, że można je wykorzystać do tworzenia wyszukiwania aspektowego , umożliwiając klientom filtrowanie produktów na podstawie atrybutu definiującego tag, takiego jak „Żółty”.

Pamiętaj o tych wskazówkach dotyczących projektowania Shopify:

• Aby uzyskać dodatkowe wyjaśnienie, pokaż, które filtry są stosowane.
• Zezwalaj klientom na usuwanie filtrów w celu poszerzenia zakresu wyszukiwania.
• Przytnij filtry, aby wyświetlić tylko najpopularniejsze na pierwszy rzut oka.

Szukaj

Funkcja wyszukiwania jest przydatna dla klientów, którzy dokładnie wiedzą, czego szukają, i jest szczególnie ważna dla klientów mobilnych, dla których przeglądanie i filtrowanie jest frustrujące ze względu na naturalną niezręczność interakcji na urządzeniu mobilnym.

Oto najlepsze praktyki Shopify, które należy wziąć pod uwagę podczas projektowania środowisk wyszukiwania:

• Nigdy nie ukrywaj pola wyszukiwania; zmniejszyć tarcie, udostępniając go natychmiast.
• Umieść wyszukiwanie tam, gdzie oczekują tego klienci (tj. w prawym górnym rogu lub scentralizowane).
• Pokaż całe pole wprowadzania, a nie tylko ikonę wyszukiwania.
• Włącz funkcję autouzupełniania, aby pomóc użytkownikom w szybszym wyszukiwaniu.
• Projektuj pod kątem błędów ludzkich, korzystając z sugerowanych wyników i autokorekty.
• Zapisuj wyszukiwania użytkowników i wysyłaj kolejne e-maile, jeśli nie dokonano żadnej sprzedaży.

Najlepsze praktyki Shopify dotyczące stron produktów

Shopify oferuje wszystkie funkcje potrzebne do przyciągnięcia kupujących eCommerce i płynnego prowadzenia użytkowników prosto do kasy. Jeśli połączymy te funkcje z najlepszymi praktykami eCommerce, możemy zepchnąć liczbę porzuconych kas poniżej średniej statystyki.

Użyj urzekających zdjęć produktów

To, co składa się na dobrą witrynę eCommerce, to obrazy, które urzekają emocjonalnie użytkowników. W tym celu Shopify umożliwia przesyłanie wielu zdjęć i wariantów produktów. Niemniej jednak, zgodnie z najlepszą praktyką Shopify, wyświetlaj co najmniej jedno z tych zdjęć produktu w skali (tj. otoczone innymi obiektami, aby zilustrować wielkość produktu), aby określić oczekiwania.

Klienci chcą przeprowadzić dokładne badanie produktu, zanim zdecydują się go kupić, aby upewnić się, że wszystkie obrazy produktu są żywe, wysokiej jakości i można je powiększać.

Wyświetlaj jasne informacje o produkcie

Szokująca (ale nie zaskakująca) liczba klientów eCommerce porzuca koszyki z powodu braku informacji o rzeczywistym koszcie. 60% klientów podaje nieoczekiwane koszty (np. koszty wysyłki, podatki, opłaty) jako powód porzucenia koszyka, a 23% nie jest w stanie obliczyć całkowitego kosztu z góry. Brak przejrzystości to niezawodny sposób na gromadzenie konwersji w witrynach eCommerce, więc pamiętaj o tych wskazówkach i trikach Shopify:

• Stosuj techniki progresywnego ujawniania, aby jasno ustrukturyzować informacje.
• Wyświetl pełny podział kosztów z góry.
• Przedstaw propozycję wartości wprost.
• Spraw, aby przycisk kup teraz/dodaj do koszyka był wizualnie wyróżniający się.

Buduj zaufanie i pewność

Według Baymard Institute brak zaufania jest podawany jako powód, dla którego 19% klientów rezygnuje z kasy. Na szczęście wszystkie sklepy Shopify są domyślnie dostarczane z SSL (bezpieczna realizacja transakcji), ale umożliwiają one również klientom pozostawienie recenzji jako dowodu społecznego.

Dowód społeczny to niezaprzeczalny sposób na zwiększenie liczby konwersji poprzez zwiększenie zaufania w witrynach handlu elektronicznego . Według BrightLocal, 88% konsumentów ufa recenzjom online tak samo jak osobistej rekomendacji, dlatego ważne jest, aby zachęcić poprzednich klientów do pozostawienia recenzji i wskazać to na ścieżce klienta. Większość motywów Shopify korzysta również ze znaczników schematu, aby zintegrować te oceny bezpośrednio z wynikami wyszukiwania.

Oprócz weryfikacji społecznej rozważ budowanie zaufania klientów poprzez wdrożenie rozwiązania czatu na żywo, takiego jak Intercom, Zendesk, Drift lub Kayako. Shopify umożliwia integrację z usługami stron trzecich za pośrednictwem ich sklepu z aplikacjami i ręcznej instalacji.

Pokaż powiązane zalecenia dotyczące produktów

Wszystkie wiodące firmy eCommerce korzystają ze strategii cross-sell i up-selling. Tagi, w połączeniu z integracjami analiz i testów A/B, takich jak Optimizely's Web Recommendations, mogą pomóc projektantom w poprawie współczynników konwersji poprzez wyświetlanie alternatywnych lub dodatkowych elementów, którymi klienci mogą być zainteresowani.

Zintegruj personalizację doświadczeń zakupowych

Integracje, takie jak personalizacje internetowe firmy Optimizely, w połączeniu z kolekcjami i tagami Shopify, pozwalają firmom opartym na danych segmentować odbiorców na podstawie ich zainteresowań i historii wcześniejszych zakupów oraz odpowiednio zmieniać zawartość strony.

Dzięki przewidującym technikom projektowania sklepy Shopify mogą wyświetlać bardziej odpowiednie treści, utrzymując zaangażowanie odbiorców na dłużej, a tym samym z większym prawdopodobieństwem konwersji na sprzedaż. Personalizacja jest kluczem do zwiększenia wyników finansowych każdej firmy eCommerce.

Optymalizacja realizacji transakcji

Kasa gości a konta klientów

Według Baymard Institute, „witryna chciała, żebym założył konto” to drugi najczęstszy powód (wynoszący 35%), dla którego klienci rezygnują z płatności bez kupowania czegokolwiek. Shopify zaleca umożliwienie realizacji płatności dla gości (zwłaszcza na urządzeniach mobilnych), a w tym celu jest to domyślna opcja wyłączenia kont klientów.

Wykrywanie wad UX i ograniczanie porzuceń

Próba rozwiązania problemu porzuconych kas bez solidnej analizy jest tak samo skuteczna, jak szukanie czarnego kota w ciemnym pokoju. Optymalizacja doświadczeń użytkowników i przepływów realizacji transakcji działa najlepiej, gdy jest to proces oparty na danych.

Projektanci Shopify mogą połączyć Google Analytics z Shopify i skonfigurować ścieżkę celu, która po zebraniu wystarczającej ilości danych dokładnie zilustruje, gdzie klienci decydują, że nie chcą kontynuować zakupu.

Aby uzyskać najlepsze wyniki, zintegruj Shopify z narzędziami, takimi jak Crazy Egg, Hotjar i FullStory, aby bardziej szczegółowo obserwować te problematyczne obszary za pomocą map popularności i nagrań gości.

Wniosek

Aby projektanci mogli lepiej komunikować zalety i możliwości platformy Shopify oraz dowiedzieć się, jakie rozwiązania może, a czego nie może zapewnić klientom, najlepiej otworzyć bezpłatny sklep demonstracyjny. Ponadto najlepsi projektanci eCommerce mogą zostać zarejestrowanymi ekspertami Shopify, co zwiększa wiarygodność ich CV jako projektanta witryny Shopify.

Dalsza lektura na blogu Toptal Design:

• Przeczytaj blog Shopify, aby uzyskać więcej porad i wskazówek Shopify.
• eCommerce UX – podstawowe strategie i zasady projektowania
• UX eCommerce dla doświadczeń mobilnych
• Jak przyciągnąć kupujących eCommerce poprzez projektowanie UX?
• Projektowanie responsywne — najlepsze praktyki i uwagi