Dołącz do czytelników
Brak wyników

Temat numeru

16 lipca 2021

NR 58 (Czerwiec 2021)

Design (i przyjaciele) w służbie sprzedaży: krótkie historie o idealnym związku prowadzącym do zdobycia leadów

0 80

Czasami klienci rezygnują z zakupów – i to ze względów innych niż zbyt wysoka cena oferowanych produktów, słaba jakość sprzedawanego towaru lub brak sposobu płatności albo dostawy, który by ich satysfakcjonował. Jesteś ciekawy, dlaczego tak się dzieje?

Odpowiedź jest prosta – mogą zwyczajnie… zgubić się na stronie Twojego sklepu e-commerce. Powyższe stwierdzenie jest małym uproszczeniem, ale przypadki, w których userzy nie dostrzegali źle oznaczonego koszyka, w wyniku źle dobranego koloru fontu do tła nie byli w stanie odczytać komunikatu albo przez zbyt dużą liczbę tekstu pod zdjęciem produktu zwyczajnie pomijali informację o cenie (w wyniku czego i tak nie dokonywali zakupu, a poziom poirytowania wzrastał), nie należą wcale do rzadkości.
Dobrze zaprojektowana strona e-sklepu to nawet więcej niż połowa sukcesu. Co jednak powinieneś zrobić, aby jej tworzenie nie było jednym wielkim marketingowo-sprzedażowym polem minowym? 
Oczywiście, że trzeba zainwestować w mityczny dobry design i uwierzyć, że ma on realny wpływ na sprzedaż, generowanie leadów i finalizowanie sprzedaży! Przyjrzyjmy się więc bliżej temu zagadnieniu – ucząc się od branżowych ekspertów.
Jak pokazują dane przytaczane przez Statista, w 2021 r. liczba kupujących online wyniesie 2,14 mld osób; sam przyznasz, że jest ona naprawdę imponująca. Powiedzmy to sobie wprost – z powodu COVID-19 przyszło nam wszystkim żyć w czasach zarazy, a e-sklepy są akurat jedną z niewielu branż, które na tej sytuacji niewątpliwie skorzystały.
Nie oznacza to jednak, że klienci kupują online z czystej desperacji – jeśli trafią na e-sklep, który jest, mówiąc wprost źle rozplanowany, nie sfinalizują transakcji.
 

POLECAMY

Rys. 1. Przykład dobrze zaprojektowanego koszyka, zawierającego informację o liczbie dodanych produktów. Źródło: Sinsay.com

 

Rys. 2. Przykład CTA, którego nie da się pominąć. Źródło: Great Sample Resume


Czego oczy nie widzą, tego… klienci nie kupują

Rzeczone stwierdzenie to tak naprawdę clou problemu: pojawia się w wielu miejscach, w zróżnicowanych kombinacjach i niby wszyscy wiemy, że mówimy o rzeczach oczywistych, a jednak wciąż popełniamy te same błędy.
Poniżej znajdziesz listę najczęściej niewidocznych (lub brakujących) elementów – bierzmy i uczmy się z niej wszyscy.

1. Brak liczby dodanych produktów wyświetlany na ikonie koszyka
Wyobraź sobie, że znalazłeś wreszcie swoją wymarzoną kurtkę (i to na wyprzedaży, po okazyjnej cenie). Poziom Twojego szczęścia wzrasta wraz z kliknięciem w przycisk „dodaj produkt do koszyka” – już witasz się z gąską, ale… nic się nie dzieje. Zupełnie nic. Klikasz więc jeszcze raz i jeszcze, i jeszcze, ale sytuacja nie ulega zmianie. Zrezygnowany wychodzisz ze strony produktowej, przechodzisz „ręcznie” na koszyk i… tak. Znajdujesz ok. 10 dodanych (takich samych) produktów.
Wybiegając lekko w źle zaprojektowaną przyszłość, to dopiero początek tej „UX-owej” przygody: część sklepów nie dość, że popełnia opisany powyżej błąd to jeszcze… niepoprawnie projektuje możliwość usuwania produktów z koszyka, skutkiem czego, zamiast wyrzucić zbędne sztuki konkretnej rzeczy – i np. zamiast 2 takich samych produktów skończyć z 1 – usuwamy… wszystko, ku naszemu zaskoczeniu zostając z liczbą danego towaru równą 0.
Uniknięcie takiej sytuacji (i wzrostu poziomu poirytowania potencjalnych kupujących) jest niezwykle proste – wystarczy na ikonie koszyka zakupowego dodać widoczną cyfrę oznaczającą liczbę dodanych produktów. Niby nic odkrywczego, a jednak robi naprawdę znaczącą różnicę (rys. 1).

