Strona główna – jak ją zaprojektować? 9 elementów must-have firmowej strony głównej

Avatar

#FBNews #AdsNews

Czy Twoja strona główna robi właściwe pierwsze wrażenie? Sprawia, że internauci nabierają zaufania do Twojej firmy i chcą wiedzieć więcej o ofercie i warunkach współpracy? Jeśli odpowiedź na te pytania jest inna niż bezapelacyjne i pewne “TAK”, to czas najwyższy, abyś odświeżył swoją stronę główną. Na co musisz zwrócić uwagę, żeby nie powielić starych błędów?

W tym artykule dzielimy się z Tobą najlepszymi praktykami, dzięki którym z łatwością zaplanujesz i przygotujesz stronę główną pomagającą Ci realizować założone cele biznesowe.

Strona główna witryny internetowej to często pierwsza styczność potencjalnego klienta z Twoim biznesem i jej odbiór w ogromnym stopniu wpływa na chęć (albo jej brak) dokonania zakupu. I ten fakt jest już wystarczającym powodem, dla którego warto odpowiednio ją przygotować. Odpowiednio, czyli w sposób, który sprawi, że będzie ona nie tylko elegancką wizytówką w sieci, ale przede wszystkim zadecyduje o tym, że cała strona WWW stanie się skutecznym narzędziem marketingowym.

Agencja ECHO Marketing powstała ponad 200 realizacji WWW temu. Przez ten czas zmieniał się Internet, jego użytkownicy i ich przyzwyczajenia. Zmieniliśmy i rozwinęliśmy się także my jako agencja budująca strony internetowe. Dzisiaj, na podstawie wypracowanego przez lata doświadczenia, możemy wskazać te elementy strony głównej witryny WWW, których obecność decyduje o tym, że strona przyciąga do firmy nowych klientów – i to niezależnie od branży, bo pewne oczekiwania i nawyki użytkowników są po prostu niezmienne i uniwersalne.

Gotowy? No to zaczynamy!

9 KLUCZOWYCH elementów strony głównej firmowej WWW

1. Logo – wyeksponowane jak należy

Startujemy od górnego lewego rogu ekranu. Wszystkie dotychczasowe badania eyetrackingowe niezmiennie wskazują, że właśnie na tym punkcie użytkownicy skupiają swój wzrok i uwagę w pierwszej kolejności. Co tam powinieneś wstawić? Swoje logo lub logotyp.

Użytkownicy szybciej zapamiętują nazwę firmy, jeśli mogą ją powiązać ze znakiem graficznym. To jasne, że nie chcesz im tego utrudniać, dlatego nie kombinujesz i właśnie w tym, a nie innym miejscu, umieszczasz firmowy logotyp. Dodatkowo “oczyszczasz” pole wokół niego ze wszystkich zbędnych elementów wizualnych i podświetlasz je kontrastowym kolorem. Rezygnujesz też z ewentualnych animacji (od dawna są już passé) i wszystkiego, co może zaburzyć odbiór oraz sprawić, że uwaga internauty zostanie rozproszona.

Przykłady prawidłowego rozmieszczenia logotypów na stronie głównej względem pozostałych elementów strony internetowej.

2. Intuicyjna nawigacja – dzięki niej każdy powinien się szybko odnaleźć

Pozostajemy na górze strony i przesuwamy się na prawo od logo.

Nie ma gorszej sytuacji od tej, w której użytkownik ląduje na stronie WWW i nie wie, gdzie jest i co ma dalej robić. Najważniejszym celem strony głównej jest zachęcenie potencjalnych klientów do dłuższej “wędrówki” po witrynie. Dlatego właśnie pasek nawigacji umieszczasz w miejscu, którego nie da się przeoczyć, czyli na górze strony. Co więcej, Twoje menu podąża za użytkownikiem przewijającym stronę (tzw. pływający pasek menu), tak by mógł z niego skorzystać w dowolnym momencie bez konieczności powrotu na górę witryny.

