W tym artykule analizuję kartę produktu jednego sklepu internetowego.  Przedstawiam jakie błędy popełniono przy konstrukcji przycisku „Dodaj do koszyka”. Na co to się przekłada oraz jak można zadziałać, aby poprawić jakość przycisku.

Przeglądając sklepy internetowe handlujące w różnych branżach (w poszukiwaniu inspiracji i ciekawych rozwiązań), trafiłem na sklep z czapkami i kapeluszami – Sterkowski.com.

Design sklepu trzyma klimat, wydaje się pasować do stylu produktów, które sprzedaje, chociaż duża część białych obszarów sprawia wrażenie niedokończonego lub niewczytanego w całości przez przeglądarkę. Cóż, kwestia gustu, a nie o tym miałem pisać.

To co zwróciło moją uwagę najbardziej, to jeden z najgorszych (IMHO) przycisków dodania do koszyka jaki można zastosować. Zróbmy krótką analizę tego co widać, a raczej czego nie widać. Co z tego wynika i jak można by zareagować, aby zwiększyć konwersje.

Najpierw rzut okiem na całą kartę produktu.

Przy pierwszej wizycie w tym miejscu, zlokalizowanie przycisku dodania produktu do koszyka zajęło mi jakieś 20-30 sekund. To bardzo długo.

Dla osób, które nie namierzyły przycisku. Rozwiązanie zagadki poniżej.

Przycisk kolorystycznie kompletnie zlewa się ze stroną, przez co jest niemal niezauważalny. Dodatkowo ulokowany jest w miejscu, na które użytkownicy prawie w ogóle nie spoglądają – prawa, dolna część.

Samo usytuowanie sprawia wrażenie, jakby priorytetem sklepu nie była sprzedaż, tylko pokazanie galerii zdjęć i kilku ciekawostek.

Kolejny niekorzystny czynnik to fakt, że na urządzeniach z mniejszym ekranem, np. na niektórych laptopach, nie widać przycisku bez przesunięcia suwaka. Zobaczcie jak wygląda to u mnie.

Podsumujmy minusy i zastanówmy się jak można poprawić sytuację.

Minusy:
1. brak kontrastu z kolorystyką strony;
2. konieczność przewijania strony w celu zobaczenia buttona;
3. ulokowanie w prawym dolnym rogu;
4. brak wezwania do działania;
5. brak zmiany koloru po najechaniu myszką.

Właściwy kolor przycisku dodania do koszyka to według wielu osób zielony lub czerwony. Zwolennicy zielonego argumentują symboliką zielonego światła, otwartej drogi i pozytywnych skojarzeń. Natomiast osoby wybierające kolor czerwony stawiają na maksymalny kontrast i zwrócenie uwagi.

Porównując wyłącznie zielony vs czerwony, bez względu na kolorystykę sklepu, w testach A/B zdecydowanie zwycięża kolor czerwony. Jednak kiedy weźmiemy pod uwagę dominujące kolory na stronie i wobec nich z palety barw wybierzemy najbardziej przeciwny kolor – ten powinien o wiele lepiej konwertować niż czerwony czy zielony.

Specjalistą od kolorów nie jestem, ale kolorystykę tego sklepu internetowego określam jako brązowo-beżowo-białą… Zatem przeciwnym kolorem, który będzie najlepiej rzucał się w oczy jest niebieski. Wejdźcie na omawiany sklep internetowy i sprawdźcie co pierwsze wpada Wam w oczy. Czy nie jest to właśnie niebieski button Facebooka? W tej sytuacji najlepiej było by zmienić jego położenie, żeby nie rozpraszać użytkownika. Przecież priorytetem sklepu ma być sprzedaż.

Wskazówka dla Ciebie!
Prowadzisz własny sklep internetowy? Nie przegap okazji i zapisz się na audyt.
Kliknij tutaj, aby sprawdzić, czy Twój sklep spełnia kryteria.

Do buttona dopiszmy wezwanie do działania w stylu „BUY NOW”. Sam przycisk przenieśmy w lewy górny róg. Cenę podkreślmy zielonym kolorem, aby wzbudzała pozytywne skojarzenia i wydawała się niższa/przeceniona.

Prawdopodobnie Wasz grafik zrobi to lepiej niż ja w paincie. Ale zamysł pozostaje ten sam. Button z dodaniem do koszyka ma być pierwszą rzeczą, na którą zwróci uwagę klient po wejściu na kartę produktu. Dodatkowo wzmacniamy go ceną na zielonym tle, wyraźnym wezwaniem do działania, wysoką oceną użytkowników (wyrażoną w postaci gwiazdek) oraz informacją o darmowej dostawie.

Koniecznie kasujemy ten banner Facebooka z góry strony!

Porównajmy obie wersje.

To by było na tyle. Jeżeli macie jakieś pytania, przemyślenia lub swoje protipy związane z przyciskami sklepowymi – koniecznie dajcie znać w komentarzach, lub napiszcie mi na Twitterze. Jeżeli chcecie zadać jakieś pytanie, podyskutować lub skrytykować coś, również walcie śmiało.