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ć?
https://born2be.pl
https://sklep.sfd.pl
https://4f.com.pl
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.
Możesz skorzystać z bezpłatnej wtyczki Top Bar.
Co znajdziesz w opcjach:
Konfiguracja paska – wtyczka Top Bar.
https://www.tena.pl/
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.
https://glowstore.pl
https://www.zalando.pl
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 :
<?php
if ( function_exists(’yoast_breadcrumb’) ) {
yoast_breadcrumb( '<p id=”breadcrumbs”>’,'</p>’ );}?>
Konfiguracja breadcrumbs – wtyczka Yoast SEO
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.
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.
https://www.mohito.com
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ć.
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.
Przykład cross-sellingu w sklepie https://www.euro.com.pl/.
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.
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.
https://born2be.pl/
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).
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.
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.
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.
https://verseo.pl/
https://www.renee.pl/
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.
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
Przykłady liczników/ social proof
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).
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.
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.
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>
https://frankowapomocprawna.pl/
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ć.
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
Przykłady FAQ na stronach https://inpensa.pl/, https://ekosun.pl/
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.
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.
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.
Napisz do nas! Pomożemy Ci wdrożyć dobry UX Design na stronę internetową
Autor: Agnieszka Wiechno – Digital marketing specialist w agencji LTB
Poinformuj nas o Twoich celach, oczekiwaniach i doświadczeniach. Przygotujemy indywidualnie dopasowaną strategię dla Twojej marki.
Napisz do nas – umówimy się na spotkanie online.
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.