Optymalizacja sklepu internetowego – przycisk “Do koszyka”

Zaktualizowano: 18 października, 2021 Autor: Paulina Kamińska
Spis treści rozwiń zwiń

    O ile o optymalizacji procesu zakupowego możemy znaleźć wiele publikacji, o tyle najczęściej ich opisy zaczynają się od widoku koszyka. A co z guzikami, które prowadzą do koszyka? Znajdują się one na listach produktowych i stronach produktów. To od nich zaczyna się proces zakupowy.

    Idealny guzik „Do koszyka”

    W każdym sklepie guziki “do koszyka” wyglądają inaczej. Mimo, iż są bardzo ważnym elementem e-sklepu, sprzedawcy Internetowi różnie podchodzą do tego tematu. Trudno znaleźć jednoznaczne opinie czy wyniki badań opisujące jaki powinien być idealny guzik “do koszyka”. Na amerykańskim rynku utarła się teoria BOB (big orange button), sugerująca, że najlepszy button, z szansą na konwersję, jest duży i pomarańczowy. Z drugiej strony, są również badania, z których można wywnioskować, że zarówno kobiety jak i mężczyźni nie lubią koloru pomarańczowego.

    W związku z tym przyciski w tym kolorze mogą bardziej odstraszać niż zachęcać do kliknięcia. Jak widać w Ameryce nie ma jednoznacznej odpowiedzi na zadane przeze mnie pytanie. W Polsce możesz mieć taki sam problem.

    Jak zbliżyć się do ideału?

    Sprawa wyglądu jest bardziej skomplikowana niż się wydaje. Analizując ten temat zacznę od ogólnych zasad, jakimi należy się kierować przy tworzeniu buttona. Guzik na pewno musi spełnić kilka podstawowych wytycznych, aby można było powiedzieć, że jest dobrze zaprojektowany.

    Guzik powinien być:

    Odpowiednio duży, aby był łatwo zauważalny przez użytkownika. Nikt nie powinien szukać przycisku, który doda upatrzony przez niego towar do koszyka. To jak strzał w nogę przy prowadzeniu e-biznesu.

    Czytelny: abstrahując od tego jakie CTA (czyli wezwanie do działania) na nim umieścisz, użytkownik nie może mieć problemu z jego odczytaniem. Nawet jeśli ma słabszy wzrok. Trzeba zadbać o odpowiedni rozmiar i rodzaj dobranej czcionki. Powinna być prosta, bezszeryfowa i niezbyt fantazyjna. Niezastosowanie się do tych rad może wpłynąć na zmniejszoną czytelność CTA.

    Klarowny: nikt nie powinien mieć wątpliwości do czego dany przycisk służy! Jest wiele sklepów, które rezygnują z treści umieszczonej na guziku, zakładając, że ikona koszyka jest wystarczająca, by potencjalny klient domyślił się jaka jest jego rola. Nie zawsze tak jest! Dla Ciebie ikona może wydać się oczywista, dla kogoś innego zupełnie niezrozumiała. Jej dobór jest zatem bardzo ważny. Jeśli bardzo zależy Ci na ikonie, to osobiście sugerowałabym tworzenie przycisku z ikoną i napisem, aby mieć pewność, że będzie on zrozumiały. Dodatkowo, warto zastosować znacznik title (treść, która pojawi się w “dymku” po najechaniu na niego kursorem) w którym jasno będzie opisane, co się stanie po jego naciśnięciu.

    Dynamiczny: kiedy kursor znajduje się nad guzikiem, grafika powinna sugerować, że można go przycisnąć.

    Widoczny bez przewijania strony: to dotyczy głównie stron produktu – często zdarza się, że długie, obszerne opisy w połączeniu z nie najlepiej zaprojektowaną szatą graficzną powodują, że do guzika trzeba się “dostać” przewijając stronę. Nie każdy będzie miał tyle cierpliwości, by wykonać kilka dodatkowych czynności, żeby móc dodać produkt do koszyka. Zamiast tego – opuści sklep.

    W nieprzypadkowym kolorze: tu sprawa jest również złożona. Z jednej strony kolorystyka sklepu internetowego często jest związana z opracowaną identyfikacją wizualną Twojego biznesu. Guzik, będący elementem całej szaty graficznej będzie nawiązywał do Twoich firmowych barw lub do stylistyki zastosowanej w projekcie graficznym e-sklepu (o ile nie są one powiązane). Z drugiej strony, kolory mają wpływ na nasze postrzeganie oraz zachowania. Wynika to z psychologii. Warto zatem znaleźć złoty środek. Może uda się pogodzić to, aby  guzik nawiązywał do barw firmowych czy projektu oraz dobrze spełniał swoje zadanie wywołując pożądane przez nas skojarzenia u klientów.

    Odpowiedni kolor

    Kolory wpływają na nasz nastrój, emocje i zachowania. Jeśli chcesz wykorzystać potęgę kolorów do tego, aby zwiększyć konwersję
    w swoim sklepie internetowym, musisz wziąć pod uwagę sposób postrzegania kolorów przez klientów.

    Badania, które tu przedstawię, były wykonane na rynku amerykańskim, więc nie jest powiedziane, że sugestie jakie z nich płyną będą trafione w polskiej czy europejskiej rzeczywistości. Ich wyniki porównam z moimi spostrzeżeniami związanymi z wyglądem guzików w znanych sklepach internetowych działających na naszym rynku. Co z tego wyniknie? Zaraz się przekonasz!

    Jakiego koloru użyć (jak jest on postrzegany przez użytkownika)?

    Żółty – kolor, który kojarzy się z młodością, optymizmem. Używany często po to, by przykuć uwagę.

    Czerwony – kojarzy się z energią. Powoduje szybsze bicie serca. Jeśli coś musimy zrobić pilnie, często zakreślamy lub oznaczamy takie zadanie na czerwono. To kolejna konotacja, która krzyczy do użytkownika – zrób coś i to już!

    Niebieski – daje poczucie bezpieczeństwa i kreuje atmosferę zaufania. Kolor jest kojarzony od lat z biznesem, bankowością.

    Zielony –  kojarzy się ze zdrowiem, tworzący atmosferę relaksu.

    Pomarańczowy – agresywny kolor, który nawołuje do wykonania akcji. Jest często wykorzystywany do tworzenia przekazów typu: kup, sprzedaj, zapisz się itp.

    Różowy – tworzy atmosferę romantyzmu, wykorzystywany jest w marketingu, kiedy kierujemy produkt do kobiet lub młodych dziewcząt.

    Czarny – kolor kojarzący się z władzą, używany przy promocji towarów luksusowych.

    Fioletowy – kojący kolor, kreujący atmosferę spokoju, wykorzystywany często przez branżę kosmetyczną lub do promocji produktów przeciw starzeniu się.

    źródło: Color psychology (Kissmetrics)

    Guziki “do koszyka” w naszych sklepach internetowych

    Poniżej zestawienie pokazujące kolorystykę przycisków „do koszyka” różnych marek:

    Przygotowane zestawienie buttonów w polskich sklepach internetowych pokazuje, że sklepy odzieżowe postawiły na czarny kolor guzików. Jest to również nawiązanie do czarnych logotypów, które są popularne w tej branży. Z tego schematu wybiło się Zalando, Answear, Balladine i DeeZee. Guzik w Zalando jest pomarańczowy i nawiązuje do elementu z logotypu tej firmy. Answear z kolei wybrało żółty, mimo iż logo, podobnie jak większość analizowanych marek, ma czarne. Możliwe, że miało to na celu przyciągnięcie uwagi. Guzik w DeeZee jest różowy, a w Balladine czerwony.  Może to oznaczać, że przy wyborze koloru w tych sklepach internetowych kierowano się grupą docelową, jaką są kobiety i nastolatki. Co ciekawe, poza Zalando, wszyscy wykorzystują kapitaliki w CTA.

    Jeśli chodzi o sklepy obuwnicze, to eObuwie postawiło na pomarańcz, Kazar na czerwień a MIVO na czerń. eObuwie nie ma koloru pomarańczowego w swoich firmowych barwach, mogło zatem kierować się teorią BOB. Czerń nawiązuje do luksusowych marek butów, jakie oferuje MIVO, oraz do ogólnej identyfikacji wizualnej firmy. Mimo, że Kazar, podobnie jak MIVO ma logo w kolorze czerni, to  wykorzystał wyróżniający się, czerwony kolor guzika, który sprawia, że użytkownik nie może go nie zauważyć. Czerwień jest wykorzystana w projekcie graficznym tego e-sklepu tylko do guzików i świetnie spełnia swoje zadanie.

    Zielony kolor dla swoich przycisków wybrało Agito, Presto, Fresco, Alma. Jest to dobre posunięcie z punktu widzenia grupy docelowej – wszystkie te sklepy kierują swoją ofertę zarówno do kobiet jak i mężczyzn, a zielony jest neutralnym kolorem, który sprawdza się dla każdej z tych grup. Ponadto Fresco i Alma, jako sklepy spożywcze przy wyborze zieleni zyskały kolejną ważną konotację – kojarzy się ona ze świeżością. Wszystko byłoby pięknie, gdyby nie katastrofalny w mojej ocenie błąd w doborze odcienia – guzik Fresco jest tak blady, że  gubi się pośród innych mocnych kolorów zastosowanych w szacie graficznej sklepu. Użytkownik może go nie zauważyć! To poważny błąd. Alma wystrzegła się tego i tym samym uważam, że lepiej przygotowała swoje buttony.

    Sklepy z zabawkami (Smyk, e-Zabawkowo, ŚwiatZabawek24) mają guziki w kolorze czerwonym. Na tym kończy się jednak ich podobieństwo. Mimo tego samego koloru, każdy guzik wygląda zupełnie inaczej – jeden ma ikonę koszyka przed napisem, inny po, w niektórych znajdziemy pole na wpisanie ilości. Są też guziki ze strzałką, z napisami z małych i dużych liter. Ten przykład ostatecznie pokazuje, że nie ma jasnych zasad, którymi można się kierować przy projektowaniu guzika dla własnego sklepu.

    Recepta?

    Zamieszczone przykłady  pokazują złożoność zagadnienia jakim jest zaprojektowanie idealnego guzika “do koszyka”. Nie ma możliwości, aby odgórnie określić jak powinien wyglądać, sprawa jest zbyt indywidualna i zależy od projektu graficznego sklepu, od grupy docelowej, od barw firmowych i innych czynników.

    Rozwiązaniem jest przygotowanie dobrej wersji guzika, spełniającą wszystkie podstawowe wytyczne wymienione w akapicie „Jak zbliżyć się do ideału”  – a potem testować, testować, testować…..

    Testowanie

    Chcąc pracować nad najlepszym guzikiem “do koszyka” dla Twojego sklepu internetowego będziesz musiał testować jego różne wersje. Wyniki tych testów pozwolą na wybór najlepszego wariantu i tym samym na podniesienie współczynnika konwersji (co przełoży się bezpośrednio na większą sprzedaż w Twoim sklepie).

    Co testować?

    rozmiar guzika

    kolor guzika

    umiejscowienie guzika

    treść na guziku

    guzik z ikoną lub bez

    kształt guzika

    wypukłość (wrażenie 3D)

    dynamikę (wygląd przed najechaniem kursora i po)

    Do testowania przycisków można zastosować testy wielowymiarowe (ang. multivariate tests). Są to testy, które pozwalają na badanie wielu zmiennych (o wielu odmianach) w różnych  kombinacjach. Zmiennymi w przypadku testowania guzika będą jego cechy: kolor, rozmiar, treść itp. Możemy zatem sprawdzić, czy lepsze wyniki uzyskuje np. duży  button w kolorze pomarańczowym, czy mały button w kolorze czerwonym. Możliwość jednoczesnego testowania wielu kombinacji jest główną zaletą testów wielowymiarowych. Wadą tego rozwiązania jest z kolei fakt, iż wymagają one dużej liczby użytkowników do ich przeprowadzenia, aby wyniki były istotne statystycznie.

    Musisz liczyć się z tym, że w trakcie testów Twoje obroty mogą trochę spaść, gdyż niektóre wersje będą mniej skuteczne niż pozostałe. Jeśli jednak w wyniku testów określisz, która wersja jest najlepsza – odrobisz to z nawiązką 🙂

    Uwaga: Po wyborze najlepszego guzika nie osiadaj na laurach! Po jakimś czasie wróć do tematu z nowymi pomysłami
    (z uwzględnieniem wyników poprzednich testów) i testuj dalej. Pamiętaj, że każda najmniejsza zmiana dla tego kluczowego elementu sklepu może mieć kolosalne przełożenie na Twoje zyski.

    Czym testować?

    Do wykonania testów możesz posłużyć się narzędziami, które niestety często są kosztowne. Ich opis znajdziesz na blogu firmy Conversion.

    Przeczytaj również:

    Stosować testy A/B czy testy wielowymiarowe? Na które się zdecydować?

    Testy online: A/B czy wielowymiarowe?