Położenie ma znaczenie – o sekcjach sklepów internetowych

User experience
Położenie ma znaczenie

Sklepy internetowe mają wiele wspólnych czynników – przede wszystkim sekcje, które budują jedną, spójną całość. Ich obecność to sprawa oczywista, ale nie zawsze oczywiste jest ich rozmieszczenie. Czy złe położenie sekcji sklepu internetowego może negatywnie odbijać się na zadowoleniu klienta?

Na samym początku rozważań przyjrzyjmy się temu filmowi:

Co tutaj jest nie tak?

Zwróćcie uwagę na kolejność sekcji na karcie produktu w sklepie NEONET. Zaczyna się dobrze – zdjęcie produktu, podstawowe wymiary oraz parametry techniczne, cena, przycisk dodania do koszyka – jest tak jak ma być. Co jednak widzimy dalej? Reklama > Polecane zestawy > Akcesoria > Opis produktu > Specyfikacja > Usługi > Opinie > Formularz oceny produktu > Zakupy na raty > Podobne produkty.

O ile sama obecność ww. elementów nie jest zła, to już kolejność tak. Należy zauważyć, że sklep NEONET serwuje użytkownikom polecane zestawy produktów oraz akcesoria do wybranego produktu jeszcze zanim tak naprawdę dowiemy się co oferują. W pierwszej sekcji karty produktowej mamy bowiem tylko zalążek informacji na temat produktu, a ich rozwinięcie znajduje się nie na drugim miejscu jak powinno, a w dalszej części. Dla osób, które rzeczywiście zainteresowane są zakupem (a przecież to na tych osobach najbardziej zależy sprzedawcy) mogą szukać szczegółowych opisów zastosowanych technologii, informacji na temat opcji dostępnych w danym modelu produktu czy detali opisujących budowę, wymiary, wagę czy zastosowanie. Z jakiej racji użytkownik ma zainteresować się zestawem produktów lub akcesoriami doń, jeżeli jeszcze nie poznał informacji na temat tego co widzi w swojej karcie? Celem sklepu internetowego jest oczywiście sprzedaż, aby ale była skuteczna należy najpierw zrozumieć potrzeby użytkowników.

Sklepy, które nastawione są na sprzedaż towarów, których nie kupujemy na co dzień (stanowiących znacznie większy ułamek wypłaty niż małe zakupy w sklepie spożywczym) – powinny myśleć przede wszystkim o zainteresowaniu klienta samym produktem, a nie raczeniem go promocjami czy super ofertami, jeżeli potencjalny klient nie wie jeszcze co właściwie widzi przed sobą. Najważniejsza zatem jest faza poznawcza.

Drugim istotnym elementem jest specyfikacja produktu, która powinna znajdować się tuż obok opisu produktu, razem stanowią bowiem integralną całość.

Na trzecim miejscu powinniśmy znaleźć elementy UGC – w tym przypadku opinie użytkowników. Są one nieodzownym elementem e-sprzedaży na etapie bliskim dodania produktów do koszyka. Jeżeli jesteśmy już niemal zdecydowani chcemy przynajmniej rzucić okiem na informacje od innych osób, które już miały okazję testować dany produkt. Być może umocnią nas w przekonaniu, że nie wydamy pieniędzy w błoto, a może również odwiodą od zakupów.

Za opiniami może znajdować się formularz do ich wstawienia. Następnymi w kolejności elementami mogą być zestawy produktów lub zestawy akcesoriów – w analizowanym przykładzie obecne w sklepie NEONET.

Za nimi powinno się umieścić sekcję produktów polecanych, a dopiero później sekcję zakupów na raty.


Bardzo podobną sytuację jak w przypadku NEONETU, możemy zaobserwować w sklepie RTV EURO AGD:

RTV EURO AGD karta produktu

Stosowanie kolejności jaką zauważymy na kartach produktów ww. sklepu nie jest uzasadniona. Sama obecność elementu to nie problem, o ile jednak znajduje się w odpowiednim miejscu.

Wykorzystanie miejsca

Przykładem sklepu internetowego, który dobrze wykorzystuje przestrzeń jest Kazar.

