Jak zaprojektować stronę główną?

Strona główna - twarz naszej witryny. Dowiedz się jak zaprojektować intuicyjną i skuteczną stronę główną serwisu internetowego na blogu nazwa.pl.

Użytkownik odwiedzający naszą witrynę najczęściej trafia na stronę główną. Od tego, jak jest zaprojektowana, w dużym stopniu zależy, czy zainteresujemy go swoją ofertą. Dlatego też projektowaniu strony głównej należy poświęcić wyjątkowo dużo uwagi. Jakie elementy warto na niej umieścić?

Dlaczego strona główna jest ważna?

Strona główna w dużej mierze decyduje o pierwszym wrażeniu, jakie odniesie użytkownik mający kontakt z naszą marką w Internecie. Można to porównać do wizyty w butiku lub biurze, gdzie znaczenie ma nie tylko wystrój lokalu, ale także obsługa klienta.

Obsługa klienta powinna czytelnie przedstawić ofertę firmy, zaproponować konkretny produkt lub skierować gościa do specjalisty, który rozwiąże jego problem. Dzięki temu nie będzie zmuszony do bezradnego rozglądania się po lokalu w poszukiwaniu interesującego go produktu (co skończyłoby się zapewne tym, że opuściłby sklep i udał się do kolejnego).

Jak powinna być zaprojektowana strona główna?

Aby strona główna spełniała swoje zadanie, powinna w sposób jasny i czytelny przedstawiać najważniejsze atuty firmy. Jednocześnie musi to robić w formie bardzo skrótowej, aby użytkownik nie zniecierpliwił się czytaniem danej sekcji. Zniecierpliwiony użytkownik często zamknie stronę i nie przejdzie przewinie strony dalej.

Ze strony głównej użytkownik powinien dowiedzieć się, czy firma oferuje to, czego szuka oraz czy jest wiarygodna. Jeżeli na oba pytania udzieli odpowiedzi „tak”, jest szansa, że pozostanie na stronie, a nawet skorzysta z oferty firmy. W innym przypadku opuści witrynę i będzie szukał interesującej go oferty u konkurencji.

Trzeba pamiętać, że użytkownik podejmuje decyzje, czy zostanie na stronie, czy też ją opuści w ciągu sekund. Współczynnik użytkowników, którzy opuścili witrynę nie przechodząc na inne jej podstrony, to tzw. współczynnik odrzuceń. Jeżeli jest on wysoki, zdecydowanie warto zastanowić się nad przeprojektowaniem strony głównej lub udoskonaleniem jej treści.

Przykładowa strona główna

Aby pokazać, jak może wyglądać projekt strony głównej, posłużymy się przykładem. Wykonaliśmy w WordPressie stronę fikcyjnej agencji „E-Marketing” używając bezpłatnego motywu Hestia. Wszystkie widoczne na stronie sekcje można z łatwością skonfigurować samemu w identycznej formie graficznej, używając opcji DOSTOSUJ w pozycji WYGLĄD menu WordPressa.

Above the fold

Above the Fold (”powyżej linii zgięcia”) oznacza część strony, którą użytkownik widzi bez potrzeby przewijania strony. Znajdują się tu:

  • Logo

Logo jest najważniejszym składnikiem identyfikacji wizualnej marki. Powinno odzwierciedlać jej charakter — wartości z nią związane, cechę wyróżniającą markę na tle konkurencji czy charakter konkretnego produktu.

W tym celu używa się metaforycznych znaczeń używanych symboli. Warstwę znaczeniową mają także kolory oraz czcionki.


PRZECZYTAJ TAKŻE:


  • Menu

Główne menu powinno być proste i nie zawierać zbyt dużej ilości elementów. Dlatego też naszą ofertę należy przyporządkować do podstawowych grup. Nawet w przypadku rozbudowanego sklepu internetowego można stworzyć prosty podział na „Ona” i „On” – dział żeński i męski. Po najechaniu na pozycję wyświetlić się może jednak rozbudowane menu, w którym użytkownik będzie mógł  okonać już bardziej precyzyjnego wyboru.

Menu jest też miejscem, gdzie można umieścić ikony mediów społecznościowych kierujące do naszych profili social media. Tam również powinien się znaleźć przełącznik języka strony, jeżeli nasza witryny jest wielojęzyczna.


PRZECZYTAJ TAKŻE:


  • Tło

Poniżej menu umieszcza się najczęściej duże, statyczne zdjęcie. Musi być ono bardzo dobrej jakości. Powinno w czytelny sposób nawiązywać do naszej oferty lub być interesującą kreacją reklamową.

