Nagłówek w sklepie internetowym - 6 wskazówek dobrego UX


UX Designer

Czas czytania: 4 minut
 

Nagłówek w sklepie internetowym ma kluczowe znaczenie dla użytkownika! W biznesie eCommerce wszystko ma znaczenie i może zmniejszyć lub zwiększyć Twoją sprzedaż. Gotowy na poznanie wskazówek dobrego UX nagłówka w sklepie internetowym?

 

 

Czym jest nagłówek w sklepie internetowym?

Nagłówek to sekcja od górnej krawędzi strony, do sekcji głównej danej podstrony. Jest to sekcja zwykle identyczna na każdej podstronie sklepu internetowego.

Nagłówek zwykle zawiera:

  • logo, menu nawigacyjne,
  • baner lub slider reklamowy,
  • ikonę koszyka,
  • ikony USP,
  • wyszukiwarkę,
  • ikonki mediów społecznościowych.

 

Jakie są cele nagłówka w eCommerce?

  1. Nagłówek mówi użytkownikowi, czym zajmuje się dany sklep internetowy. Potencjalny klient po wejściu na stronę musi wiedzieć, gdzie jest i czego dotyczy oferta danego sklepu.
  2. Nagłówek przedstawia również, w jak najczytelniejszy sposób, grupy produktowe w sklepie internetowym. Powinna się więc w nim znaleźć nawigacja po kategoriach produktowych.

Za pomocą nagłówka budujesz markę, walczysz o rozpoznawalność na rynku. Masz też okazję za jego pomocą pokazać, czym odróżniasz się od konkurencji. Nagłówek sklepu internetowego może być wpadającym w oko sloganem. Mimo tego, że nagłówek nie powinien być przesycony informacjami, jest sporo możliwości, by zawrzeć w nim jak najwięcej danych.

W nagłówku warto podkreślić mocne strony i przewagi konkurencyjne sklepu, na przykład:

  • 360 dni na zwrot,
  • darmowa dostawa,
  • wygodne sposoby płatności – blik,
  • odbiór w paczkomacie,
  • bezpłatne zwroty.

Chcesz poprawić UX Twojego sklepu i zwiększyć konwersję nawet o kilkudziesięciu do kilkuset procent?
Koniecznie przeczytaj nasz cały cykl artykułów  UX w eCommerce.

 

Jak powinien wyglądać nagłówek w sklepie internetowym – 6 wskazówek UX

    1. Najważniejsze CTA Twojego nagłówka

Skup się na tym, co najważniejsze dla klienta, czyli na ofercie Twojego sklepu, na kategoriach produktów. Masz dwie możliwości:

A. Jeśli struktura kategorii jest płytka, tych kategorii jest mało, to możesz w Menu nawigacyjnym wypunktować wszystkie kategorie od razu. Jeśli dodasz do nich ikonografię, podkreślą one typ kategorii.

B. Jeżeli natomiast struktura kategorii jest bardzo rozbudowana i nie możesz zawęzić kategorii do kilku głównych grup, schowaj je pod jeden przycisk, na przykład „KATEGORIE” lub „OFERTA SKLEPU”. Ważne jest, by ten przycisk był odpowiednio wyeksponowany. Chodzi o to, żeby był bardzo dobrze widoczny na tle innych pozycji w menu. Na przykład większy, pogrubiony lub w innym kolorze. To element, który powinien od razu skupiać wzrok klienta.

Co ważne – Ukrycie kategorii produktów pod jednym przyciskiem, daje Ci możliwość dodania kilku dodatkowych, równoległych pozycji do Menu. Kiedy to ma sens? Wtedy, gdy na przykład sprzedajesz produkty z branży elektrycznej, a równolegle oferujesz także usługi wyceny, doradztwa i montażu.

 

   2. Zachowaj umiar w ilości informacji w nagłówku

Gdy przeprowadzamy audyty UX, bardzo często poprawiamy nagłówki, które są przeładowane informacjami. A trzeba wybrać tylko te informacje, które są najważniejsze dla klienta. Oto kilka z problemów, z którymi się stykamy:

A. Zbyt uniwersalne nagłówki. To jest zły zwyczaj. Weźmy za przykład sklep sprzedający autorskie obuwie. To nie jest obuwie powtarzalne, które można kupić wszędzie, a bardzo mocno, na całą szerokość nagłówka, ma wyeksponowaną nazwę wyszukiwarki. Tyle, że ta wyszukiwarka w tym przypadku nie niesie za sobą żadnej wartości. Dlaczego? Ponieważ klienci, którzy wchodzili na stronę sklepu tak naprawdę nie wiedzieli jeszcze, czego szukają. Z kolei w sklepie B2B prawdopodobnie takie rozwiązanie byłoby dobre.

