Jak zaprojektować witrynę internetową pod kątem optymalizacji współczynnika konwersji

Witryna internetowa może pomóc w rozwoju Twojej firmy na wiele sposobów. Ale posiadanie samej strony internetowej nie gwarantuje większej liczby klientów. Firmy o ugruntowanej pozycji wiedzą, że ich strony internetowe należy przekształcić w maszyny sprzedażowe, aby przyciągać i konwertować klientów. Według najnowszej ankiety przeprowadzonej przez HubSpot:

Największy wpływ na współczynniki konwersji mają pierwsze pięć sekund czasu wczytywania strony. Współczynniki konwersji witryny spadają średnio o 4,42% z każdą dodatkową sekundą czasu ładowania.

Mówią, że nie ma drugiej szansy na pierwsze wrażenie. Projekt Twojej witryny powinien przyciągać odwiedzających już od pierwszej sekundy i nigdy nie pozwolić im odejść, dopóki nie dokonają konwersji. Ale jak sprawiłbyś, by Twoja witryna „działała” w ten sposób? Pokażemy Ci podstawy projektowania.

Kliknij, aby wyświetlić w pełnym rozmiarze. Przewiń w dół, aby przeczytać cały artykuł.

Kluczowe terminy, które musisz znać

Po pierwsze, musisz zrozumieć kilka kluczowych terminów omówionych w tym samouczku, aby lepiej zrozumieć temat.

Testy A / B lub testy podzielone to naukowy proces porównywania dwóch wersji (A i B) strony internetowej w celu ustalenia, która z nich zapewnia lepszą konwersję. Możesz przetestować swoje nagłówki, obrazy, przyciski wezwania do działania i kolory, aby wymienić tylko kilka.

Wezwanie do działania (CTA) to przycisk lub wiersz tekstu, który zachęca odwiedzających do podjęcia działania. Mówi im, co mają robić, gdy odwiedzają Twoją witrynę. Oto kilka przykładów: przycisk „Zarejestruj się” na stronie internetowej, przycisk „Kup mnie” w sklepie e-Commerce i przycisk „Pobierz” w aplikacji.

Konwersja ma miejsce, gdy użytkownik lub potencjalny klient wykona pożądane działanie. Oznacza to, że odwiedzający pomyślnie zarejestrował się w Twojej witrynie lub sprawdził przedmiot w Twoim sklepie.

Współczynnik konwersji to odsetek użytkowników, którzy wykonują pożądane działanie w Twojej witrynie. Możesz uzyskać współczynnik konwersji, dzieląc całkowitą liczbę konwersji przez całkowitą liczbę użytkowników w Twojej witrynie.

Optymalizacja konwersji lub Optymalizacja współczynnika konwersji (CRO) to systematyczne podejście do udoskonalania witryny internetowej, aby zwiększyć liczbę odwiedzających witrynę, którzy podejmują pożądane działanie. Jeśli Twoim celem jest zwiększenie liczby subskrybentów poczty e-mail, będziesz chciał, aby odwiedzający zapisywali się do newslettera. Lub jeśli chcesz zwiększyć sprzedaż, powinieneś skłonić ich do kliknięcia tego przycisku zakupu.

Strona docelowa to zwykle strona główna witryny internetowej, ale może to być dowolna strona w witrynie, na którą trafiają użytkownicy, aby zamienić ich w potencjalnych klientów lub klientów.

Testowanie na wielu zmiennych lub na wielu zmiennych (MVT) to proces jednoczesnego testowania wielu zmiennych na określonej stronie. Polega na tworzeniu różnych elementów, aby dowiedzieć się, która kombinacja konwertuje najbardziej.

Elementy projektowania witryn internetowych, które można konwertować

Jeśli chcesz stworzyć lub przeprojektować swoją witrynę, oto rzeczy, które powinieneś wziąć pod uwagę, tworząc atrakcyjną wizualnie witrynę, która konwertuje:

1. Obrazy

Obrazy odgrywają ważną rolę w każdej witrynie internetowej. Służą do łatwego przyciągania i angażowania odwiedzających, chociaż nie zawsze tak jest. Powinieneś wiedzieć, jak prawidłowo używać obrazów, aby zmaksymalizować jego potencjał.

Oto kilka wskazówek dotyczących efektywnego wykorzystania obrazów w witrynie:

