Strona główna to nie galeria ani broszura. To mechanizm kierujący. Jej jedynym zadaniem jest doprowadzenie właściwego odwiedzającego do właściwego produktu tak szybko, jak to możliwe. Każda decyzja projektowa na stronie głównej powinna służyć temu celowi.
Ten artykuł omawia, jak zaprojektować działającą stronę główną sklepu internetowego. Co umieścić, co pominąć, jakie błędy zabijają konwersję i jak myśleć o układzie na urządzeniach mobilnych, gdzie przegląda większość Twoich kupujących.
Jeśli chcesz zobaczyć pełny obraz tego, jakich stron potrzebuje Twój sklep, zacznij od artykułu jakich stron potrzebuje każdy sklep internetowy.
Do czego właściwie służy strona główna?
Strona główna obsługuje odwiedzających, którzy jeszcze się nie zdecydowali. Wiedzą coś o Twojej marce albo trafili do Ciebie przez wyszukiwarkę lub media społecznościowe, ale jeszcze nie zdecydowali się na zakup. Strona główna to moment, w którym ustalają, czy iść dalej.
Musi natychmiast odpowiedzieć na trzy pytania. Co sprzedaje ten sklep? Czy jest dla kogoś takiego jak ja? Co mam zrobić dalej? Jeśli któraś z tych odpowiedzi jest niejasna, odwiedzający wychodzą. Nie dlatego, że produkty są złe, ale dlatego, że strona główna nie dała im powodu, by zostać.
Jak zaprojektować sekcję hero
Sekcja hero to pierwsze, co widzi odwiedzający. Znajduje się w widocznej części strony, zanim zacznie przewijać, i niesie większość ciężaru pierwszego wrażenia.
Mocna sekcja hero ma cztery elementy. Nagłówek, który prostym językiem nazywa to, co sprzedajesz. Krótką linię wspierającą, która dodaje kontekstu, często kluczową korzyść lub wyróżnik. Obraz pokazujący produkt lub rezultat, który tworzy. Jeden przycisk wezwania do działania, który mówi odwiedzającemu dokładnie, dokąd iść.
Nagłówek to najważniejszy element. Utrzymaj go konkretnym. "Ręcznie robione skórzane torby na co dzień" działa. "Gdzie rzemiosło spotyka funkcję" nie działa. Kupujący skanują szybko. Jeśli nagłówek wymaga interpretacji, już ich nie ma.
Przycisk CTA powinien nazywać miejsce docelowe, a nie uczucie. "Zobacz torby" lub "Zobacz nowości" działa. "Odkryj więcej" lub "Eksploruj teraz" nie działa. Daj odwiedzającemu kierunek, a nie sugestię.
Obraz w sekcji hero powinien wyraźnie pokazywać produkt. Zdjęcia lifestyle działają dobrze, gdy produkt potrzebuje kontekstu, by miał sens, jak odzież czy artykuły domowe. Zdjęcia samego produktu sprawdzają się lepiej, gdy ważniejsza jest przejrzystość niż aspiracja, jak narzędzia czy elektronika. Używaj zdjęć wysokiej jakości. Rozmazany lub słabo oświetlony obraz hero podważa wszystko inne.
Co pokazać pod sekcją hero
Gdy odwiedzający przewinie stronę poza sekcję hero, szuka bardziej konkretnych powodów, by zostać. Ta część strony głównej powinna pokazywać produkty lub kategorie odpowiadające temu, czego najprawdopodobniej chcą Twoi kupujący.
Nie próbuj pokazywać wszystkiego. Wybierz bestsellery, produkty o najwyższej marży lub kategorię, w której ląduje większość kupujących. Od trzech do sześciu wyróżnionych produktów to rozsądny zakres. Więcej zaczyna wyglądać na zagracone i powoduje paraliż decyzyjny.
Bloki kategorii dobrze sprawdzają się w sklepach o szerokim asortymencie. Zamiast pojedynczych produktów pokaż trzy lub cztery główne kategorie z wyraźnym obrazem i etykietą dla każdej. Pozwól kupującym samodzielnie wybrać właściwy dział sklepu.
Sekcja wyróżnionych powinna też być dynamiczna. Wymieniaj produkty sezonowe, pozycje przecenione lub nowości. Strona główna, która nigdy się nie zmienia, nie daje powracającym odwiedzającym powodu do przewijania.
Jak używać społecznego dowodu słuszności na stronie głównej
Kupujący ufają innym kupującym bardziej niż sklepom. Społeczny dowód słuszności na stronie głównej buduje wiarygodność, zanim odwiedzający dotrze do strony produktu.
Najskuteczniejsze formy społecznego dowodu słuszności na stronie głównej to krótkie opinie klientów lub oceny w gwiazdkach, liczba klientów lub wysłanych zamówień, wzmianki prasowe lub logotypy mediów oraz znaczki zaufania od stron trzecich, jak ikony bezpiecznej płatności czy znane znaki certyfikacji.
Pisz zwięźle. Jedna lub dwie mocne opinie są skuteczniejsze niż ściana pięciogwiazdkowych ocen. Pojedyncze logo znanego medium robi więcej niż lista dziesięciu nieznanych nazw. Wybierz dowód, który będzie znaczyć najwięcej dla kupującego, który jest najbardziej sceptyczny co do pierwszego zakupu u Ciebie.
Czy dodać sekcję z historią marki?
Krótka sekcja z historią marki na stronie głównej jest opcjonalna, ale w pewnych kontekstach pomaga. Działa najlepiej, gdy historia założyciela jest częścią powodu, dla którego kupujący wybrałby tę markę zamiast większego konkurenta. Wyroby ręczne, etyczne pozyskiwanie, marki oparte na społeczności i produkty tworzone przez założycieli korzystają z krótkiej ludzkiej chwili na stronie głównej.
Jeśli ją dodajesz, niech będzie krótka. Dwa lub trzy zdania i link do pełnej strony O nas wystarczą. Nie umieszczaj jej w widocznej części strony ani nad wyróżnionymi produktami. Historia dodaje ciepła, ale decyzje napędzają produkty.
W sklepach, w których produkt broni się sam, pomiń sekcję z historią. Strona sprzedająca towary powszechnego użytku nie potrzebuje historii powstania. Wykorzystaj to miejsce na większą ekspozycję produktów.
Czego strona główna nie potrzebuje
Bałagan na stronie głównej szkodzi tak samo jak brakująca sekcja. Każdy element, który nie spełnia żadnej funkcji, odciąga uwagę od tego, który ją spełnia.
Częste błędy na stronie głównej to zbyt wiele wezwań do działania konkurujących na tym samym poziomie, filmy lub animacje uruchamiane automatycznie, które spowalniają stronę, duże bloki tekstu, których nikt nie czyta, menu nawigacji z więcej niż sześcioma lub siedmioma pozycjami oraz pop-upy pojawiające się, zanim odwiedzający zdążył cokolwiek zobaczyć.
Każdy dodatkowy wybór narzucony odwiedzającemu to mały koszt tarcia. Strona główna powinna wyglądać czytelnie, a nie na zagraconą. Jeśli nie możesz zdecydować między dwoma elementami, usuń ten, który nie jest bezpośrednio związany z doprowadzeniem odwiedzającego do produktu.
Projekt strony głównej na urządzenia mobilne
Ponad połowa całego ruchu w e-commerce pochodzi z urządzeń mobilnych. Projekt strony głównej powinien być budowany najpierw pod urządzenia mobilne, a nie dostosowywany do nich z wersji na komputer.
Na urządzeniach mobilnych nagłówek sekcji hero powinien być na tyle krótki, by dało się go przeczytać w dwóch liniach. Przycisk CTA powinien być na tyle duży, by łatwo go dotknąć. Zdjęcia produktów powinny układać się czysto w jednej kolumnie. Nawigacja powinna zwijać się do menu, które nie dominuje na ekranie.
Przetestuj każdą zmianę strony głównej na telefonie, zanim ją opublikujesz. To, co wygląda czysto na monitorze komputera, może stać się mylącym przewijaniem na małym ekranie. Doświadczenie kupującego na urządzeniach mobilnych to Twoje główne ograniczenie projektowe, a nie dodatek.
Jasność informacji o wysyłce ma też znaczenie na urządzeniach mobilnych. Kupujący na telefonach są często blisko decyzji zakupowej. Widoczny baner z progami darmowej wysyłki lub szacowaną dostawą na stronie głównej może zamienić sesję przeglądania w sesję zakupową. Więcej o konfiguracji wysyłki w sklepie znajdziesz w artykule jak skonfigurować wysyłkę w sklepie internetowym.
Jak WEMASY wspiera projektowanie strony głównej
System e-commerce WEMASY zawiera narzędzia układu strony głównej stworzone dla sklepów internetowych. Sekcje hero, siatki wyróżnionych produktów, bloki kategorii i sekcje społecznego dowodu słuszności są dostępne bez własnego kodu. Ten sam system automatycznie obsługuje układ mobilny.
Zobacz, jakie narzędzia strony głównej i sklepu są dostępne w każdym planie, na stronie cennika WEMASY.
Najczęściej zadawane pytania
Ile wezwań do działania powinna mieć strona główna?
Jedno główne CTA w widocznej części strony, a potem dodatkowe CTA niżej na stronie, powiązane z konkretnymi sekcjami. Główne CTA powinno być najważniejszym działaniem, które chcesz, by wykonał nowy odwiedzający, zwykle „Kup teraz” lub link do konkretnej kategorii. Konkurujące główne CTA o tej samej wadze wizualnej rozpraszają uwagę i zmniejszają liczbę kliknięć we wszystkie. Dzięki kreatorowi stron WEMASY możesz to ustawić bezpośrednio w swoim sklepie.
Czy pokazywać ceny na stronie głównej?
Niekoniecznie na samej stronie głównej, ale pokazywanie cen na kartach wyróżnionych produktów jest pomocne. Kupujący skanują przedziały cenowe, by ocenić, czy sklep mieści się w ich budżecie. Ukrywanie cen do strony produktu dodaje tarcia i może wyglądać wymijająco. Jeśli Twoje produkty są premium, pokazanie ceny wyjściowej ustawia oczekiwania pozytywnie, zamiast tworzyć niespodziankę.
Jak często aktualizować stronę główną?
Aktualizuj wyróżnione produkty i sekcje sezonowe, gdy masz nowości, trwa promocja lub zmienia się sezonowo to, czego szukają kupujący. Sekcja hero może pozostać stabilna dłużej, ale odśwież ją, gdy zmienia się główna oferta lub pozycjonowanie. Strona główna wyglądająca tak samo przez cały rok sygnalizuje sklep, który nie jest aktywny.
Czy szybkość ładowania strony głównej wpływa na sprzedaż?
Tak. Strona główna, która ładuje się dłużej niż trzy sekundy na urządzeniach mobilnych, traci znaczną część odwiedzających, zanim cokolwiek zobaczą. Duże niezoptymalizowane zdjęcia to najczęstsza przyczyna. Kompresuj zdjęcia przed wgraniem, unikaj automatycznie odtwarzanego wideo w sekcji hero i ogranicz skrypty zewnętrzne. Szybkość to decyzja projektowa strony głównej, a nie tylko techniczna.
Czy strona główna powinna linkować do każdej kategorii produktów?
Niekoniecznie. Linkuj do kategorii, których będzie chciała większość kupujących. Menu nawigacji może zawierać pełną listę kategorii. Treść strony głównej powinna pokazywać kategorie, które generują najwięcej konwersji lub które chcesz wyróżnić. Linkowanie do wszystkiego tworzy wizualny szum i osłabia strony, które mają największe znaczenie.
Gdzie na stronie głównej umieścić znaczki zaufania?
Blisko sekcji hero, przy CTA, lub w dedykowanym pasku zaufania między sekcją hero a wyróżnionymi produktami. Kupujący najchętniej szukają sygnałów zaufania w chwili, gdy rozważają kliknięcie CTA. Umieszczenie znaczków tylko w stopce dociera wyłącznie do kupujących, którzy już przewinęli na dół, co dla większości nowych odwiedzających jest za późno.