2. Koszmar marketera (i kupującego): niewidoczne CTA
Podobno w kwestii designu im prościej, tym lepiej. Wyjątkiem od tej reguły powinny być jednak call to action.
Jeśli marzy Ci się delikatny design z mało widocznym fontem, do tego jedynie subtelne obramowanie albo przycisk o ton jaśniejszy niż tło, to… zdecydowanie nie idź tą drogą. 
CTA to ten element strony, który MUSI być idealnie widoczny – nikt nie powinien się zastanawiać, gdzie ma kliknąć i dlaczego powinien taką akcję wykonać. Użyj więc dobrze widocznego fontu, wybolduj, co trzeba, i wybierz rzucający się w oczy kolor, słowem – zrób wszystko, żeby nikt, ale to naprawdę nikt nie przegapił najważniejszego w Waszym marketingowym wszechświecie przycisku. Jak to zrobić? Zerknij na rys. 2 – być może, wyda się on nieco przerysowany (i nie pochodzi z typowego e-sklepu), ale przedstawia kierunek, w którym powinieneś podążać.

3. Odrobina psychologii: prawo Millera, czyli mniej znaczy więcej
Nie wiem, czy miałeś kiedyś okazję zerknąć do Psychologii zachowań konsumenckich pod redakcją Falkowskiego i Tyszki, ale mogę tę pozycję polecić z ręką na marketingowym sercu. Znajdziesz tam m.in. opis prawa Millera, wedle którego pojemność pamięci krótkotrwałej wynosi 7 ± 2 dodatkowe elementy.
Przekładając z języka psychologicznego na „ludzki”: jeśli cała strona www krzyczy komunikatami „kup mnie”, ramkami „spójrz niżej”, a na koniec rzucisz konsumentowi w twarz pop-upem „kliknij tutaj” – to, mimo Twoich niewątpliwie widocznych starań, o dziwo, on jednak nigdzie nie kliknie, tylko opuści sklep.
Obciążenie poznawcze jest faktem; daj więc kupującym pole do odetchnięcia i nie pozwól, by czuli się przytłoczeni.

4. Pop-upy (w wersji mobile), czyli zabawa w chowanego
Przyznam wprost: nie jestem fanką atakowania klientów wyskakującymi zewsząd okienkami. Rozumiem ich ideę, ale jako konsument od razu po pojawieniu się pop-upu na własnym telefonie (albo desktopie) od razu szukam możliwości ich zamknięcia, nawet nie czytając komunikatu, który się na nich znajduje.
Moja niechęć to jednak tylko dowód anegdotyczny (więc z definicji się nie liczy), ale prawdziwym problemem jest zupełnie co innego – czyli brak testowania.
Nie zliczę, ile razy widziałam pop-upy/chaty/inne okienka wyskakujące w takich miejscach, że zasłaniały CTA lub inny istotny element interfejsu albo nie miały dobrze widocznego „x” umożliwiającego wyjście z „ramki”. 
Uprzedzając wszelkie uwagi: nie, ukrycie możliwości zamknięcia pop-upu nie sprawi, że przechytrzysz konsumentów i zmusisz ich do przyjrzenia się komunikatowi umieszczonemu w prezentowanej „ramce” niejako siłą. Bardziej prawdopodobnym scenariuszem jest ten, w którym po prostu klienci zrezygnują z zakupów i opuszczą stronę firmy.

5. Odrobina psychologii: zasady Gestalt 
Historia zasad Gestalt sięga 1920 r. – mogłoby się więc wydawać, że z pozoru nie mają one zbyt wiele wspólnego ze współczesnym designem stron internetowych. Nic bardziej mylnego – zresztą, zerknij sam.
Ludzki mózg ma tendencję do zbierania (często niezwiązanych ze sobą) punktów danych i postrzegania ich jako pewnej całości; często więc, idąc tym tropem, dostrzegamy kształty w rzeczach, w których… tak naprawdę ich nie ma.
Teoria może brzmieć nieco abstrakcyjnie, jednak przyjrzyjmy się temu razem na poniższym przykładzie:
 

 Rys. 3. Psychologia poznawcza a design. Rysunek przedstawiający zbiór kropek czy może już dalmatyńczyka...?


Większość z nas zapewne dostrzeże na tej wizualizacji biegnącego dalmatyńczyka. Czy jednak możemy być stuprocentowo pewni, że to rzeczywiście pies, a nie jedynie zbiór mniejszych i nieco większych kropek…?
Jak jednak ma się to do designu i stron www? Psychologia poznawcza i percepcja wzrokowa idą ze sobą w parze. Nasza tendencja do porządkowania (wirtualnego) świata ma wpływ na postrzeganie stron internetowych.
W praktyce odgrywa znaczącą rolę w procesie projektowania hierarchii wizualnej, kwestii związanych z doborem kolorów (gradienty, cieniowanie tła) czy grupowaniu podobnych elementów. Wszystkie te z pozoru mało znaczące komponenty mają ogromny wpływ na postrzeganie przez końcowego użytkownika Twojej strony, a mówiąc jeszcze szerzej: całego produktu lub usługi.
Żeby nie teoretyzować w nieskończoność, przyjrzyjmy się (wybranym) zasadom Gestalt nieco bliżej.

  • Common region (tłumacząc dosłownie: wspólny obszar): zasada, wedle której elementy zgrupowane w jednej strefie tworzą pewną całość. Dodanie w trakcie procesu projektowego ramek pozwala na uporządkowanie informacji i wskazanie, że nawet jeśli poszczególne z nich różnią się krojem/kolorem/bliskością, to razem tworzą pewien spójny rozdział Waszej wizualnej historii.
    Możesz wykorzystać tę zasadę na naprawdę wiele sposobów: od grupowania produktów, po chociażby social proof.
     
Rys. 4. Zasada wspólnego obszaru. Zgrupowanie i obramowanie ofert dedykowanych różnym branżom. Źródło: Synerise.com

 

  • Zasada ciągłości (continuity) – elementy ułożone na jednej linii postrzegane są jako powiązane ze sobą. Możesz wykorzystać to np. tak, jak zrobił to Amazon, sugerując, że pokazane produkty są do siebie podobne (i, oczywiście nie jest to tylko sugestia, a AI-owe rekomendacje – podkreślone jednak we „właściwy”, linearny sposób).
    Wykorzystaj tę zasadę, sugerując kolejne kroki niezbędne do podjęcia przy np. instalacji aplikacji zakupowej lub umieść w jednej linii benefity, które gwarantuje zakup oferowanej usługi.
     
Rys. 5. Wykorzystanie zasady ciągłości w pokazywaniu produktów podobnych przez firmę Amazon

 

  • Punkt skupienia (focal point) – elementy, które wyróżniają się wizualnie, automatycznie przyciągają i zatrzymują naszą uwagę. Dokładnie z tej teorii skorzystałam, om...

Pozostałe 70% treści dostępne jest tylko dla Prenumeratorów

Co zyskasz, kupując prenumeratę?
  • 6 drukowanych wydań magazynu Online Marketing
  • Dodatkowe artykuły niepublikowane w formie papierowej
  • Dostęp do czasopisma w wersji online
  • Dostęp do wszystkich archiwalnych wydań magazynu oraz dodatków specjalnych
  • ... i wiele więcej!
Sprawdź szczegóły

Przypisy