Piękny i bestia czyli 
jak w reklamie łączyć design z UX

W TYM ARTYKULE PRZECZYTASZ O:

  * DLACZEGO PIĘKNA REKLAMA TO ZA MAŁO, JEŚLI ZGUBIMY ODBIORCĘ PO KLIKNIĘCIU

  * JAK ZMIANA DETALI CZY KOLORÓW MOGĄ WPŁYNĄĆ NA KONWERSJĘ I POTENCJALNE ZYSKI

  * ROLI ESTETYKI W SPRZEDAŻY I DLACZEGO ŁADNIEJSZE WYDAJE NAM SIĘ LEPSZE

  * NAJCZĘSTSZYCH BŁĘDACH REKLAM: NIEWIDOCZNYM CTA, ZŁYM DESIGNIE CZY BRAKU MOBILE FIRST

  * PROSTYCH ZASADACH UX, KTÓRE POMOGĄ CI STWORZYĆ PIĘKNE I SKUTECZNE REKLAMY

Znacie historię „The 300 mln $ button?” To jedna z najciekawszych opowieści biznesowych, w których to można odkryć, jak bardzo estetyka i użyteczność powinny iść ze sobą w parze. 

Jedna z większych firm internetowych oferujących zakupy online miała w swoim procesie standardowy krok, który znamy i dzisiaj: zanim można było zapłacić za zamówienie, trzeba było założyć konto. Z punktu widzenia firmy, wszystko było w porządku. Można było zbierać leady, tworzyć bazę danych i potem znów i znów przypominać o ofercie pod danego klienta. 

Po przeprowadzeniu testów, badacze odkryli, że bardzo wysoki odsetek klientów reagował z frustracją na jakiekolwiek rejestracyjne działania. Rozwiązanie było proste: zamiast przycisku „Zarejestruj się”, pojawił się inny „Kontynuuj jako gość”. W efekcie liczba klientów kończących zakupy w ciągu miesiąca skoczyła o 45%. Po roku ta drobna zmiana przyniosła firmie właśnie te dodatkowe 300 milionów dolarów. Oczywiście warto wziąć poprawkę na inne czynniki wpływające na sprzedaż, jak asortyment, emocje czy potrzeby zakupowe… ale wynik, przyznacie, jest imponujący. 

Ta historia wydarzyła się naprawdę i jest uznawana za dowód na to, jak użyteczny UX i empatia wobec użytkownika może przełożyć się bezpośrednio na konkretne zyski. Obserwacja i słuchanie prawdziwych użytkowników jest kluczem do najlepszych rozwiązań w świecie reklamy. Czyli jakich? 

Wnętrze też się liczy

Dobry design przyciąga wzrok. Ale to użyteczność generuje konkretne wyniki. Nawet najlepsza reklama bez konkretyzacji i ścieżki konwersji może stać się bezużyteczna. 

Sukces kampanii tworzy się gdzieś na granicy między poczuciem estetyki i psychologii zachowań użytkownika. Wygląd decyduje o kliknięciu (CTR), ale UX decyduje o zakupie/konwersji (ROI). Sukcesem jest synergia: design otwiera drzwi, a UX prowadzi klienta za rękę do kasy.

UX to oczywiście skrót od User Experience. Termin ten został spopularyzowany przez Dona Normana, który był jednym z pierwszych badaczy i popularyzatorów projektowania kognitywnego. W latach 90 Don pracował w Apple i był zdania, że kontakt człowiek-maszyna powinien obejmować wszystkie aspekty interakcji – obejmować i uwzględniać emocje, percepcję i reakcje od pierwszego kontaktu aż po otrzymanie produktu i obsługę posprzedażowa. 

Dziś w zasadzie nie zaczyna się projektowania bez UX – niezależnie od tego, czy budujemy wielki e-commerce czy kampanijny landing page, kluczem do serca i portfela klienta jest jego wygoda. 

A gra idzie o wysoką stawkę, bo według Baymard Institute, niezależnej organizacji badawczej specjalizującej się w UX e-commerce, średni wskaźnik porzuceń koszyka wynosi niemal 70%!

Ponad 2/3 potencjalnych klientów porzuca koszyk z powodu braku czytelności, nadmiernej liczby klików czy skomplikowanym procesem płatności. 

Nawet najlepszy produkt i supercena nie pomogą, gdy trzeba przeczołgać się przez proces zakupowy.  

Pierwsze wrażenie