Coraz rzadziej spotyka się obecnie, wszechobecny niegdyś slideshow (pokaz slajdów). Przestał być używany, ponieważ badania zachowań użytkowników na stronach pokazywały, że bardzo rzadko czekali oni na pojawienie się kolejnego slajdu. Zdarzało się również, że nie byli w stanie zdążyć z przeczytaniem interesującej ich informacji lub zdecydować się na kliknięcie przycisku Call To Action, podczas gdy już pojawiał się kolejny slajd. Dlatego też w zupełności wystarczające jest użycie statycznego zdjęcia (skoro i tak użytkownicy nie będą zazwyczaj czekać na następne).

W związku z rosnącą przepustowością łącz, coraz częściej na stronie głównej używa się także video. Jeżeli dysponujemy krótkim i przekonującym filmikiem, warto się nad tym zastanowić.

Popularne jest także stosowanie zdjęcia z efektem paralaksy. Zdjęcie takie przesuwa się nieznacznie wraz z ruchami myszki, co daje wrażenie przestrzeni i dodatkowej interakcji.

  • Nagłówek

W nagłówku powinno się znaleźć jasne i czytelne określenie korzyści, jaką odniesie potencjalny klient, jeśli skorzysta z naszej oferty. Jednocześnie nagłówek służy przekazaniu informacji, czym się zajmujemy.

Należy użyć krótkiego zdania (najwyżej dwóch), np. w trybie rozkazującym. Naszym celem jest przekonanie klienta, że potrzebuje tego, co oferujemy.

Odnosząc się do naszego przykładu agencji E-Marketing: jeżeli określimy, że naszym targetem są osoby, które jeszcze nie prowadzą działań marketingowych online, nasz nagłówek może brzmieć Reklamuj się w sieci — wydawaj mniej, zarabiaj więcej. Sugeruje on, że wydatki na kampanie online są niższe niż na reklamę tradycyjną.

Klientowi można także zadać pytanie, które uświadomi mu jego problem i zasugeruje, że znamy jego rozwiązanie. Zmieńmy zatem target naszej agencji na klienta, który już prowadzi działania marketingowe w Internecie, ale nie jest zadowolony z ich efektów oraz uważa, że przepłaca za kampanie online. W naszym przykładzie nagłówek będzie brzmiał zatem: Twoje kampanie online to duże wydatki i słabe efekty?

Naszym celem jest zatem, by użytkownik po przeczytaniu tego zdania pomyślał: „O! To o mnie”. Pojawi się wtedy szansa, że będzie zainteresowany naszym rozwiązaniem jego problemu.

  • Podtytuł

W podtytule mamy szansę na sprecyzowanie naszej oferty. Powinien być krótki i odpowiadać na pytanie „jakie problemy klienta rozwiązujemy”. W naszym przykładzie przy nagłówku Twoje kampanie online to duże wydatki i słabe efekty? podtytuł może brzmieć:

Skutecznie działamy w sieci z szacunkiem dla Twojego budżetu. Zero ruchów pozornych, tylko rezultaty!

W ten sposób doprecyzowujemy problem klienta zawarty w nagłówku – korzystając z naszych usług, może on w ramach swojego budżetu osiągnąć satysfakcjonujące rezultaty.

  • Call To Action

Wezwanie do działania, czyli Call To Action (CTA), służy zachęceniu użytkownika do wykonania jakiejś czynności. Zależeć nam może np. na tym, aby przeszedł na stronę jednego z naszych produktów, która zachęci go do zakupu. Zazwyczaj są to słowa w trybie rozkazującym (”Dowiedz się więcej”, „Kup”).

Wezwania do działania są niezwykle skuteczne, ponieważ użytkownik najczęściej potrzebuje wiedzieć, jaki następny krok wykonać (nie chce się tego domyślać).

Tak będzie zatem wyglądała treść above the fold strony naszej przykładowej agencji:

Jak zaprojektować stronę główną? Dowiedz się na blogu nazwa.pl jak powinna wyglądać treść above the fold na internetowej strony wizytówki.

Below the Fold

Poniżej linii zgięcia (Below the Fold) możemy pozwolić sobie na większą dowolność w konstruowaniu strony. Warto tam jednak zawrzeć następujące elementy:

  • lista korzyści

Mogą to być trzy, cztery punkty wymieniające najważniejsze korzyści, które są związane z naszą ofertą (nie jej cechy). Ważne, aby korzyści nie było zbyt wiele, aby nie przytłoczyć użytkownika.

