Design sklepu internetowego: układ strony głównej

Przebudowanie swojego sklepu internetowego jest łatwiejsze niż myślisz. Przed wyborem kolorów, czcionek i grafiki, musisz mieć jasne wyobrażenie jak będzie wyglądać Twoja strona główna. Zadaj sobie następujące pytanie:

• Jakie informacje są najważniejsze dla moich klientów?
• Gdzie i w jaki sposób mogę umieścić te informacje?

W tym poście przedstawimy najistotniejsze elementy, jakie powinny znaleźć się na stronie głównej każdego sklepu online. Dostosuj je do własnych potrzeb, aby zaprojektować stronę główną, która wpłynie na wzrost sprzedaży i wzmocni wizerunek Twojej marki. Więcej informacji Na początku, musimy uzmysłowić sobie jedną rzecz: zazwyczaj kolejność przedstawionych informacji na stronie głównej zależy od ich znaczenia i zastosowania. Aby zrozumieć jakich informacji potrzebują Twoi klienci, określ swój ideałklienta.

Pasek wyszukiwania

Ułatw wyszukiwanie produktów dzięki dobrze widocznemu paskowi wyszukiwania, znajdującemu się w środkowej części lub w górnym lewym rogu. Wielu klientów wie, czego szuka, musisz im tylko pomóc to znaleźć. W wersji mobilnej Twojej strony internetowej, spróbuj umieścić pasek wyszukiwania jak najwyżej: najlepiej tuż za logo i idealnie przy ikonce menu. Bonus: Pozwól klientom dodawać produkty do koszyka bezpośrednio ze strony wyników.

Wózek czy koszyk na zakupy

Dodawanie produktów do wózka może być zabawne, a nawet wciągające! Wykorzystaj techniki designu emocjonalnego, aby przekształcić zakupy w przyjemną czynność. Jeżeli Twoje marki na to pozwalają, dostosuj ton i słownictwo przycisków koszyka/wózka i przycisków CTA do kategorii sprzedawanych produktów, do pór roku, kampanii reklamowych, itd. Spróbuj wykorzystać humor w paskach stanu i powiadomieniach, lecz pamiętaj, aby nie urazić swoich docelowych klientów. Jeżeli wykorzystujesz humor w swoim tekście, pamiętaj, aby design przycisków i linki były z nim zgodne, aby nie dezorientować klientów. Bonus: Wykorzystaj grywalizację, aby zachęcić użytkowników do dodawania większej ilości produktów do koszyka. Na przykład, w pasku postępu podaj kwotę jaką klient musi dodać do koszyka, aby otrzymać bezpłatną dostawę lub zachęć klientów do odblokowywania „poziomów” w oparciu o produkty (np. fan, majster, ekspert).

Slider

Idealny slider powinien zawierać jeden stały slajd i nie więcej niż trzy ruchome slajdy. W slajdach możesz wyświetlać sezonowe promocje, nowości lub wybór produktów a jeszcze lepiej, wybór produktów po obniżonej cenie dostosowanych do sezonowych kampanii reklamowych (Dzień Ojca, Dzień Matki, Święta Bożego Narodzenia, nowy rok szkolny, itp.). Slider powinien zawsze informować klienta o sprzedawanych przez Ciebie produktach. Wyświetlaj swoje produkty w scenerii z atrakcyjnym tłem, które wypełni przestrzeń i interesującym tekstem oraz CTA, dostosowanymi do stylu promocji. Bonus: Odkryj kilka doskonałych przykładów pełnoekranowych obrazów slidera w naszym artykule, 5 trendów design dla e-commerce na rok 2015.

Menu

Większość e-handlowców myśli, że menu to pierwszy element, który powinni zobaczyć klienci po wejściu na ich stronę internetową… Otóż, niekonieczne. Jeżeli klienci szukają produktów na Twojej stronie na urządzeniu mobilnym, lepszym pomysłem może być zaoferowanie im opcji wyszukiwania i umieszczenie menu w atrakcyjnej rozwijanej formie. Większe ekrany ułatwiają wyszukiwanie i zapewniają wystarczającą przestrzeń do wyświetlenia wszystkich elementów menu. Nie daj się ponieść wyobrazi i nie obciążaj nadmiernie menu: powinno zawierać od 3 do 7 elementów, nie więcej. Pokaż najważniejsze kategorie Twoich produktów: np., DLA MĘŻCZYZN, DLA KOBIET, DLA DZIECI. Jeżeli zauważysz, że dany produkt przyciąga znaczny ruch, możesz śmiało dodać go do swojego menu. OBUWIE, SZALIKI i TORBY to przykłady subkategorii, które możesz użyć w swoim głównym menu. PREZENTY, WAKACJE czy SYLWESTER mogą również pojawić się w Twoim menu w zależności od pory roku. Powinieneś też wykorzystywać nazwę swojej kampanii lub bieżącej kolekcji. Spróbuj skrócić do minimum nazwy elementów w menu: dwa słowa maksymalnie, ale najlepiej jedno. Jeżeli prowadzisz blog, możesz włączyć go do menu. W PrestaShop 1.6, możesz skonfigurować rozwijane sub-menu, aby wyświetlać produkty zawarte w danej kategorii oraz banery promocyjne. Bonus: „O nas”, „Firma”, „Historia” i podobne strony nie powinny znajdować się w menu. Radzimy umieścić je w stopce, bo właśnie tam internauci spodziewają się je znaleźć.