• Wybierz obrazy z ludzkimi twarzami

Kiedy używasz zdjęcia osoby w swojej witrynie, daje to odwiedzającym empatię i silne połączenie.

„Kiedy widzimy twarz, automatycznie uruchamiamy się, aby coś poczuć lub wczuć się w tę osobę. Jeśli rozpoznamy treści na stronie - takie jak problem, dylemat, nawyk lub cokolwiek innego - czujemy się połączeni i zrozumiani ”. (Nie tylko ładna: budowanie emocji w witrynach internetowych autorstwa Sabiny Idler)

Zobacz, jak PayPal wykorzystuje tę technikę na swojej stronie docelowej:

• Zoptymalizuj obrazy

Podczas tworzenia strony internetowej ważne jest, aby zoptymalizować obrazy, których używasz, aby nie wpływały na szybkość ładowania Twojej witryny. Co więcej, badania wykazały, że nawet sekundowe opóźnienie odpowiedzi strony może obniżyć współczynnik konwersji o 7%.

Ideą optymalizacji obrazów jest nadanie im lekkości poprzez ich kompresję bez wpływu na ich jakość. Niektóre z narzędzi do optymalizacji obrazu, z których możesz korzystać bezpłatnie, to:

1. Mały plik PNG
2. Compressor.io
3. Optymalizator JPEG
4. Optimizilla
5. Kraken.io
6. Ranking łatwy
7. Zmień rozmiar zdjęć
8. Kompresuj zdjęcia
9. Konwertuj obraz

• Użyj obrazów bohaterów

Aby było jasne, obrazy bohaterów nie są obrazami superbohatera. Obraz bohatera to duży obraz baneru internetowego umieszczany u góry strony internetowej. Są zwykle umieszczane w tle z linią tekstu lub przyciskami wezwania do działania.

Oto przykład:

Dodatkowa wskazówka: upewnij się, że obrazy, których używasz, są responsywne, aby zapewnić użytkownikom dobre wrażenia.

2. Typografia

Według Wikipedii typografia to sztuka i technika układania czcionek, aby język pisany był czytelny, czytelny i atrakcyjny po wyświetleniu. Obejmuje użycie krojów pisma, rozmiarów punktów, długości linii, odstępów między wierszami i odstępami między literami, a także dostosowywanie odstępów między parami liter.

Ten film wyjaśnia, jak typografia ewoluowała od papieru do ekranów:

Czy wiesz, ile jest czcionek? Odpowiedź - nikt nie wie. To jest powód, dla którego wybór odpowiedniej kombinacji czcionek nie jest łatwym zadaniem.

Oto kilka narzędzi do parowania czcionek, które pomogą Ci zdecydować, których kombinacji powinieneś użyć:

1. Typ połączenia
2. Typ Google
3. Para czcionek
4. Wpisz Genius
5. Wpisz Wolf
6. Piękny typ sieciowy
7. Używane czcionki
8. Tylko mój typ
9. Typ.io
10. Mikser
11. Font Combinator
12. Typoteka
13. Adobe Typekit
14. Matcherator
15. Typespiration

Jak wybrać najlepsze czcionki dla swojej witryny

3. Spacja

Czy zastanawiałeś się kiedyś, dlaczego Google nie maksymalizuje przestrzeni swojej witryny? Dzieje się tak, ponieważ wykorzystują moc białych znaków.

Biała spacja nazywana również spacją ujemną to część witryny internetowej, która jest pusta lub pusta. Możesz użyć tego na swojej stronie docelowej, aby użytkownicy mogli skupić się na wezwaniu do działania i zwiększyć konwersję. Biała spacja niekoniecznie oznacza, że ​​tło witryny powinno być białe. Możesz bawić się kolorami, a nawet użyć obrazu jako tła. Celem jest uproszczenie, a jednocześnie zapewnienie jak najlepszego doświadczenia użytkownika.

Pamiętaj: uporządkowana witryna internetowa przyciąga uwagę odwiedzających. Przeglądanie zadbanej i dobrze zorganizowanej witryny jest dla nich przyjemnością.

4. Kolory

Kolejnym ważnym elementem do rozważenia podczas tworzenia strony internetowej jest kolor. Pamiętaj, że kolory mają znaczenie, więc wybrane przez Ciebie kolory powinny odzwierciedlać przesłanie, które chcesz przekazać swoim odbiorcom.

Na przykład większość banków w Stanach Zjednoczonych używa koloru niebieskiego, ponieważ oznacza on zaufanie.

Zdjęcie: The Epoch Times

Zwróć uwagę na niektóre pozytywne i negatywne odczucia, które reprezentuje kolor, wybierając odpowiednią kombinację kolorów.

• Czarny - w fizyce czarny nie jest kolorem, chociaż ma również psychologiczny wpływ na człowieka. Symbolizuje moc i siłę, ale może również przedstawiać śmierć, nieszczęście i zło.
• Biały - ogólnie rzecz biorąc, biały reprezentuje czystość i niewinność. Szpitale używają bieli, aby stworzyć poczucie bezpłodności. Jednak może również przedstawiać coś zimnego, nijakiego i odizolowanego.
• Czerwony - ten kolor budzi nasze emocje. Może wiązać się z miłością, podekscytowaniem i pewnością siebie. Z drugiej strony symbolizuje agresywność i złość.
• Niebieski - to kolor nieba, oceanu i jest najbardziej preferowany przez mężczyzn. Kolor niebieski symbolizuje spokój, pogodę ducha, stabilność i niezawodność. Jednak może również oznaczać smutek, stąd termin „uczucie smutku”.
• Zielony - to kolor lasu i często przedstawia naturę. Zielony oznacza spokój, optymizm i powodzenia.
• Żółty - podobnie jak słońce, żółty reprezentuje jasność i ciepło. Jest to kolor, na który zwraca się najwięcej uwagi, dlatego jest powszechnie stosowany w znakach drogowych. Jednak może również powodować zmęczenie oczu ze względu na ilość odbijanego światła.
• Fioletowy - to kolor lawendy. Fiolet symbolizuje królewskość i bogactwo, choć niektórzy mogą interpretować go jako egzotyczny lub sztuczny.
• Brązowy - to ziemisty i naturalny kolor. Oznacza odporność, niezawodność i bezpieczeństwo. Może również oznaczać smutek i izolację.
• Pomarańczowy - podobnie jak kolor żółty, również pomarańczowy służy do przyciągania uwagi. Reprezentuje ciepło, podekscytowanie i energię. Często kojarzy się z Halloween.
• Różowy - ten kolor ma działanie uspokajające. Kojarzy się z dobrocią, opieką i kobiecością. Powinnaś unikać tego koloru, jeśli nie chcesz, aby Twoja marka wyglądała zbyt kobieco.

Dodatkowa wskazówka: jeśli nie możesz zdecydować, które kolory będą najlepsze dla Twojego projektu internetowego, możesz skorzystać z testów A / B lub testów na wielu odmianach. Pomoże Ci to dowiedzieć się, który kolor lepiej konwertuje.

5. Przyjazny dla urządzeń mobilnych

Aby zmaksymalizować konwersję w Twojej witrynie, bardzo ważne jest, aby była przyjazna dla urządzeń mobilnych. Ze względu na coraz powszechniejsze wykorzystywanie smartfonów ludzie uzyskują obecnie dostęp do witryn internetowych na wielu ekranach - na komputerach stacjonarnych, tabletach i telefonach komórkowych. Należy pamiętać, że 8 na 10 osób korzysta z internetu przez smartfony.

Jak zoptymalizować układy WordPress pod kątem ruchu mobilnego

Użyj następujących narzędzi, aby poznać reakcję witryny na różne rozmiary ekranu:

1. Test optymalizacji mobilnej przeprowadzony przez Google Search Console
2. MobileTest.me
3. Narzędzie do testowania przyjazności dla urządzeń mobilnych firmy Bing
4. MobiReady Mobile Friendly Checker
5. Urlitor
6. Browserstack
7. RankWatch
8. PageSpeed ​​Insights od Google

Pamiętaj: witryny przyjazne dla urządzeń mobilnych zajmują wyższą pozycję niż te, które nie są.

Wniosek

Przeprowadzając optymalizację współczynnika konwersji, należy pamiętać, że projektowanie stron internetowych odgrywa dużą rolę w przekształcaniu ruchu w zysk. Postępuj zgodnie ze wskazówkami, które przedstawiliśmy powyżej, aby zapobiec wysokiemu współczynnikowi odrzuceń w witrynie.