Pisanie o korzyściach bezpośrednio przekłada się na sprzedaż, ponieważ odwołuje się do emocji potencjalnego klienta. W gruncie rzeczy nie interesuje go bowiem, jaki jest produkt, ale co dla niego może on zrobić. Jeśli jednak chcemy wymienić cechy produktu, to użyjmy ich w nagłówku elementu, koncentrując się na korzyści w jego opisie. Np.:

Jak zaprojektować stronę główną? Sprawdź na blogu nazwa.pl jak przygotować skuteczną listę korzyści dla klienta na stronie głównej strony www.

  • krótki opis firmy/usługi/produktu

Za pomocą kilku zdań można wyrazić, czym w istocie jest nasz produkt lub w skrócie opisać naszą firmę. Ważne, aby unikać ogólnikowych (i niestety popularnych) sformułowań rodzaju „jesteśmy dynamicznie rozwijającą się firmą”. Najlepiej skupić się na konkretach, pisząc, co robimy i dlaczego jesteśmy w tym dobrzy (albo co wyróżnia nasz produkt):

Opis firmy na stronie głównej firmowej strony internetowej to podstawa. Sprawdź jak napisać ciekawy opis firmy na blogu nazwa.pl.

  • prezentacja zespołu

W przypadku niewielkiej firmy usługowej, której kapitał opiera się przede wszystkim na wiedzy członków zespołu (takiej jak nasza agencja E-Marketing), warto ich przedstawić. Użyć do tego celu należy profesjonalnie wykonanych zdjęć oraz krótkich opisów.

W naszym przykładzie opis każdego z członków zespołu składa się z dwóch, trzech zdań. Pierwsza część opisu dotyczy kompetencji profesjonalnych danej osoby:

Autor nagradzanych kampanii, zawsze stawiający na efektywność.

Druga część określa zainteresowania i charakter członka zespołu. Ma to na celu skrócenie dystansu między potencjalnym klientem a prezentowaną osobą, pokazanie, że profesjonalista jest „także człowiekiem” (z którym można np. dzielić tę samą pasję lub cechy osobowości):

Online 24/7. Fan gier MMORPG.

Na stronie głównej przedstawmy zatem najważniejszych członków zespołu i ew. zawrzyjmy link do osobnej podstrony zawierającej sylwetki pozostałych osób. Na tej podstronie powinny się znaleźć także dłuższe opisy każdej z prezentowanych na stronie głównej osób.

Przy opisie każdego członka zespołu (zarówno na stronie głównej, jak i podstronie) dobrze jest umieścić ikony social media odsyłające do jego profili w mediach społecznościowych oraz ikonę umożliwiającą bezpośredni kontakt mailowy.

Zakładka "Poznaj nasz zespół" - prezentacja zespołu firmy na stronie www. Na blogu nazwa.pl poznaj zalety rozmieszczenia informacji o pracownikach na Twojej stronie.

  • referencje

Referencje pełnią funkcję tzw. „dowodu społecznego”, pozwalając uwiarygodnić nasz biznes. Klienci znacznie chętniej decydują się na zakup produktu lub skorzystanie z usługi, jeżeli ktoś je zarekomenduje. Nie ma tu znaczenia, czy jest to osoba, którą znają czy też osoba obca. Ważne jedynie, aby rekomendacja brzmiała autentycznie (i oczywiście była autentyczna!).

Referencje powinny być podpisane imieniem i nazwiskiem oraz najlepiej nazwą pełnionej przez rekomendującego funkcji w danej firmie (i oczywiście nazwą samej firmy). Jeżeli dana osoba wyrazi na to zgodę, można zamieścić jej zdjęcie.

Na stronie głównej warto umieścić jedynie krótkie cytaty z najlepiej nas prezentujących referencji. Wybierając fragmenty, starajmy się, aby teksty przedstawiały różne problemy klientów, które zostały rozwiązane dzięki współpracy z naszą firmą. Na naszym przykładzie będzie to wyglądało następująco:

Referencje klientów wzbudzają zaufanie użytkowników odwiedzających stronę www. Poznaj zasady tworzenia zakładki "Co mówią o nas Klienci" na blogu nazwa.pl.


PRZECZYTAJ TAKŻE:


  • Wpisy z bloga

Prowadzenie bloga firmowego służy nie tylko budowie wizerunku naszej firmy jako eksperta branży. Pomaga również w działaniach social media poprzez możliwość udostępniania wartościowych treści i służy działaniom SEO (pozycjonowania).