Kazar karta produktu

Na karcie produktowej sklepu Kazar możemy znaleźć wszystko to, co stanowi podstawę do zakupu: zdjęcia, specyfikację (tutaj rozsuwaną), informacje o dostawie i płatności oraz oczywiście przycisk dodania do koszyka. Z punktu widzenia sprzedaży istotnym ficzerem jest również możliwość sprawdzenia dostępności produktów w salonach marki.

Zasada 2 scrolli / 3 swipe’ów

Aby nie nudzić użytkownika, dobrze jest zastosować zasadę 2 scrolli / 3 swipe’ów. Wszystkie informacje na temat produktu, wraz z jego zdjęciami powinny zmieścić się w obszarze, który możemy zobaczyć wykonując 2 scrolle / 3 swipe’y od momentu załadowania karty. O ile zwykle w wersji desktopowej karta produtku zmieści więcej elementów, o tyle w wersji mobile musimy przesunąć ekran zwykle więcej razy niż 2. Jeżeli zmieścimy wszystkie informacje na temat produktu w 3 przesunięciach to możemy być pewni, że nie znudzimy użytkownika zbyt szybko. Do ww. czynności nie włączymy wszystkich elementów, które nie stanowią integralnego elementu prezentacji produktu per se – np. podobnych produktów, zakupów na raty itd.

Dobrym przykładem takiego wdrożenie jest sklep Eobuwie.

Eobuwie karta produktowa

Na powyższych materiałach widać ile należy wykonać scrolli aby w całości zapoznać się z produktem. Na Eobuwie są to 2 scrolle w przypadku wersji desktopowej, na wersji mobilnej – 3 swipe’y. To optymalna ilość ruchów użytkownika, które należy wykonać. Więcej wymaganego ruchu obniża jego zaangażowanie oraz zainteresowanie produktem, zwiększa również dysonans poznawczy co w konsekwencji może prowadzić do odwodzenia od decyzji zakupowej.

Skanowanie wzrokiem

Ten element projektowania sekcji strony internetowej nierozerwalnie wiąże się się ze sposobem prezentacji treści. Według badań heatmapowych wykonanych przez NNG, najpopularniejszym modelem skanowania wzrokiem informacji na stronie jest tzw. „F-shaped pattern”, który polega na obserwowaniu elementu od górnej lewej części do prawej i następnie powtarzanie tego procesu ze zmniejszeniem ilości aktywności w prawej sekcji wraz ze scrollowaniem w dół.

F shaped pattern
Źródło: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/

Wiele stron internetowych do dziś projektowanych jest w myśl wzoru „F”, przykładem może być np. Tripadvisor:

F shaped pattern Trip advisor

Kluczowe elementy pierwszego etapu poznawczego znajdują się na samej górze, zaś kolejne, które będą interesować użytkownika znajdują się w niższych liniach, zaś to co istotne – tutaj: oceny, lokalizacja, kontakt – bliższe są lewej krawędzi.

Przykładów zastosowania projektowania layoutu w myśl wzoru „F” jest oczywiście wiele, spójrzmy na przykład ze sklepu lazienkaplus.pl:

lazienkaplus.pl

To co istotne, znajduje się w pełnej szerokości na samej górze karty produktowej, kolejne kluczowe informacje znajdują się w niższych liniach, znów koncentrując się na lewej krawędzi.


Podsumowanie

Miejsce ulokowania konkretnych sekcji karty produktowej w e-sklepach to istotna sprawa. Decyzja o umiejscowieniu oraz zaprojektowaniu danej sekcji może wpływać na tempo przyswajania informacji czy etap poznawczy. Wielu użytkowników jest przyzwyczajonych do schematów w projekcie layoutu, a odstępstwa od tych schematów mogą powodować zagubienie czy rozdrażnienie. Udowodniono również, że projektowanie sekcji na stronach www powinno wynikać z badań nad zachowaniem użytkowników – skanowanie wzroku tekstem czy poszukiwanie znanych elementów strony w „standardowych” miejscach jest podobne wśród wielu z nas.

Ostatnio zmodyfikowano: 31 marca 2019

Radek Skowron

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