Strona internetowa – 12 niby-oczywistych elementów, o które musisz zadbać

Skuteczna strona internetowa to taka, która dobrze konwertuje. Czyli zamienia wysoki odsetek odwiedzających w klientów (lub leady).

Mówi się, że każda branża czy strona internetowa jest unikalna. Jest w tym sporo prawdy.

Fundamentalne zasady skutecznych stron internetowych są jednak identyczne niezależnie od branży i kontekstu.

Sprawdź, ile z 12 cech skutecznej strony internetowej posiada Twój serwis.

Jak zrobić skuteczną stronę internetową

Pewnie masz już stronę www. Najczęściej kosztowy redesign strony nie jest potrzebny, aby podnieść konwersję.

Wystarczy trochę zmian tu i ówdzie. Bez ponoszenia ogromnych kosztów i długiego oczekiwania Twoja strona może mieć współczynnik konwersji wyższy o kilkadziesiąt procent.

Zbuduj fundament skutecznej strony, przechodząc przez 12 sekcji i wypisując, jakie usprawnienia możesz wdrożyć w swoim serwisie.

#1: Odpowiedz na potrzeby użytkownika

Jeśli użytkownik szuka stolika kuchennego, a Ty prezentujesz mu stół bilardowy, to interesu nie będzie.

Przeanalizuj potrzeby użytkowników. Możesz sprawdzić:

• Jakie frazy wpisują w Google (Google Search Console, Keyword Hero tu pomogą)
• Czego szukają w wyszukiwarce w serwisie (włącz śledzenie wyszukiwania w witrynie w Google Analytics)
• O co pytają na spotkaniach sprzedażowych
• Z jakimi pytaniami dzwonią do obsługi klienta
• Prześledź rozmowy na czacie

Gdy okaże się, że ściągasz na stronę osoby, które nie są zainteresowane Twoimi usługami, to nawet najlepsza strona www tu nie pomoże.

Musisz najpierw dotrzeć do odpowiedniej grupy docelowej.

Następnie zadbaj o to, aby treść strony internetowej odpowiadała na to, czego szukają użytkownicy.

Jeśli szukam kubka z lamą, to po wejściu na stronę chcę go od razu zobaczyć.

Czy widzisz tu gdzieś kubek z lamą? Chociaż nagłówek? Nie szukałem “I don’t give a fluff”. Nagłówek “Kubek z lamą” byłby skuteczniejszy.

Czasem może się okazać, że ten sam produkt czy usługę nazywasz inaczej, niż Twoi potencjalni klienci. Warto to naprawić.

Ta strona robi to lepiej.

Wprawdzie jest to alpaka, ale bliżej produktu, jakiego szukałem. Strona lepiej odpowiada na moje potrzeby.

#2: Spraw, by była szybka jak Speedy Gonzales

Pamiętasz tę meksykańską mysz z kreskówek? Twoja strona powinna zasuwać równie szybko.

Choć czasy modemów czy stałych łącz internetowych o zawrotnej prędkości 128 kb / s przeminęły, to wolne strony www są wciąż problemem.

Do przodu poszły multimedia – zamiast suchego tekstu strony zawierają sporo zdjęć i wideo w HD. Ilość JavaScriptu odpowiedzialnego za efekty, formularze i śledzenie aktywności też jest o wiele większa.

Wolna strona internetowa skutecznie odstrasza potencjalnych klientów. Średni czas wczytywania strony powyżej 4 sekund powinien wzbudzać alarm.

Szybkość strony jest szczególnie istotna na urządzeniach mobilnych, gdzie zasięg nie zawsze jest idealny i Internet działa wolno.

Aby sprawdzić szybkość strony i uzyskać sugestie do poprawek, sprawdź poniższe narzędzia:

• Pingdom
• Google Speed Insights

#3: Zbuduj intuicyjną nawigację

To szczególnie ważne w rozbudowanych witrynach. Prosta strona B2B zazwyczaj nie sprawia użytkownikom problemów. Ale w sklepie internetowym można się już zgubić.

Nawigacja zależy od scenariuszy użycia Twojej strony. Istnieje jednak kilka uniwersalnych zasad:

• Logicznie pogrupowane kategorie (wykorzystaj metodę sortowania kart)
• Wszystkie linki w menu są klikalne
• Linki w menu nie są generycznie opisane – “Usługi analityczne” to lepsza nazwa kategorii, niż ”Oferta”.
• Umieść najważniejsze elementy na początku listy
• Nawigacja jest podobna do innych serwisów tego samego typu. Wywracanie interfejsu do góry nogami to kiepski sposób na wyróżnienie się od konkurencji.
• Wykorzystaj ikony

Interfejsu skutecznej strony internetowej nie trzeba nikomu tłumaczyć.Jest tak prosty, że użytkownik intuicyjnie wie, gdzie kliknąć.

#4: Postaw na czytelność

Użytkownicy lubią, gdy jest prosto, łatwo i czytelnie. Dlatego skuteczne strony internetowe wyróżniają się klarownością.

Kluczowym punktem jest tutaj hierarchia wizualna. Jak zwiększyć czytelność?

• Nagłówek H1 – powinien być duży i widoczny. Pozwala ocenić użytkownikowi, na jakiej stronie się znajduje. Pamiętaj, że nie każdy zaczyna wizytę od strony głównej! Jeśli ktoś wejdzie na stronę o konkretnej usłudze czy produkcie, to pokaż mu jego nazwę w nagłówku H1.
• Wizualnie oddzielone menu – jesteśmy przyzwyczajeni do tego, że menu jest u góry strony.
• Logiczna struktura strony – na przykład w e-commerce typowe jest umieszczenie dużego zdjęcia od lewej strony, po prawej stronie nazwy produktu, wariantów kolorystycznych, krótkiego opisu i ceny, pod nimi przycisku CTA. Łamiąc znane użytkownikom standardy wprowadzisz ich w zakłopotanie.
• Whitespace – pusta przestrzeń na stronie to nic złego. Wręcz przeciwnie – pozwala użytkownikowi “odetchnąć”. Whitespace pomaga też wyróżnić kluczowe elementy strony.

Przeczytaj też oddzielny artykuł o czytelności strony i jej wpływie na konwersję.

Czytelność tyczy się też projektowania tekstów i artykułów. Pamiętaj, aby:

• Używać nagłówków H2 i H3
• Korzystać z list wypunktowanych (bullet-pointów)
• Dodawać pogrubienie na kluczowe fragmenty
• Pisać krótkie i zwięzłe zdania
• Akapity dzielić na fragmenty zajmujące maksymalnie 4 linijki

W ten sposób zwiększysz szansę na to, że ktoś zapozna się z tekstem na stronie.

#5: Wyeliminuj rozpraszacze

Ruchome elementy przyciągają uwagę użytkownika. Pytanie, czy powinny?

Masz na stronie głównej ruchomy slider (karuzelę), bo tak było domyślnie w motywie? Zastanów się, czy to na pewno dobre rozwiązanie.

Taki element odwraca uwagę od reszty strony (a być może to tam są istotniejsze informacje, które chciałbyś przekazać potencjalnemu klientowi).

• Animowane banery
• Wysuwające się widgety
• Wyskakujące znienacka pop-upy
• Powiadomienia
• Pytanie o zgodę na powiadomienia push
• Komunikaty o plikach cookies

To wszystko elementy rozpraszające użytkownika. Ogranicz ich widoczność do minimum.

#6: Napisz świetne teksty (copy)

Copy to niedoceniany element strony. Często jest to po prostu wypełnienie miejsc w motywie strony „jakimś” tekstem. To prosta recepta na kiepski współczynnik konwersji.

Mój proces przy tworzeniu skutecznych stron internetowych jest odwrotny.

1. Zaczynam od napisania copy
2. Na jego podstawie tworzę makietę
3. A później finalną stronę

Zmiana tekstu na skuteczniejszy to najtańszy sposób na podniesienie konwersji. Nie wymaga udziału programistów i możesz to zrobić samodzielnie, lub zatrudnić copywritera.

Cechy świetnego copy:

• Konkretne
• Zawiera liczby
• Brak zdań wielokrotnie złożonych
• Bez nic nie znaczących przymiotników
• Brak superlatyw (najlepszy, największy, lider rynku etc.)
• Z humorem (o ile branża i kontekst na to pozwalają)
• Nasycone emocjami

Jeśli chcesz się nauczyć pisać lepsze copy, to koniecznie sprawdź książkę Artura Jabłońskiego o tytule Jak pisać, żeby chcieli czytać i kupować.

#7: Zbuduj zaufanie (social proof)

Kupujemy od tych, którym ufamy. To dobra praktyka – inaczej łatwo tracilibyśmy pieniądze, a oszuści by się cieszyli.

Skuteczna strona www musi wzbudzać zaufanie. Inaczej konwersja będzie niska.

Zaufanie możesz budować na kilka sposobów:

• Umieść opinie klientów (najlepiej w formie widgetu zewnętrznej firmy zbierającej recenzje od kupujących)
• Dodaj zdjęcia zespołu
• Pokaż w widocznym miejscu numer telefonu
• Spraw, by informacje o gwarancji i warunkach zwrotu były łatwo dostępne (zwłaszcza w e-commerce)
• Zainwestuj w certyfikat SSL
• Dodaj logotypy klientów
• Wyświetl logotypy operatorów płatności i firm kurierskich
• Wyeliminuj błędy – literówki czy formularz sypiący błędami obniżają wiarygodność strony.

#8: Dodaj wysokiej jakości zdjęcia

Człowiekowi wystarczy 13 milisekund, aby przeprocesować obraz. Tak, zdjęcia na stronie są ważne.

Sprzedajesz produkty fizyczne?
Zainwestuj we własne zdjęcia w wysokiej rozdzielczości. Zadbaj o to, aby prezentowały produkt z każdej strony.

Widząc tylko jedno zdjęcie, a do tego kiepskiej jakości, użytkownik po prostu kupi u konkurencji.

Unikniesz też powracających pytań o szczegóły produktu (mailowo czy na czacie).

Sprzedajesz usługi?
Zapomnij o zdjęciach ze stocka. Więcej z nich szkody, niż pożytku. Profesjonalna sesja zdjęciowa Twojego zespołu i biura to konieczność dla skutecznej strony www.

Zdjęcia uśmiechniętych, zadowolonych ludzi działają lepiej.

Świetnym dodatkiem na stronie z usługami są rysunki, schematy i grafiki.

Pomagają wyjaśnić proces, sposób działania firmy czy uzyskane korzyści.

Activy jest świetnym przykładem na to, jak dzięki grafikom można zwiększyć atrakcyjność i czytelność przekazu na stronie internetowej.

#9: Stwórz Call To Action, któremu trudno się oprzeć

O przyciskach Call To Action napisałem już oddzielny artykuł. CTA są istotnym punktem skutecznej strony internetowej.

W telegraficznym skrócie – użytkownik musi:

1. Wiedzieć, gdzie kliknąć
2. Chcieć to zrobić

To oznacza, że Call To Action (zwykle przycisk, rzadziej link tekstowy) musi być:

1. Widoczny
2. Przekonujący

Widoczność zbudujesz przez duży rozmiar przycisku, kontrastowy kolor oraz ograniczenie rozpraszaczy wokół CTA. Pozostawienie pustej przestrzeni wokół przycisku to dobry pomysł.

Kluczowym elementem Call To Action jest tekst na przycisku. Powinien:

• Zawierać czasownik
• Obiecywać wartość dla klienta

Unikaj Call To Action, które zwiastują wysiłek, na przykład “Wypełnij formularz” czy “Zarejestruj się”.

Dużo lepsze będą “Chcę otrzymać darmowego e-booka” czy “Wyślij mi darmową wycenę”.

#10: Usuń zbędne elementy

Skuteczna strona internetowa to taka, z której niczego już nie można usunąć.

Elementy na stronie internetowej, które nie wnoszą wartości (czyli nie pomagają przekonać klienta do zakupu), są niepotrzebne.

Bezlitośnie wyrzucaj takie elementy ze strony. Pozbądź się:

• Przycisków, w które nikt nie klika
• Banerów, które odwracają uwagę od ważniejszych elementów
• Nadmiaru linków
• Rozbudowanej stopki, jeśli nie ma w niej interakcji
• Akapitów tekstu, których nikt nie czyta

Im mniej elementów na stronie, tym lepiej – bo użytkownik potrzebuje mniej energii, aby się z nią zapoznać i zdecydować, czy chce przekonwertować.

Sęk w tym, aby poprawnie ocenić, które informacje są istotne. Pomagają w tym badania ilościowe i jakościowe.

Dobrym punktem wyjścia będzie analiza danych w Google Analytics, obejrzenie heatmap oraz nagrań sesji. Dodałbym też do tego badania użyteczności – sprawdzisz wtedy, co jest istotne dla użytkownika, a co pomija.

#11: Zainwestuj w profesjonalny design

Strona na darmowym szablonie WordPressa, który sam heroicznym wysiłkiem sklejałeś do późnych godzin nocnych, nie ma szans na wysoki współczynnik konwersji.

Nieprofesjonalny design użytkownik wyczuwa w ułamku sekundy. A pierwsze wrażenie jest szalenie ważne.

Jeśli wygląd strony się użytkownikowi nie podoba, to szybko z niej ucieknie. A Ty zostaniesz z wysokim bounce rate i niskim poziomem konwersji.

Zadbaj o:

• Poprawnie dobraną paletę 3-4 kolorów. Sporo gotowych wzorów jest dostępnych na stronie Adobe.
• Konsekwencję w designie – przyciski w tym samym kolorze. Linki tekstowe także. Ten sam styl nagłówków H1, H2, H3. Menu zawsze w tym samym miejscu.
• Przyjemną dla oka typografię – ładny krój fontu, odpowiedni rozmiar (aby dało się go swobodnie czytać zarówno na desktopie, jak i urządzeniach mobilnych). Wysokość linii też ma znaczenie – odpowiedni odstęp między liniami ułatwia czytanie.

Profesjonalny design nie oznacza, że potrzebujesz wodotrysków i szalonego grafika-artysty. Najczęściej wystarcza minimalizm, prostota i przejrzystość.

#12: Zadbaj o wersję mobilną

W większości branż ruch ze smartfonów przebił komputery już kilka lat temu.

Niestety, ciągle zapominamy, że to zupełnie inna interakcja, niż na komputerze. A strony mobilne to często po prostu przeskalowana w dół wersja desktop.

Jeśli Twoja strona ma być skuteczna, musisz zadbać o mobile-experience.

• Wyłącz irytujące pop-upy, widgety, prośby o zapis na notyfikacje push.
• Ukryj mniej istotne elementy albo usuń je z wersji mobilnej
• Zmień kolejność sekcji, jeśli na mobile te mniej ważne wyświetlają się wyżej
• Unikaj tooltipów aktywnych “po najechaniu”. Na mobile nie da się “najechać myszą na element”.
• W formularzach ustaw odpowiedni typ pola (ułatwisz wpisywanie adresu email czy numeru telefonu)

Podsumowanie

O każdej z opisanej cech skutecznych stron internetowych mógłby powstać oddzielny, szczegółowy artykuł.

Zawarte tutaj porady to absolutne podstawy, do zastosowania przy niemal każdej stronie. Wdrożenie tych fundamentalnych poprawek w serwisie może znacznie podnieść współczynnik konwersji.