Można śmiało powiedzieć, że projekt strony internetowej – jej wygląd i sposób poruszania się po niej – jest bardzo ważny. Jak ważne są zasady tworzenia stron WWW dla konwersji czyli wywływania odpowiednich działań użytkowników i użytkowniczek? Odpowiedź brzmi: bardzo!
Jeśli mi nie wierzysz, oto kilka statystyk, które to udowodnią:
- 48% użytkowników uważa, że wygląd strony internetowej jest czynnikiem nr 1 przy ocenie wiarygodności firmy.
- 38% odwiedzających przestanie przeglądać stronę, jeśli jej układ będzie nieatrakcyjny.
- Przeciętny użytkownik potrzebuje zaledwie 50 milisekund, aby wyrobić sobie zdanie na temat strony internetowej.
- 94% użytkowników tworzy swoje pierwsze wrażenie o stronie internetowej tylko na podstawie jej wyglądu.
Żródło: review42.com
Błędy w projektowaniu stron mogą mieć wpływ na liczbę konwersji, które uzyskasz. Nie oznacza to jednak, że należy pozbyć się całej strony i zacząć wszystko od nowa. Jest wiele rzeczy, które można zrobić, aby zidentyfikować błędy szkodliwe dla konwersji i jak można je naprawić. Istnieją opracowane i sprawdzone zasady tworzenia stron internetowych, którymi warto się kierować budując, projektując lub poprawiając ich działanie.
W tym wpisie omówimy wszystkie błędy podczas budowania i projektowania stron i usług cyfrowych, które mogą wpływać na konwersje. Na koniec wskażemy kilka metod, które można zacząć stosować od razu, aby zidentyfikować i rozwiązać te problemy.
Więc… jakie błędy w projektowaniu wpływające na konwersje popełniasz?
Stosowanie koloru bez szerszego kontekstu
Kolor powinien być zawsze używany w sposób przemyślany. Kolor, którego używasz i miejsce, w którym go używasz powinny przyciągać uwagę lub wywoływać emocje. Dobrze wyglądająca strona zawsze przegrywa ze stroną użyteczną. Jeśli kolory, które wybierzesz, wyglądają ładnie, ale nie tworzą efektu wymaganego do konwersji, to znaczy, że wybierasz niewłaściwe.
Jeśli potrafisz zrozumieć psychologię tego, jak postrzegamy i reagujemy na kolor, możesz zbudować tożsamość marki i stronę internetową wokół tych zasad.
Kolory powinny być również konsekwentnie stosowane. Po zbudowaniu palety kolorów trzymaj się jej i nie odbiegaj od niej. W ten sposób zamieniasz kolory na język, który podświadomie odczytuje Twój użytkownik.
Projektowanie stron bez uwzględnienia użytkowników mobile
Jeśli zapominasz zaprojektować swoją stronę tak, aby była zoptymalizowana pod kątem małych ekranów, popełniasz ogromny błąd. Według badania z 2021 roku 68% firm posiadających stronę mobile-first zwiększyło swoją sprzedaż.
Większość stron internetowych w dzisiejszych czasach jest przeglądana na urządzeniach mobilnych, ważne jest zatem, aby traktować to doświadczenie priorytetowo. Nie musisz być wcale doświadczonym programistą, aby dopilnować, że Twoja strona jest zoptymalizowana pod kątem urządzeń mobilnych.
Kilka zasad dobrego projektowania mobilnego:
- Użyj motywu, który jest w pełni responsywny, więc wykonuje większość pracy za Ciebie.
- Umieść najważniejsze informacje wyżej na stronach, aby zredukować ilość przewijania.
- Unikaj wyskakujących wiadomości lub reklam na urządzeniach mobilnych.
- Upewnij się, że przyciski są wystarczająco duże, aby można było ich używać na ekranach urządzeń mobilnych. W najważniejszych obszarach konwersji użyj przycisku zamiast linku tekstowego.
- Stosuj duże rozmiary czcionek – co najmniej 14px!
Niezoptymalizowanie CTA
CTA to skrót od Call to Action – wezwanie do działania. Jest to część witryny, która bezpośrednio instruuje lub zachęca użytkownika do wykonania jakiejś czynności. To jak weranda do Twojej konwersji. Pomyśl o frazach typu „Pobierz ebooka teraz!” lub „Zapisz się na naszą listę mailową!”. Są to frazy, które prawdopodobnie pojawią się w Twoim CTA.
To CTA na stronie WordPress.org jest świetne. W tytule widoczne jest wyraźne zaproszenie do zrobienia czegoś. Krótkie zdanie precyzuje, dlaczego możesz zechcieć wykonać daną czynność. Przycisk jest duży, wyróżnia się na tle i wykorzystuje kolejny czasownik typu „strop”.
Używaj CTA efektywnie, stosując się do kilku podstawowych zasad:
- Używaj mocnego czasownika, np. zacznij, pobierz, kup, zapisz się. Ale nie używaj czasowników takich jak „kliknij”. Skąd użytkownik ma wiedzieć, co się stanie, gdy to zrobi?
- Spraw, aby CTA się wyróżniało. W tym celu używaj koloru i dużego tekstu. Może nawet spraw, że ta sekcja będzie miała pełną szerokość lub dodaj wokół niej obramowanie.
- Nie zapychaj tej sekcji. Unikaj stosowania dużej liczby obrazów!
Linki i przyciski się nie wyróżniają
Często ktoś przeprowadza konwersję, decydując się na kliknięcie konkretnego linku lub przycisku. Jak już wspomnieliśmy w poprzedniej części, te obszary prawdopodobnie pojawią się w Twoim CTA.
Przyciski i linki powinny mocno wyróżniać się nie tylko na tle strony, ale także w kontraście do innych treści. Na przykład, jeśli Twój tekst i linki są czarne, ludziom będzie trudno je dostrzec.Ale niestety, jest tam mnóstwo złych zdjęć stockowych. Ale jeśli Twój tekst jest czarny, a linki czerwone, pogrubione i podkreślone, nie ma mowy o pomyłce. To samo dotyczy przycisków. Jeśli tło jest błękitne, a przyciski są niebieskie, mogą się one zlewać w jedną całość. Użyj kontrastującego koloru, jeśli przycisk znajduje się na kolorowym tle.
Dobrą zasadą jest, aby elementy do kliknięcia, takie jak linki i przyciski, miały swój własny, unikalny kolor! Jeśli jasny róż jest częścią palety kolorów, rozważ zarezerwowanie go tylko dla linków i przycisków.
Pamiętaj też, aby zawsze podkreślać swoje linki, aby wyróżniały się na tle reszty tekstu. Większość osób korzystających z internetu zrozumiała, że linki są ozdobione podkreśleniem. Wczuj się więc w ich oczekiwania i spraw, aby te linki były łatwe do znalezienia!
Używanie słabych zdjęć stockowych
Dobre zdjęcia stockowe są adekwatne do celu strony i wspierają emocjonalny przekaz reszty treści. Ale niestety złych zdjęć stockowych jest multum.
Tandetne zdjęcia mogą zniechęcić odwiedzających, ponieważ są one bezosobowe, nijakie lub po prostu oderwane od rzeczywistości. Unikaj zdjęć ludzi, które są mocno przerobione w photoshopie, sztywne lub nierealistyczne. Ludzie lubią widzieć twarze w marketingu, ale to nie znaczy, że Twoja strona musi być wypełniona zdjęciami uśmiechających się i patrzących prosto w kamerę ludzi.
Weźmy ten przykład poniżej. Ludzie na nim pozują, zdjęcie wygląda na niesamowicie zmontowane, a oświetlenie jest bardzo sztuczne.
Dla kontrastu, spójrz na alternatywę poniżej. Otoczenie jest dużo bardziej realistyczne, oświetlenie jest ładne, ale nie przesadzone, a mimika ludzi wygląda dużo bardziej autentycznie.
Nie musisz zatrudniać profesjonalnego fotografa, aby uzyskać dobre zdjęcia na swoją stronę internetową. Użyj Unsplash lub Pexels, aby uzyskać wspaniałe darmowe opcje dla zdjęć stockowych. Znajdziesz parę przykładów. Jeśli chcesz zainwestować trochę pieniędzy i uzyskać lepsze opcje, zapoznaj się z biblioteką Adobe Stock Photo.
Prawdziwi ludzie używający Twojego produktu lub usługi bądź wchodzący z nimi w interakcję prawie zawsze będą lepsi niż sztywne zdjęcie stockowe. Większość ludzi w dzisiejszych czasach posiada wysokiej jakości aparat fotograficzny w swoim smartfonie. Rozważ więc zaplanowanie prostej sesji zdjęciowej na swoją stronę internetową!
Zbytnia rozwlekłość tekstu
Twoja marka jest ważna i złożona. Masz tak wiele do przekazania na temat swoich celów, misji i strategii. Ale jak ustaliliśmy na początku, większość ludzi chce przejść przez stronę internetową, aby znaleźć to, czego potrzebują. Zachowaj rozwlekłe treści do wpisów na blogu!
Pisząc treści na inne strony, pamiętaj o jak największej zwięzłości. Używaj nagłówków, podtytułów i krótkich akapitów tekstu. Jeśli używasz mniej tekstu, pomaga to również zapewnieniu responsywności projektu dla urządzeń mobilnych.
Pamiętaj również, że ludzie najczęściej przeglądają pobieżnie strony internetowe. Rzadko zdarza się, że ktoś wejdzie na Twoją witrynę i poświęci czas na przeczytanie każdej strony od góry do dołu. Dobry projekt zapewnia, że kroki do konwersji są łatwe do znalezienia nawet podczas przeglądania. Jeśli zawartość Twojej strony jest łatwa do przeglądania, użytkownicy mogą znacznie szybciej znaleźć to, czego szukają.
Spójrz na poniższą stronę – gdzie najpierw powinny powędrować Twoje oczy? Jest tu tak dużo tekstu, że prawie niemożliwe jest, aby ktoś szybko znalazł to, czego chce.
Teraz spójrz na ten przykład. Widzisz, jak informacje są rozdzielone za pomocą podtytułów i różnych obrazków? O wiele łatwiej dla oka jest prześlizgnąć się po tej stronie i znaleźć odpowiednią sekcję.
Projekt strony z chaotyczną nawigacją
Przyjrzyj się obecnemu paskowi nawigacyjnemu swojej witryny. Czy uważasz, że ktoś może go skonwertować w 3 kliknięcia lub mniej? Jeśli nie, być może trzeba będzie przesunąć niektóre elementy!
Oto kilka wskazówek, jak zorganizować swoje menu nawigacyjne w inteligentny sposób:
Bądź zwięzły: Rozważ „Informacje” zamiast „Dowiedz się więcej o naszej firmie”. Nawigacja powinna być łatwa do przeskoczenia w celu znalezienia odpowiedniego linku.
Układaj linki w przemyślany sposób: zastanów się, dlaczego ludzie wchodzą na Twoją stronę. Jeśli sprzedajesz sprzęt żeglarski i masz również mały blog do rozwoju marketingu, linki do sklepu powinny zdecydowanie pojawić się przed linkiem do bloga.
Podkreśl największe CTA: spróbuj wyróżnić lub zakreślić w nawigacji link, który jest najważniejszy dla celu Twojej strony. Na przykład, wiele organizacji non-profit użyje dużego zielonego przycisku, aby ich link „Podaruj” wyróżniał się w menu nawigacyjnym.
Wykorzystaj istniejący ruch w sieci: spójrz na swoje wyniki w Google Analytics, aby zobaczyć, jak ludzie znajdują informacje na Twojej stronie. Następnie użyj menu nawigacyjnego, aby ułatwić im to zadanie. Użyj przepływu zachowań / przepływu użytkowników, aby zdecydować, jak zagnieżdżać elementy. Możesz nawet zauważyć, że ludzie spędzają dużo czasu na stronie, której nie ma w nawigacji, a więc możesz zechcieć ją dodać.
Pogrupuj elementy podmenu: jeśli musisz zagnieżdżać strony w obrębie nawigacji, zastanów się, jak tworzyć grupy. Długa lista pozycji podrzędnych może być przytłaczająca i trudna do przeszukiwania. Jeśli możesz pogrupować długie listy linków według podobieństwa, użytkownicy będą w stanie znacznie szybciej znaleźć to, czego potrzebują. Sprawdź poniższy zrzut ekranu, aby zobaczyć, co mam na myśli.
Zbyt mały rozmiar tekstu
Nasz tekst stał się już bardziej zwięzły, teraz musimy się upewnić, że jest czytelny. Niektóre trendy w projektowaniu stron internetowych wymagają stosowania małych i delikatnych czcionek. Ale chcemy, aby Twoja strona była czytelna dla każdego, kto ją odwiedzi! Nikt nie chce być zmuszony do mrużenia oczu lub powiększania obrazu, aby znaleźć to, czego potrzebuje. Spowolni to Twoich użytkowników i stanie się kolejną przeszkodą na ich drodze do konwersji.
- Czcionki tekstu powinny mieć około 14px-16px.
- Rozmiar wpisywanego tekstu powinien być nieco większy (to znaczy tekst, który ludzie będą wpisywać w pola formularza)
- Obejrzyj projekty mobilne na rzeczywistym urządzeniu mobilnym w celu potwierdzenia ich czytelności.
- W przypadku stron z dużą ilością tekstu, takich jak posty na blogu lub artykuły, zwiększ czcionkę do 18px lub nawet 20px.
- Idealna szerokość bloku tekstu to 45 – 75 znaków. Po tym nasze oczy zaczynają się męczyć.
- Ustaw wysokość linii na około 150% wielkości czcionki.
Projektowanie strony www dla siebie, a nie dla docelowych odbiorców
Jest to jeden z największych błędów, jakie widziałem, projektując strony dla klientów. Czujemy się tacy bliscy naszej marki, że wydaje się ona przedłużeniem nas samych. Zwykle wybieramy kolory i wzory, które lubimy; w końcu to właściciel firmy będzie oglądać stronę częściej niż ktokolwiek inny!
Należy jednak pamiętać, że w większości przypadków nie jesteś swoją grupą docelową. Projekt strony – czcionki, kolory, obrazy itp. – musi łączyć się z ludźmi, których chcesz przekonwertować. To właśnie z myślą o nich dokonywane są najtrafniejsze wybory projektowe.
W związku z tym, ważne jest, aby zrobić swoje badania. Kim jest Twoja grupa docelowa? Co chcą zobaczyć? Najważeniejsze co muszą zrozumieć? Co chcesz, aby poczuli? Jakie informacje należy traktować priorytetowo?
Kiedy już znasz wszystkie te informacje, kolory, układy i obrazy, których używasz, muszą służyć tym potrzebom. Twoje osobiste preferencje nie będą odgrywać głównej roli.
Jak sprawdzić, które błędy w projektowaniu szkodzą konwersji?
Przeszliśmy więc przez wszystkie sposoby, na które projekt może wpływać na konwersje. Teraz porozmawiajmy trochę o tym, jak się dowiedzieć, które wybory projektowe są najmocniejsze i które są najsłabsze. Może chcesz poeksperymentować, aby zobaczyć, jakie wybory będą działać najlepiej.
Na szczęście istnieje wiele sposobów, aby to zrobić.
Mapy ciepła
Mapa ciepła pokazuje, gdzie ludzie kliknęli lub wykonali inne działania na Twojej stronie. Mapy ciepła wyglądają podobnie jak mapy pogodowe, które wizualnie wskazują, gdzie podejmowano najwięcej działań. Użyj HotJar.com, aby rozpocząć analizowanie mapy ciepła swojej witryny.
Testowanie A/B
Testowanie A/B polega na tym, że masz dwie (lub więcej) opcje i kierujesz użytkowników do każdej z nich w równej części. Więc jeśli masz dwie opcje, 50% Twojego ruchu zobaczy jedną opcję i 50% zobaczy drugą. Możesz wtedy określić, która grupa więcej konwertowała!
Testowanie użytkowników
W końcu wystarczy zapytać odbiorców! Testowanie użytkowników może być przeprowadzane na wiele sposobów. Istnieją firmy, które możesz wynająć do przeprowadzenia testów użytkowników. Możesz też po prostu poprosić grupę obecnych klientów, kontrahentów lub wolontariuszy o wypróbowanie strony i powiedzenie Ci, co o niej myślą. Może to być po prostu ustny raport. Możesz też stworzyć formularz do zbierania opinii.
Pamiętaj, że nawet doskonale zaprojektowana strona musi być zawsze aktywna, szybka i bezpieczna. Powolna lub pełna błędów strona będzie odstraszać użytkowników bez względu na to, jak bardzo zoptymalizowany projekt.
Cloud22 Managed WordPress Hosting sprawdza każde pole. Zarządzamy Twoimi aktualizacjami – upewniając się, że kiedy twórca motywu wypuści aktualizację lub poprawkę, otrzymasz ją bezzwłocznie. Na wszelki wypadek tworzymy kopię zapasową Twojej witryny, gdyby pojawił się błąd w ustawieniach motywu. Nasze serwery są zintegrowane z LiteSpeed cache i Cloudflare CDN, więc Twój piękny projekt, zbudowany za pomocą motywu, jest szybko serwowany odwiedzającym.
Oryginalny tekst w języku angielskim pochodzi ze strony cloud22.com, aut. Allie Nimmons, dostępny na licencji Creative Commons Uznanie autorstwa 4.0.
Przeczytaj także
- Jak przekształcić artykuł w infografikę?
- Jak stworzyć angażujący podcast – rozmowa z Ewą (Dziardziel) Dunal z Sounds and Stories
- Czy polski Internet jest dostępny dla wszystkich? Accessibility oczami organizacji społecznych
- E-learning – narzędzia polecane przez praktyków
- Mapy myśli, czyli uczenie się przez skojarzenia