B. Kolejnym częstym błędem jest bardzo mocne eksponowanie panelu klienta, schowków i innych rzeczy związanych ze sklepem, przy asortymencie, przy którym te elementy nie mają zbyt dużego znaczenia, ponieważ ilość klientów powracających jest na niskim poziomie. Klienci nie mają żadnej wartości z zakładania konta, nie daje im nic korzystanie ze schowka, po prostu wchodzą do sklepu i dokonują zakupu.

C. Umieszczanie w nagłówkach linków do social mediów, które nie są w ogóle prowadzone. W takim przypadku to zabieg nie mający sensu.

 

     3. Logo i wybór czytelnych czcionek

Logo i czcionka nie tylko dotyczy samego nagłówka, ale całego sklepu internetowego. Muszą być spójne z całością identyfikacji wizualnej sklepu i ważne jest, by zachować proporcje między wielkością fontów. Ważniejsze informacje powinny być bardziej wyeksponowane, a te mniej ważne powinny być subtelniejsze.

 

   4. Czy w nagłówku używać grafik?

W przestrzeni nad nagłówkiem możesz umieścić grafikę, która ma cel reklamowy. Nie musi to być integralna część nagłówka, może być okazjonalna, w formie baneru promocyjnego z kodem rabatowym np. „Black Week”. Możesz też zastosować slidery z mocnymi stronami marki.

 

   5. Optymalizacja UX nagłówka sklepu internetowego w wersji mobilnej

Zastanów się nad liczbą elementów, które chcesz pokazać w nagłówku, no i przede wszystkim znajdź swoją grupę docelową. Musisz wiedzieć, czego Twoi potencjalni klienci potrzebują. Masz możliwość przypięcia paska nawigacyjnego do dołu ekranu, co zdarza się w niektórych nawet dużych sklepach, ale pamiętaj, że dla większości użytkowników nie jest już tak naturalne.

Możesz pokazać od razu ikonkę „Zaloguj”, ale jeśli nie jest to bardzo istotne w Twoim modelu biznesowym to zwykle lepiej, schować ją pod przyciskiem hamburgera (czyli trzech kresek).

Wyeksponuj przycisk „Szukaj”, ale jeśli Twój produkt nie jest powtarzalny, popularny i w wielu miejscach dostępny i nowi klienci nie będą go w stanie znaleźć po nazwie, to również warto się nad tym zastanowić, czy warto od razu go pokazywać i zabierać przestrzeń na stronie.

Bierz przede wszystkim pod uwagę grupę docelową i to, w jaki sposób klienci szukają asortymentu.

 

   6. Nagłówek pływający w eCommerce

Nagłówek może być przypięty od razu do ekranu i podczas scrollowania pojawia się przy przewijaniu strony do góry. Nie zabiera to ekranu, ale pojawia się w momencie, gdy klient chce iść do tego nagłówka. Ale tu też najlepiej sprawdzić, czy taki nagłówek pływający jest klientowi potrzebny. Zbadaj to!

 

Podsumowanie – UX nagłówka sklepu internetowego

Nagłówek ma być przede wszystkim czytelny, a elementy, które chcesz wyeksponować, muszą się od razu rzucać w oczy. Przyjrzyj się branży, swojej grupie docelowej oraz zastanów się nad głównym przekazem, który chcesz umieścić w nagłówku.

Nie wiesz, czy Twój nagłówek odpowiada na potrzeby grupy docelowej? Potrzebujesz konsultacji? Skorzystaj z bezpłatnej konsultacji...
Dowiedz się więcej o bezpłatnej konsultacji
Oceń ten artykuł:
4.7 / 5 - 9 głosów

Autor: UX Designer

Od wielu lat tworzy UX Design dla E-commerce. Sprawia, że układ graficzny jest nie tylko profesjonalny, estetyczny i intuicyjny dla użytkownika, ale również wysoko konwertujący i realizujący zakładane cele biznesowe.

Dlaczego Tebim
250 mln zł
zysków wypracowanych dla partnerów
104
wdrożone sklepy
19+
wykwalifikowanych specjalistów
12
lat doświadczenia
.....

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 478

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 479

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 480

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 481

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 482

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 483

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 484

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 485

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 486

Notice: Undefined index: appearance in /home/users/tebim_pro/public_html/tebim.pro/wp-content/plugins/freshmail-integration/src/Plugin/Newsletter/Freshmail.php on line 487