Opcje filtrowania

Zazwyczaj filtry są używane na stronach kategorii i produktów, ale można je również zastosować na stronie głównej. Pozwól klientom filtrować produkty według rozmiaru, koloru, pory roku, okazji, zastosowania czy nawet techniki gotowania. Dodaj wszystkie filtry, które pomogą klientom w zakupach Twoich produktów. Czasami lepiej jest odnieść się do zastosowania produktu niż do samego produktu. Na przykład: Patelnie -> Smażenie Garnki -> Gotowanie Słuchaj swoich użytkowników, to oni podsuną Ci pomysły na najlepsze filtry. Odnośnie lokalizacji, zazwyczaj najlepiej jest wykorzystać filtry rozwijane. W przypadku szerokiego ekranu, możesz wyświetlić je na stałe po prawej stronie ekranu w trybie wyszukiwania. Bonus: Umieść domyślnie filtr na stronie głównej w przypadku gdy szerokość ekranu użytkownika przekracza 1280 pikseli.

Produkty na stronie głównej

Wyświetl najciekawsze produkty na swojej stronie głównej za każdym razem gdy znajdziesz odpowiedni powód. Dobrym pomysłem jest dysponowanie dwoma punktami wejścia (z menu i ze strony głównej) na strony produktów. Ważne, aby poinformować klientów, za pomocą niewielkiego tytułu czy etykiety, dlaczego dany produkt znajduje się na stronie głównej. Dobre przykłady etykiet to: nowości, best-sellery, obniżki cen, ostatnie sztuki, itd. Zawsze podkreślaj wyjątkowy charakter grupy produktów lub ograniczony czas ich dostępności. Bonus: Wyświetl maksymalnie 10 produktów i aktywuj opcję „Szybki widok produktów”, aby umożliwić klientom wyszukanie produktów w kilka kliknięć. Użytkownicy będą „automatycznie” dodawać te produkty do koszyków!

Kategorie

W ramach strategii dwóch punktów wejścia lub podwójnego wejścia, wstaw obraz, który wyświetli Twoje kategorie za pomocą elementów graficznych lub ikon. Bonus: Wybierz najważniejsze kategorie lub subkategorie i, gdy tylko jest to możliwe, aktualizuj je za pomocą promocji lub selekcji produktów.

Media społecznościowe

Przed stopką, wstaw element lub kilka elementów, dzięki którym klient może sprawdzić Twoją wiarygodność; to najlepszy sposób na sprawdzenie, co mówią o Tobie Twoim klienci. Wstaw elementy graficzne z sieci społecznościowych, historie lub inne treści stworzone przez Twoich klientów. Na przykład, część strony może wyświetlać zdjęcia z hasztagiem Twojej najnowszej kampanii połączone ze zdjęciami z oficjalnej księgi marki lub ze zdjęciami przepisów, które polecasz na swoim blogu, przygotowanych przez Twoich klientów przy użyciu sprzedawanych przez Ciebie naczyń. Wykorzystaj wszystkie możliwe opcje, aby pokazać, że masz swoją publiczność i że klienci Cię kochają.

Stopka

Tutaj możesz wstawić swoje dane kontaktowe i linki do sieci społecznościowych. Ta część musi wyraźni przedstawiać warunki użytkowania Twojej strony internetowej, w szczególności dotyczące dostaw i zwrotów. Możesz również dodać pole na newsletter, aby użytkownicy mogli otrzymywać powiadomienia przez e-mail i w miarę możliwości podać jak często jest on wysyłany. Wykorzystaj tę przestrzeń, aby dyskretnie zaznaczyć, że używasz systemów bezpieczeństwa. Jeżeli jest to możliwe, wstaw czarne identyfikatory, aby nie odciągać uwagi klientów od strony.

Wniosek

Design i układ Twojej strony głównej zapewnią klientom pierwsze wrażenie o Twojej marce i całym sklepie. Upewnij się, że Twoja strona internetowa wygląda elegancko i profesjonalnie, gdyż to doskonała okazja, aby zyskać widoczność i zaufanie oraz zmniejszyć wskaźnik odrzuceń. Jeżeli postanowiłeś samodzielnie odświeżyć design swojej stron, wykorzystaj nasze wskazówki. W następnym artykule dowiesz się więcej na temat projektowania sklepu online, gdyż przyglądniemy się bliżej strukturze stron kategorii i stron produktów. Aby znaleźć więcej opcji stylistyki strony, zapoznaj się z dostępnymi szablonami dla PrestaShop. Jeżeli wolisz zlecić design swojego sklepu profesjonalistom, nasze partnerskie agencje projektowania stron internetowych z przyjemnością Ci pomogą.