User friendly – 4 dobre praktyki UX-owe na przykładzie landingu sprzedażowego

Breadcrumb Abstract Shape
Breadcrumb Abstract Shape
Breadcrumb Abstract Shape
Breadcrumb Abstract Shape
Breadcrumb Abstract Shape
Breadcrumb Abstract Shape
Widać ręce osoby siedzącej przy stole, w lewej dłoni trzyma smartfon, drugą rozkład niewielkie kawałki papieru obok siebie. Ilustracja do wpisu na temat dobrych praktyk user friendly
  • Ola
  • 10 lis, 2024
  • Komentarzy
  • 10 Mins Czytania

User friendly – 4 dobre praktyki UX-owe na przykładzie landingu sprzedażowego

Wszystko, co projektujemy, nie tylko w branży online, powinno być user friendly. Czyli przyjazne użytkownikowi. Przydatne, użyteczne, ładne, proste. Same miłe przymiotniki. Aby wszystkie zadziałały w praktyce, niezbędne jest zaprojektowanie produktu lub usługi. To jak wnętrze, w którym czujemy się dobrze. Tak samo planuje się też strony internetowe. W projektach, które realizuję ze swoimi klientami, często pojawia się landing sprzedażowy. I to na przykładzie tego typu strony omówię 4 praktyki UX-owe, o których dobrze pamiętać.

Z tego wpisu dowiesz się między innymi:

User friendly – jak to rozumieć

Przede wszystkim warto pamiętać, że te wszystkie określenia, które wymieniłam we wstępie, muszą ze sobą współgrać. Nie wystarczy, że coś jest ładne. Jeżeli jest tak skomplikowane, że 90% odbiorców nie jest w stanie zrealizować zakupu – to znaczy, że nie działa. Czyli nie jest user friendly. Dlatego te zasady, o których będę opowiadać, dotyczą bardzo różnych aspektów projektowania – tych bardzo praktycznych, ale też psychologicznych, związanych z emocjami.

To tylko etap na ścieżce użytkownika

Landing page to strona lądowania, więc użytkownik pokonuje jakąś drogę, żeby tam trafić. Skądś ląduje, gdzieś ta strona ma go przenieść. Nie projektuj landing page’a w oderwaniu od innych elementów ścieżki. Przemyśl ją, zaprojektuj – i dopiero wdrażaj. A po wdrożeniu i tak przetestuj i sprawdź, czy wszystko działa, jak powinno.

Czy masz wpływ na ścieżkę każdego użytkownika? Nie. Czy musisz rozważać wszystkie prawdopodobne opcje? Też nie. Więc ile, które, jakie? Te najistotniejsze – te, na których Ci zależy. Możesz je zaplanować, zmierzyć i później przeanalizować.

Skąd i jak zapraszasz użytkownika

Pamiętaj, że to Ty ściągasz ruch na ten landing swoją komunikacją. Weź pod uwagę miejsca, które przekierowują na stronę. I komunikaty, za pomocą których to robisz. Czyli między innymi:

  • reklamy, 
  • newsletter, 
  • treści organiczne: na FB, na LinkedIn,
  • tę nieco bardziej efemeryczną komunikację, np. na Insta Stories.

Staraj się nie powtarzać 1:1 komunikatów, ale też grafik (zdjęć i mockupów). Stwórz jasne CTA (ang. call to action, czyli wezwanie do działania) – i to już na pierwszym widoku (czyli w pierwszej sekcji). Za chwilę opowiem o tym nieco więcej. 

Landing jest kolejnym krokiem, użytkownik skądś przychodzi i idzie dalej. Żeby mieć pewność, na co trafia w tym czasie, przejdź ścieżkę i sprawdź, czy nie ma jakichś potykaczy i utrudnień. Zorientuj się, czy na pewno na każdym etapie wiadomo, co robić dalej. Jeśli Twój landing sprzedażowy działa w trybie ciągłym, to wykonuj takie testy regularnie.

Projektowanie pozytywnych emocji

Są wątpliwości, czy autorką tych słów jest Maya Angelou, ale przytaczam je, bo pasują do kontekstu:

Nauczyłem się, że ludzie zapomną, co powiedziałeś, ludzie zapomną, co zrobiłeś, ale nigdy nie zapomną, jak sprawiłeś, że się czuli.

Landing page to nie jest bezpośrednia komunikacja. Jednak zachęcam, żeby tak o tym myśleć. Zdarza się, że w internecie spotykamy komunikaty, które mają na celu zawstydzić użytkownika. Na przykład tego, który nie chce skorzystać z konkretnej oferty. Szczególnie mocno widać to w jednej sekcji.

Dla kogo jest / dla kogo nie jest ten produkt

Zdaję sobie sprawę, że pokusa, żeby w każdej sekcji podpalać do zakupu, jest ogromna. Sekcja, w której punktujesz cechy i nastawienie klienta, jest mocno o nim. Ma się utożsamiać z tym, co tam opiszesz. Jest też chętnie czytana, bo mocno rozbija wątpliwości. 

Nie warto jednak zawstydzać użytkownika. Zamiast korzystać z dość często powielanej frazy „jeśli nie chcesz się rozwijać, mój kurs nie jest dla ciebie”, wypisz rzeczowe argumenty. To nieprawda, że ludzie, którzy nie korzystają z Twoich usług, są leniwi, nie chcą uczyć się nowych rzeczy. Empatyzuj z osobami, które z różnych powodów nie są gotowe na zakup. Jeśli mimo wszystko poczują się w Twoich miejscach w sieci dobrze, mogą być Twoi klienci w przyszłości. Albo z jakiegoś powodu nie będą Twoimi klientami w ogóle. 

O wiele łatwiej jest budować ten przekaz, mając już przygotowane informacje o personach i przynajmniej jednej antypersonie produktu.

Projekt vs konsumpcja treści

Kojarzysz te rolki lub zdjęcia, w których pokazuje się oczekiwania i rzeczywistość? Tak samo można by przedstawić rozdźwięk między tym, jak projektuje się strony, a jak konsumują treści użytkownicy. 

Podczas przygotowania oglądamy landingi na dużych monitorach lub na ekranach laptopów. Z kolei użytkownicy odpalają te same strony na telefonie. I okazuje się, że coś, co wyglądało dobrze, nagle się rozjeżdża. A to przecież ma być user friendly – czyli dobrze sprawdzać się tam, gdzie akurat jest użytkownik. 

Dodatkowo ludzie bardzo często mają w smartfonach przygaszony ekran, aby oszczędzić baterię. No i wyświetlacz telefonu jest dużo mniejszy, a układ projektu w wersji mobile wygląda inaczej. Wszystko to ma wpływ na doznania odbiorcy. Przypominam, odbiorcy, który aktualnie czyta i ogląda głównie na ekranie smartfona. Ale po kolei!

Mobile first

Mam wrażenie, że jest to już tak oklepane, jak rada w stylu „mów językiem korzyści”. A jednak, na landingach nadal spotykam podstawowe błędy. 

Za małe marginesy utrudniają czytanie. Ale jeszcze gorsze jest to, gdy stronę trzeba przesuwać w poprzek, żeby przeczytać wszystkie treści. Trzeba scrollować kilometry, żeby dotrzeć do CTA. 

Wiem, że czasami trudno przenieść 1:1 widoki z desktopu, ale nie róbmy użytkownikowi pod górę. Widziałam landingi, na których musiałam 10 razy przescrollować stronę na telefonie, żeby dotrzeć do przycisku z opcją zakupu. Zmęczony użytkownik raczej nie stanie się zadowolonym klientem. W większości przypadków prawdopodobnie nie stanie się nim w ogóle.

No ale co tam moje osobiste wrażenia. Przyjrzyjmy się statystykom. 60-80% ruchu w Internecie (w zależności od branży) wydarza się już na telefonach. Zdają sobie z tego sprawę banki, sieciowe sklepy internetowe, serwisy informacyjne. Ale user friendly jest też w zasięgu niewielkiego biznesu online. Dlatego gdy już masz świadomość, na co zwracać uwagę, przypominaj o tym sobie i swoim współpracownikom regularnie. No i sprawdzaj, jak się prezentuje to, co tworzysz i przekazujesz dalej.

User friendly kontrast

Wspominam o przygaszonym ekranie celowo, bo to akurat w pół minuty możesz sprawdzić samodzielnie. Zbyt niski kontrast występuje, gdy połączysz ze sobą zbyt zbliżone kolory, na przykład dwa jasne lub dwa intensywne. Dotyczy to zestawienia tła z tekstem – nie tylko w obszerniejszych fragmentach, ale też na przyciskach. 

Kontrast to element dostępności stron internetowych. Czyli dbania o to, by treści mogły przeczytać osoby słabiej widzące. Ale szczerze mówiąc, gdy zachowane są konkretne standardy, korzystają wszyscy użytkownicy. Dlatego kontrast jest ważny nie tylko w wersjach mobile, również w desktopowych.

Parametry kontrastu – i jak je sprawdzić

Oczywiście subiektywne odbieranie kolorów to jedno. Nie ma sensu mówić projektantowi: wczuj się w sytuację osoby niedowidzącej. Na szczęście w sieci dostępne są narzędzia i wszystko można sprawdzić.

Ja używam narzędzia o nazwie Contrast Finder. Jest proste w obsłudze i pokazuje jednoznaczny wynik. Gdy współczynnik wskazuje mniej niż 4.5, kontrast jest zbyt niski. 

To znaczy, że użytkownik może gorzej widzieć treści. 

Czasami na pierwszy rzut oka wszystko wygląda dobrze, ale po sprawdzeniu mamy już „czarno na białym”, że kontrast jest za mały. Sprawdzaj kontrasty połączeń na landingu – zawsze, gdy wprowadzasz nowy element. A jeśli masz sprawdzone zestawy kolorów – trzymaj się ich.

Sprawdzanie kontrastu to jak przyjrzenie się sklepowej witrynie, czy na pewno szyba w niej jest czysta i wszystko na wystawie widać idealnie.

Screen z narzędzia Contrast Finder: kontrast na mojej stronie www. Ilustracja do arykułu na temat user friendly.
Screen z narzędzia Contrast Finder: kontrast na mojej stronie www

Przyzwyczajenia z offlajnu

Konsumenci wykazują te same lub podobne zachowania w onlajnach, co w zwykłych sklepach. Wyobraź sobie: jesteś w centrum handlowym, oglądasz płaszcz, ostatnia sztuka, ale Twój rozmiar. Często, zanim go przymierzysz, zerkniesz na cenę. Jeśli nie ma metki, to co zrobisz? 

Większość ludzi go odłoży i zrezygnuje. Nie będą szukać obsługi sklepu, żeby zapytać w jakiej jest cenie. Płaszcz musiałby zrobić na nich naprawdę piorunujące wrażenie, żeby przeprowadzili to małe śledztwo. 

Sprzedajesz drogi produkt i chcesz przedstawić wszystkie najlepsze argumenty i zachęty przed zdradzeniem ceny? To bez sensu. Nie ukrywaj ceny, bo sporo osób będzie chciało ją poznać na starcie. Nie musi oczywiście wisieć u góry strony – podświetlona i na czerwono. Ale zrób kotwicę w menu górnym lub w jednym z pierwszych widoków. Tu jeszcze raz przypomnę: landing to etap ścieżki. Zadbaj o to, żeby użytkownik odwiedził stronę z pakietem danych o produkcie.

User friendly: niech będzie ładnie i miło

Strona spełniająca (również te podświadome) oczekiwania użytkownika będzie mu się dobrze kojarzyła. A czego jako użytkownicy szukamy na stronach? Transparentności, czytelności, kompleksowej informacji. Dlatego – oprócz kotwicy do cennika – zadbaj też o inne elementy:

  • czytelne opinie zadowolonych klientów (mogą być screenami, ale odpowiedniej wielkości),
  • przejrzyście rozpisaną agendę (więcej szczegółów to nie zawsze więcej informacji dla klienta),
  • estetyczny, ale też zgodny z rzeczywistością mockup (nie przedstawiaj e-booka jako papierowej książki, to wprowadza w błąd), 
  • połączenie tekstu i grafik, obecność wyróżników (ściana tekstu zniechęca),
  • miejsce, w którym udzielasz odpowiedzi na mogące się pojawić pytania – również te proste, techniczne i organizacyjne (czyli nie zapominaj o tym, by porządnie zaprojektować FAQ).

Na monitorze komputera sporo projektów wygląda dobrze. Co z tego, jeśli na telefonie wygląda to jak ściąga zestresowanego licealisty na sprawdzianie z geografii. Nieczytelne elementy będą jak szlaban. Mało który użytkownik zechce przeskakiwać, żeby sprawdzić, co jest dalej.

4 dobre praktyki UX-owe na przykładzie landingu sprzedażowego

Aby podsumować, zebrałam tytułowe 4 dobre praktyki, które wesprą tworzenie landingu sprzedażowego w duchu user friendly. 

  • Traktuj landing sprzedażowy jako jeden z elementów na ścieżce użytkownika. 
  • Dbaj o to, jak użytkownik czuje się na Twojej stronie i jakie emocje towarzyszą tej wizycie, jakie skojarzenia z Twoją ofertą buduje.
  • Pamiętaj na każdym etapie, że użytkownik prawdopodobnie będzie konsumował Twoje treści w opcji mobile. Dbaj o kontrast, marginesy, układ treści.
  • Zadbaj o potencjalnego klienta, starając się, by Twój landing zawierał wszystkie niezbędne informacje – w miejscu i w kolejności, jakich potrzebuje i szuka  użytkownik. 

User friendly w praktyce

Końcowy sukces landingu w kontekście user friendly to efekt testowania i poddawania w wątpliwość na każdym etapie. Nie chodzi absolutnie o to, by sabotować własną pracę i czepiać się każdego elementu. 
W osobnym tekście pisałam więcej o projektowaniu landingu sprzedażowego. Jednym z najważniejszych elementów w procesie jest testowanie. Sprawdzanie różnych rzeczy i pytanie o nie innych wymaga zdystansowania się do własnego projektu, ale zdecydowanie warto. Użytkownicy doceniają takie gesty.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *