Przedstawiamy miniprzewodnik dotyczący działań mających na celu zwiększenie konwersji. Poznasz sposoby optymalizacji elementów strony oraz instrukcje wdrożenia ich na stronę za pomocą CMS – WordPress. Wyjaśniamy co dodać, co zmienić, co poprawić?
1. Paski informujące o promocjach/obowiązujących kodach rabatowych (top bar)
https://born2be.pl
https://sklep.sfd.pl
https://4f.com.pl
Komentarz + zalety/ewentualne wady
Paski przyklejone do górnej krawędzi strony przykuwają uwagę i są widoczne zaraz po jej
włączeniu, ponieważ znajdują się na pierwszym ekranie. To właśnie na nim powinny
znajdować się elementy, które mają zainteresować użytkowników i zachęcić ich do interakcji. Jak widać na załączonych przykładach, paski te mają najczęściej wyraziste, kontrastowe kolory, dzięki czemu zwracają na siebie uwagę, mimo że nie zajmują dużo miejsca. Jeśli w sklepie/firmie obowiązują kody rabatowe, różnego rodzaju promocje, wyprzedaże, to warto poinformować o tym użytkowników. Tego typu komunikat jest często impulsem skłaniającym do przejrzenia oferty i dokonania zakupu.
Jak wdrożyć – WordPress
Możesz skorzystać z bezpłatnej wtyczki Top Bar.
Co znajdziesz w opcjach:
- status (aktywny/nieaktywny),
- pozycja,
- treść wiadomości,
- możliwość dodania przycisku (podlinkowanego),
- zmiana koloru.
Konfiguracja paska – wtyczka Top Bar.
2. Wyróżnienie tego, co jesteśmy w stanie zrobić za darmo (konsultacja, audyt, wycena)
https://www.tena.pl/
Komentarz + zalety/ewentualne wady
Darmowe usługi pozwalają potencjalnym klientom przekonać się o jakości firmy – możliwe jest wówczas sprawdzenie czy spełnia ona ich oczekiwania. Zainteresowani chętnie skorzystają z bezpłatnej, niezobowiązującej konsultacji, a jeśli firma pokaże się z dobrej strony – z pewnością dokonają zakupu – zadziała tutaj zasada wzajemności. W celu wyróżnienia takiej bezpłatnej usługi/produktu warto wykorzystać kolorowe przyciski/hasło CTA, które zwrócą na siebie uwagę – najczęściej umieszczane są na wysokości menu.
Jak wdrożyć – WordPress
- Przejdź do sekcji Wygląd > Menu.
- Dodaj do menu nowy element (istniejąca strona lub własny odnośnik).
- Wpisz URL oraz etykietę nawigacji.
- Nadaj klasę CSS (np. cta-menu). Jeśli nie mamy widocznej opcji dodawania klasy CSS, należy ją włączyć za pomocą Opcje ekranu -> Klasy CSS.
- W pliku odpowiadającym za style dodaj odpowiedni kod CSS.
3. Breadcrumbs – uproszczona, intuicyjna nawigacja
https://www.zalando.pl
Komentarz + zalety/ewentualne wady
Breadcrumbs, czyli nawigację okruszkową, warto wprowadzić zwłaszcza w przypadku sklepów internetowych, gdzie droga do konkretnych podkategorii jest bardziej rozbudowana. Przedstawiana jest ona jako odnośniki (linkowanie wewnętrzne!), które ułożone są zgodnie z hierarchią – najczęściej dzielą je strzałki, dzięki którym łatwiej jest się zorientować w serwisie. Dzięki breadcrumbs użytkownik będzie miał możliwość w łatwy sposób powrócić do interesującego go działu. Ułatwiona nawigacja = brak irytacji = większa szansa na powrót do sklepu.
Można skorzystać z dedykowanych wtyczek lub wykorzystać Yoast SEO.
1. Zakładka Yoast SEO > Wyszukiwarki.
2. Przejdź do ustawień menu okruszkowego i włącz okruszki.
3. Wygeneruj breadcrumbs w szablonie :
- wybierz miejsce docelowe,
- zaimplementuj kod:
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );}?>
Konfiguracja breadcrumbs – wtyczka Yoast SEO
4. Przyciski CTA
Komentarz + zalety/ewentualne wady
Aby przycisk CTA doprowadził do konwersji, musi zwracać na siebie uwagę. Ważne jest, aby odpowiednio wyróżnić ten element – np. kolorem, zwiększonym rozmiarem fontu, zastosowanym hoverem (efekt po najechaniu). W przypadku haseł CTA powinniśmy zastosować UX writing – twórzmy zwięzłe komunikaty nawołujące do interakcji. Jeśli to możliwe i jest zgodne ze stosowaną komunikacją, można pisać je w pierwszej osobie liczby pojedynczej, np. “Kupuję” zamiast “Kup”. Dzięki tego typu przyciskom użytkownik od razu wie, gdzie zostanie przekierowany lub co stanie się po kliknięciu.
Jak wdrożyć – WordPress
W zależności od wgranego buildera, zwykle “Button” widnieje już jako rodzaj możliwego do dodania elementu – wystarczy określić parametry i podpiąć odpowiedni link. Jeśli mamy do dyspozycji wyłącznie standardowy edytor, konieczna będzie zabawa z CSS lub pobranie wtyczki.
Dodawanie przycisku w Divi.
5. CTA przy newsletterze – zaoferowanie zniżki po zapisaniu
https://www.mohito.com
Komentarz + zalety/ewentualne wady
Newsletter to narzędzie, dzięki któremu można budować lojalność wobec firmy. Jeśli odpowiednio go zaprojektujemy, będzie skutecznym sposobem na zwiększenie sprzedaży. Najpierw jednak należy zachęcić użytkowników do zapisu. W tym przypadku również doskonale sprawdzą się hasła CTA – zwłaszcza jeśli będą połączone z językiem korzyści – przedstawmy potencjalnemu klientowi zalety. Zniżki/dedykowane kody rabatowe to skuteczny wabik. Warto je wyróżnić.
Jak wdrożyć – WordPress
Jeśli klient ma już wdrożony newsletter (np. wtyczka Newsletter z łatwym edytorem Drag and drop), wystarczy wejść w jego edycję i dodać odpowiednie wyróżniki.
Edytor wizualny wtyczki Newsletter.
6. Powiązane produkty/cross-selling/up selling
Przykład cross-sellingu w sklepie https://www.euro.com.pl/.
Komentarz + zalety/ewentualne wady
Cross-selling – sprzedaż powiązana, czyli polecenie produktów uzupełniających zamówienie. Przedstawione możliwe oszczędności, np. “razem taniej”.
Up-selling – zachęcenie klienta do kupna produktu lepszej jakości, z większą liczbą funkcji, a tym samym droższego. Ryzyko: użytkownik może nabrać wątpliwości co do wybranego za pierwszym razem produktu i porzucić koszyk, niekoniecznie wybierając podsuniętą propozycję.
Powiązane produkty – wyświetlenie podobnych produktów/zamienników. Ryzyko: użytkownik zacznie zapoznawać się z powiązanymi ofertami = opuści koszyk.
Zwykle moduł umieszcza się na etapie dodawania produktu do koszyka lub bezpośrednio w koszyku.
Jak wdrożyć – WordPress
W przypadku często wykorzystywanej wtyczki WooCommerce:
1. Przejdź do zakładki Produkty.
2. Wybierz produkt, przy którym ma pojawić się powiązany towar.
3. W submenu wybierz zakładkę Powiązane produkty.
4. Wyszukaj produkty, które chcesz powiązać, i dodaj je do listy.
Konfiguracja produktów powiązanych – wtyczka WooCommerce.
7. Posty formularz kontaktowy z walidacją
https://born2be.pl/
Komentarz + zalety/ewentualne wady
Warto udostępnić różne formy komunikacji – niektórym użytkownikom wystarczy numer telefonu, inni preferują korzystanie z formularzy. Ważne, żeby był jak najprostszy, ale funkcjonalny. Dobry formularz musi mieć także odpowiednio zaprojektowaną walidację – najlepiej jeśli pojawia się ona już na etapie uzupełniania, a nie dopiero po kliknięciu “Wyślij”. Jeśli wytłumaczymy od razu użytkownikowi co powinien wpisać w danym polu, unikniemy błędów i nie wywołamy irytacji. Pamiętaj, żeby finalny przycisk był aktywny dopiero w momencie, gdy uzupełnione zostaną wszystkie niezbędne dane. Informuj użytkowników o stanie przycisku odpowiednimi wyróżnieniami (np. wyszarzony przycisk nieaktywny, zielony przycisk aktywny).
Jak wdrożyć – WordPress
Polecana wtyczka – Contact Form 7.
1. Przejdź do wybranego formularza i przejdź do zakładki Komunikaty.
2. Uzupełnij treść, pamiętając o tym, żeby jak najlepiej, w zwięzły sposób, wytłumaczyć użytkownikowi co powinien zrobić/co zrobił nieprawidłowo.
3. Skonfiguruj dowolnie wygląd formularza z pomocą styli CSS. Pamiętaj o wyróżnieniu stanów przycisków.
Tworzenie treści komunikatów – wtyczka Contact Form 7.
8. Znane logo
Komentarz + zalety/ewentualne wady
Jeśli dany klient może pochwalić się współpracą ze znanymi markami lub posiada ich produkty w swojej ofercie, warto to wyróżnić. Element ten może wpłynąć na sposób postrzegania przez potencjalnych klientów. Jest to pewnego rodzaju zapewnienie o wysokiej jakości usług
i zachęcenie do dokonania konwersji. Zaufała nam renomowana marka = warto u nas kupować. Jeśli masz wątpliwości, czy możesz legalnie wykorzystać znak towarowy, uzyskaj zgodę na umieszczenie logotypu bezpośrednio od przedstawicieli marki.
Jak wdrożyć – WordPress
Wdrożenie zależne od buildera. Na przykładzie Divi:
1. Dodaj nowy wiersz w wybranej sekcji.
2. Wybierz układ (na ile równych części ma być podzielony dany wiersz).
3. Dodaj nowy moduł > Obraz.
4. Wgraj wybrane logotypy i umieść je na stronie.
Dodawanie modułu w kreatorze Divi.
9. Pop-up
https://verseo.pl/
https://www.renee.pl/
Komentarz + zalety/ewentualne wady
Pop-up to wyskakujące okienko, które zawiera dodatkowy komunikat. Aby wykorzystać je do zwiększenia konwersji, należy użyć języka korzyści, zaprojektować chwytliwą treść
i zachęcić użytkownika do wykonania działania. Okienka pop-up nie mogą być nachalne, nie powinny utrudniać dostępu do zawartości strony. Przemyśl, w którym momencie wyświetlić komunikat – nie musi pojawiać się od razu po włączeniu strony.
Jak wdrożyć – WordPress
Pobierz wtyczkę Popup Maker. Utwórz nowy pop-up i edytuj go za pomocą edytora WYSIWYG – możesz dowolnie skonfigurować rozmiar okienka, animację, kolor itd. Zmiany można sprawdzać w trybie na żywo.
Opcje edycji – Popup Maker
10. Liczniki/social proof
Przykłady liczników/ social proof
Komentarz + zalety/ewentualne wady
Wszelkiego rodzaju liczniki sprawiają, że wpływamy na sposób myślenia użytkownika. Oferowanie produktów “z limitowanych edycji”, “w ograniczonej liczbie”, “w ograniczonym czasie” to mechanizm, który wykorzystywany jest w przypadku reguły niedostępności. Jeśli umieścimy przy produkcie/usłudze informację o tym, że konkretna liczba osób aktualnie przegląda ofertę lub zakupiła produkt, zastosujemy dodatkowo regułę dowodu społecznego (tzw. social proof). Podobnie działają opinie (np. z liczbą gwiazdek).
Jak wdrożyć – WordPress
Konieczne będzie skorzystanie z dedykowanej wtyczki – dodanie obszaru odliczania umożliwia m.in. wtyczka WooCommerce Sales Countdown. Należy postępować zgodnie z instrukcjami.
11. Ikonka sticky
Komentarz + zalety/ewentualne wady
Ikonka przyklejona do boku strony umożliwia wykonanie akcji w dowolnym miejscu – warto dodać tam np. telefon (po kliknięciu przeniesie do okienka wybierania numeru), kopertę (po kliknięciu przeniesie do formularza kontaktowego) itd. Użytkownik w łatwy sposób może się skontaktować, niezależnie od aktualnej lokalizacji w witrynie. Kliknięcie w ikonkę może także wywoływać rozwinięcie bardziej rozbudowanego okna, z dłuższym komunikatem.
Jak wdrożyć – WordPress
Aby ikonka wyświetlała się na każdym adresie, można dodać ją do pliku footer.php.
Przykładowe style CSS
img.telright {
width: 5em;
position: fixed;
right: 1%;
top: 40%;
transition-duration: 0.6s;
}
img.telright:hover {
transform: scale(1.2);
}
Kod do dodania w footer.php:
<a href=”tel:555555555″ target=”_blank”> <img class=”telright” src=”/userdata/public/assets/images/tel-icon.svg” alt=”Ikona telefonu”></a>
12. Przewijanie do odpowiedniej sekcji
https://frankowapomocprawna.pl/
Komentarz + zalety/ewentualne wady
Możemy usprawnić poruszanie się w obrębie jednego URL, nadając ID poszczególnym elementom, co pozwoli na odsyłanie do nich z dowolnego miejsca na stronie. Na podstawie powyższego przykładu – między tekstem umieszczono przycisk “Unieważnij umowę kredytową CHF”, użytkownik po kliknięciu zostanie płynnie przeniesiony do fragmentu strony, w którym umieszczony został formularz kontaktowy. Strona zostanie przesunięta o odpowiedni odcinek, prezentując zainteresowanemu element, do którego chciał dotrzeć – nie musi scrollować.
Jak wdrożyć – WordPress
W przypadku kreatora Divi:
1. Wybierz element A, do którego chcesz odesłać i wejdź w ustawienia.
2. Przejdź do zakładki Zaawansowane i nadaj dowolne CSS ID (np. kontakt).
3. Przejdź do ustawień elementu B, którego kliknięcie ma odsyłać do elementu A.
4. W zakładce Zawartość > Link dodaj adres URL modułu, czyli CSS ID zapisane po “#” (np. #kontakt).
Indsturkcja wdrożenia w divi
13. FAQ
Przykłady FAQ na stronach https://inpensa.pl/, https://ekosun.pl/
Komentarz + zalety/ewentualne wady
FAQ (ang. Frequently Asked Questions) to element strategii user friendly – użytkownik
w szybki, łatwy sposób może uzyskać odpowiedź na nurtujące go pytania. W FAQ możesz umieścić wyszukiwane frazy – w naturalny sposób. Dodatkowo jeśli dodasz ten element wraz ze znacznikami schema.org, istnieje szansa, że Twoje odpowiedzi na pytania znajdą się w SERPach, co wpłynie bezpośrednio na samo pozycjonowanie.
Jak wdrożyć – WordPress
Wygeneruj kod zgodnie z instrukcją – https://developers.google.com/search/docs/data-types/faqpage – a następnie wklej go w wybranym miejscu na stronie.
Pamiętaj, aby na koniec wykonać test strony i sprawdzić czy dane strukturalne zostały wgrane w prawidłowy sposób: https://search.google.com/test/rich-results.
Nie każ myśleć odwiedzającym Twoją stronę
Zwiększenie konwersji wpływa bezpośrednio na wzrost sprzedaży. Warto zatem zadbać o pozytywne odczucia użytkowników korzystających z Twojej strony internetowej. Przejrzysta oferta i wartościowe treści bezpośrednio trafiające w potrzeby potencjalnego klienta są pierwszym krokiem do Twojego sukcesu w biznesie.
Autor: Agnieszka Wiechno – Digital marketing specialist w agencji LTB
Napisz do nas! Pomożemy Ci wdrożyć dobry UX Design na stronę internetową