Projektowanie interfejsu użytkownika w e-commerce: Jak tworzyć angażujące strony kolekcji produktów (6 praktycznych taktyk)

Wprowadzenie

Strony kolekcji produktów są niestety często pomijane zarówno przez projektantów, jak i copywriterów. Podczas gdy wiele wysiłku wkłada się w tworzenie niezwykle angażujących stron produktowych i stron docelowych, strony kolekcji pozostają na uboczu i pozostają żałośnie nieciekawe.

Przyjrzyjmy się sześciu praktycznym sposobom tworzenia stron kolekcji produktów, które angażują, inspirują do działania oraz zwiększają ruch i konwersje.

Upewnij się, że główne zdjęcie produktu jest angażujące

Pierwszą przeszkodą w projektowaniu stron z kolekcjami produktów, którą należy pokonać, jest zapewnienie, że zdjęcie główne jest angażujące i interesujące. Jeśli nie przyciągniesz uwagi kupującego praktycznie od razu po wylądowaniu lub w ciągu kilku przewinięć, prawdopodobnie go straciłeś.

Zacznij od rozważenia wszystkiego, co wiesz o swoich docelowych odbiorcach. Co im się podoba? Dlaczego lubią Twoje produkty? Co lubią w Twoich produktach? Jak można umieścić te cechy na pierwszym planie?

Następnie zacznij zastanawiać się nad układem. Czy obrazy muszą być powiększone? Czy wymagają żywego czy neutralnego tła? Ile produktów należy pokazać w rzędzie?

Idealnie byłoby przetestować A/B kilka wariantów projektu. Czasami najmniejsze zmiany mogą zrobić największą różnicę.

Spójrz na tę stronę z kolekcją odzieży dziecięcej. Same produkty są urocze i wciągające, więc nie muszą być prezentowane w jakiś szczególnie nowatorski sposób. Etykieta "new in" wyraźnie wyróżnia niektóre produkty i zapewnia, że kupujący je zauważy.

Ustawienie takich produktów na neutralnym tle to świetny sposób na ich wyróżnienie.

Źródło: mamasandpapas.com

Innym sposobem na to, aby główne zdjęcie na stronie kolekcji było angażujące, jest pokazanie przedmiotu w użyciu. Jeśli spojrzysz na tę stronę ze szklarniami, zobaczysz, jak można to zrobić bez wysiłku. Każdy obraz jest zupełnie inny, w innej palecie kolorów i pokazuje przedmiot pod innym kątem. Ułatwia to wyobrażenie sobie produktu we własnym domu.

Źródło: greenhouseemporium.com

Jest to świetna taktyka, jeśli chcesz ułatwić klientowi zobaczenie, jak będzie wyglądał produkt końcowy i pomóc mu wyobrazić sobie cały styl życia.

Upewnij się, że filtry nie są zbyt rozpraszające

Strony kolekcji wymagają filtrów, aby były użyteczne. Nie można oczekiwać, że klienci będą przeglądać kolejne strony produktów, aby znaleźć jeden konkretny produkt. Prawdopodobnie nie zdają sobie sprawy z szerokości oferty i mogą nie mieć czasu na długie zakupy.

Filtry powinny kategoryzować produkty w znaczący sposób. Cena, rozmiar i materiał to tylko niektóre z najczęściej używanych filtrów. Weź pod uwagę same produkty i czynniki je wyróżniające.

Im bardziej złożony produkt, tym więcej powinno być filtrów. Możesz również zaoferować pomocne filtry, takie jak "nie dla początkujących" lub "tylko dla profesjonalistów", jeśli pomogą one klientom wybrać odpowiedni produkt.

Filtry nie powinny też zbytnio rozpraszać uwagi. Powinny być łatwo dostępne, ale nie powinny zajmować dużej części strony ani w żaden sposób zakłócać przeglądania.

