Image for Jak poprawić konwersję za pomocą UX? (cz.1)

Jak poprawić konwersję za pomocą UX? (cz.1)

Czas czytania:

Satysfakcja użytkownika w zasadniczym stopniu wpływa na konwersję witryny. Jeżeli projekt UX jest poprawny, strona prowadzi użytkownika za rękę do celu wyznaczonego przez jej twórców. Przy nieudanym projekcie odwiedzający napotyka na niepotrzebne przeszkody i rozpraszające elementy, co obniża współczynnik konwersji. Oto pierwsze 5 sposobów na to, jak za pomocą działań UX zwiększyć skuteczność witryny. 

1. Wygląd i umiejscowienie CTA

Przyciski wezwania do działania (CTA) są kluczowe dla osiągnięcia wysokiej konwersji strony. To one w dużym stopniu decydują, czy użytkownik wykona akcję, której od niego oczekujemy.

Znaczenie ma tutaj m.in. kolor. Musi on wyraźnie kontrastować z tłem, aby przycisk odpowiednio się wyróżniał. Dostosować go należy także do komunikatu, który chcemy przekazać oraz naszej marki i produktu. Barwy mają różne wydźwięki emocjonalne oraz konotacje znaczeniowe. I tak czerwony będzie bardziej alarmujący i dynamizujący, a np. zielony kojarzyć się może z naturą, spokojem i harmonią.

Aby zdecydować się na odpowiednią barwę, możemy stosować testy A/B, co pozwoli nam znaleźć najskuteczniejsze rozwiązanie. Zazwyczaj wybieranymi kolorami są jednak czerwony, pomarańczowy i zielony, aczkolwiek przy zachowaniu wysokiego kontrastu sprawdzą się także inne rozwiązania (jak biały czy żółty).

Równie ważne jest umiejscowienie przycisku. Musi on znajdować się na ścieżce, którą naturalnie przemierza wzrok użytkownika witryny, oczywiście w bezpośrednim sąsiedztwie nagłówka CTA. 

Jednocześnie należy zadbać o to, aby umieścić go powyżej linii zgięcia strony (above the fold – ATF). W innym przypadku skuteczność przycisku będzie znacznie niższa. Jeżeli na stronie występuje więcej wezwań do działania, możemy ponadto różnicować ich znaczenie za pomocą korzystania z innych kolorów oraz rozmiarów.

2. Treść CTA i nagłówka

Należy sprawić, aby tekst obecny w przycisku w sugestywny sposób zachęcał użytkownika do kliknięcia. Właściwy będzie tu tryb rozkazujący („zamów”, „wyślij”, „kup”). Jednocześnie treść powinna komunikować użytkownikowi, co stanie się po kliknięciu. Może to prowadzić nieraz do stosowania treści dłuższej niż jedno słowo, co ma szansę zwiększyć sugestywność CTA (np. „wyślij mi darmowego e-booka”).

Równie ważne są nagłówki wezwania do działania. Powinniśmy w nich wyraźnie komunikować korzyść, jaką da użytkownikowi skorzystanie z oferty. Skuteczne może być tutaj odwoływanie się do emocji. 

Wykorzystuje się np. zaznaczenie pilności oferty, poprzez określenie jej ograniczonego czasu (np. za pomocą licznika odmierzającego czas do końca promocji). Skłania to konsumenta do dokonania impulsywnego zakupu. Podobnie wygląda to w przypadku komunikowaniu niedostatku („zostało tylko x sztuk”).

3. Czytelność witryny

Żeby osiągnąć wysoką konwersję, strona powinna w wyraźny sposób prowadzić użytkownika do celu założonego przez jej twórców. Oznacza to klarowny projekt, pozbawiony nadmiarowych elementów, które mogłyby odciągać uwagę odwiedzających od najważniejszych aspektów witryny.

Dobrze sprawdzi się tu styl minimalistyczny. Pomocne w oszczędnym projektowaniu jest także podejście mobile first, polegające na tworzeniu strony z myślą w pierwszej kolejności o smartfonach i tabletach dopiero później urządzeniach dysponujących większym ekranem. 

Mobile first prowadzi do koncentracji na najważniejszych aspektach witryny, aby ew. dodatkowe funkcjonalności pojawiały się dopiero w wersji desktopowej (progressive enhancement). Sprzyja to koncentrowaniu się na elementach stricte związanych z konwersją.

W projekcie strony ważne jest umiejętne stosowanie pustych, pozbawionych treści przestrzeni („białych przestrzeni”, „whitespaces”). Dzięki nim możliwe jest podkreślenie ważnych informacji oraz naturalne skierowanie na nie wzroku. 

Białe przestrzenie potrafią wyraźnie zwiększyć zainteresowanie użytkownika danym fragmentem strony. Jeśli w sąsiedztwie whitespace umieścimy wezwanie do działania, zwiększy się szansa, że nie zostanie ono przegapione przez odwiedzającego stronę.

