Guzik do koszyka. Czyli jaki powinien być przycisk zakupowy

Aktualizacja: 26 stycznia 2021

|Projektowanie sklepów - UX, Design, Treści, Logo|Guzik do koszyka. Czyli jaki powinien być przycisk zakupowy
Guzik do koszyka. Czyli jaki powinien być przycisk zakupowy

Automatyczny mózg

Cofnijmy się na moment w czasie. Jest rok 1983. Profesor Benjamin Libet przeprowadził właśnie jeden z najgłośniejszych eksperymentów w psychologii. Zadanie osoby badanej było trywialne. Miała jedynie nacisnąć guzik, kiedy uzna to za stosowne. Do jej głowy doczepiono elektrody mierzące aktywność elektryczną mózgu, by sprawdzić, jak się zmieni w momencie podjęcia decyzji. Wyniki przeszły najśmielsze oczekiwania uczonych. Na pół sekundy przed naciśnięciem przycisku, aparatura zanotowała informację, że akcja zostanie podjęta. Jednak dopiero po 0,3 sekundy osoba badana uświadomiła sobie tę decyzję. Dlatego 0,2 sekundy dzielące wolę od akcji są momentem na weto. A zatem nasz mózg podejmuje decyzję nim sobie ją uświadomimy. Mamy bardzo niewiele czasu na zmianę decyzji. Ale jest to możliwe.

W jaki sposób badanie to odnosi się do projektowania guzików zakupowych? Powinny one spełniać takie kryteria, by potencjalny klient, mając ochotę na zakup, nie wykorzystał 0,2 sekundy świadomości na zmianę decyzji. Muszą więc najbardziej jak to możliwe ułatwiać dokonanie transakcji, a przede wszystkim być odpowiednio widoczne.

Łagodny czy ostry?

Przycisk zakupowy należy do kategorii elementów zwanych „call to action” (w skrócie CTA). Czym są CTA? Niczym innym jak linkami ukrytymi pod komunikatami wzywającymi do działania, na przykład „spróbuj teraz”, „dowiedz się więcej”, „kup”. Przycisk zakupowy jest więc jedną z odmian CTA mającą konkretne zadanie – przekierować konsumenta na stronę finalizacji zakupu. 

Zacznijmy od kwestii najbardziej podstawowej. Przycisk zakupowy powinien odznaczać się od tła. Nie wystarczy sam napis, jak w przypadku chociażby zachęty do dalszej lektury. Tu konieczny jest także kształt, na tle którego znajduje się komunikat. Według badań opublikowanych przez naukowców z Harvard Medical School na łamach magazynu „Psychological Science”, konsumenci zdecydowanie wolą kształty zaokrąglone, a nie te o ostrych kątach. Pierwsze skłaniają wzrok do skoncentrowania się na wnętrzu figury, drugie zaś do tego, by skupiać się na rejonach oddalonych od centrum figury. Zaokrąglone kształty odbieramy jako bardziej przyjazne, zachęcające, budzące większe zaufanie.

Trzeba podkreślić, że obecność przycisku zakupowego ma być ułatwieniem w dokonywaniu transakcji, nie zaś wyzwaniem polegającym na jego usilnym poszukiwaniu. Nasz mózg – kiedy tylko może – oszczędza energię na wypadek, gdyby w przyszłości trzeba jej było zużyć więcej. Dlatego też niechętnie wydatkuje ją na mozolne szukanie tego, co powinno być położone na tacy. Przycisk zakupowy powinien być więc odpowiednio wyeksponowany, by jego odszukanie nie nastręczało ani odrobiny trudności.

BOB dobry na wszystko?

Choć znana amerykańska reguła głosi, że guzik powinien spełniać kryteria ujęte w akronimie BOB, a więc big orange button (duży pomarańczowy guzik) kolor ten wcale nie należy do najczęściej stosowanych, choć istotnie, znajduje się w czołówce. Zespół amasty.com przeanalizował 100 największych serwisów zakupowych pod kątem koloru przycisku zakupowego w trzech głównych branżach: elektronicznej, odzieżowej oraz spożywczej. 

Do najczęściej stosowanych kolorów guzika zakupowego w branży elektronicznej należały:

  • Czerwony – 21%
  • Zielony – 21%
  • Pomarańczowy – 17%
  • Niebieski – 12%
  • Żółty – 12%
  • Inne – 12%
  • Szary – 5%

Pod terminem „inne” umieszczono kolory, które otrzymały mniej niż 5%, między innymi różowy, brązowy, biały, fioletowy.

W branży odzieżowej najczęściej wybierano:

  • Czarny – 23%
  • Inne – 23%
  • Pomarańczowy – 14%
  • Czerwony – 12%
  • Zielony – 10%
  • Niebieski – 10%
  • Szary – 8%

Z kolei, jeśli chodzi o sprzedaż produktów spożywczych, częstotliwość stosowania poszczególnych barw przycisku zakupowego prezentowała się następująco:

  • Czerwony – 29%
  • Inne – 23%
  • Zielony – 19%
  • Pomarańczowy – 18%
  • Czarny – 6%
  • Pistacjowy – 5%

Po zsumowaniu okazuje się, że najczęściej stosowanym kolorem przycisku zakupowego jest czerwień (20%). Drugie miejsce zajął zielony (19%), trzecie niebieski (18%), a dopiero na czwartym znalazł się pomarańczowy (17%). Kolejne lokaty zajęły inne kolory (10%) ex aequo z czarnym (10%) oraz szary (9%).

Od miłości do czystości

Warto również dodać, że kolory mają swoją psychologiczną symbolikę. Nie jest ona zero-jedynkowa, a więc nie ma wyłącznie jednego znaczenia przypisanego konkretnej barwie. Możemy jednak wymienić te najbardziej podstawowe. Czerwony z reguły kojarzy się z silnymi emocjami, takimi jak pożądanie, miłość, ekscytacja czy gniew (por. Virgin). Pomarańczowy to między innymi symbol ciepła, energii, innowacji, ale też produktów niedrogich (por. Allegro). Podobnie jak żółty, symbolizujący często młodość, szczęście i zabawę (por. McDonald’s). Zielony utożsamiany bywa z relaksem, z życiodajną siłą, zdrowiem, nadzieją i oczywiście świeżością (por. Starbucks). Niebieski obok wody i orzeźwienia to także symbol rozsądku, bezpieczeństwa czy zaufania (por. Oral-B). Czerń bywa kolorem luksusu, elegancji, siły czy prostoty (por. W. Kruk). Z tą ostatnią wiąże się także kolor szary, który symbolizuje ponadto, nowoczesność, bezpieczeństwo oraz czystość (por. Apple).

Warto zastanowić się, czy kolor przycisku powinien być spójny z kolorystyką sklepu. Pozornie można by się z takim pomysłem zgodzić, jednak spójność kolorystyczna oznacza niekiedy harmonijne stapianie się elementów z całością. W przypadku elementów CTA chodzi natomiast o ich widoczność, która zdecydowanie przewyższa względy estetyczne. 

W polu widzenia

Jak wspomnieliśmy, odnalezienie guzika nie powinno nastręczać trudności, a więc wymagać ponownego przewijania strony po doczytaniu informacji do końca. Musi być więc elementem dynamicznym, który znajduje się nieustannie „pod okiem” konsumenta. Widoczności sprzyja faktura guzika. Najczęściej spotykamy guziki mające postać pozornie wypukłą (3D). Przycisk powinien także reagować na obecność kursora, a więc zmieniać delikatnie odcień, kiedy kursor znajdzie się w jego obrębie. 