Spójrz na tę stronę z kolekcjami kompozytowych desek tarasowych. Filtry znajdują się po lewej stronie i zapewniają właściwą równowagę między łatwo zauważalnymi i nie przeszkadzającymi. Zwróć uwagę, że są one również składane, więc sama ilość informacji nie przytłoczy klienta.

Zostały one również uporządkowane w logiczny sposób - większość osób będzie chciała zawęzić kolory i materiały, zanim zagłębi się w bardziej szczegółowe szczegóły, takie jak rozmiar.

Źródło: Ovaeda.com

Możesz łatwo wdrożyć podobne rozwiązanie, które nie zajmie dużo miejsca, ale nadal znacznie poprawi komfort użytkowania i pozwoli klientom zawęzić wybór w ciągu kilku sekund.

Wyświetlanie krótkich opisów produktów po najechaniu kursorem

Pomyśl o stronach kolekcji produktów jako o centrum informacji. To tutaj wyświetlane są wszystkie produkty z danej kategorii. Im bardziej jesteś pomocny, tym większe prawdopodobieństwo, że klient dokona konwersji.

Staraj się nie zmuszać kupujących do klikania na przedmiot, czytania opisu produktu, a następnie klikania z powrotem. Muszą tracić czas na przewijanie, aby dowiedzieć się, gdzie właśnie skończyli. Lub, jeśli ciągle otwierają produkty w nowych kartach, wkrótce zostaną przytłoczeni liczbą przedmiotów, które próbują porównać.

Im więcej przydatnych informacji można wyświetlić na stronie kolekcji, tym lepiej. Dodając prosty, krótki opis produktu, gdy ktoś najedzie kursorem na produkt, możesz pomóc klientom porównać produkty od razu.

Ta strona z kolekcją bariatrycznych wapnia do żucia wykonuje świetną robotę. Otrzymujesz krótki opis produktu, informujący o tym, jakie witaminy i minerały można znaleźć w produkcie. Podkreślone są również korzyści: świetnie smakuje, wspomaga odporność i tak dalej.

Źródło: Bariatricfusion.com _.

Zwróć uwagę, jak krótkie są opisy. Można je przeczytać w kilka sekund i kontynuować porównywanie produktów.

Stosując tę taktykę, należy dokładnie rozważyć opis po najechaniu kursorem. Nie musi on być taki sam jak opis na stronie produktu. Powinien on krótko omawiać korzyści lub kluczowe cechy produktu, wyraźnie odróżniając go od innych produktów na stronie.

Skoncentruj się na informowaniu, a nie na sprzedaży. Klienci są bardziej skłonni do konwersji, jeśli są pewni swojego wyboru.

Dodaj trochę dowodu społecznego

Dowód społeczny to świetne narzędzie do tworzenia bardziej angażujących i pomocnych stron. Pokażą one klientom, że jesteś godny zaufania, niezawodny i że Twoje produkty są dobrej jakości. Jest to szczególnie ważne dla nowych klientów, którzy nie są jeszcze zaznajomieni z Twoją marką i mogą być bardziej niezdecydowani, aby dokonać konwersji.

Dowód społeczny występuje w wielu formach, ale oceny gwiazdkowe są najbardziej przydatnym rodzajem dowodu, który można umieścić na stronach kolekcji. Będą one służyć kilku celom:

• ocenić jakość poszczególnych produktów
• pokazać, ilu klientów dokonało zakupu i poświęciło czas na jego ocenę
• pomagać klientom w podejmowaniu szybszych decyzji zakupowych

Oceny gwiazdkowe są łatwe do włączenia. Sprawdź stronę kolekcji palet cieni do powiek Sephora. Są łatwe do zauważenia i wyświetlają wszystkie istotne informacje: ile jest recenzji i jakie jest ogólne zadowolenie z produktu. Można również wyraźnie zobaczyć, że jedna z tych palet jest znacznie bardziej popularna niż inne.

Źródło: sephora.com

Kolejnym świetnym sygnałem dowodu społecznego, który można włączyć na stronach kolekcji, są powiadomienia o sprzedaży w czasie rzeczywistym.

