Dobre praktyki projektowania ecommerce według strony, na której jest kupujący: strona główna, nawigacja, listy kategorii, wyszukiwarka, strony produktów i wersja mobilna, z tym, co uwzględnić, i częstymi błędami do uniknięcia.
Jasna nawigacja zgodna ze sposobem, w jaki kupujący myślą o Twoich produktach, szybkie strony, duże zdjęcia produktów z zoomem, cena i informacja o wysyłce blisko przycisku Dodaj do koszyka, widoczne opinie, działająca wyszukiwarka w sklepie oraz krótka kasa z zakupem bez konta. Projektuj najpierw pod telefony, bo tam odbywa się większość przeglądania sklepów.
Tyle, by kupujący mogli porównywać bez niekończącego się stronicowania. Wiele sklepów pokazuje od 24 do 48 na stronie lub używa przycisku Załaduj więcej. Ważniejsze są dobre filtry dla atrybutów, według których ludzie wybierają, takich jak rozmiar, kolor, cena i dostępność.
Nazwa produktu, główne zdjęcie, cena, kluczowe selektory wariantów (rozmiar, kolor), stan magazynowy, przycisk Dodaj do koszyka i linia o wysyłce lub czasie dostawy. Ocena w gwiazdkach i liczba opinii też tam należą, jeśli masz opinie.
Zwykle nie. Automatycznie obracane slajdery są często ignorowane i mogą szkodzić dostępności oraz czasowi ładowania. Lepiej działa zwykle jedna mocna sekcja główna z jednym jasnym komunikatem i linkami do najważniejszych kategorii.
Dobry projekt strony ecommerce pomaga kupującemu szybko zrobić trzy rzeczy: znaleźć właściwy produkt, zaufać mu na tyle, by kupić, i zapłacić bez tarcia. W praktyce oznacza to nawigację zgodną ze sposobem myślenia klientów, szybkie strony mobilne, duże zdjęcia produktów, wcześnie pokazane ceny i wysyłkę, widoczne opinie i krótką kasę.
Zamiast listy ogólnych zasad ten przewodnik idzie podstrona po podstronie, bo pytanie kupującego zmienia się na każdej z nich.
Strona główna ma kilka sekund, by potwierdzić, co sprzedajesz i dla kogo.
Uwzględnij:
Unikaj: automatycznie obracanych karuzel, okien wyskakujących uruchamianych, zanim strona się załaduje, i filmów w sekcji głównej opóźniających pierwszy widok na telefonie.
Tu odbywa się większość porównań.
| Element | Najlepsza praktyka |
|---|---|
| Karty produktów | Ta sama proporcja obrazu dla każdego produktu, nazwa, cena, ocena i drugie zdjęcie po najechaniu |
| Filtry | Zgodne z prawdziwymi decyzjami: rozmiar, kolor, cena, materiał, dostępność. Pokaż liczby. |
| Sortowanie | Domyślnie „Polecane" lub „Najlepiej sprzedające się"; oferuj cenę i najnowsze |
| Stan magazynowy | Ukryj lub wyraźnie oznacz wyprzedane pozycje |
| Stronicowanie | Załaduj więcej lub numerowane strony; zachowaj stan filtrów po powrocie |
| Mobilne | Filtry w wysuwanym panelu z wyraźnym przyciskiem „Pokaż 34 wyniki" |
Częsty błąd to filtry, które same się czyszczą, gdy kupujący otworzy produkt i wróci. Przetestuj przycisk Wstecz.
Kupujący, którzy szukają, mają zwykle wysoką intencję, więc słabe pole wyszukiwania bezpośrednio kosztuje sprzedaż.
Strona produktu sprzedaje. Przejdź ją od góry do dołu.
Zacznij od tego, co produkt daje klientowi, a potem podaj specyfikację. Użyj krótkiej tabeli specyfikacji dla wymiarów, materiałów i pielęgnacji. Tabele rozmiarów powinny otwierać się w panelu na tej samej stronie, a nie odsyłać ludzi gdzie indziej.
Dodaj dane strukturalne Product (nazwa, obraz, cena, dostępność, opinie), by wyniki wyszukiwania mogły pokazywać cenę i oceny.
Projekt kasy to osobna dyscyplina. W skrócie: pokaż pełny koszt wcześnie, pozwól na zakupy bez konta, utrzymaj krótki formularz i oferuj portfele ekspresowe, jak Apple Pay i Google Pay. Nasz przewodnik o optymalizacji kasy omawia każdy krok szczegółowo.
Projekt nie kończy się na przycisku Zapłać. Stronę potwierdzenia zamówienia i e-mail czyta uważnie prawie każdy kupujący.
Większość wizyt w sklepach pochodzi z telefonów, więc najpierw projektuj i testuj układ na telefon, a potem rozszerzaj na komputer.
Obie to decyzje projektowe, nie tylko techniczne.
Szybkość: kompresuj obrazy i serwuj WebP lub AVIF, ustaw szerokość i wysokość obrazów, by zatrzymać skoki układu, ogranicz aplikacje i skrypty zewnętrzne i sprawdź swoje Core Web Vitals w PageSpeed Insights od Google.
Dostępność: kontrast kolorów spełniający WCAG 2.2 AA, tekst alternatywny przy obrazach produktów, opisane pola formularzy, menu i filtry osiągalne z klawiatury oraz komunikaty o błędach mówiące, co poszło nie tak. Sklepy dostępne są łatwiejsze w użyciu dla wszystkich, a w wielu regionach dostępność jest też oczekiwaniem prawnym.
Jeśli zaczynasz od zera, dobry układ startowy oszczędza wiele z tych decyzji. Przeglądaj nasze szablony projektów sklepów albo opisz swój sklep We.Inc w czacie, a zbuduje sklep internetowy ze stronami produktów, koszykiem i kasą, który możesz potem dopracować wizualnie lub w kodzie, z hostingiem i SSL w cenie.
Zacznij za darmo · Bez karty kredytowej