9 prostych ćwiczeń, które sprawdzą użyteczność Twojego e-sklepu!

Ecommerce jest chyba najbardziej usystematyzowaną branżą internetów (no… może poza wydawcami). Co w naszym wypadku znaczy ‚usystematyzowana’? Nic innego jak wierne podążanie za szablonami, guideline’ami. Często jednak przy tym niepozwalanie sobie na innowację.


Ale nie o innowację tu chodzi, tylko o pieniądze. I tu ważna rzecz, z której musimy zdać sobie sprawę – niezależnie od tego, czy skorzystaliśmy z super szablonu – nie gwarantuje nam tego, że nasza strona będzie konwertować i nie pojawią się błędy związane z UX. Problemy wynikające z niedostosowania witryny do potrzeb swoich klientów. I na tych błędach chciałbym się skupić w tym wpisie. A tak naprawdę chciałbym przedstawić kilka prostych ćwiczeń, za pomocą których nawet osoba będącą laikiem w kwestiach UX zobaczy, co nie działa na stronie i jak to naprawić.

Przygotowanie


Spróbujmy spojrzeć na Twój sklep internetowy. Otwórz go w nowej zakładce. A najlepiej w ogóle (jeśli dysponujesz dużym ekranem) otwórz go w osobnym oknie, byś mógł cały czas zerkać tam czytając ten wpis. Dobra – w nowej zakładce też jest ok ;)


Za chwilę pokażę Ci kilka prostych ćwiczeń, które pomogą zbadać Twoją stronę. Nie są to jakieś wielce ustandaryzowane metody badawcze i nie jest to coś, za co zapłacisz nam, jeśli przyjdziesz po badanie i rekomendacje projektowe do Uxerii (w których wymiatamy ;)). Jest to coś prostego, co można zrobić tu i teraz.

ĆWICZENIE 1 – Indeksacja wyszukiwarki


Na pewno w swoim sklepie masz wyszukiwarkę. Wpisz w to pole trzy kolejne słowa: nazwa jakiegoś produktu (lub marki), nazwa kategorii, nazwa filtru. Przykładowo może to być:

  • „niebieskie jeansy G-Star” / „koszulka Diesel M”
  • „lodówka wolnostojąca z kostkarką”
  • „lampa podłogowa drewniana”


Jeśli po wyszukiwaniu Twój sklep zwraca pusty wynik (brak produktów) – to jest błąd krytyczny, który powinieneś natychmiastowo naprawić. Twoja wyszukiwarka powinna indeksować złożone frazy.


Jeśli po wyszukiwaniu Twój sklep zwraca listę produktów nie zawężając do kategorii i filtra (czyli np. faktycznie wyświetli koszulki, ale nie G-star, lub wyświetli lodówki pod zabudowę) to nie ma tragedii – zwłaszcza jeśli pomagasz zawęzić kryteria wyszukiwania filtrami. Natomiast powinieneś umożliwić również wyszukanie po cechach produktu – znacznie ułatwi to dotarcie do pożądanych produktów – a co za tym idzie – realizację mikro-celu klienta.

ĆWICZENIE 2 – Ilość pozycji nawigacji


Na pewno masz też w swoim sklepie nawigację. Pewnie masz też kilka różnych nawigacji (mam na myśli taką na lewym pasku, na górze, albo jeszcze na górze górze (najczęściej mało widocznymi szarymi linkami).


Zmruż oczy i spójrz na stronę główną. Która z nawigacji jest najbardziej widoczna i rzucająca się w oczy? Mówię o wyborze tylko jednej. Teraz policz, ile zawiera pozycji. Raz, dwa, trzy, cztery, pięć, sześć, siedem, osiem, dziewięć, … stop. Tyle powinna zawierać nawigacja Twojego sklepu.


Otóż chodzi o to, że nasz mózg jest w stanie zapamiętać jednocześnie dziewięcioelementowy zbiór danych w pamięci podręcznej (a dokładniej 7 plus/minus 2). Jeśli jest ich więcej – 10, 15, 37 – niezależnie od liczby czytając kolejny już nie pamiętamy pierwszego. Ale nie chodzi tu tylko i wyłącznie o pamiętanie pierwszego, co bardziej o odczucie, które za tym idzie – w takiej sytuacji odczuwamy brak kontroli nad poznanym zbiorem, a co za tym idzie – dyskomfort emocjonalny.


Staraj się, by w ramach jednorodnych typów informacji (nawigacje, listy filtrów, itp.) prezentować zbiory do ośmiu/dziewięciu elementów.


Oczywiście w tym wypadku projektanci często idą na skróty – zamiast skracać listy filtrów, np. pokazują pierwszych 5-9 pozycji i dodają link ‚pokaż więcej’, lub podobnie w nawigacji nieraz umieszcza się więcej opcji ukrytych pod jakimś elementem.

ĆWICZENIE 3 – Jakość nawigacji


Przeanalizujmy nawigację ponownie – ale tym razem pod kątem merytorycznym. Do tego ćwiczenia potrzebujesz dużej kartki (minimum A4, ale lepiej jakbyś miał A3/A2) oraz zestawu post-itów (im mniejsze tym lepsze).


Wejdź do Twojego sklepu w każdą z kategorii produktowych i wypisz po 3-5 dowolne nazwy produktów z każdej podkategorii – każdy na osobnym post-icie. W sumie tych post-itów może się nam zrobić nawet z 30-50 sztuk – to nie problem. Potasuj kartki (by podobne produkty niekoniecznie znajdowały się jeden po drugim).


Na dużej kartce papieru z kolei narysuj górny plan przykładowego supermarketu – czyli alejka pośrodku i alejki boczne między półkami. Zwizualizowałem to na obrazku poniżej.


schemat


Teraz przejdź się do osoby, która nie zna Twojego sklepu, ale mogłaby potencjalnie być jego klientem: może to być znajomy, księgowa, ‚office manager’, itp. Poproś tę osobę, by poczuła się, jakby pracowała w supermarkecie i żeby poukładała produkty na półkach.


Następnie daj jej puste post-ity i poproś, by dla każdej alejki wymyśliła nazwy – tak jak oznaczenia alejek w supermarkecie. Teraz razem spójrzcie na tą całą konstrukcję supermarketu i odpowiedzcie sobie na pytanie, czy chcielibyście korzystać z takiego sklepu? Ewentualnie poprawcie coś jeszcze: zamieńcie miejscami, poprawcie nazwy itp.


To, co wynikło z tego badania, to Twoja nawigacja po produktach. Tak właśnie powinieneś kategoryzować produkty w swoim sklepie internetowym. Jeśli masz co do niej wątpliwości – pójdź do kolejnej osoby z tym samym zadaniem (nie zapomnij najpierw zrobić zdjęcia podziału osoby poprzedniej).


Można pomyśleć, że sposób ten nie zadziała w sytuacji, gdy nasz sklep ma bardzo szeroki lub wąski asortyment. Jest to jednak nieprawda. W przypadku szerokiego asortymentu warto zrobić takie ćwiczenie dla głównych grup produktów – np. podstrony kategorii głównej. W przypadku takiego np. Media Expert to byłby jeden sklep dla RTV, jeden dla AGD, i jeszcze jeden np. dla Komputerów. W przypadku sklepu z wąskim asortymentem z kolei można zrobić kategoryzację typu ‚Buty sportowe’, ‚Buty eleganckie’, czy główne kategorie np. Damskie / Męskie.


Co jest natomiast ważne – jeśli nasz sklep ma służyć sprzedaży produktów, nawigacja jest swego rodzaju drogowskazem po sklepie. Stąd też zadbaj o to, by konstrukcja sklepu właśnie odzwierciedlała sposób poruszania po sklepie stacjonarnym. Takie ćwiczenie odniesienia do offline’u bardzo nam pomaga, gdy nie do końca czujemy się dobrze z aktualną nawigacją.

ĆWICZENIE 4 – Elementy zauważalne na karcie produktu


Wejdź na kartę produktu. Zmruż oczy – tak, by nie widzieć nic. Następnie spójrz jeszcze raz na kartę.


Powinieneś zauważyć trzy elementy: nazwę produktu, zdjęcie, przycisk dodania do koszyka. Innym sposobem na to ćwiczenie jest zrobienie zrzutu tej strony i nałożenie na niej dużego rozmycia gaussowskiego (np. w Photoshopie). Powinieneś mieć wtedy trzy plamy – plamę dużej i widocznej nazwy produktu, plamę zdjęcia i plamę przycisku zakupu.


Jeśli Twój button zakupu jest za mały, nie jest widoczny w pierwszym viewporcie monitora (czyli bez scrollowania) lub za mało się wyróżnia – możesz potencjalnie mieć problem z jego klikalnością. I nie chodzi o to, że ludzie nie będą go znajdować (choć to też), ale bardziej o to, że nie będą aż tak mocno świadomi bliskości i dostępności tej opcji – również pod kątem perswazyjnym.

ĆWICZENIE 5 – Informacje o produkcie


Weź kartkę (tym razem normalną, niekoniecznie dużą) i długopis. Wejdź na kartę produktu jednego z ważniejszych produktów na Twojej stronie (ważniejszy to taki, który dobrze się sprzedaje, bądź taki, który chciałby, by się dobrze sprzedawał).


Następnie w kilku nowych zakładkach wpisz w Google kolejno:

  • nazwa produktu opinie,
  • nazwa marki opinie,
  • nazwa kategorii jaki wybrać,
  • nazwa kategorii na co zwrócić uwagę,
  • nazwa kategorii forum


Przejrzyj wyniki wyszukiwania – fora internetowe, blogi, inne materiały content marketingowe. Na kartce natomiast wypisz wszystkie cechy, o których wspominają na tych stronach: np. ‚jakość wykonania’, ‚rozdzielczość’ (dla telewizorów), ‚wytrzymałość’, itp. Chodzi o to, by sprawdzić, w jaki sposób ludzie wypowiadają się na temat tych produktów – jakie informacje mają dla nich znaczenie gdy kupują, bądź gdy już kupili. Możesz też w tym wypadku wypisać konkretne pytania, jakie zadają ci ludzie.


Teraz wróć na swoją kartę produktu. Sprawdź, czy znajdziesz odpowiedzi na te pytania na swojej karcie produktu. Jeśli nie, powinieneś uzupełnić karty produktów o właśnie te informacje. Innym rozwiązaniem jest przygotowanie materiałów contentowych pod te pytania i podlinkowanie do nich właśnie z karty produktu.

ĆWICZENIE 6 – Akcja dodania do koszyka


Przybliż głowę do monitora i przyjrzyj się bardzo bardzo dokładnie guzikowi zakupu (dodania do koszyka). Bądź na tyle na nim skoncentrowany, by próbować nie uciekać wzrokiem dalej niż 2/3 cm na żadną ze stron.


Teraz kliknij ten guzik – cały czas patrząc się na niego. Czy zaobserwowałeś zmianę? Jeśli nie (czyli np. nie wyświetlił się button potwierdzający, nie przeładowała się strona, nie było żadnej animacji przesunięcia produktu do kosza, lub przycisk nie zmienił chwilowo tytułu na ‚produkt dodany do koszyka’), to powinieneś wzmocnić widoczność potwierdzenia tej akcji.

ĆWICZENIE 7 – Koszyk zakupowy call to action


Przejdź do koszyka zakupowego. Sprawdź, czy na pierwszym ekranie widać guzik przejścia dalej do płatności. No i sprawdź, czy poza tym guzikiem jest jeszcze jakiś inny button, który jest tak samo widoczny / intruzywny.


Jeśli taki guzik istnieje (np. kontynuuj zakupy / guzik potwierdzenia wpisania kodu rabatowego) – zelżyj go wizualnie – niech to będzie secondary action button / linkiem. Tu również można wesprzeć się dodatkowym ćwiczeniem zmrużenia oczu – jeśli widzisz więcej niż ten button kontynuowania – to znaczy, że widzisz za dużo.


Podobnie, jeśli nie widzisz guzika przejścia dalej ze względu na niemieszczenie się na pierwszym ekranie – zafiksuj go do dołu ekranu lub zrób coś, by użytkownik mógł w ciągu sekundy go odnaleźć i kliknąć.


Na tym etapie każde rozproszenie może potencjalnie powodować spadek konwersji. No – chyba że masz bardzo ważne (i spodziewalne przez użytkownika) powody, by rozpraszać – np. możliwości transportu związane z montażem pralki – czy chodzi tylko o wniesienie, czy również montaż.

ĆWICZENIE 8 – Zakładanie konta w sklepie


Przejdź dalej w koszyku zakupowym. Czy umożliwiasz zakup bez założenia konta? Jeśli nie – dodaj taką opcję. Niejeden case pokazał, że taki guzik ma znaczny wpływ na konwersję.

ĆWICZENIE 9 – Ilość pól w zamówieniu


Jesteś na stronie adresu dostawy. Policz, ile masz pól w podstawowym widoku – jeśli jest ich więcej niż 6, to jest ich za dużo. Imię i nazwisko, email, ulica i nr domu / lokalu, miejscowość i kod pocztowy (choć i to może generować się automatycznie), nr telefonu – to jest maks, o co powinieneś prosić.


Każde dodatkowe pole może być potraktowane jako nadspodziewalne. Tym bardziej frustrujące jest, gdy np. domyślnie pokazują się w tym miejscu formularze danych do faktury, czy zróżnicowane dane zamawiającego i dane dostawy – te rzeczy domyślnie powinny być zwinięte.

Podsumowanie


Sposobów na optymalizację e-sklepu jest dużo. Często również mamy znacznie bardziej wyrafinowane problemy, niż te wspomniane powyżej. Co więcej – nawet te wspomniane powyżej nie muszą być skuteczne w każdej sytuacji – gdyż każdy przypadek jest inny i za każdym razem należy patrzeć na temat z innej perspektywy. Dlatego też m.in. mimo wykorzystania szablonów i standardów, nadal mamy w Uxerii masę roboty – starając się wspierać także ten rynek.


Niemniej mam nadzieję, że powyższe ćwiczenia pomogą Ci trochę poprawić UX w sklepie. A nawet jak nie, to pomogą spojrzeć z nieco innej perspektywy.


Powodzenia!

Komentarze

Liczba komentarzy:

Bądź pierwszy i zostaw swój komentarz.

Chcesz, byśmy pomogli lepiej poznać Twoich Klientów?
Umów się na darmową poradę

Igor Farafonow

Architekt informacji, projektant. Od 2007 roku zajmował się niezliczoną liczbą projektów webowych, mobilnych i desktopowych. Aktualnie CEO w Uxerii. Prywatnie fan tajskiej kuchni, starych sportowych samochodów, fotografii oraz jamajskiego disco polo.

Dodaj komentarz

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

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>