Dlatego też, jeśli mamy bloga, możemy zaprezentować tzw. zajawki (leady) najnowszych wpisów na stronie głównej. Pokaże to, że firma „żyje”, a także może zainteresować czytelnika, który spędzi przez to więcej czasu w naszej witrynie.

Blog na stronie to źródło informacji dla użytkowników oraz narzędzie do SEO i content marketingu. Sprawdź na blogu nazwa.pl jak przygotować zakładkę "wpisy z bloga" na stronie głównej.

  • Dane kontaktowe i formularz

Ważne, aby użytkownik nie był zmuszony do przechodzenia na stronę Kontakt w celu znalezienia informacji kontaktowych, ale znalazł je od razu na stronie głównej. Jeżeli potencjalny klient przewinie całą stronę i stwierdzi, że interesuje go nasza oferta, może chcieć otrzymać od nas więcej informacji i być może skorzysta z usług firmy.

W sekcji danych kontaktowych umieścić należy także formularz kontaktowy, dzięki któremu użytkownik będzie mógł do nas od razu napisać.


PRZECZYTAJ TAKŻE:


PODSUMOWANIE

Strona główna jest jedną z najważniejszych stron witryny. To na nią najczęściej trafiają użytkownicy szukający informacji o naszej firmie. Dlatego też jej projektowaniu należy poświęcić dużo uwagi.

Strona główna dzieli się na dwie podstawowe części:

  1. ABOVE THE FOLD (powyżej linii zgięcia)

Jest to fragment strony widoczny bez konieczności jej przewijania (czyli od razu po wejściu na stronę). Część ta zawiera następujące elementy:

  • logo

Za pomocą logo należy wyrazić charakter marki, ponieważ jest to pierwszy punkt kontaktu z nią klienta.

  • menu

Powinno być proste, czytelne i nie zawierać zbyt wielu elementów. Można w nim umieścić ikony social media.

  • tło nagłówka

Najlepiej zastosować statyczne zdjęcie, ewentualnie video. Obecnie nie używa się już pokazów slajdów.

  • nagłówek

Powinno to być jedno, maksymalnie dwa krótkie zdania wyrażające najważniejszą korzyść, jaką odniesie klient, jeśli skorzysta z naszej oferty.

  • podtytuł

Należy sprecyzować w nim, czym się zajmujemy, najlepiej również za pomocą języka korzyści.

  • wezwanie do działania

Przycisk Call to Action powinien zachęcać do skorzystania z oferty lub poznania jej szczegółów.

  1. BELOW THE FOLD (poniżej linii zgięcia)

Jest to pozostała część strony, wymagająca od użytkownika jej przewinięcia w dół. Mogą się w niej znaleźć następujące sekcje:

  • lista korzyści

Należy wymienić w niej trzy, cztery korzyści, które można czerpać z naszego produktu/usługi. Nie powinny to być cechy, jeśli jednak chcemy je wymienić, zróbmy to w nagłówkach, pisząc o korzyściach w treści punktów.

  • krótki opis firmy/usługi/produktu

Powinno to być parę zdań opisujących, czym się zajmuje firma lub jakie są podstawowe cechy produktu wraz z uwzględnieniem ich najważniejszych atutów.

  • prezentacja zespołu

Należy przedstawić sylwetki kilku członków zespołu. Każdy z opisów powinien zawierać maksymalnie trzy zdania. Najlepiej skonstruować go z części dotyczącej profesjonalnych atutów osoby oraz części dotyczącej jej cech osobowości czy zainteresowań (w celu skróceniu dystansu pomiędzy potencjalnym klientem a członkiem zespołu).

  • referencje

Powinny to być krótkie cytaty z najważniejszych referencji. Najlepiej dobrać je tak, aby przedstawiały, w jaki sposób nasz produkt lub usługa rozwiązały problem klienta. Wszystkie referencje należy podpisać imieniem i nazwiskiem rekomendującego oraz stanowiskiem pełnionym w danej firmie.

  • wpisy z bloga

Można umieścić tu zajawki (leady) dwóch, trzech najnowszych wpisów z bloga.

  • dane kontaktowe

W tej sekcji powinny się znaleźć numery telefonu, adres oraz formularz kontaktowy.

Tak zaprojektowana strona główna pozwoli użytkownikowi zapoznać się z najważniejszymi atutami naszej firmy, co daje szansę, by został naszym klientem.