Kiedy szkicowałem układ modelowego sklepu z kawą w 2014, sensowne było opisanie nagłówka, strony głównej, kategorii i strony produktu niemal jak klocków: logo po lewej, koszyk po prawej, filtry tutaj, przycisk zakupu tam.
Podstawowe oczekiwania ludzi niewiele się zmieniły. Zmienił się kontekst: większość projektów musi działać na urządzeniach mobilnych, oferty są bardziej złożone, a każdy dodatkowy skrypt konkuruje o szybkość i uwagę. Dlatego nie polecam już bezmyślnego kopiowania układu. Polecam przejście przez zadania klienta.
Nagłówek powinien pomagać się zorientować, a nie pokazywać każdą opcję
W nagłówku ludzie szukają marki, nawigacji, wyszukiwarki, konta i koszyka. Nie wszystkim trzeba nadawać taką samą wagę. Priorytety zmieniają się wraz z katalogiem i etapem zakupu.
- Logo prowadzi na stronę główną i ma zrozumiałą nazwę tekstową.
- Wyszukiwarka jest łatwo dostępna tam, gdzie ludzie znają produkt lub parametr.
- Koszyk pokazuje swój stan i nie znika po dodaniu produktu.
- Kontakt lub pomoc można znaleźć bez odciągania uwagi od zakupu.
- Menu działa dotykiem, klawiaturą i bez precyzyjnego celowania myszą.
Menu wysuwane może pomóc przy szerokim katalogu. Przy dziesięciu kategoriach często jest tylko efektowną przeszkodą. Google zaleca udostępnianie kategorii i produktów przez zwykłe linki nawigacyjne; sama wyszukiwarka może nie pokazać robotom całego katalogu. Zasady opisano w dokumentacji struktury witryny e-commerce.
Strona główna powinna rozdzielać ruch, a nie opowiadać o całym katalogu
Na stronie głównej muszę szybko zrozumieć, co sprzedaje sklep, dla kogo jest oferta i dokąd przejść dalej. Zamiast automatycznego slidera wolę jeden jasny priorytet i kilka stałych wejść do głównych sytuacji zakupowych.
Pomóc mogą bestsellery, kategorie sezonowe, porady lub powód, by zaufać sklepowi. Każdy blok musi mieć zadanie. „Żeby strona nie była pusta” nie jest zadaniem.
Kategoria pomaga zawęzić wybór
Kategoria to nie tekst SEO wklejony nad siatką produktów. To narzędzie podejmowania decyzji. Jej nazwa i krótkie wprowadzenie definiują ofertę, filtry ją zawężają, a sortowanie pomaga dopasować ją do sytuacji klienta.
- Nazywaj filtry językiem klientów, a nie wewnętrznymi polami bazy danych.
- Pokazuj aktywne wybory po filtrowaniu i ułatwiaj ich usuwanie.
- Udostępniaj ważne podkategorie jako linki, a nie tylko jako wartości skryptu.
- Pokazuj na liście dane potrzebne do porównania; resztę umieść na stronie szczegółów.
- Pusty wynik powinien oferować drogę powrotu, a nie ślepą uliczkę.
Okruszki pomagają ludziom zrozumieć ich położenie w katalogu i mogą pomóc wyszukiwarkom zrozumieć hierarchię. Jeśli używasz danych strukturalnych, stosuj się do aktualnej dokumentacji Google dotyczącej okruszków nawigacyjnych.
Strona produktu musi odpowiadać na pytania przed kliknięciem przycisku i po nim
Widoczny przycisk dodania do koszyka to fundament, a nie cała strona produktu. Przed decyzją ludzie potrzebują nazwy, ceny, wariantu, dostępności, wysyłki, zwrotów, zdjęć i informacji adekwatnych do ryzyka zakupu.
W przypadku kawy liczą się pochodzenie, smak, palenie, masa i sposób przygotowania. W przypadku wiertarki ważniejsze są specyfikacja, kompatybilność i serwis. Nie ma uniwersalnej kolejności. Jest za to uniwersalne pytanie: co klient musi wiedzieć, aby kupić właściwy wariant i nie zwrócić go później?
Opinie powinny być wiarygodne i dotyczyć konkretnego produktu. Polecane towary powinny wspierać wybór, a nie odciągać kogoś od niemal ukończonego zakupu. Przycisk społecznościowy na stronie produktu nadal nie jest priorytetem. Powinniśmy już przeżyć czasy, gdy przycisk „Lubię to” był odpowiedzią na wszystko.
Koszyk i finalizacja zakupu powinny usuwać niespodzianki
Koszyk musi umożliwiać zmianę liczby sztuk i wariantu oraz usuwanie produktów. Pokazuj łączną cenę, wysyłkę i termin dostawy tak wcześnie, jak to możliwe, a nie dopiero po trzecim kroku i rejestracji.
Zakup bez rejestracji jest często rozsądnym ustawieniem domyślnym. Jeśli konto oferuje rzeczywistą wartość, zaproponuj je po złożeniu zamówienia. Formularze potrzebują prawidłowych etykiet, autouzupełniania i błędów wyjaśniających, co należy poprawić. Obszary dotykowe muszą być wystarczająco duże; aktualne kryterium opisano w WCAG 2.2 w części minimalnego rozmiaru celu.
Mierz zadania, a nie kolor przycisku
Testy A/B mogą pomóc, gdy firma ma wystarczający ruch, jedną hipotezę i decydującą metrykę. Cotygodniowe zmiany banera bez odpowiedniej próby to plac zabaw, a nie wiarygodny wniosek.
Śledzę użycie wyszukiwarki i filtrów, działania dodawania do koszyka, błędy formularzy, porzucenia na każdym kroku, zwroty i pytania do wsparcia. Uzupełniam liczby obserwowaniem ludzi i ich pytań. Analityka pokazuje, gdzie; człowiek często wyjaśnia, dlaczego.
Podstawą pomiaru jest Google Analytics 4. Kontrole wydajności omawiam w Jak przyspieszyć stronę internetową.
Sklep internetowy nie musi być oryginalny w tym, gdzie umieszcza koszyk. Musi przekonująco wyjaśniać, dlaczego warto kupić ten produkt właśnie tutaj.
Argumenty dotyczące stron produktów i sprzedaży znajdziesz w Ważnych elementach strony sprzedażowej. Kompletne podstawy strony internetowej opisuję w Jak zacząć projekt internetowy.