Co do informacji znajdującej się na guziku – zazwyczaj jest to komunikat „do koszyka”. Dzięki niemu klient czuje się zachęcony do dalszych zakupów, które może kontynuować, nie tracąc wcześniej wybranego produktu. Można jednak zastosować również inny wariant, umieszczając na przycisku komunikat odnoszący się wprost do decyzji zakupowej klienta. Warto jednak pamiętać, by zamiast wezwania „kup” wykorzystać formę „kupuję”.  Taka zmiana formy czasownika może doprowadzić do zwiększenia klikalności blisko dwukrotnie, jak zbadał to na swoim przykładzie serwis unbounce.com. Z czego to wynika? Otóż słowo „kupuję” stanowi wyrażenie naszej woli, natomiast „kup” to swego rodzaju rozkaz lub komenda. My zaś niechętnie wykonujemy czyjeś polecenia. Wolimy zdecydowanie polegać na własnych decyzjach. 

Niekiedy obok komunikatu słownego na przycisku znajdziemy niewielką ikonę, na przykład koszyk na zakupy. Musimy jednak uważać, by grafika nie zdominowała najważniejszego, czyli informacji o zakupie. 


Zestawienie kart produktów 10-ciu najpopularniejszych e-sklepów w Polsce
(wg badania Gemius dla PropertyNews.pl)

Prawy do lewego

Warto jeszcze zapytać, po której stronie ekranu powinien znajdować się przycisk zakupowy. Kiedy prześledzimy strony czołowych sklepów online, spostrzeżemy, że niemal bez wyjątku guzik ulokowany jest po prawej stronie, po lewej zaś znajduje się ekspozycja produktu. Ma to swoje uzasadnienie w badaniach nad przetwarzaniem informacji przez mózg. Nasz układ wzrokowy jest skonstruowany w taki sposób, że obraz prawej części pola widzenia trafia do lewej półkuli, zaś części lewej do półkuli prawej. Dzieje się tak ze względu na tzw. skrzyżowanie wzrokowe, czyli miejsce w mózgu, w którym nerwy odchodzące od obu oczu krzyżują się ze sobą niczym dwie wielkie ulice w centrum metropolii. Jednocześnie należy dodać, że za analizę słów w głównej mierze odpowiedzialna jest lewa półkula, zaś za analizę obrazów prawa. Choć brzmi to nieco zawile wniosek jest stosunkowo prosty. Jeśli dostarczymy komunikaty słowne do prawej półkuli (umieszczając je w lewym polu widzenia), będzie ona musiała podać je dalej półkuli lewej. Tym samym mózg podejmuje dodatkowy wysiłek, a tego chcemy mu oszczędzić. Aby więc słowa trafiały bezpośrednio do półkuli lewej, która zajmuje się ich obróbką, należy umieścić je w prawym polu widzenia (ze względu na wspomniane skrzyżowanie wzrokowe). A zatem obrazy powinny być ulokowane w lewej części ekranu. Oto przyczyna, dla której większość sklepów umieszcza informacje o produkcie oraz przycisk zakupowy po prawej stronie. 

Podsumowanie

Mogłoby się wydawać, że niewielki element strony, jakim jest przycisk zakupowy, to mało wymagający dodatek do przemyślanych i zaprojektowanych z wielką dbałością o ekspozycję produktów. Nic bardziej mylnego. Jest nie mniej ważny niż towar, do którego zakupu odsyła, a jego kształt, kolor oraz ulokowanie nie są wcale dowolne. Opierają się na badaniach z obszaru User Experience, prowadzonych przez psychologów i kognitywistów. Warto pamiętać o kilku najważniejszych zasadach. Przycisk zakupowy powinien być owalnym prostokątem, dostatecznie dużym i wyraźnym, by odznaczał się od tła. W zależności od branży jego kolor to zwykle czerwony, zielony, niebieski lub pomarańczowy. Z reguły umieszcza się go po prawej stronie ekranu (jeśli z lewej mamy fotograficzną ekspozycję produktu). Powinien mieć charakter dynamiczny, a więc mimo skrolowania strony, pozostawać widocznym, zaś w momencie pojawienia się nad nim kursora – dobrze, by zmieniał odcień, sygnalizując reakcję. Co kluczowe, musi jednoznacznie sygnalizować zakup poprzez wyrażenie „do koszyka” lub „kupuję” (zamiast formy „kup”). 

dr Adam Zemełka
dr Adam Zemełka

Moja praca polega na analizowaniu najnowszych badań z zakresu neuronauki i przekładaniu ich na grunt praktycznego zastosowania w marketingu, biznesie, i psychologii organizacji.

Jestem etatowym wykładowcą Collegium Civitas w Warszawie, gdzie mam przyjemność spotykać fascynujących ludzi - zarówno studentów, jak i pracowników. Prowadzę zajęcia z zakresu psychologii w licznych aspektach zarządzania. Współtworzę także nowatorski kierunek studiów podyplomowych - Neuromanagement. Na rynku marketingowym działam jako niezależny doradca. Swoją metodę opieram zarówno na neuronauce, psychologii i antropologii, w tym teorii kodu kulturowego Clotaire'a Rapaille'a. Jestem przekonany, że poprzez odnajdywanie ukrytej symboliki w postrzeganiu przez klientów produktów, usług i marek, możemy budować komunikaty odwołujące się do ich prawdziwych potrzeb. Publikuję teksty naukowe i popularnonaukowe na tematy związane z moimi głównymi zainteresowaniami, w których centrum znajduje się ludzki mózg.

Te artykuły mogą być dla Ciebie
7 cech skutecznej karty produktu w ecommerce

7 cech skutecznej karty produktu w ecommerce

Karta produktu jest często wizytówką sklepu internetowego. Jeśli klienci trafiają do sklepu z porównywarki cen czy agregatora, mogą o nim wiedzieć niewiele.

czytaj dalej

Dlaczego m-commerce to Twój priorytet

Dlaczego m-commerce to Twój priorytet

Kiedy ostatnio sprawdzałeś ruch przez urządzenia mobilne? Jaki odsetek Twoich klientów to osoby używające smartfonów? Jaki jest stosunek transakcji dokonywanych przez smartfony i komputery w Twoim sklepie? Szybka i funkcjonalna strona mobilna to już nie jest przewaga konkurencyjna, to wręcz Twój obowiązek jeśli nie chcesz tracić klientów. Sprawdź dlaczego...

czytaj dalej

Co mówią o nas klienci

W lewo
W prawo

Współpracę z INTLE oceniam na bardzo udaną. Za największy atut uważam kompleksowe wsparcie i możliwość realizacji różnych projektów z jedną firmą.
Mimo, że prace przy rozwoju mojego sklepu realizowało kilku różnych specjalistów, za kontakt i przepływ informacji odpowiedzialna była jedna osoba - to duża wygoda i oszczędność mojego czasu!

Opinia marki BESIMO o Agencji interaktywnej INTLE

Robert Kornak

Po zmianie agencji na firmę INTLE bardzo szybko odczułem około 30% wzrost sprzedaży oraz zdecydowaną poprawę w jakości obsługi klienta.
Na zdecydowany plus:

- Bardzo łatwy kontakt bezpośrednio z wyjątkowo kompetentnym właścicelem, Panem Łukaszem
- Nasz sklep internetowy jest pod pełną opieką i nie ma rzeczy niemożliwych do wykonania
- Wszystkie dodatkowe zlecone prace są za każdym razem bardzo sprawnie wykonywanev - Profesjonalne podejście i nastawienie na ciągłe wzrosty sprzedaży
- Szczegółowe comiesięczne raporty z wykonywanych prac

Opinia marki Major&Maker o Agencji interaktywnej INTLE

Bartosz Perzyński

Z agencją INTLE współpracujemy od lat na wielu poziomach. Nasz sklep notuje znaczące wzrosty sprzedaży, znacznie większe niż jak byliśmy związani z konkurencyjnymi agencjami SEO. Firma Pana Łukasza jawi się jako rzetelny i pomocny partner w reklamowaniu naszego asortymentu oraz usług. Cenimy sobie wkład, zaangażowanie oraz elastyczność we współpracy. Polecam

