Jak łatwo zwiększyć konwersję dzięki czytelności (+ lista 13 typowych błędów)

Aby użytkownik coś od Ciebie kupił, musi to najpierw zrozumieć. Jak zwiększyć konwersję dzięki poprawie czytelności? Wyeliminuj problemy przedstawione w tym artykule.

Znasz pewnie regułę KISS (Keep It Simple, Stupid). Według Wikipedii ma ona nawet polski odpowiednik – BUZI (Bez Udziwnień Zapisu, Idioto), choć zupełnie on do mnie nie trafia.

Wedle KISS najlepsze są proste rozwiązania. Takie, które zrozumie nawet przysłowiowy “głupek”.

Nie inaczej jest w sieci. Prostota i czytelność to fundamenty dobrze konwertującej strony.

W tym artykule przedstawię Ci 13 typowych problemów z czytelnością stron internetowych, które obniżają konwersję. Znajdziesz tu też przykłady oraz potencjalne rozwiązania.

Ale najpierw… krótka historia zakupów, które skomplikował brak czytelności.

Brak czytelności na stronie frustruje użytkownika

Ostatnio kupowałem soczewki online.

Zakupy robiłem w przerwie między 90 minutą a dogrywką meczu Kolumbia – Anglia (tak, tak – użytkownicy w sieci kupują też w krótkich okienkach czasu lub robiąc inną rzecz. Dlatego zawsze zakładaj, że poświęcą Twojej stronie niewiele uwagi).

Zależało mi na modelu Air Optix Aqua 6 szt.

Wszedłem na porównywarkę cenową i szukałem sklepów, które mają ten produkt.

1. Szkla.com

Znam markę i jej ufam, w przeszłości tam kupowałem.

Wchodzę na kartę produktu i nie mogę dopasować mocy soczewek. Opcja jest zablokowana. Nie wiem, gdzie szukać soczewek o odpowiedniej mocy. Wychodzę z serwisu.

2. Twojesoczewki.com

Również znana mi marka. Dotarłem nawet do koszyka:

Gdzie mam teraz kliknąć?

Wysiłek jaki musiałbym włożyć, by połapać się w tym koszyku jest za duży.

Koszyk jest połączony z checkoutem i w pełnej krasie wygląda tak:

Ała. Wychodzę z serwisu. Szukam dalej.

3. Taniesoczewki.pl

17,99 zł za wysyłkę? Sporo. Pytanie, czy to wysyłka kurierem (nie chcę), czy do Paczkomatu (preferuję).

Informacja o formach wysyłki nie jest łatwo dostępna. Nie znalazłem jej w 5 sekund, więc wychodzę z serwisu.

4. optiva.pl

Nieznana mi marka, ale po wejściu wita mnie czytelną kartą produktu, co jest na plus.

Moc soczewek mogę wybrać z czytelnej listy.

W koszyku widzę informację o dostępnych formach dostawy i ich cenach.

Finalnie decyduję się na optiva.pl i następnym razem pewnie też tak zrobię. Moje doświadczenie zakupowe było płynne i bezbolesne.

W efekcie trzy sklepy zapłaciły za ściągnięcie mnie na stronę i przez brak czytelności nie odnotowały sprzedaży. Dopiero czwartemu udało się mnie przekonać do zakupu. Dlaczego? Bo strona była czytelna.

Czym jest czytelność na stronach internetowych?

Czytelna strona internetowa to taka, gdzie w max. 10 sekund użytkownik wie:

• Co to za firma
• Co oferuje / czy oferta odpowiada jego oczekiwaniom (np. zbudowanym przez reklamę)
• Dlaczego warto skorzystać z oferty
• Czy firma wygląda na godną zaufania
• Jaki jest kolejny krok (Call To Action) – co ma zrobić / gdzie kliknąć

Po przeskanowaniu w kilka sekund strony użytkownik musi mieć w głowie jak najmniej znaków zapytania. Inaczej z dużym prawdopodobieństwem opuści stronę.

Kruczek? Musisz to osiągnąć używając jak najmniejszej liczby elementów i treści.

Przeładowanie informacjami sprawia, że użytkownik się męczy i opuszcza witrynę (szkoda mu energii na wyławianie potrzebnych informacji).

Optymalizację konwersji zacznij od poprawy czytelności

Kilka argumentów, które przekonają Cię, że czytelność to fundament skutecznej strony internetowej.

#1: Pierwsze 10 sekund wizyty na stronie jest kluczowe

Według badań Nielsena w ciągu pierwszych 10 sekund musisz przekonać użytkownika, że warto zostać na Twojej stronie. Czytelna komunikacja wartości / oferty znacznie zwiększa Twoje szanse.