Zadbaj o to, aby pasek nawigacji nie miał zbyt wielu pozycji. Jeśli będzie przeładowany, uniemożliwi potencjalnemu klientowi znalezienie i szybkie przejście do sekcji, która go najbardziej interesuje.

Jak ten wymóg minimalizmu pogodzić z rozbudowaną ofertą lub bardzo szerokim asortymentem? Zastosuj menu rozwijane, z którego internauta z łatwością trafi na poszczególne podstrony.

Przykład rozwijanego paska menu głównego.

Na koniec jeszcze jedna bardzo istotna kwestia – hamburger. To ikona (trzy poziome równoległe linie) wywołująca menu. Do tej pory była stosowana przede wszystkim na urządzeniach mobilnych, ale coraz częściej przenosi się ją na desktop. Przestrzegamy przed tym ruchem. Badania wykazują, że ukrycie paska nawigacji pod ikoną hamburgera jest tak skuteczne, że jego wykrywalność spada o połowę! Ale jeśli się uprzesz na takie rozwiązanie, obok ikony umieść napis “menu” – taki zabieg rozwieje rozterki zagubionych użytkowników.

3. Nagłówek i podtytuł – pierwsze słowa, które widzi użytkownik (i chcemy, żeby je przeczytał!)

Wciąż jesteśmy na górze strony głównej. Po logo i menu wzrok użytkownika pada na nagłówek.
I to jest właśnie ten moment, od którego wszystko zależy… Dodajmy, moment bardzo krótki, bo mierzony w sekundach.

Albo zwięźle i konkretnie wyjaśnisz, z jaką ofertą wychodzisz do klientów i co im możesz dać, albo ich stracisz. O tym, czy potencjalny klient pozostanie na Twojej stronie, decyduje zatem kilka słów. W języku marketerów mówi się o Value Proposition (propozycja wartości).

Strategii na zbudowanie nagłówka na stronie głównej jest wiele, ale te najskuteczniejsze mają jedną cechę wspólną: stawiają klienta w centrum (klientocentryzm!).

Musisz znaleźć właściwe słowa i tak je skomponować, żeby odwiedzający natychmiast wiedział, czym się zajmujesz i co on z tego będzie miał. Oznacza to, że przekaz ma być skoncentrowany na odbiorcach i odpowiadać na ich najpilniejsze potrzeby, zaś w mniejszym stopniu mówić o samej firmie. Innymi słowy: klienta nie obchodzi to, jak wspaniała i nadzwyczajna jest Twoja oferta – on chce wiedzieć, co z tego wynika dla niego!

Podtytuł to dwa do trzech zdań, w których uzupełniasz informacje umieszczone w nagłówku. Dobrą praktyką jest budowanie podtytułu (podobnie zresztą jak i nagłówka) na “bólach” głównej grupy docelowej, które Twoja oferta rozwiązuje.

Przykład dobrze skonstruowanego nagłówka wraz z podtytułem na stronie głównej

4. Zdjęcie na stronie głównej obraz jest częścią przekazu

To na jego tle powinieneś umieścić nagłówek i podtytuł. Nie bez kozery mówi się o nim Supporting Image, czyli obraz wspierający… I dlatego zdjęcie na stronie głównej witryny nie może być sztampowe, przypadkowe i tandetne!

Obraz wraz ze słowami ma tworzyć jeden spójny w odbiorze przekaz – nawiązywać do Twojej oferty w możliwie jasny sposób, odwoływać się do wartości, z którymi utożsamiasz swój biznes oraz wywoływać odpowiednie skojarzenia i emocje.

Wybierając takie zdjęcie, raczej omijaj stockowe bazy (zwłaszcza te darmowe), a jeśli nie możesz sobie pozwolić na indywidualną sesję fotograficzną, kup zdjęcie w standardzie premium – wyjdzie drożej, ale jego jakość oraz mniejsza popularność uzasadniają wydatek.

Przykład celnie dobranego Supporting Image na stronie głównej, w tym przypadku dla firmy z branży szkoleń przede wszystkim w zakresie tzw. umiejętności miękkich.

