Projektowanie sklepów internetowych: karta produktu, koszyk i ścieżka zakupu

Projekt sklepu różni się od strony firmowej tym, że klient nie ma tu wysłać jednego formularza, tylko przejść kilka kroków: od wyszukania produktu, przez porównanie i decyzję, po płatność i dostawę. Na każdym z tych kroków może zrezygnować, więc projekt musi usuwać wątpliwości dokładnie tam, gdzie się pojawiają.

Druga różnica to skala. Strona firmowa ma kilka szablonów, sklep może mieć tysiące produktów i setki kategorii, które korzystają z tych samych kilku szablonów. Błąd w projekcie karty produktu powtarza się więc na każdej karcie w sklepie. Z tego powodu projekt sklepu wymaga więcej analizy przed rysowaniem: przeglądu danych z Google Analytics 4 (gdzie kupujący wychodzą), przejrzenia pytań klientów kierowanych do obsługi i testu obecnej ścieżki zakupu na telefonie.

Trzecia różnica to platforma. W sklepie nie wszystko da się zaprojektować dowolnie: koszyk i zamówienie na gotowych platformach mają ograniczone możliwości zmian, a każda nietypowa funkcja to koszt programowania i utrzymania. Projektujemy w granicach tego, co dana platforma obsługuje, i jasno oznaczamy elementy wymagające dodatkowej pracy.

Projekt sklepu obejmuje wszystkie szablony, przez które przechodzi kupujący, oraz strony, które budują zaufanie: dostawę, zwroty, kontakt i informacje o sklepie. Poniższa tabela pokazuje, co zwykle projektujemy, a co pochodzi z samej platformy.

1. 01Analiza obecnego sklepu i danych

   Przeglądamy Google Analytics 4, mapę ścieżki zakupu, pytania do obsługi klienta i obecną wersję na telefonie. Ustalamy, gdzie sklep traci kupujących.

2. 02Struktura kategorii i nawigacji

   Projektujemy drzewo kategorii, menu i zasady filtrów, z uwzględnieniem fraz, których szukają klienci.

3. 03Makiety szablonów

   Strona główna, kategoria, karta produktu, koszyk i zamówienie w wersji mobilnej i desktop. Pierwsza akceptacja.

4. 04Projekt graficzny i komponenty

   Pełna warstwa wizualna, biblioteka elementów sklepu (karty produktów, etykiety promocji, filtry, komunikaty). Druga akceptacja.

5. 05Specyfikacja dla platformy

   Opisujemy, co wdrożyć w ustawieniach platformy, co w szablonie, a co wymaga programowania.

6. 06Wsparcie wdrożenia i odbiór

   Przekazujemy pliki programiście albo wdrażamy projekt (przy WooCommerce), sprawdzamy zgodność i testujemy zakup na urządzeniach.

Karta produktu to najważniejszy szablon w sklepie, bo na niej zapada decyzja o zakupie. Każdy element powinien odpowiadać na konkretne pytanie kupującego. Jeśli odpowiedzi nie ma na stronie, klient szuka jej w Google, u konkurencji albo pisze do obsługi, a część z tych osób już nie wraca.

W pierwszym ekranie karty na telefonie umieszczamy: nazwę produktu, cenę, dostępność, wybór wariantu, przycisk dodania do koszyka i informację o czasie oraz koszcie dostawy. Niżej galerię z możliwością powiększenia, krótkie argumenty (dlaczego ten produkt), specyfikację w czytelnej tabeli, informacje o zwrotach, opinie i sekcję pytań. Opis produktu dzielimy na krótkie akapity z nagłówkami, bo kupujący skanują stronę, a nie czytają ją od początku do końca.

12 pytań kupującego, na które musi odpowiadać sklep

Przy projekcie przechodzimy razem tę listę i sprawdzamy, czy na każde pytanie jest odpowiedź w odpowiednim miejscu. Ile kosztuje produkt i czy cena zawiera VAT? Czy jest dostępny teraz? Kiedy przyjdzie? Ile kosztuje dostawa i od jakiej kwoty jest darmowa? Jakie są warianty i który wybrać? Jak wygląda produkt z bliska i w użyciu? Jakie ma wymiary i parametry? Z czego jest zrobiony? Czy pasuje do mojego zastosowania? Jak go zwrócić, jeśli nie będzie pasował? Czy sklep jest wiarygodny (dane firmy, opinie, kontakt)? Czy mogę kupić bez zakładania konta?

Strona kategorii jest w sklepie zwykle główną stroną docelową z wyszukiwarki, dlatego projektujemy ją tak samo starannie jak kartę produktu. Kupujący wpisują w Google frazy kategorii („buty trekkingowe damskie”, „lampa wisząca do kuchni”), więc to strona kategorii musi na nie odpowiadać: mieć nagłówek z nazwą kategorii, krótki opis nad listą produktów i dłuższy poradnik pod listą.

Filtry projektujemy na telefonie jako panel otwierany jednym przyciskiem, z widoczną liczbą wyników i łatwym czyszczeniem. Ważne jest też, które kombinacje filtrów mają mieć własne adresy indeksowane w Google (na przykład kolor i rozmiar w popularnej kategorii), a które nie. To decyzja projektowa z konsekwencjami dla SEO, dlatego podejmujemy ją razem z planem struktury sklepu. Więcej o łączeniu projektu z pozycjonowaniem przeczytasz na stronie projektowanie i pozycjonowanie stron.

Najczęstszy powód porzucenia koszyka to niespodziewane koszty i konieczność zakładania konta, dlatego w projekcie pokazujemy koszt dostawy jak najwcześniej i umożliwiamy zakup bez rejestracji. Formularz zamówienia ograniczamy do pól naprawdę potrzebnych, z automatycznym uzupełnianiem i czytelnymi komunikatami błędów przy każdym polu.

W koszyku pokazujemy pasek progu darmowej dostawy, jeśli sklep go stosuje, oraz wyraźny przycisk przejścia do zamówienia. Propozycje produktów uzupełniających umieszczamy tak, żeby nie zasłaniały ścieżki do płatności. Przycisk przejścia do zamówienia jest widoczny także na telefonie bez przewijania listy produktów. Na ostatnim kroku przed zapłatą pokazujemy pełne podsumowanie: produkty, koszty, adres i termin dostawy.

Kupujący, który pierwszy raz trafia do sklepu, sprawdza najpierw, czy może mu zaufać, i dopiero potem porównuje ceny. Dlatego w projekcie przewidujemy stałe miejsca na sygnały zaufania: dane firmy i adres w stopce, numer telefonu w nagłówku, czytelne zasady zwrotów, opinie przy produktach, informację o metodach płatności i dostawy w pierwszym ekranie karty. Nie projektujemy pustych odznak i „certyfikatów”, których sklep nie ma.

Zdjęcia projektujemy jako system: stały format kadru (na przykład kwadrat 1:1 dla miniatur), białe lub jednolite tło na liście produktów, zdjęcia w użyciu i detale w galerii karty. Ustalamy też minimalną rozdzielczość i wagę plików, żeby galeria nie spowalniała strony. Jeśli sklep nie ma jeszcze spójnych zdjęć, przygotowujemy wytyczne dla fotografa albo dla zespołu, który robi zdjęcia we własnym zakresie.

Treść w sklepie projektujemy na trzech poziomach: krótki opis kategorii nad listą (dwa, trzy zdania z nazwą kategorii), dłuższy poradnik pod listą (jak wybrać, na co uważać) i opis produktu podzielony na argumenty, specyfikację i pytania. Taki układ pomaga jednocześnie kupującym i wyszukiwarce, a w odpowiedziach AI daje szansę na cytowanie fragmentów poradnika kategorii.

Na gotowej platformie sklepowej projekt skupia się na szablonie i ustawieniach, bo zmiany w koszyku i zamówieniu są ograniczone, za to utrzymanie jest prostsze. Na WooCommerce można zaprojektować więcej, w tym własny proces zamówienia, ale każda zmiana oznacza odpowiedzialność za aktualizacje i bezpieczeństwo. Przy dużych sklepach z integracjami z hurtowniami i systemami magazynowymi decyzja o platformie wykracza poza projekt graficzny i wymaga osobnej analizy.

Jeśli dopiero wybierasz platformę, pomożemy porównać opcje od strony projektu: które elementy da się zaprojektować swobodnie, jak wygląda edycja treści kategorii i jakie są ograniczenia w adresach oraz danych strukturalnych. Nie projektujemy rozwiązań, których dana platforma nie obsłuży bez kosztownego programowania, chyba że świadomie wybierzesz taką drogę. Każdy taki element jest oznaczony w specyfikacji, razem z alternatywą możliwą w standardzie.

Kiedy nowy projekt sklepu nie ma sensu

Jeśli sklep ma mało ruchu, nowy projekt nie zwiększy sprzedaży, bo nie ma komu kupować. W takiej sytuacji pierwsze pieniądze lepiej wydać na widoczność w Google i kampanie, a projekt przebudować później. Podobnie, gdy problemem są ceny, dostępność albo czas dostawy: dobry projekt pokaże je czytelnie, ale ich nie zmieni.