#2: Jeśli czytelność strony jest kiepska, to reszta jest bez znaczenia

Możesz mieć zoptymalizowane formularze, komunikację niskiej dostępności produktów, mechanizmy zwiększające wartość koszyka itd. Ale jeśli przez brak czytelności użytkownik nie zapozna się z Twoją ofertą, to wszystko na nic.

Elementy podnoszące konwersję na kolejnych etapach procesu zakupowego nie będą miały szansy zadziałać, bo użytkownicy opuszczą go już na starcie.

#3: Problemy z czytelnością znajdziesz szybko

Analiza heurystyczna to metoda, dzięki której ocenisz czytelność strony. Bez narzędzi czy budżetu. Możesz zacząć działać od ręki. Dobrym dodatkiem jest też test 5 sekund.

#4: Wdrożenie poprawek jest stosunkowo proste

Co najczęściej obniża czytelność? Za dużo elementów, za długie i zawiłe teksty, kiepskie zdjęcia. Zmiany w copy czy usunięcie elementów jest stosunkowo łatwe i szybkie. Zrobisz to bez pomocy programisty.

Jak zwiększyć konwersję poprawiając czytelność: lista 13 typowych problemów

Problemy z czytelnością istnieją na różnych poziomach: treści, designu czy interfejsu.

Poniższe problemy mogą znacznie obniżać Twój współczynnik konwersji.

1. Hierarchia wizualna

Zbyt wiele elementów konkurujących o uwagę użytkownika. To, co ważne jest za małe, a nieistotne elementy są zbyt widoczne.

Porada: Najważniejsze elementy powinny być najbardziej widoczne. Zrób test 5 sekund i sprawdź, czy rzeczywiście tak jest na Twojej stronie.

2. Brak pustej przestrzeni (tzw. whitespace)

Elementy są umieszczone zbyt blisko siebie. To przeszkadza w zrozumieniu co na stronie jest najważniejsze

Porada: Pusta przestrzeń pomiędzy elementami skupia uwagę na ważnych częściach strony. Nie bój się jej stosować.

3. Niekonsekwentna kolorystyka

Główne przyciski raz są czerwone, raz zielone, a czasem zielone tło jest nieklikalne. Użytkownik się gubi i nie wie, gdzie powinien kliknąć.

Porada: Zadbaj o konsekwencję w kolorystyce. Przyciski i linki niech będą zawsze w tym samym kolorze.

4. Niski kontrast

Źle dobrane kolory lub zdjęcie w tle sprawiają, że tekst jest nieczytelny lub czytanie wymaga zwiększonego wysiłku.

Przykład: niewielki kontrast między tekstem i tłem na stronie obniża wygodę czytania.


Porada: Treść nie może się zlewać z tłem. Spraw, aby nagłówki i opisy dało się czytać bez wysiłku.

5. Przeładowanie informacjami

Za dużo elementów, przez co najważniejsze informacje giną w gąszczu rozpraszaczy.

Porada: Dodatkowe szczegóły ukrywaj w tooltipach czy pop-upach. Zainteresowani je znajdą i otworzą. Jeśli elementów na stronie jest zbyt wiele, pora na ustalenie priorytetów i zachowanie tylko kluczowych informacji.

6. Zbyt wiele CTA

Nie jest jasne gdzie użytkownik ma kliknąć aby przejść dalej. Akcji do wyboru ma tak dużo, że nie może się zdecydować i wychodzi ze strony.

Przykład: “Start a free trial” czy “Sign up now”? A może “Free consultation”? Ta trudna decyzja byłaby prostsza, gdyby na stronie widniał tylko jeden CTA.



Porada: Nie każ mi myśleć, jak mawia Steve Krug (jego książka to must-have). Skup się na głównym CTA. Jeśli naprawdę musisz mieć ich więcej, to niech będą mniej widoczne (np. w formie linku tekstowego czy przycisku bez tła).

7. Niejasny CTA

Kolejny krok jest niejasny lub tekst na CTA jest zbyt ogólny. Problemem może być też brak konsekwencji między treścią strony a CTA.

Przykład: wylądowałem na stronie z listą kursów programowania. Nagłówek zachęca mnie do zapisania się już dziś.



Po przejściu na stronę konkretnego kursu okazuje się, że mogę tylko “Aplikować”. Nie wiem, czy mogę się zapisać i być pewnym udziału. A jeśli nie, to co muszę zrobić, żeby moja „aplikacja” została przyjęta?




Porada: Zadbaj, aby tekst na przycisku opisywał akcję. Rozdajesz kody rabatowe w zamian za adres email? Zamiast “Wyślij” w formularzu wpisz “Odbierz 10% rabatu”.

Sprawdź też, czy tekst na CTA współgra z akcją, do jakiej zachęcasz w treści strony.

8. CTA niedopasowany do etapu

“Kup teraz” nie jest idealnym wezwaniem do akcji na każdą okazję. Źle dopasowana akcja do etapu zakupowego rodzi dezorientację.

Dobry przykład: miękki CTA, zachęcający do poszerzenia wiedzy o kursie programowania. Żadnego “Zapisz się teraz”, które odstraszyłoby osoby dopiero rozważające taką ścieżkę kariery.



Porada: Dopasuj CTA to etapu zakupowego. Nie popychaj zbyt wcześnie do zakupu.

9. Żargon i skomplikowany język

Używanie języka którego użytkownik nie rozumie lub nie lubi. Problemem może być zarówno żargon branżowy, jak i zbyt wyszukane słownictwo w momencie, gdy można zastosować prosty język.

Porada: Używaj jak najprostszego języka. Odpuść wyszukane przymiotniki i długie, wielokrotnie złożone zdania. Teksty pisz krótko, na temat i zrozumiale.

10. Brak nagłówków i rozbicia na akapity

Treść zbita w jeden długi blok to gwarancja, że nikt jej nie przeczyta. Brak nagłówków uniemożliwia skanowanie treści i znalezienie interesującej sekcji.

Porada: Układ strony i tekstu projektuj tak, aby dało się ją przeskanować. Konieczne są nagłówki co 2-3 akapity. Stosuj akapity nie dłuższe niż 5 linijek.

11. Niejasna komunikacja wartości

Użytkownik nie jest w stanie szybko zrozumieć jak Twój produkt / usługa zmieni na lepsze jego życie.

Porada: Dopracuj swoją propozycję wartości i umieść ją w widocznym miejscu. Skup się na korzyściach, a nie cechach produktu / usługi. Pokaż realny, pozytywny wpływ na sytuację potencjalnego klienta.

12. Brak warunków transakcji

Niewidoczne informacje o metodach płatności, formach i cenie dostawy, czasie realizacji zamówienia, polityce zwrotów czy gwarancji.

Porada: Przedstaw komplet informacji o warunkach. Zaprezentuj je już na etapie oferty, a nie dopiero w procesie składania zamówienia.

13. Niedopasowane zdjęcia

Losowe zdjęcia ze stocka nie pomagają wytłumaczyć produktu. Przynoszą więcej szkody niż pożytku, bo dodatkowo obniżają zaufanie do firmy.

Przykład: zdjęcie ze strony firmy sprzątającej. Hmm… o co tu chodzi? Umieszczenie zdjęć ”Przed” i “Po” zwiększyłoby czytelność i poprawiło konwersję.

Porada:
Dodaj zdjęcia i rysunki prezentujące:

• produkt / usługę
• efekty uzyskane dzięki nim
• zadowolonych klientów
• zwizualizowane dane rynkowe przekonujące do zakupu

Dobre i złe przykłady czytelności stron internetowych

Poniżej znajdziesz kilka przykładów tego jak można podobny produkt / usługę przedstawić w czytelny i mało czytelny sposób.

Zły przykład: e-fortech.pl

Problemy z czytelnością tej strony:

• Brak informacji o formach dostawy oraz planowanej dacie wysyłki / dostawy
• Brak ceny powyżej linii zanurzenia (folda)
• Tylko jedno zdjęcie
• Cechy produktu zbite w jedną linię zamiast listy wypunktowanej – trudniej to przeczytać
• Menu po lewej stronie odciąga moją uwagę od produktu
• Brak informacji o gwarancji i zwrotach – to istotne, ponieważ nie znam tego sklepu i nie wiem, czy mogę mu zaufać

Dobry przykład: budujesz.pl

Elementy podnoszące czytelność strony:

• Logotyp morele.net na górze strony – wzbudza moje zaufanie
• Rekomendacja eksperta mówi, że kosiarka jest świetna dla małych i średnich trawników, a tego właśnie potrzebuję
• Widoczna cena oraz ewentualna rata
• Informacja o darmowej dostawie oraz czasie, w jakim muszę złożyć zamówienie aby odebrać kosiarkę kolejnego dnia
• Kluczowe cechy produktu wyróżnione w liście wypunktowanej
• 5 zdjęć i wyświetlone miniaturki pokazujące produkt z różnych perspektyw
• Widoczne menu kontekstowe z zakładkami na dole – wiem, gdzie szukać dodatkowych informacji, np. na temat rat, gwarancji czy opinii