Ważne są także rozmiar i ilość tekstu, odstępy, a także kontrast między kolorem czcionki a tłem. Celem jest to, by treść strony można było czytać szybko i bez wysiłku, skanując ją wzrokiem i zatrzymując się na kluczowych elementach, jak CTA.

Warto stosować listy i wypunktowania. Dzięki nim użytkownik łatwo zda sobie sprawę z najważniejszych aspektów oferty lub etapów działań.

4. Przyjazne formularze

Jednym z powodów niskich wartości konwersji witryny mogą być zbyt długie i skomplikowane formularze. Ma to duże znaczenie w e-commerce, gdzie negatywnie wpływa na współczynnik porzuconych koszyków.

Formularze należy konstruować w taki sposób, aby użytkownik mógł wypełnić je szybko. Dlatego też należy zawrzeć w nich tylko niezbędne pola, np. umożliwiające dokonanie zakupu.

Istotne znaczenie ma także zastosowanie walidacji formularzy w czasie rzeczywistym. Użytkownik, powinien otrzymywać informację o popełnionym błędzie już w trakcie wypełniania pól. Nie należy odsyłać go ponownie na stronę formularza, jeżeli się pomyli, ponieważ może się zniecierpliwić i nie zechcieć już wykonywać „kolejnego podejścia”.

Ważne także, aby przy polach formularzy umieszczać podpowiedzi (np. podając format danych). Korzystne jest również stosowanie autouzupełniania, np. gdy klient składa kolejne zamówienie. Przyspiesza to proces transakcji.

(Abstrahując od kwestii UX trzeba też pamiętać, że rozporządzenie RODO, obliguje nas do gromadzenia tylko takiej ilość danych użytkownika, która jest niezbędna do świadczenia usługi, bez danych „nadmiarowych”).

Wideo i zdjęcia

Wg Limelight Networks konsumenci w 2021 r. spędzają średnio tygodniowo 7 godzin i 55 minut na oglądaniu wideo. Badania Wyzowl pokazują z kolei, że wideo marketing stosowało w 2020 r. już 85% firm. Sam YouTube natomiast wyświetlał użytkownikom w 2020 r. ponad 6 miliardów filmów dziennie. Pokazuje to, jak angażujące i popularne są treści tego typu. 

Warto wykorzystać ten fakt konstruując stronę internetową. Filmy mogą np. przedstawić zalety sprzedawanego produktu, zaprezentować jego zastosowanie, a także pokazać go z różnych perspektyw. 

Użycie do tego samego celu tekstu sprawiłoby, że strona musiałaby zawierać go zbyt dużo, by użytkownik mógł się z nim szybko zapoznać. Film wzbudza większe emocje i angażuje znacznie bardziej. Tego rodzaju wideo można umieszczać ponadto równolegle na YouTube czy w social media, aby wykorzystać zalety marketingu wielokanałowego. 

Należy jednak pamiętać, że dla budowania zaufania i zaangażowania użytkowników niezbędne jest wideo wysokiej jakości. W dobie YouTube’a odbiorcy są przyzwyczajeni do tego, że marki zamieszczają profesjonalnie zrealizowane filmy. Jeżeli nie możemy sobie na to pozwolić, zdecydowanie lepiej zastąpić je atrakcyjną grafiką.

Obrazy także przyciągają uwagę użytkowników, wzbudzając pozytywne emocje. Jest to również szansa na dodanie witrynie „elementu ludzkiego” za pomocą zdjęć osób (np. członków zespołu lub ambasadora marki). Strona staje się dzięki temu znacznie bardziej przyjazna.

Tutaj także należy zadbać o odpowiednią jakość. Warto również postawić na unikalność fotografii, stosując w miarę możliwości własne, profesjonalne zdjęcia, zamiast wykupionych w bazach. Dzięki temu unikniemy sytuacji, gdy inna witryna będzie zawierała tę samą treść graficzną. 


Chcesz dowiedzieć się więcej? Przeczytaj drugą część artykułu >

Zainteresował Cię ten artykuł?

Oferujemy profesjonalne wsparcie programistów w technologii Web.
Może Cię również zainteresować:
5 rzeczy, na które warto zwrócić uwagę, wybierając dedykowany system klasy ERP, WMS lub LMS

Tworzenie dedykowanych aplikacji web’owych (dostępnych przez przeglądarkę WWW z poziomu komputera, tabletu czy telefonu) jest… Read More

Warsztaty Discovery – 5 powodów dla których warto je przeprowadzić

Post pochodzi bezpośrednio z naszych oficjalnych kanałów na Social Media. W dynamicznym… Read More

Optymalizacja eCommerce vs. Zewnętrzny Dyrektor Technologiczny

🛠️ Studium przypadku 🛠️Post pochodzi bezpośrednio z naszych oficjalnych kanałów na Social… Read More