Sprawdź tę niestandardową stronę z naklejkami na laptopa. Podczas przeglądania, w prawym dolnym rogu pojawia się dyskretne wyskakujące okienko informujące o tym, kto dokonał zakupu na stronie, skąd pochodzi i co kupił.

Jest to świetny sposób na dodanie odrobiny FOMO do taktyki marketingowej. Klientom będą pokazywane inne produkty, które są wyraźnie popularne, ponieważ ktoś właśnie je kupił. Będzie to również silny sygnał zaufania i wiarygodności.

Upewnij się, że wyskakujące okienko nie jest zbyt krzykliwe lub rozpraszające. Postaraj się również rozmieścić je tak, aby nie denerwowały kupujących.

Źródło: vinylstatus.com

Wyświetlanie wielu widoków produktów

Im lepiej klienci są w stanie zobaczyć produkt, tym większe są szanse, że dokonają konwersji. Im więcej zdjęć przedmiotu wyświetlisz na stronie kolekcji, tym większe zaangażowanie i zainteresowanie wygenerujesz.

Możesz dołączyć więcej niż jeden obraz na kilka sposobów. Możesz zezwolić na przewijanie galerii produktów lub wyświetlać inne zdjęcie po najechaniu kursorem.

Ta strona z odzieżą chłopięcą od H&M zawiera przewijaną galerię produktów. Możesz zobaczyć wszystkie zdjęcia, które są prezentowane na stronie poszczególnych produktów bezpośrednio ze strony kolekcji, więc nigdy nie musisz klikać.

Źródło:hm.com

Jeśli wolisz wyświetlać inne zdjęcie po najechaniu kursorem, sprawdź tę stronę z kolekcją strojów plażowych dla inspiracji. Marka sprytnie pokazuje tył produktu po najechaniu kursorem, dzięki czemu można zobaczyć cały element bez konieczności otwierania innej strony. To świetna taktyka dla marek odzieżowych.

Źródło:simplybeach.com

Wybierając, czy dodać galerię, czy zdjęcie po najechaniu kursorem, należy wziąć pod uwagę charakter przedmiotu. Ile zdjęć musi zobaczyć kupujący? I jakie powinny to być zdjęcia?

Możesz pokazać używany produkt lub zamieścić zdjęcia klientów, jeśli jest bardziej prawdopodobne, że przekonają one nowego kupującego. Możesz pokazać produkt z bliska, a nawet podać jego specyfikację.

Wyświetlanie ostatnio oglądanych przedmiotów

Rekomendacje produktów są zwykle zarezerwowane dla poszczególnych stron produktów. Jest to również miejsce, w którym marki umieszczają karuzelę "ostatnio oglądanych".

Jednak umieszczając je na stronie kolekcji, możesz delikatnie przypominać klientom o przedmiotach, które już widzieli i polubili. Zaoszczędzisz im czasu i wysiłku związanego z przeglądaniem historii wielu otwartych jednocześnie kart.

Sprawdź stronę męskich butów do biegania Adidas. Gdy tylko zobaczysz pojedynczy produkt, na dole strony kolekcji pojawi się funkcja "ostatnio oglądane", która pomoże Ci mieć oko na przedmioty, które wzbudziły Twoje zainteresowanie.

Źródło: adidas.com

Ta sama karuzela jest również wyświetlana na poszczególnych stronach produktów, dzięki czemu przeglądanie jest dostosowane do indywidualnych potrzeb.

Możesz także polecać produkty klientom na podstawie oglądanych przez nich pozycji, podobnie jak na stronach produktów.

Podsumowanie

Zastanów się, które z tych taktyk projektowania stron kolekcji produktów możesz wdrożyć na własnych stronach. Być może wszystkie sześć może odegrać rolę w zwiększeniu współczynników konwersji.

Zawsze miej na uwadze charakter swoich produktów i bolączki odbiorców. Czego szukają i jak Twoje działania projektowe mogą pomóc im to znaleźć?