Jak podnieść konwersję landing pages dzięki czytelności

Czytelność jest kluczowa dla landing pages (stron docelowych) tworzonych pod konkretne zapytania czy kampanie.

Aby znaleźć kilka przykładów, wpisałem w Google “Program do księgowości”. Kliknąłem w trzy z reklam konkurujących ze sobą firm.

Zły przykład: necker.com.pl

Problemy z czytelnością tej strony:

• Brak informacji o “Programie do księgowości”
• W menu również nie widzę szukanych słów kluczowych
• Zamiast tego ogólny slogan “Jesteśmy po to, aby prowadzenie biznesu stało się prostsze”. Nie widzę tu wymiernej korzyści dla mojej księgowości.
• CTA “Czytaj więcej” – ale o czym mam więcej przeczytać?
• Nie wiem, co to za firma i czym się zajmuje. Wygląda na to, że nie oprogramowaniem do księgowości.

Niezły przykład: 360ksiegowosc.pl

Elementy podnoszące czytelność strony:

• Screenshot prezentujący program – od razu widzę jak będzie wyglądać “w praniu”.
• Nagłówek zawierający zarówno wyszukiwane słowa kluczowe (“Program dla księgowych”), jak i korzyść (“pozwoli Ci zaoszczędzić czas”).
• Tekst podzielony na krótkie akapity, przedzielone nagłówkami.
• Istotne fragmenty tekstu wyróżnione pogrubieniem – ułatwia to skanowanie strony.

Problemy z czytelnością tej strony:

• Brak ceny programu
• Tekst na CTA nie do końca czytelny – czy muszę płacić za założenie konta? Ile to “pracy”, żeby konto założyć? Minuta, czy pięć?
• Brak krótkiej informacji o firmie. Czym się zajmują? Czy tworzą tylko oprogramowanie dla księgowych i dzięki temu są ekspertami = mogę im zaufać?
• Dwa przyciski “Załóż konto” i “Logowanie” konkurują ze sobą wizualnie. Trzeci przycisk, chociaż powinien być najbardziej wyróżniony, jest mało widoczny przez brak tła.

Dobry przykład: infakt.pl

Elementy podnoszące czytelność strony:

• Nagłówek – krótki i na temat. Odpowiada na moją potrzebę – czyli po 2 sekundach wiem, że mogę czytać dalej.
• Pierwszy akapit, który w 4 linijkach komunikuje konkretną wartość:
  • Kompletny program do samodzielnej księgowości
  • Bezpłatne i nielimitowane wsparcie merytoryczne i techniczne
  • “Sprawdź za darmo”
  • Cena: 19,50 zł za miesiąc
• Czytelny CTA – “Wypróbuj za darmo”.
• W dalszej części strony znajduje się formularz z dwoma polami do założenia darmowego konta. To jasne jak słońce jaki jest kolejny krok – wypróbowanie programu za darmo.

Potencjalne usprawnienia czytelności strony:

• Pierwszy akapit – dodanie pogrubienia do istotnych fragmentów lub wypunktowanie kluczowych informacji podniosłoby czytelność.
• Dodanie krótkiej informacji o firmie / liczbie klientów (budowanie zaufania)
• Hierarchia wizualna – wiele kolorowych, dużych boksów opisujących funkcjonalności przyciąga uwagę. Z perspektywy użytkownika próbującego porównać konkurencyjne programy, akapit z komunikacją wartości i CTA powinny być mocniej wyeksponowane.

Podsumowanie

Jeśli chcesz mieć więcej konwersji, to najpierw popraw czytelność. To fundament skutecznej strony internetowej.

Pamiętaj, że:

• Niska czytelność sprawia, że reszta strony jest bez znaczenia – bo i tak mało kto zostanie na niej po upływie 10 sekund.
• Czytelność można poprawić już samą zmianą tekstów i zdjęć czy zmniejszeniem liczby elementów. Do tego nie potrzebujesz programisty.
• Problemy z czytelnością znajdziesz dzięki analizie heurystycznej czy testowi 5-sekund. To szybkie i tanie metody analizy konwersji.

Aby podnieść konwersję dzięki czytelności, zadbaj o:

• Hierarchię wizualną strony
• Skupienie się na jednym, dopasowanym do etapu i klarownie opisanym CTA
• Zdjęcia pomagające wyjaśnić produkt / usługę
• Komplet informacji potrzebnych do podjęcia decyzji (cena, dostawa, płatność, gwarancja itp.)
• Pustą przestrzeń na stronie – pomaga skupić uwagę użytkownika na istotnych elementach