Przykłady stron produktów dla zoptymalizowanej konwersji: W komplecie z przewodnikiem

Opublikowany: 2022-03-01

Wyobraź sobie: jest późno w nocy i znajdujesz się w sieci. Szukasz idealnego rozwiązania problemu, który dręczy Cię przez cały tydzień. Byłeś tu wcześniej. Przygarbiony, z głową w dłoniach, a sen puka do twoich drzwi. Tuż przed utratą wszelkiej nadziei, Eureko! W końcu otrzymujesz obiecujący wynik wyszukiwania. Z zapartym tchem klikasz i…

Nic się nie dzieje. Po wieczności zaczyna się renderować biały ekran ze ścianami tekstu i pojedynczym, pikselowym obrazem produktu. Wspomnienia z epoki dial-up wypełniają twój umysł. Przeglądasz stronę w poszukiwaniu rozwiązania, ale nie widzisz żadnych informacji o cenie, żadnych recenzji klientów i wielu numerów telefonów, które zachęcają Cię do zadzwonienia po więcej informacji. Nie jest to działający wgląd w linki, a ich jedynym społecznym dowodem jest animacja kota, który mówi, że ten produkt jest „Murrrrfect!” To boleśnie oczywiste: natknąłeś się na cmentarz strony internetowej.

Nie pozwól, aby ten koszmar stał się Twoim sklepem! Najlepsze wrażenia użytkowników zapewniają witryny, które są angażujące i regularnie aktualizowane, a nie witryny, które sprawiają, że użytkownik zastanawia się, czy powinien uruchomić swoje oprogramowanie antywirusowe. Niezależnie od tego, czy dopiero zaczynasz, czy chcesz zaktualizować swój sklep e-commerce, jesteśmy tutaj, aby Ci pomóc!

W tym artykule omówimy minimalne kryteria, które powinna spełniać każda strona produktu, a także niektóre opcje projektowania, których należy unikać. Zebraliśmy nawet kolekcję naszych ulubionych stron produktów z szybką listą zalet i wad dla każdej z nich, aby zainspirować Twój następny projekt!


Tworzenie idealnej strony produktu

Celem Twojej strony produktu jest, no cóż, sprzedaż Twojego produktu! Ale chodzi również o zrozumienie, czego Twoi użytkownicy oczekują od Twojej witryny. Przeciętny mieszkaniec USA spędza w Internecie siedem godzin i 50 minut dziennie. Ponieważ każdego dnia poświęcasz tak dużo czasu na przeglądanie różnych witryn, osoby odwiedzające Twoją witrynę będą traktować swoje wrażenia w taki sam sposób, jak pierwszorzędny sommelier krytykowałby butelkę wina. Twoi goście są bardzo zdolni do wyłapania niuansów między dobrym a złym doświadczeniem.

Twoja strona produktu powinna nie tylko zawierać podstawowe informacje, których oczekują Twoi odwiedzający, ale powinna zapewniać bezproblemowe wrażenia użytkownika, a także zawierać Twój unikalny styl, który sprawi, że będą wracać.

Wychodząc naprzeciw oczekiwaniom użytkowników, możesz poczuć się jak chodzenie po ciasnej linie, jeśli nie jesteś pewien, czego szukają. Dlatego przygotowaliśmy przewodnik opisujący najlepsze i najgorsze praktyki dotyczące projektowania strony produktu, które pomogą Ci zaangażować użytkowników i ostatecznie zwiększyć współczynnik konwersji.

Najlepsze praktyki dotyczące strony produktu

Tworzenie genialnych stron produktów wymaga wiele, dlatego stworzyliśmy listę funkcji i koncepcji stron produktów, które uważamy za najważniejsze dla poprawy wrażenia odwiedzających, gdy są używane ze smakiem.

  • Czysty adres URL
  • Urzekająca nazwa
  • Przejrzyste i podane z góry informacje o cenach
  • Wezwania do działania o wysokiej widoczności (CTA)
  • Dostępność produktu
  • Różne opcje produktów
  • Wyraźne zdjęcia produktów z wieloma kątami kamery, sytuacjami i modelami
  • Możliwość porównania podobnych produktów
  • Przycisk „Dodaj do ulubionych/listy życzeń”
  • Wysokiej jakości, zoptymalizowane pod kątem sieci obrazy, filmy i gify
  • Sekcja FAQ
  • Funkcja powiększania
  • Rozszerzona Rzeczywistość
  • Widok 360°
  • Żywe opisy produktów
  • Funkcja czatu na żywo
  • Mieszanka mediów produktowych i lifestylowych do narracji fabularnej
  • Elastyczny projekt
  • Odpowiednia sekcja „produkty powiązane”
  • Sekcja „sprzedaż dodatkowa”
  • Możliwość zwiększenia ilości produktu
  • Przewodnik po rozmiarach/dopasowaniu (jeśli dotyczy)
  • Bezproblemowa nawigacja
  • Intuicyjne opcje filtrowania
  • Przyklejony przycisk „Powrót do góry”
  • Wysoce dostępny dla użytkowników o różnych umiejętnościach
  • Zasady dotyczące wysyłki i zwrotów z góry
  • Przyklejone przyciski „Dodaj do koszyka” lub „Kup teraz”
  • Dowód społeczny
  • Rozszerzone szczegóły (materiały, specyfikacje techniczne, wymiary, waga, cechy specjalne itp.
  • Brak redundancji
  • Przestronna i ciekawa czcionka
  • Szybkie czasy ładowania
  • Funkcjonalność wielu przeglądarek
  • Przyjazny dla trybu ciemnego

Jedno słowo ostrzeżenia - uważaj na pełzanie funkcji. Dzieje się tak, gdy strona przejmuje tak wiele niepotrzebnych funkcji, że szkodzi to ogólnemu doświadczeniu użytkownika. Funkcja rzeczywistości rozszerzonej może nie pomóc firmie sprzedającej wykałaczki, ale pomogłaby firmie sprzedającej duże meble. Poświęć trochę czasu na ocenę, które funkcje mogą pomóc w lepszej prezentacji Twojego produktu bez dodawania wszystkiego pod słońcem do swojej strony.

Najgorsze praktyki na stronie produktu

Rozpoczynając wdrażanie najlepszych praktyk w swojej witrynie, należy pamiętać o niektórych z najgorszych praktyk wymienionych poniżej. Koncepcje te mogą mieć różną wagę, od dezorientowania użytkowników przez użycie niebieskiego koloru czcionki hiperłącza dla zwykłego tekstu, po coś bardziej złośliwego, na przykład przemycanie niechcianych elementów do koszyka na zakupy.

  • Za dużo kolorów
  • Złożona cena
  • Niespójny projekt
  • Taktyka przynęty i zmiany
  • Ukryj dodatkowe opłaty
  • Za długi/za krótki lub skopiowany opis
  • Niespójne nazwy produktów
  • Fałszywe gwarancje
  • Polecaj nieistotne produkty
  • Zakopywanie wezwania do działania
  • Małe i słabej jakości obrazy, filmy, gify
  • Negatywna rozmowa/dowód społeczny
  • Powtarzające się wyskakujące okienka
  • Potwierdzam zawstydzenie
  • Skradanie się przedmiotów do koszyka
  • Niejasna nawigacja
  • Kompaktowa czcionka
  • Zajęta negatywna przestrzeń
  • Brak często zadawanych pytań
  • Brak dowodu społecznego

25 najlepszych stron produktów

Życie w rytmie

Co nam się podobało

  • Bardzo pouczające i łatwe rozwiązanie do określenia rozmiaru pierścionka.
  • Wielka presja społeczna (kanał na Instagramie, recenzje)
  • Opis jest lekkostrawny.

Co nam się nie podobało

  • Cena nie jest jasna
  • Przydałby się lepki przycisk „Kup teraz” na pulpicie
  • Nie stosuje żadnych technik sprzedaży dodatkowej
Strona produktu pierścienia Groove Life

Yeti

Co nam się podobało

  • Fajna funkcja, która pokaże Ci najbliższą lokalizację, którą możesz kupić
  • Unikalna typografia
  • Spójny branding

Co nam się nie podobało

  • Duża bezużyteczna biała przestrzeń pod galerią zdjęć
  • Nieprzyjemnie duża, lepka sekcja „kup teraz”
  • Nie używaj filmów ani gifów
Butelka na wodę Yeti

Prosty człowiek

Co nam się podobało

  • Świetne narzędzie nawigacyjne po lewej stronie ekranu
  • Sekcja przeglądu idzie w lewo i w prawo, zamiast rozwijać się w górę i w dół, wykorzystując mniej nieruchomości
  • Świetne wykorzystanie obrazów do sprzedaży funkcji i historii

Co nam się nie podobało

  • Brak lepkiego przycisku „kup teraz”
  • Brak sekcji upsellingowej, gdy specjalizują się w systemie/ekosystemie śmieci
  • Kolory CTA, nagłówków, recenzji i obrazów/plakietek nie mieszały się.
Prosty ludzki kosz na śmieci

Udekorowany

Co nam się podobało

  • Strona ułatwia poczucie wspólnoty wśród kupujących z doskonałym dowodem społecznym
  • Wiele CTA
  • Typografia pasuje do głosu marki z dopasowanymi ikonami

Co nam się nie podobało

  • Zdjęcia produktów mogły być lepiej zintegrowane w części zgięcia
  • Duża biała przestrzeń przy FAQ
  • Brakuje przyklejonego nagłówka, przycisku „Kup teraz” ani sposobu na przeskoczenie na górę
Przechowywanie ciężarówek z pokładem

Nanoliść

Co nam się podobało

  • Przyklejony nagłówek zawiera nawigację i przycisk „Sklep”, który ukrywa się również po przewinięciu w dół.
  • Niesamowita animacja przewijania nad zakładką
  • Doskonałe budowanie historii za pomocą obrazów
  • Tytuł strony zmienia się po przełączeniu kart

Co nam się nie podobało

  • W sekcji Dynamiczny efekt świecenia brakuje filmu
  • Wideo mogło zostać odtworzone bez otwierania okna
  • Duża, nieużywana biała przestrzeń pod zakładką
Nano Liść podświetlana grafika ścienna

Cięty

Co nam się podobało

  • Upsell, upsell i jeszcze więcej upsell!!
  • Świetne wykorzystanie kolorów
  • Dobre wykorzystanie gifów zamiast nieruchomych obrazów

Co nam się nie podobało

  • Niespójna cena
  • Sekcja recenzji odciąga Cię od strony produktu i nie ma dowodów społecznych
  • Ukryte zasady gwarancji/zwrotów/wysyłki, można użyć linków do dalszej lektury
Quip szczoteczka do zębów

DBrand

Co nam się podobało

  • Świetne opcje dostosowywania, które znajdują odzwierciedlenie na zdjęciach produktów.
  • Fantastyczne opowiadanie historii opowiedziane przez nieprzyzwoicie szorstki głos marki.
  • Przewijanie animacji ze zdjęciami w wysokiej rozdzielczości utrzymuje zaangażowanie użytkownika

Co nam się nie podobało1200

  • Bardzo ograniczone wezwania do działania
  • Żadnych up-sell ani cross-sell, tylko jedna sugestywna sprzedaż
  • Brak przyklejonego nagłówka lub przyklejonego przycisku „Dodaj do koszyka”
Etui na telefon Dbrand

Vessi

Co nam się podobało

  • Świetne animacje, zwłaszcza animacja eksplodującego buta
  • Ładny lepki nagłówek z przyciskiem „Dodaj do koszyka”
  • Fantastyczna sekcja recenzji, którą można rozbudować

Co nam się nie podobało

  • Kanał na Instagramie mógł być interaktywny
  • Obrazy mogły być powiększane po najechaniu kursorem, a nie po kliknięciu
  • Przyklejony nagłówek mógł pozwolić ci zmienić kolor
Buty do biegania Vessi

Marucci

Co nam się podobało

  • Szerokie możliwości dostosowywania, które aktualizują obraz produktu na podstawie wybranego wariantu
  • Obraz produktu przykleja się do górnej części ekranu
  • Minimalistyczny design, oferuje tylko to, czego potrzebujesz

Co nam się nie podobało

  • Brak przyklejonego przycisku „Kup teraz”
  • Mógł użyć ikon zaufania i więcej dowodów społecznych
  • Brak koloru i ogólnej kreatywności
Kij baseballowy Marucci

Rybołów

Co nam się podobało

  • Interaktywna i informacyjna sekcja „Funkcje specjalne”
  • Utwórz sekcję sprzedaży dodatkowej i sprzedaży krzyżowej
  • Doskonały przyklejony nagłówek z nawigacją i przyciskiem „Kup teraz”

Co nam się nie podobało

  • Bardzo długa sekcja recenzji
  • Zdjęcia produktów mogłyby być bardziej unikalne między wariantami
  • Duże puste kolumny boczne, które można by wykorzystać do rozwinięcia historii marki, której brakuje na stronie
Plecak Rybołów

Zespół Olufsen

Co nam się podobało

  • Dowód społeczny od ekspertów
  • Świetne wykorzystanie lepkich przycisków i nagłówków, niesamowite wykorzystanie up-sellingów na całej stronie w odpowiednich sekcjach
  • Niesamowite zdjęcia i filmy produktów

Co nam się nie podobało

  • Czy mogliby lepiej stylizować swoje tagi H?
  • Brak często zadawanych pytań „na stronie”
  • Brak opinii klientów
Głośnik zespołu Olufsen

Leatherman

Co nam się podobało

  • Doskonałe zdjęcia produktów
  • Sekcja „Narzędzia”, „Funkcje” i „Specyfikacje” jest interaktywna, intuicyjna i zawiera informacje
  • Zaangażowanie społeczności z @leathermantools na ich kanale na Instagramie

Co nam się nie podobało

  • Sekcja recenzji jest duża, również sekcja przeglądu najważniejszych wydarzeń jest zbędna
  • Żadna historia nie jest opowiadana
  • Nie ma niczego przyklejonego (oprócz czatu)
Narzędzie wielofunkcyjne Leatherman

SodaStream

Co nam się podobało

  • Partnerzy handlowi pokazu
  • Opis produktu to nie tylko akapit tekstu, ale podzielony na łatwo przyswajalne punkty
  • Sekcja porównawcza jest fajna

Co nam się nie podobało

  • Nadmierna biała przestrzeń
  • Brak odwołania użytkownika (bez historii, bez korzyści)
  • Brak organizacji / brak przepływu
Produkt Soda Stream

Herman Miller

Co nam się podobało

  • Użycie typografii po wyjęciu z pudełka
  • Świetne wykorzystanie wideo
  • Mnóstwo szczegółowych informacji ze świetnymi obrazami, które można z nim połączyć

Co nam się nie podobało

  • Lista rozwijana szczegółów produktu jest automatycznie otwierana, tworząc dużą ścianę zwykłego tekstu
  • Niespójne wyrównanie tekstu
  • Sekcja pytań i odpowiedzi dotyczących produktu i sekcja przeglądu powinny być rozwijane
Strona produktu krzesła Herman Miller

HURU

Co nam się podobało

  • Dobre wykorzystanie upsellingu
  • Dobrze wyjaśnij produkt za pomocą informacyjnych zdjęć i opisów
  • Przyjemna funkcjonalność koszyka, lepkie dodawanie do koszyka na dole pozwala dodać do koszyka, pozostając na stronie

Co nam się nie podobało

  • Sekcja recenzji powinna być niższa, klienci są do tego przyzwyczajeni
  • CTA nie ma koloru, ale ma fajną animację
  • Sekcja recenzji mogła zostać zminimalizowana
Huru plecak

JBL

Co nam się podobało

  • Najlepsza kasa samoprzylepna, jaką do tej pory widzieliśmy
  • Świetne wykorzystanie kolorów marki
  • Świetna sekcja porównawcza

Co nam się nie podobało

  • Suwak funkcji nie jest świetny, niespójny kolor, słaby przycisk Dalej
  • Przyciski na stronie prowadzą do osobnej strony
  • Nadmiarowe sekcje wsparcia
Strona produktu wkładek dousznych JBL

Korsarz

Co nam się podobało

  • Przyklejone przyciski, ale przyklejony nagłówek znika po przewinięciu w dół, aby zapewnić maksymalną nieruchomość dla reszty strony produktu. Pojawia się ponownie po przewinięciu w górę
  • Doskonałe wykorzystanie wideo na całej stronie
  • Przewijanie animacji ze zdjęciami i wezwaniami do działania w wysokiej rozdzielczości utrzymuje zaangażowanie użytkownika

Co nam się nie podobało

  • Nudne nad obszarem zagięcia w porównaniu z resztą strony
  • Brak sprzedaży dodatkowej lub sekcji sprzedaży krzyżowej
  • Powolna nawigacja po galerii zdjęć
Klawiatura korsańska

UgMonk

Co nam się podobało

  • G
  • Dobre wykorzystanie gifów zamiast nieruchomych obrazów
  • Dobre wykorzystanie up-sell i cross-sell
  • Dobre wykorzystanie dowodu społecznego

Co nam się nie podobało

  • Obrazy są zbędne
  • Przeglądanie produktu mogłoby być lepsze (sprowadza Cię na sam dół bez możliwości szybkiego powrotu)
  • Brak możliwości szybkiego zakupu produktu lub w dowolnym miejscu na stronie
Strona produktu notebooka UgMonk

Rzut

Co nam się podobało

  • Świetne poczucie wspólnoty na Instagramie
  • Bardzo mało zmarnowanej białej przestrzeni
  • Przyklejony nagłówek zawiera przycisk „Kup teraz”

Co nam się nie podobało

  • Sekcja Pitbulla polaryzuje
  • Sekcja członkostwa mogła użyć jakiejś sekcji interaktywnej
  • W Safari podczas próby przewinięcia galerii zdjęć występuje problem z zacinaniem się podczas przewijania
Rower treningowy Echelon

DJI

Co nam się podobało

  • Świetne oferty dodatkowe z atrakcyjnym przyciskiem „Kup teraz” z integracją oszacowania dostawy
  • Ładna sekcja „w pudełku”
  • Doskonałe wykorzystanie zdjęć w sekcji „Przyjrzyj się bliżej”

Co nam się nie podobało

  • Brak sekcji recenzji z niewielkim dowodem społecznym
  • Sekcja „Który jest najlepszy dla Ciebie” powinna zawierać linki do wymienionych produktów
  • Niewiele historii na stronie produktu
Strona produktu drona DJI

Parzyć Dr (20)

Co nam się podobało

  • Utrzymuje schemat kolorów na całej stronie, w tym gwiazdki w sekcji recenzji. Każda strona produktu ma unikalną kolorystykę opartą na stylu artystycznym
  • Dobra sprzedaż krzyżowa innych produktów
  • Fantastyczny dowód społeczny na całej stronie

Co nam się nie podobało

  • Brak sprzedaży dodatkowej (można sprzedawać towary)
  • Bardzo długa sekcja recenzji
  • Brak przyklejonego nagłówka lub przycisku „Powrót do góry”
Strona produktu Brew Dr kombucha

Cięcia

Co nam się podobało

  • Sekcja wyboru produktów jest zróżnicowana
  • Ogromna presja społeczna, mają nawet własny hashtag
  • Ich wideo wygląda płynnie wtapia się w stronę

Co nam się nie podobało

  • Niepotrzebnie duża sekcja recenzji
  • Brak historii/emocjonalnych powiązań z produktem
  • Brak lepkich przycisków „Kup teraz” ani możliwości przeskoczenia na górę
Koszula tnie

Alloi

Co nam się podobało

  • Zgrabne animowane statystyki dowodów społecznych
  • Może zminimalizować sekcję recenzji
  • Sekcja FAQ jest łatwa do odczytania i ładnie schowana

Co nam się nie podobało

  • Sekcja zaprojektowana do perfekcji może być interaktywna
  • Obraz produktu Przyciski „następny” i „poprzedni” zmieniają położenie na podstawie obrazu, przy wyborze różnych kolorów obrazy nie są przyciągane do właściwego koloru
  • Niewłaściwe użycie podkreślenia treści/tekstu, który nie prowadzi do niczego
Etui na telefon Alloi

Urządzenia do wydruku

Co nam się podobało

  • Przyjemny projekt strony
  • Ton kopii jest zrelaksowany
  • Ładnie zintegrowane filmy i obrazy

Co nam się nie podobało

  • Brak dowodu społecznego
  • Nie interaktywny, kiedy może być i może korzystać z większej liczby animacji
  • Brak dodatkowej sprzedaży
Strona produktu notebooka urządzeń do drukowania

Cholernie twardy

Co nam się podobało

  • Opcje dostosowywania są odzwierciedlone na zdjęciach produktów.
  • Fantastyczne opowiadanie historii opowiedziane przez nieprzychylnie obraźliwy głos marki.
  • Świetne wykorzystanie dowodu społecznościowego na Instagramie

Co nam się nie podobało

  • Brak przyklejonego przycisku „Kup teraz”
  • Brak sprzedaży dodatkowej
  • Ogromna sekcja recenzji
Strona produktu Darn Tough skarpety

Wniosek

Teraz, gdy skończyłeś przeglądać wszystkie nasze ulubione przykłady stron produktów, może być bardziej oczywiste, co odróżnia dobre wrażenia użytkownika od złego. Chociaż jesteś teraz wyposażony w wiedzę, aby tworzyć świetne strony produktów, nie ciągnij kapitana Ahaba i spędź całe życie na poszukiwaniu idealnej strony produktu. Zaoszczędzimy ci kłopotów, nie ma takiego. Po prostu pamiętaj o czasie odwiedzających i wiedzy o Internecie, abyś mógł przekroczyć ich oczekiwania.

Jeśli czujesz, że potrzebujesz dodatkowych wskazówek lub jeśli to wszystko jest zbyt przytłaczające, przestań wahać się nad swoimi marzeniami i już dziś skontaktuj się z naszym zespołem ekspertów ds. stron produktów w WebCitz!