Efekt estetyki, czyli Aesthetic-Usability Effect to jedno z najważniejszych zjawisk psychologicznych na styku designu i ludzkiego zachowania. No cóż, nie od dzisiaj wiadomo, że to, co ładne uważa się za lepsze. Rzeczy estetycznie dopracowane, z ciekawym, intrygującym designem w podświadomości ludzi stają się zarazem tymi lepiej działającymi. 

Jednakże problem rodzi się, gdy po kliknięciu w reklamę nie zadzieje się nic, co utwierdzi go w tym przekonaniu. Po obejrzeniu świetnej reklamy wchodzimy na skomplikowaną, nieintuicyjną stronę www i… wiejemy, bo nie mamy czasu i ochoty wczytywać się w detale.

To pierwsze wrażenie buduje się w ułamku sekundy. No cóż, dzieje się tak z trzech głównych powodów:

– Mechanizm psychologiczny: Ludzki mózg jest z natury… leniwy i stosuje drogi na skróty. Oglądając harmonijną i nowoczesną grafikę reklamową, przypisujemy całemu produktowi lub marce pożądane cechy: wysoka jakość, profesjonalizm i bezpieczeństwo. Co ciekawe, przymykamy też często oczy na drobne nieścisłości, błędy czy wpadki techniczne. 

– Pułapka pierwszego wrażenia: Estetyka przykuwa oko. Potrafi świetnie podbić wskaźnik CTR (Click-Through Rate), czyli klikalność samej reklamy. Potem jednak musi za tym iść ciąg dalszy, bo nie ma nic gorszego, jak… odrzucona miłość!

– Moment prawdy: Po kliknięciu liczy się czas. Jeśli nasza strona będzie się długo ładować albo odbiega od rzeczywistości z bannera… czar pryska. Następuje potężny zgrzyt poznawczy. Klient czuje się oszukany. A my czujemy, jak tracimy pieniędzy na budżet reklamowy, który nie przynosi zysków.

Przerost formy nad treścią

Firma HubSpot przeprowadziła kiedyś prosty eksperyment. Podczas testowania landing page jednej ze swoich kampanii reklamowych, stworzyła jego wersje A i B. Strony w zasadzie były bardzo podobne, miały taką samą treść. Różniło ich tylko jedno: w wersji A przycisk CTA był zielony, spójny z kolorystyczną hierarchią. W wersji B czerwony, zupełnie inny niż cała reszta strony. 

Jak pewnie domyślacie się, czerwony przycisk wygenerował więcej kliknięć. Brzydszy, niepasujący do pięknej estetyki strony button okazał się być skuteczniejszy. Wyrywał mózg z uśpienia, budował kontrast wizualny i sugerował kierunek działania. Pozorne zaburzenie jakości podniosło współczynnik klikalności o 21%.

Jeśli chodzi o dostrzeganie reklam – czy to baneru internetowego czy to reelsa, zawsze problem jest ten sam. Gdy mamy przerost formy nad konkretną treścią. Głównymi grzechami projektantów reklam są wtedy:

Brak wyraźnego buttonu Call to Action

W pogoni za minimalizmem i elegancją często ukrywamy kluczowe elementy konwersji. Przycisk „Kup teraz” lub „Zapisz się” świetnie wtedy wygląda, ale nie spełnia swojej najważniejszej funkcji: informuje gdzie i w co kliknąć.

Zbyt krzykliwy i jaskrawy design

Nasz mózg nauczył się ignorować wszystko, co wygląda jak typowa, krzykliwa reklama. Nazywa się to ładnie Ślepotą Banerową. Im bardziej szalony jest design, tym mocniej nasz system obronny odfiltrowuje ten komunikat. Czasem warto zrezygnować z nadmiernej grafiki na rzecz czystego designu i konkretnego tekstu

Brak dopasowania do nośnika 

Responsive Web Design to dziś praktycznie obowiązek przy tworzeniu jakichkolwiek treści do internetu. Kampania stworzona na dużym monitorze może i wygląda świetnie, ale 70% ruchu w w reklamach na Meta czy TikToku odbywa się na smartfonie. Zbyt małe menu czy ucięta grafika to podręcznikowy błąd zabierający konwersję.

UX w reklamie i to się klika

Użytkownik musi od razu wiedzieć wszystko, co powinien. Rozpoznać ofertę. Skojarzyć markę. Dowiedzieć się o korzyściach. No i kliknąć tam, gdzie powinien. I tu wchodzi UX, cały na biało.

Prowadzi użytkownika za rączkę od banera z fajną reklamą prosto do koszyka zakupowego i realizację płatności. Taka architektura rządzi się swoimi prawami. Oto one: 

Zasada 3 sekund

Użytkownik nie ma czasu i energii na wczytywanie się. Reklama i landing page muszą mu błyskawicznie odpowiedzieć na trzy podstawowe pytania:

– Co to jest i co mi oferujesz?

– Dlaczego powinno mnie to obchodzić?

– Co mam teraz zrobić?

Jeśli odpowiedź wymaga przewijania strony lub głębszej analizy, użytkownik klika iksik albo wstecz i tyle go widzieliśmy.

Hierarchia wizualna 

Można w sumie powiedzieć, że dobry projektant UX to iluzjonista. Wie, z której strony wystrzelić konfetti do widza i jak wyciągnąć królika z kapelusza. Znając przyzwyczajenia ludzkiego oka (jak skanowanie strony w kształcie litery Z albo F) może odpowiednio dobrać wielkości fontów, zdjęć czy światło by ułożyć elementy w logiczną sekwencję. Wciągający nagłówek, krótkie sformułowania, bullety z wypisanymi korzyściami czy wybijający się button CTA… tu wszystko ma znaczenie.

Dostępność i inkluzywność

UX to także projektowanie z myślą o ograniczeniach, jakie ma coraz większa grupa internautów. Osoby starsze czy słabowidzące… ba, nawet te, które korzystają ze smartfona na słonecznej plaży mogą mieć kłopoty z przeczytaniem źle zaprojektowanych komunikatów. Dbanie o te detale to nie tylko kwestia etyki czy rozwiązań prawnych. To też szanowanie potrzeb swoich potencjalnych klientów kampanii.

Dobrze jest tworzyć rzeczy piękne. A jeszcze lepiej? Te, które pięknie się klikają!

Chcesz zacząć projektować zgodnie z zasadami UX?

Na początek zacznij od tych prostych zasad:

1. Pamiętaj o 3 sekundach
Twoja reklama nie może być zagadką artystyczną. Użytkownik powinien od razu wiedzieć co mu oferujesz, za ile i co ma zrobić, by to dostać.

2. Test kciuka
Korzystasz ze smartfona, więc pozwól innym też skorzystać. Przycisk „Kupuję” musi być na tyle duży i oddalony od innych elementów, aby można było w niego kliknąć, gdy drugą ręką trzymasz się poręczy pędzącego na uczelnię autobusu. 

3. Test rozmytych oczu
Spójrz na swój projekt i mocno zmruż oczy, aby obraz się rozmazał. Widzisz wyróżniający się przycisk CTA? Jeśli nie, podkręć bardziej kontrast. 

4. Zasada jednego kroku
Jak chcesz, by użytkownik zapisał się na webinar albo wypełnił studencką ankietę, poproś go o minimum informacji: imię i e-mail. Każde dodatkowe info obniża szansę, że ktoś się zapisze. |

5. Dotrzymaj obietnicy z reklamy
Prosta zasada: jeśli coś obiecujesz na banerze, na stronie musisz dowieźć. Jak zamiast do zakładki z zabawkami przeniesiesz użytkownika na stronę główną sklepu, by sam odszukał promocję – szybko Ci on ucieknie.

Lista linków – tu znajdziesz więcej:

1. Tu teksty o estetyce i użyteczności
   https://lawsofux.com/aesthetic-usability-effect/
   https://www.nngroup.com/articles/aesthetic-usability-effect/
2. Tu artykuł o buttonie za 300 milionów
   https://articles.centercentre.com/three_hund_million_button/
   https://uxeria.com/przycisk-wart-300-milionow-dolarow/
3. Tu kilka wskazówek jak dopieszczać stronę za pomocą testów A/B
   https://blog.hubspot.com/marketing/ab-tests-run-homepage-list
4. Fajny, pogłębiony artykuł o projektowaniu UX
   https://nowymarketing.pl/jak-wykorzystac-podstawowe-prawa-ux-w-celu-zwiekszenia-konwersji-i-poprawy-doswiadczen-w-e-commerce/

W AdScool znajdziesz materiały i szkolenia poświęcone m.in. social media, e-commerce, influencer marketingowi i nowym modelom sprzedaży online. To praktyczna wiedza, która pozwala lepiej poruszać się w dynamicznie zmieniającym się środowisku cyfrowym.