Ponieważ globalna sprzedaż e-commerce ma wzrosnąć do 4,8 biliona USD do 2021, nie powinieneś poważnie przyjrzeć się, jak projektować witryny e-commerce, aby uzyskać więcej konwersji?

Podczas gdy niektóre podstawowe wskazówki dotyczące konwersji dla witryn WordPress mają zastosowanie tutaj, witryna e-commerce zazwyczaj nie działa według tych samych zasad, jeśli chodzi o format i układ.

W szczególności chciałbym dziś dokładnie przyjrzeć się temu, co tworzy e-commerce o wysokiej konwersji strona produktu. W końcu ta strona jest ostatnim krokiem przed konwersją, więc jest to ostatnia szansa na sfinalizowanie transakcji i przekształcenie odwiedzających w płacących klientów.

Jeśli nie zbudowałeś jeszcze swojej witryny eCommerce, zapoznaj się z naszym obszernym przewodnikiem dotyczącym planowania sklepu eCommerce z WordPress.

projektowanie stron produktów eCommerce

Nie ma gwarancji, że odwiedzający kupi cokolwiek, gdy dotrą do stron produktów. Ale Twoim zadaniem podczas budowania witryny eCommerce jest nie dawać im żadnych dodatkowych powodów, aby ją porzucić.

Szczerze mówiąc, myślę, że najbezpieczniejszym sposobem zaprojektowania strony produktu eCommerce jest rozpoczęcie od projektu i układu podobnego do sklepu internetowego, który każdy już zna i ufa.

Amazon eCommerce Product Page
Wiele się dzieje na tej stronie; niemniej jednak wszystkie kluczowe elementy konwersji są obecne.

Nie podoba mi się szczególnie wygląd strony Amazon. Myślę, że typ jest za mały, za dużo się dzieje, a jakość opisów i zdjęć od sprzedającego nie zawsze jest świetna. To powiedziawszy, Projekt strony produktu Amazon działa dobrze, ponieważ jest logicznie rozplanowany i jest konsekwentnie stosowany w całej witrynie. Tak więc, gdy patrzymy na to, jak budować strony produktów eCommerce dla Twojej witryny WordPress, chciałbym użyć tego jako swego rodzaju szkieletu dla najlepszych praktyk projektowania stron produktów pod względem konwersji.

Opisując każdy z podstawowych elementów potrzebnych do zaprojektowania strony produktu e-commerce o wysokiej konwersji, podświetlę przykład strony internetowej, która dobrze demonstruje każdy punkt. Jeśli podążasz wzdłuż od góry do dołu, przekonasz się, że każdy z elementów (z wyjątkiem być może białego miejsca) jest częścią udanej Formuły Amazon, ale każda strona znalazła fajny sposób na wprowadzenie wyjątkowego spinu.

1. Pasek Adresu

Bean Box eCommerce Product Page
Przykład adresu URL wykonanego poprawnie, ze strony internetowej Bean Box.

Możesz nie zastanawiać się nad paskiem adresu stron produktów, ale jest coś, co należy powiedzieć o przestrzeganiu ścisłej formuły. Oto, czego potrzebujesz:

  • HTTPS. Jeśli jest to witryna e-commerce, nie podlega ona negocjacjom. Jest to również pierwszy znak zaufania, który odwiedzający powinni napotkać na twojej stronie w ogóle.
  • Prosta struktura. Ponieważ produkty zawsze istnieją głębiej w strukturze ścieżki, skup się na ich jasnym oznakowaniu i łatwym do naśladowania. Dodawanie jednostek SKU produktów i innych znaczników referencyjnych w adresie URL tylko rozprasza odwiedzających.
  • Zoptymalizowany ślimak. Myśląc o SEO dla stron produktów eCommerce, słowo kluczowe focus dla strony produktu powinno służyć jako ślimak. Innymi słowy, jeśli twój produkt nazywa się “Bean Box”, użyj bean-box jako ślimak do celów SEO.

2. White Space

Apple eCommerce Product Page
Przykład użycia białych spacji do podświetlenia produktu w witrynie Apple.

Najlepsze strony produktów eCommerce niekoniecznie zawierają dużo treści. Apple jest już marką synonimem minimalizmu, więc nic dziwnego, że ich projektowanie stron internetowych wykorzystywałoby dużo białej przestrzeni do oprawiania swoich produktów. Oto kilka innych wskazówek dotyczących minimalizacji przestrzeni, które możesz zabrać z tego przykładu, a także innych witryn e-commerce, które dobrze wykorzystują białą przestrzeń:

  • Zachowaj lekki tekst na stronach produktów i korzystaj z dużych odstępów między różnymi elementami (opisanych poniżej), aby pomóc klientom skupić się na kluczowych szczegółach pojedynczo.
  • Użyj jednolitego koloru tła (najlepiej Białego) za zdjęciami i opisami produktów. Pomaga utrzymać koncentrację na produkcie.
  • Nie umieszczaj paska bocznego na stronach produktów, jeśli można pomóc.
  • Podczas wyświetlania więcej niż trzech lub czterech zdjęć lub filmów produktu użyj szybkiej i bogatej w funkcje wtyczki Galeria, aby zmniejszyć ilość używanego miejsca.

3. Nawigacja

Costco eCommerce Product Page
Przykład nawigacji bułka tarta wykonane dobrze przez Costco.

Jedną z trudnych rzeczy w korzystaniu z witryny eCommerce jako konsumenta jest nawigacja. Oczywiście, jeśli istnieje pasek wyszukiwania, zawsze możesz wpisać dokładny produkt, który chcesz (jeśli wiesz, jak to się nazywa); w przeciwnym razie trzeba dużo klikać, aby odtworzyć kroki z oryginalnego zapytania wyszukiwania.

Jako projektant możesz użyć nawigacji panierki u góry strony produktu, aby uprościć pracę, którą muszą wykonać odwiedzający. W końcu są już zainteresowani tym produktem lub rodzajem produktu, prawda? Ponieważ bułka tarta wyświetlić wszystkie kategorie i podkategorie, które doprowadziły do produktu, jest to idealne rozwiązanie dla uzyskania ich z powrotem do wcześniejszego kroku, więc nie muszą rozpocząć ich wyszukiwanie od nowa.

4. Zdjęcia produktów i wideo

Bellroy eCommerce Product Page
Bellroy zawiera mieszankę zdjęć i filmów w swojej galerii zdjęć.

Powiedziałbym, że dziewięć razy na dziesięć (a może nawet więcej) znajdziesz zdjęcia produktów znajdujące się po lewej stronie strony. To ma sens, kiedy o tym pomyślisz. Jeśli tworzysz strony internetowe z językami napisanymi od lewej do prawej, Oczy Twoich klientów automatycznie trafią do lewego górnego rogu Twoich stron-gdzie znajdują się zdjęcia produktów.

Dlatego nie możesz skąpić na produkcji zdjęć lub filmów dla swojej witryny eCommerce. Jest to pierwsze wrażenie, jakie odwiedzający będą mieli na temat produktu i może realistycznie podjąć lub złamać decyzję o zakupie.

Co możesz zrobić, aby upewnić się, że prawidłowo użyłeś zdjęć produktów?

  • Najpierw zainstaluj wtyczkę do optymalizacji, taką jak Smush Pro. Masz zamiar przesłać bardzo duże pliki multimedialne do swojej witryny i nie chcesz narażać prędkości ładowania lub jakość obrazu w procesie.
  • Nigdy nie dołączaj obrazów ani filmów, które są rozmyte lub o niskiej rozdzielczości.
  • Jeśli obraz nie kadruje produktu w najlepszym świetle lub nie jest jego dokładnym przedstawieniem (tj. jest zbyt pochlebny), nie dołączaj go.
  • Ponieważ klienci nie mogą wcześniej wypróbować produktów, prześlij różne obrazy, które pokazują je pod różnymi kątami lub gdy są używane przez modelkę.
  • Nie używaj tutaj filmów promocyjnych o produktach; zamiast tego używaj filmów, które faktycznie pokazują produkt w akcji.
  • Ponadto, jeśli twój produkt jest w różnych kolorach lub rozmiarach, te muszą być reprezentowane tutaj również. Najlepszym sposobem na poradzenie sobie z tym jest zmiana tych zmian po zmianie zmiany (zobacz informacje na ten temat poniżej).
  • Jeśli udało ci się zebrać treści generowane przez użytkowników, dołącz je tutaj (oczywiście za zgodą użytkowników).
  • W przypadku produktów, które skorzystałyby z eksploracji 360, pomyśl o użyciu wtyczki rzeczywistości wirtualnej.

5. Nazwa Produktu

Bose eCommerce Product Page
Nazwa Produktu Bose to idealne połączenie nazwy marki z wyraźnym oznakowaniem produktu.

Jeśli chodzi o nazwę produktu, im jaśniejszy jesteś pod względem tego, czym jest produkt, tym lepiej. Nie oznacza to wypisania trzyliniowej nazwy produktu, takiej jak te, które czasami widzisz na Amazon, która opisuje produkt w ponadprzeciętnych szczegółach: “Produkt X w kolorze malinowym Flaming Red, wodoodporny, trwały, lekki, rozmiary od małych do dużych, Made in USA itp. itd. itd.”Po prostu napisz rozsądną unikalną nazwę produktu.

Ponadto, jeśli chodzi o sformułowanie nazwy produktu, powinieneś przestrzegać tych samych konwencji nazewnictwa SEO, których używasz dla każdej innej strony w witrynie WordPress. Oznacza to włączenie słowa kluczowego focus w nazwie i ograniczenie go do 55 znaków lub mniej (do celów wyszukiwania).

6. Cena

American Eagle eCommerce Product Page
American Eagle pokazuje świetny sposób, aby natychmiast przyciągnąć uwagę odwiedzających ceną.

Cena produktu powinna być kolejną rzeczą, którą odwiedzający zobaczą po nazwie produktu. Nawet jeśli otrzymasz je w pełni zainwestowane w wartość produktu z dobrze napisanym opisem i niesamowitymi stronami produktów, zbyt wysoka cena może być dealbreaker. Więc połóż to na pierwszym planie.

Ponadto, jeśli oferujesz specjalną zniżkę, umieść ją tuż obok oryginalnej ceny-i nie bój się użyć jasnego i przyciągającego wzrok koloru, aby zwrócić uwagę na oszczędności.

7. Oceny i recenzje

Leesa eCommerce Product Page
Dobry przykład tego, jak proste wyświetlanie oceny produktu może się wyróżniać i pomóc “sprzedać” produkt bez mówienia zbyt wiele.

Chociaż rzeczywiste opinie klientów lub opinie klientów nie powinny znajdować się w pobliżu górnej części strony produktu, ocena gwiazdek i liczba recenzji powinna. Dowód społeczny jest niezwykle ważną częścią krajobrazu e-commerce, ponieważ klienci nie mogą łatwo przetestować produktów wcześniej, więc muszą one być gdzieś tutaj–im wyżej na stronie, tym lepiej.

Oczywiście ocena gwiazdkowa może nie zawsze mieć sens dla rodzaju oferowanego produktu. Jeśli jest to coś w rodzaju usługi biznesowej, referencje będą miały większy sens. A jeśli jest to coś w rodzaju rezerwacji hotelu lub restauracji, możesz zdecydować się na coś takiego, w którym odwiedzający dowiadują się, ilu innych podobnie myślących konsumentów rozważa zakup:

Priceline eCommerce Product Page
Priceline robi social proof w inny sposób, ale działa dla tego stylu e-commerce.

Pamiętaj, że istnieje możliwość, że Twoje produkty nie otrzymają pozytywnych opinii, aby rozpocząć, i to jest w porządku. Dlatego rzeczywiste zapisy są podane poniżej opisu produktu. Odwiedzający mogą przewinąć w dół i przeczytać skargi dla siebie, aby zdecydować, czy są one ważne, czy nie, i zobaczyć, czy firma za nimi słucha i odpowiada na te skargi.