Opinia marki Happytime o Agencji interaktywnej INTLE

Łukasz Łukawski

Wzorowa kompleksowa obsługa.
Współpracuję z firmą Intle od 3 lat. Wzorowa kompleksowa obsługa. Bardzo dobry kontakt z właścicielem oraz pracownikami. Przed nami jeszcze wiele lat wspólnych działań. Szczerze polecam 👍

Eco&Fit - opinia o współpracy

Mariusz Bernat

Firma Intle zasługuje na dwie nagrody - jedna za obsługę, druga za skuteczność! Po czterech latach współpracy z Intle mój podupadający niegdyś sklep internetowy stał się jednym z wiodących i najbardziej rozpoznawalnych na rynku! Brawo!

e-choinki.pl - opinia o współpracy

e-choinki.pl

Dzięki współpracy z firmą Intle, rozwijamy sprzedaż internetową w dobrym kierunku. Przyczynia się do tego dobra komunikacja i zrozumienie naszych potrzeb. Mamy możliwość realizować poszczególne cele zgodnie z przyjętymi założeniami i weryfikować ich skuteczność poprzez odzwierciedlenie w wynikach sprzedażowych. Cenimy sobie rzetelność i uczciwość naszych partnerów.

karo.waw.pl - opinia o współpracy

karo.waw.pl

Polecam agencję Intle jako rzetelnego partnera biznesowego, profesjonalnie podchodzącego do współpracy!

Kancelaria Grabowski - opinia o współpracy

Kancelaria Grabowski

Kompleksową opiekę specjalistów w INTLE oceniam bardzo pozytywnie, wyniki dużo lepsze niż w poprzedniej agencji. Dyspozycyjność i szybko załatwiane tematy. Takiej obsługi życzę każdemu.

Grzegorz Janicki

Mam bardzo pozytywne doświadczenia odnośnie współpracy SEO z Intle. Dostaję regularne miesięczne raporty, więc widzę za co płacę, a co najważniejsze widzę również efekty pracy agencji w postaci coraz większego ruchu i transakcji z wyszukiwania organicznego. Bardzo dobry kontakt z firmą, która stara się również edukować klienta.

Opinia EKCONCEPT

Ewa Korwin-Winogrodzka

INTLE jest przykładem na to jak od A do Z zająć się klientem i elastycznie reagować na jego potrzeby. Rzetelna analiza rynku i przygotowany perfekcyjnie plan działania wywarł na mnie bardzo duże wrażenie. Myślę, że nasza współpraca będzie się rozwijać przez długie lata :)

Opinia marki mieszkanie.com o Agencji interaktywnej INTLE

Katarzyna Sonik

Ale bajer!
Pani Marto, dziękuję całemu zespołowi INTLE! Pięknie to wygląda. Bardzo się cieszę. Pozdrawiam!

Opinia o współpracy Angelex

Angelex Kancelaria prawna

Sklep Shoper.
Dużo pod górę i nie najtaniej, ale firma mimo problemów starała się jak mogła by problemy rozwiązać.

Dentistry - opinia dla INTLE

Dentistry

Miejsce doskonałe na indywidualne konsultacje odnośnie własnego biznesu. Spotkanie z przedstawicielem pozwoliło zrozumieć mi, jak osiągnąć większe zyski ze sprzedaży moich produktów, pomysły na rozbudowanie biznesu, również pomoc w budowie strony internetowej. Doskonały kontakt z przedstawicielem, również w sprawie komunikacji wizualnej produktów w mediach społecznościowych. Polecam w 100%.

Zuzanna Sindak

Nasza firma korzysta z usług firmy Intle od kilku lat, w bardzo szerokim zakresie. Profesjonalna obsługa - gwarantowane efekty.

Logos Dystrybucja - Opinia dla INTLE

Bartosz Urbański

INTLE to firma, która zdecydowanie zasługuje na najwyższą ocenę! Skorzystałem z ich usług przy projektowaniu strony internetowej dla mojego biznesu i jestem absolutnie zachwycony efektami. Profesjonalne podejście, kreatywne pomysły i dbałość o każdy detal sprawiły, że strona nie tylko wygląda świetnie, ale również działa bez zarzutu. Komunikacja z zespołem była na najwyższym poziomie - szybko odpowiadali na moje pytania i sugestie, a wszelkie poprawki były wprowadzane niemal natychmiastowo. Polecam INTLE każdemu, kto szuka rzetelnych i utalentowanych specjalistów w dziedzinie web designu!

Opinia KURO dla INTLE

Michał Mazurek

Profesjonalna obsługa klientów, szeroki wachlarz usług. Polecamy firmę Intle.

Opinia SOTE dla INTLE

SOTE Jakubowicz

Solidna firma. Nie jest to typowe korpo, nastawione tylko na "łupanie" klienta. Bardzo indywidualne podejście. Najważniejsze, że są efektywni. Polecam! Branża Beauty

Opinia Perfect Studio dla INTLE

Piotr Kaczałko

Możemy zdecydowanie polecić firmą "Intle" jako profesjonalnego i rzetelnego partnera w dziedzinie usług internetowych i multimedialnych.

Agencja interaktywna INTLE - opinia Warmhouse

Warm House

Polecam współpracę z firmą INTLE. Bardzo dobra komunikacja. Zrozumienie potrzeb klienta. Realizacja założeń. Sukcesywny rozwój. Przejrzysty system raportowania i monitoringu. Jasny podział zadań w obrębie zespołu.

Michał Szymczykiewicz

Bardzo dobrze zredagowane teksty nie tylko pod względem stylistycznym, ale co istotne - także merytorycznym. Ciekawe i dopracowane w każdym szczególe.

Opinia sklepu Miękkie

Sylwia Synowiec

Polecamy!
Grafika sklepu przeszła nasze najśmielsze oczekiwania, co potwierdza się przy telefonach od klientów, którzy dzwoniąc, lub też pisząc e-maile często wspominają, że sklep jest bardzo ładny i przejrzysty. Pomimo okresu urlopowego, to projekt został wdrożony bardzo sprawnie. Podczas robienia ustaleń nad projektem, obsługa była rzetelna, konkretna i miła. Dziękujemy Intle :)

Opinia 32m2treningu dla Agencji INTLE

32m2treningu

Świetne podejście do klienta, słuchanie i analiza potrzeb sprawiają, e kampania reklamowa dała oczekiwane efekty. Polecam.

Opinia Studio Pięknego Ciała dla INTLE

Michalina Grochowska

Efekt końcowy przerósł nasze oczekiwania. A co najważniejsze nad całością czuwał Pan Marcin - specjalista SEO, który od początku buduje widoczność naszego sklepu w Google.
Współpracę z Intle cenimy przede wszystkim za kompleksowe i wielopoziomowe spojrzenie. Na każdym etapie współpracy pokazują nam nowe rozwiązania, inspiracje i możliwości rozwoju. Zrealizowaliśmy już wspólnie wiele ciekawych projektów i myślę, że jeszcze niejeden przed nami.

Sklep Kuchnia Włoska - opinia o INTLE

Anna Wójtowicz

W ramach współpracy INTLE zajęło się między innymi tworzeniem kontentu, komunikacją w Social Mediach, a po czasie również odświeżeniem grafiki naszej strony i pozycjonowaniem.
Współpracujemy od połowy 2019 roku, co samo w sobie stanowi najlepszą rekomendację.

Opinia marki PUSZMAN

Team Puszman

Szybko, sprawnie, elastycznie. Rozbudowany zakres usług, profesjonalizm i doradztwo w razie potrzeby :) dziękuję za pomoc w rozpromowaniu mojego biznesu :)

Opinia Balaton dla INTLE

Paulina Pawlik