25 rozwiązań, które warto implementować w e-commerce

User experience
Customizacja butów Adidas

Sklepy internetowe to bardzo bogate źródło wszelakiej informacji na temat produktów. Ich mnogość sprawia, że często decydujemy się na równoległe poszukiwanie towarów w wielu miejscach. Niektóre z nich wykorzystują rozwiązania techniczne, które sprawiają, że łatwiej im zatrzymać potencjalnego klienta na dłużej.


→ Poniższa lista została przygotowana w kolejności losowej.

1. Pytania i odpowiedzi

Z takim rozwiązaniem możemy spotkać się w sklepie Amazon. Pod towarami dostępnymi w sklepie, mamy możliwość zarówno zadawać pytania, jak i na nie odpowiadać. Wśród odpowiadających znajdą się nie tylko klienci Amazona, ale także marki wykorzystujące oficjalne konta.

Acer America Amazon

amazon pytania

2. Liczba zamówień

Wykorzystywane np. w AliExpress rozwiązanie, pozwala na przedstawienie łącznej liczby zamówień danego towaru na danej aukcji. Pozwala to na szybkie rozeznanie się z kontekście popularności produktu oraz samego sprzedawcy. Ilość liczby zamówień może dodatnio wpływać na decyzję zakupową.

aliexpress-zamowienia

3. Autopowiększenia

Automatyczne powiększenia zdjęć po najechaniu myszką lub touchpadem prezentujących produkt, są sposobem na łatwe zobrazowanie szczegółów, co jest istotne przede wszystkim w przypadku produktów małych lub posiadających detale, których sposób wykonania czy wygląd jest istotny dla kupującego. Jednym ze sklepów internetowych, który wykorzystuje hover zoom jest Ebay:

autopowiększenie Ebay
W lewej części screenshota widzimy zdjęcie w oryginalnej wielkości, natomiast po prawej stronie – po najechaniu myszką/touchpadem.

Tutaj możemy to zobaczyć na filmiku:

4. Breadcrumbsy

Breadcrumbsy, czyli tzw. okruszki, to element nawigacji strony, który występuje często paralelnie z tradycyjnym menu. Orkuszki to proste menu nawigacyjne, która pozwala zobrazować użytkownikowi, w którym „submenu” obecnie się znajduje. Wszystkie elementy tegoż menu najczęściej są klikalne (a już na pewno powinny być), co ułatwia szybkie przejście do kategorii nadrzędnej. Poniżej przykład ze sklepu marki Big Star:

Big-Star-Breadcrumbsy

5. Tagi produktowe

Rozwiązanie, które opisuję w tym podpunkcie, stosowane jest raczej rzadko, ale dla osób, które nie mają jasno sprecyzowanego celu zakupowego, jedynie pewną wizję – może być interesującym. Tagi produktowe to po prostu etykiety, które przypisane są do danego produktu. Wyrażać można w nich styl produktu, kolor, nawiązania itp. Przykład na screenshocie pochodzi ze sklepu Dawanda:

Dawanda-Tagi

6. Analiza możliwości dostawy pod adres

Rozwiązanie, które opisuję poniżej, dotyczy głównie sklepów sieciowych, które poza sprzedażą online, prowadzą także sprzedaż stacjonarną. Na stronie e-sklepu klienci mają możliwość sprawdzić, czy na ich adres możliwa jest dostawa wybranych produktów. W sieciówkach meblarskich, wnętrzarskich, budowlanych czy RTV/AGD to raczej standard, poniżej ilustruje go Ikea:

Ikea transport

7. Mapa strony

Elementem nawigacyjnym strony, ale nie stojącym na tym samym stopniu co breadcrumbsy, jest mapa strony. Rozwiązanie, które proponuje np. Allegro pozwala na przejrzenie większości głównych linków wewnętrznych sklepu. Umożliwia to np. szybsze znalezienie poszukiwanej kategorii.

Mapa strony Allegro

 

8. Podgląd opisu produktu

Rozwiązanie, które znalazłem na stronie Komputronika nie jest popularne, ale z pewnością pomaga szybko zdecydować się na przejście do karty produktu, w celu poznania detali, lub przejścia do kolejnego opisu. Podgląd opisu produktu pojawia się po najechaniu myszką/touchpadem na zdjęcie:

komputronik komputery

9. Wiele podglądów na karcie produktu

Przez podgląd rozumiem tutaj zobaczenie kolejnych zdjęć prezentujących produkt, które nie wymagają przeklikiwania. Sposób, który prezentuje AliExpress wymaga jedynie najeżdżania na obrazy myszką/touchpadem:

 

10. Dwie wersje poglądu na stronie kategorii

Pozostając w temacie podglądów, chciałbym wspomnieć o dość popularnym rozwiązaniu, które przeważnie stosują sklepy z odzieżą lub obuwiem. Produkty w tych kategoriach zakupowych muszą prezentować się estetycznie i zwyczajnie zachęcająco, dlatego też sklepy internetowe pozwalają na zobaczenie podglądu w dwóch wersjach:

a) standardowy obraz

b) zmiana po najechaniu myszką/touchpadem

Przykład Zalando:

11. Render 3D

Nietypowym, niestety nieco zasobożernym rozwiązaniem, jest prezentacja produktów w trójwymiarze. W sklepie Zenox możemy spotkać się z renderem 3D produktu. Technologia trójwymiaru przedstawiana jest w e-commerce w różnym ujęciu, w wypadku Zenoxa najprawdopodobniej wykorzystano „ofotografowanie” produktu dookoła oraz połączenie zdjęć:

12. Filtry live

Wszystko co dzieje się w e-commerce w trybie rzeczywistym, bez przeładowywania to zdecydowanie feature na korzyść klienta. Szybki podgląd zdjęć, danych, informacji o dostawie czy wyszukiwanie z podglądem pozwala sprawniej poruszać się po strukturze sklepu. Jednym z ciekawszych rozwiązań w tej materii jest filtrowanie w trybie live, które zaobserwowałem na stronie Bershki:

Po przesunięciu suwaka z ceną, która nas interesuje, znikają kolejne (tańsze) produkty, które nie spełniają wymogów filtra.

13. Skalowanie rat

Kolejnym rozwiązaniem „live” jest skalowalność rat, dostępna np. w RTV EURO AGD:

Tutaj możemy wykorzystać suwak, która w trybie real-time obliczy za nas wysokość rat w wybranym okresie kredytowania.

14. Wyszukiwarka AJAXowa

Bardzo wygodne rozwiązanie, które implementowane jest w niektórych wyszukiwarkach wewnątrz sklepów internetowych. AJAXowe wyszukiwanie, tj. z wykorzystaniem asynchroniczności, zapobiega przeładowywaniu się zasobów i zwraca użytkownikowi wyniki na bieżąco. Wystarczy wpisać jedną literkę, aby otrzymać wynik najbardziej zbliżony do naszych założeń, przykład pochodzi z RTV EURO AGD:

RTV EURO AGD wyszukiwarka AJAXowa

 

15. Grupowanie i „zobacz więcej” dla działu informacji

Niektóre produkty w e-sklepach zobrazowane są nie tylko poprzez dużą galerię zdjęć. Posiadają również sporo informacji, np. o sposobie wykorzystania, właściwej pielęgnacji, zastosowanych materiałach itd. W e-commerce wszystkie dane można łatwo pogrupować oraz przekazać je tak, aby się nie narzucały. W sklepie marki Recman wykorzystano podział na buttony, który po kliku pokazują szczegóły:

Recman informacje o produkcie

 

Recman informacje o produkcie wiecej

16. Przejście do produktu B z produktu A

Kiedy przebywamy na stronie konkretnego produktu z danej kategorii, często przeglądamy również produkty pokrewne. Niektóre sklepy pomagają użytkownikowi w sprawniejszym poruszaniu się w takiej sytuacji. Ryłko na kartach swoich produktów posiada przyciski, które pozwalają na przejście do kolejnego produktu z tej samej kategorii, a który umiejscowiony jest jako kolejny na liście:

Ryłko następne produkty

17. Demo produktu

Na temat dema danego produktu w e-commerce możemy rozmawiać tylko w przypadku niektórych kategorii. Większość produktu zwyczajnie nie posiada możliwości przetestowania z uwagi na swój charakter. Są jednak produkty, które możemy przetestować, np. muzyka czy książki. Taką możliwość wprowadził Empik, pozwalając klientom przeczytać kilka pierwszych stron wybranej książki:

Empik-demo

18. Poradniki

Sklep internetowy powinien nie tylko informować o wszystkim co związane jest z danym produktem, ale również pomagać użytkownikowi zdecydować się na konkretny towar. Metodą wspomagającą powyższy cel są poradniki. Allegro oferuje użytkownikom całą ich masę, dzięki czemu jesteśmy w stanie dowiedzieć się więcej na temat funkcjonalności kilku produktów, porównać je ze sobą czy zrozumieć mechanikę ich działania.

Poradniki-Allegro

 

19. Promocje okolicznościowe

Feature dedykowany osobom, które lubią dokonywać zakupów na okazje specjalne. Promocje okolicznościowe w e-commerce to dla właścicieli sklepów ważny element przyciągania zarówno lojalnych jak i zupełnie nowych potencjalnych klientów do kart swojego sklepu. Produkty podpięte pod dział promocji często nie tylko są tańsze, ale również cechują się zupełnie innym wyglądem. Przykładem takiego rozwiązania jest Ebay:

Promocje-okolicznościowe-Ebay

 

20. Listy życzeń

W odróżnieniu od koszyka, listy życzeń pozwalają na tworzenie listy produktów, które nas interesują, ale nie pozwala na sumowanie ich cen, co psychologicznie wpływa na lepszy odbiór sklepu. Użytkownik, który nie jest „jedną nogą” przy kasie, może swobodnie gromadzić produkty, które mu się podobają ale nie musi myśleć o tym, że licznik podsumowujący jego listę rośnie. Poniższe zrzuty pochodzą ze sklepu Reserved:

Reserved listy zyczen z koszykiem
Lista życzeń pod postacią serca, koszyk – z widoczną ceną.

 

Reserved listy zyczen

 

21. Znak wodny

Duże e-commerce często posiadają własny dział zajmujący się fotografią produktową. O ile sam wizerunek produktu to dobro nadrzędne producenta, o tyle sposób prezentacji to własność intelektualna sprzedawcy. Z tego względu znaki wodne mają szczególną zaletą – praktycznie uniemożliwiają kopiowanie zdjęć oraz ich dalszą dystrybucję.

Wykorzystanie znaku wodnego jest widoczne np. w RTV EURO AGD:

RTV EURO AGD znak wodny

Na pierwszy rzut oka, można stwierdzić, że zapewne zdjęcie słuchawek nie odróżnia się niczym od tych ze strony producenta, jednak wystarczy wyszukać nazwę modelu w grafice Google aby zauważyć, że wiele zdjęć jest do siebie podobnych, ale nie są to takie same ujęcia:

Słuchawki Razer

22. Opinie i oceny

Wiele osób jest świadomych tego, że opinie w e-commerce nie zawsze są prawdziwe, jednakże totalny brak możliwości ich wystawienia to błąd. Możliwość dodania opinii to nie tylko sposób na zwiększenie wiarygodności sklepu, ale również lepszy wygląd w wynikach Google (tzw. rich snippets) + uruchomienie opcji sortowania po ilości opinii, których to ilość jest kusząca dla wielu osób buszujących po sklepach. Przykład ze sklepu Yes ilustruje, że w łatwy sposób można zaprezentować nie tylko ilość opinii ale również podział tej ilości na konkretne oceny (tu: od 1 do 5 gwiazdek):

Yes opinie

23. Tytuł w wyszukiwarce

Odbiegnijmy nieco od zawartości sklepu na rzecz przyjrzeniu się jego „okładki” w Google. Przykład Saturna ilustruje w jaki sposób można zintensyfikować rozpowszechnianie hasła, które w reklamach pojawia się cały czas – w tym wypadku mowa o „Technologia tak ma!”. Duże marki nie muszą silić się w tym miejscu na wprowadzanie słów kluczowych w meta dane sklepu, ponieważ siła marki jest na tyle duża, że większość kupujący kojarzy brand i nie ma w zamiarze znalezienia strony głównej po wpisaniu słowa kluczowego (ale podstrony kategorii już tak).

Saturn Google meta title

24. Siła minimalizmu

Minimalizm w sklepach internetowych przejawia się pod postacią możliwie najmniejszej ilości contentu. Wydźwięk marki (oraz jej moc) wpływa jednak na to, że mimo niewielkiej ilości informacji, np. na stronie głównej, użytkownik i tak jest zainteresowany zakupem i spokojnie przechodzi z karty do karty. Dla przykładu, główna strona Apple to zestawienie kilku obrazów połączonych z hasłami sprzedażowymi. Kolejne strony – np. karta produktu iPhone 8 to przede wszystkim przedstawienie najważniejszych cech towaru. Cennik i wybór konkretnego modelu do dopiero kolejna podstrona.

iPhone 8

25. Customizacja produktów

O customizacji produktowej można by stworzyć zupełnie odrębny artykuł, bo jest to wyjątkowo interesująca możliwość zaimplementowana w niewielu sklepach. Jednym z nich jest Adidas, który dla niektórych modeli produktów pozwala przejść do opcji dopasowywania ich wyglądu do własnych potrzeb. Na poniższym filmiku zaprezentowałem możliwości customizacji butów modelu Superstar:


 

Podsumowanie

Możliwości konfiguracji, prezentacji, tworzenia opcji, filtrów czy customizowania e-commerce są tak różnorodne, jak zaawansowane są prace programistyczne nad silnikiem sklepu. Nowinki technologiczne pozwalają sprawniej przemieszczać się po sklepie i odkrywać dokładnie to, czego poszukujemy. Ciekawe zastosowania prokonsumenckie poprawiają sprzedaż oraz zwiększają czas pobytu na stronie, a tym samym wspomagają docelową konwersję. Warto zwrócić także uwagę na unikalne rozwiązania, która przypisać można konkretnym markom – jak minimalistyczny styl Apple czy demo w Empiku.

PS: jak Wam się podoba wykorzystanie filmików w artykule? Czy taka funkcjonalność poprawia klarowne przedstawienie opisywanych elementów? 🙂

Ostatnio zmodyfikowano: 30 sierpnia 2018

Radek

Z marketingiem internetowym związany od 2014 roku. Specjalizuje się w SEO oraz komunikacji wizerunkowej. Zainteresowany UX, designem, programowaniem oraz innowacyjnymi technologiami.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Załaduj więcej z działu User experience