8. Opis Produktu

Harry's eCommerce Product Page
Harry ‘ s zawiera zwięzły opis, który koncentruje się na tym, jakie korzyści klienci będą rzeczywiście uzyskać z produktu.

Jak już wcześniej wspomniałem, najlepiej zachować lekkie strony produktów na tekście, zwłaszcza nad fałdą. Polecam korzystanie z bardzo krótkich, opartych na wartościach wiadomości w opisie. Oczywiście powinieneś krótko wyjaśnić, czym jest produkt, ale ważne jest, aby poświęcić chwilę na faktyczną Sprzedaż produktu. Oznacza to podkreślenie korzyści i danie klientom powodu do spojrzenia na resztę strony.

9. Wariacje

Ikea eCommerce Product Page
Najlepszą rzeczą w tych wariantach jest to, że po wybraniu innej, zdjęcia po lewej stronie aktualizują się, aby je dopasować.

Nie każdy produkt w Twoim sklepie internetowym będzie oferował różne warianty, z których klienci mogą wybierać. Jeśli jednak istnieją, Ułatw im wybór spośród dostępnych opcji, a także poinformuj ich z góry, które opcje są nie dostępny. Nic nie denerwuje klienta bardziej niż znalezienie produktu, którego chce, wybranie rozmiaru, a następnie kliknięcie CTA tylko po to, aby stwierdzić, że produkt nie istnieje już w tej odmianie.

Tak więc, kiedy projektujesz ten element, przede wszystkim Ułatw go w użyciu. Listy rozwijane są świetne, jeśli masz więcej niż pięć opcji do wyświetlenia. Następnie oczywiście użyj jasnego wskaźnika, który informuje klientów, które odmiany są dostępne. Szarość tekstu działa równie dobrze, jak całkowite usunięcie zmian dla produktów, które nie są dostępne.

Johnny Cupcakes eCommerce Product Page
Johnny Cupcakes używa szarego tekstu, aby pokazać wyprzedane odmiany.

A skoro już o tym mówię, to świetny sposób na wzbudzenie poczucia pilności wśród odwiedzających. Powiedzmy, że popularny przedmiot wkrótce zniknie z magazynu w określonym rozmiarze. Zamiast czekać, aż to zrobi, aby wyszarzać odmianę, uderz jaskrawoczerwone Ostrzeżenie obok, które informuje odwiedzających, że masz niski zapas dostępny i/lub że wkrótce zostanie uzupełniony. Może to zmotywować więcej klientów do podjęcia działań wcześniej.

10. CTA

Barnes and Noble eCommerce Product Page
Barnes & Noble stawia CTA na pierwszym miejscu. Zwróć również uwagę, jak używają przycisku ghost, aby kontrastu CTA o mniejszej wartości.

Przycisk CTA oczywiście odgrywa dużą rolę w procesie konwersji eCommerce, dlatego nie możesz tak naprawdę eksperymentować z tym, gdzie umieścić wezwanie do działania. Jeśli chodzi o stronę produktu, ten przycisk musi być z przodu i na środku. Musi być również dobrze zaprojektowany, odważnie zabarwiony i dokładnie informować klientów, co się stanie, gdy go klikną.

  • “Dodaj do koszyka” umieści przedmiot w koszyku, aby mogli kontynuować przeglądanie sklepu.
  • “Kup teraz” rozpocznie proces zakupu.
  • “Dodaj do listy życzeń” wyrzuci produkt na listę i zapisze na później.

Jeśli strona produktu jest długa i chcesz mieć pewność, że pomysł dokonania zakupu pozostanie na topie, możesz użyć następującego triku (np. lepkiego górnego paska), aby przycisk był zawsze obecny:

Barnes and Noble eCommerce Product Page Scroll
Jest to miły akcent, a nie coś, co często widzisz na stronach e-commerce.

Inną rzeczą do zrobienia w tej sekcji jest umieszczenie odpowiednich szczegółów zakupu w pobliżu CTA. Na przykład:

  • Szacowana data wysyłki.
  • Krótkie oświadczenie na temat polityki zwrotów i zwrotów.
  • Wszelkie związane z zakupem opłaty lub podatki.
  • Oświadczenie Gwarancyjne.

11. Media Społecznościowe

Poo-Pourri eCommerce Product Page
Czysty i prosty wygląd ikon społecznościowych na stronie produktu Poo-Pourri jest miłym akcentem.

Idealnie byłoby, gdyby ikony mediów społecznościowych były wyświetlane na każdej stronie witryny WordPress. Jeśli jeszcze ich nie ma, pamiętaj, aby umieścić je na stronach produktów eCommerce–ze szczególnym uwzględnieniem platform przyjaznych dla obrazu. Oznacza to Facebook, Instagram, Pinterest, a może nawet Twitter. To da Twoim klientom łatwy sposób na dzielenie się swoimi ulubionymi produktami z innymi.

12. Cechy Produktu

Fitbit eCommerce Product Page
Gadżety takie jak Fitbit potrzebują miejsca, aby wyświetlić swoje specyfikacje techniczne, a ten przykład wygląda fantastycznie.

Jeśli Opis produktu jest miejscem, w którym krótko omawia się wartość produktu, Cechy produktu są miejscem, w którym można uzyskać więcej szczegółów technicznych. Specyfikacje wymiarowania, instrukcje pielęgnacji i konserwacji, wymagania Montażowe, elementy zawarte, i tak dalej powinny być umieszczone w tej sekcji poniżej składania. Jeśli masz dużo do omówienia, użyj zakładek, aby skonsolidować informacje w jednym miejscu i uchronić klientów przed zbytnim przewijaniem.

13. Powiązane Produkty

Pottery Barn eCommerce Product Page
Nie każda sekcja powiązanych produktów będzie wyglądać tak samo. Dla niektórych wystarczy tylko obraz produktu, Nazwa i ocena gwiazdkowa. Jest to również dobra opcja, jeśli chcesz dać klientom mniej do kliknięcia.

Korzystając z danych o produktach, popularnych trendach zakupowych i osobistych nawykach zakupowych klientów w Twojej witrynie, możesz utworzyć pomocną sekcję “powiązane produkty”. Jest to świetna okazja, aby nie tylko upsell lub cross-sell na produkt już są zainteresowani, ale jest to również dobry sposób, aby dać im alternatywne zalecenia w przypadku tego konkretnego nie wyszło.

Po zakończeniu projektowania stron produktów eCommerce z powyższymi elementami nie zapomnij użyć wtyczek WordPress, aby zoptymalizować ich wydajność. Nawet jeśli Twoje strony wyglądają świetnie i masz idealny układ, jeśli ładowanie stron trwa zbyt długo lub odwiedzający widzą ostrzeżenie dotyczące bezpieczeństwa, może to cię kosztować. Tak więc, jeśli nie masz ich zainstalowanych na swojej stronie, upewnij się, że masz wtyczkę do optymalizacji wydajności, taką jak Hummingbird i wtyczkę bezpieczeństwa, taką jak Defender.

Optymalizacja strony produktu eCommerce-Ostatnie wskazówki

Oprócz kwestii związanych z projektowaniem strony produktu, takich jak poprawa układu i upewnienie się, że treść w pełni wyjaśnia zalety i cechy produktu (i buduje zaufanie do firmy), szukaj sposobów na wdrożenie psychologicznych wyzwalaczy, aby skierować uwagę konsumentów na przycisk Dodaj do koszyka.

Po ustaleniu projektu strony produktu eCommerce przy użyciu metod omówionych powyżej, upewnij się, że A / B przetestuj swoje strony i sprawdź, czy są inne elementy lub układy, na które odwiedzający będą bardziej otwarci. Model Amazon to dobry wybór na początek. Utrzymuje szczegóły produktów w logicznym porządku, utrzymuje strony w rozsądnej długości i zapewnia spójną strukturę w całej witrynie.

Czy uważasz, że strony ecommerce są mniej lub bardziej wymagające w projektowaniu niż tradycyjne strony biznesowe lub blogi?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…