5. Podstawowe wezwanie do działania – nie więcej niż dwa CTA

Odwiedzający stronę główną zazwyczaj są na tym etapie ścieżki zakupowej, w którym poszukują bardziej szczegółowych informacji o ofercie. Powinieneś im to ułatwić, a przy okazji tak pokierować ich wędrówką po stronie, żeby poszli właśnie tam, gdzie najbardziej Ci zależy. Do tego właśnie służy Call-to-Action, czyli wezwanie do działania, które po raz pierwszy powinno się pojawić pod lub bezpośrednio na Supporting Image.

W kontekście CTA mamy dwie podstawowe rady:

  • zadbaj, żeby Twoje CTA było dobrze widoczne. Postaw na kontrast – niech wyraźnie odbija się od reszty elementów na stronie. Ale nie przesadź – mimo kontrastowych barw, przycisk CTA powinien być spójny z resztą projektu;
  • wskaż odwiedzającym maksymalnie do dwóch akcji do wykonania. Zbyt wiele przycisków CTA, w dodatku z różnymi wezwaniami dezorientuje użytkowników i utrudnia im podróż po Twojej stronie.
Przykład rozbicia pierwszego Call-to-Action na dwa wezwania.
Przykład prostego wezwania do działania.

6. Funkcje i zalety oferty

Nagłówek i podtytuł wyjaśniają, czym się zajmujesz i jak możesz pomóc użytkownikom, ale na poziomie ogólnym. Na skutecznej stronie głównej powinny znaleźć się też bardziej szczegółowe informacje dotyczące oferty, zwłaszcza jeśli Twoim priorytetem jest sprzedaż. Homepage to miejsce, w którym powinna rozpocząć się komunikacja o funkcjach i zaletach usług lub produktów.

Przykład wstępnej prezentacji zalet i funkcji oferty na stronie głównej – poszczególne cechy zostały umieszone w dynamicznych boksach, potocznie zwanych kafelkami, które wysuwają się naprzód po najechaniu na nie kursorem myszki.

7. Opinie i referencje – weryfikatory Twojej wiarygodności

Poszukujesz lekarza, chcesz wyremontować kuchnię, planujesz zmienić auto – co robisz? Zaczynasz wertować sieć w poszukiwaniu opinii i świadectw klientów o produktach i usługach, którymi jesteś zainteresowany. Tak samo zachowują się Twoi klienci. Jeżeli więc możesz pochwalić się pozytywnym feedbackiem, strona główna jest do tego najlepszym miejscem.

Nie muszą to być peany na Twoją cześć. Wystarczy kilka zdań polecających od kilku lub kilkunastu zadowolonych klientów i co ważne, podpisanych imieniem i nazwiskiem, ewentualnie firmowane marką (jeśli z Twojej oferty skorzystało przedsiębiorstwo lub instytucja) – anonimowe referencje nie są wiarygodne, więc zrezygnuj z zamieszczania ich na stronie WWW.

Opinie i rekomendacje od klientów dla naszej firmy.

Dobrą i rekomendowaną – choć droższą w produkcji – praktyką jest umieszczanie tzw. video-testimonials, czyli filmów (koniecznie zrealizowanych z pomysłem i dobrze zmontowanych), na których klienci opowiadają, za co cenią dany produkt czy usługę i co się zmieniło odkąd z nich korzystają.

Pamiętaj, że podpisane rekomendacje od klientów są w istocie trudnym do podważenia dowodem, że to, o czym komunikujesz na stronie nie jest jedynie deklaracją, ale znajduje swoje potwierdzenie w rzeczywistości.

8. Dane do kontaktu – łatwe do znalezienia w każdej chwili

Musisz zapewnić swoim potencjalnym klientom szybki i łatwy dostęp do informacji kontaktowych z poziomu głównej strony.

Pełne dane do kontaktu zwyczajowo umieszcza się w stopce oraz w dedykowanej zakładce, do której dostęp powinien znaleźć się na pasku nawigacji.

Zdarzają się jednak takie sytuacje, w których użytkownik potrzebuje pilnego kontaktu z konsultantem – nie każ mu szukać numeru lub adresu e-mail, niech zobaczy je zaraz po wejściu na stronę główną. Umieszczenie danych do szybkiego kontaktu na samej górze po lewej lub prawej stronie w tym kontekście sprawdza się doskonale.

Taki zabieg ma jeszcze jeden istotny walor – jest czytelnym sygnałem dla klientów z sieci, że jesteś przygotowany i otwarty, by bezpośrednio odpowiadać na ich pytania i udzielać wszelkich informacji. To ośmiela i zachęca użytkowników do skontaktowania się z Twoją firmą. I o to chodzi!

Przykłady prawidłowego rozmieszczenia danych do szybkiego kontaktu na stronie głównej strony internetowej – w prawym górnym rogu nad logotypem lub w lewym górnym rogu nad paskiem nawigacji.

9. Stopka – kluczowe informacje, nawigacja i szybki kontakt w jednym miejscu

Stopka powinna być standardowym elementem każdej zakładki na stronie WWW, nie tylko strony głównej. Podaje informacje umieszczone na stronie w skondensowanej wersji oraz pełni rolę nawigacyjną. Dzięki niej użytkownik nie musi ponownie przewijać witryny w poszukiwaniu wiadomości, które go zainteresowały lub tych, które są mu potrzebne do wykonania kolejnego kroku.

Co dobrze włączyć do stopki?

  • Krótka charakterystyka firmy (swoiste “o nas” w pigułce)
  • Informacje kontaktowe – adres siedziby, mail, telefon, godziny pracy/otwarcia, a także formularz kontaktowy (stopka to miejsce, do którego zwyczajowo kierują się użytkownicy poszukujący danych kontaktowych)
  • Mapa strony/lista strategicznych zakładek
Przykład dobrze zaplanowanej stopki zawierającej wszystkie niezbędne informacje.

Jakie jeszcze informacje można umieścić w stopce?

  • “Zajawki” wpisów blogowych (jeśli prowadzi się blog)
  • Widżety mediów społecznościowych (z punktu widzenia użytkownika najlepiej, żeby ikonki social mediów były zgrupowane w jednym miejscu – stopka nadaje się do tego celu idealnie)
  • Przyznane odznaki, nagrody i certyfikaty (jeden lub dwa najważniejsze)
  • Link do mapy Google z lokalizacją firmy
  • Przycisk Call-to-Action
Przykład stopki wyposażonej w dodatkowe elementy, takie jak: przycisk CTA, link do map Google, widżety mediów społecznościowych i przyznane wyróżnienie oraz “zajawki” wpisów blogowych.
  1. Charakterystyczne logo,
  2. intuicyjna nawigacja,
  3. odpowiadający wprost na potrzeby użytkowników nagłówek wraz z podtytułem,
  4. oryginalne i spójne z przekazem zdjęcie,
  5. dobrze widoczne Call-to-Action,
  6. wstępna prezentacja oferty,
  7. opinie i referencje od klientów,
  8. łatwo dostępne informacje kontaktowe
  9. stopka…

W sumie 9 podstawowych elementów strony internetowej do zamieszczenia na stronie głównej – niewiele, biorąc pod uwagę, jak bardzo mogą poprawić sposób, w jaki użytkownicy odbierają Twoją stronę internetową i, de facto, postrzegają Twoją firmę. Dlatego budując stronę internetową, warto przypilnować, żeby żadnego z nich nie zabrakło na zakładce otwierającej.

Jeśli po lekturze naszego artykułu nabrałeś przekonania, że strona główna Twojej firmowej strony internetowej wymaga liftingu, zapraszamy do kontaktu z naszymi handlowcami lub wypełnienia bezpłatnego briefu – wybadamy potrzeby i znajdziemy optymalne rozwiązanie.

Czy ten artykuł okazał się przydatny?

Oceń artykuł korzystając z gwiazdek

Średnia ocena / 5. Liczba głosów:


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *