Błędy w sklepie internetowym: co poprawić na przykładzie Hrabikon.pl

Na karcie sztybletów menu nachodzi na nazwę produktu. Po przełączeniu na telefon ten problem znika, ale w kategorii obuwia cały pierwszy ekran zajmują nagłówek i kontrolki. Butów jeszcze nie widać.

Przyjrzeliśmy się Hrabikon.pl, sklepowi jeździeckiemu z ofertą dla koni i jeźdźców. Są tu rozbudowane kategorie, zdjęcia wariantów oraz poradniki o sprzęcie. Przy planowaniu zmian zachowałbym ten branżowy podział, a pracę zaczął od kilku miejsc, w których kupujący musi rozszyfrowywać formularz albo przewijać stronę bez oglądania towaru.

Menu nachodzi na tytuł produktu

Przy szerokości 1280 px na karcie sztybletów Kilkenny nawigacja zajmuje dwa wiersze. Dolny nachodzi na tytuł. Czerwony odnośnik do promocji przecina białe litery nazwy butów, co widać na zrzucie poniżej.

To poprawka układu. Nagłówek powinien uwzględniać rzeczywistą wysokość menu również wtedy, gdy pozycje przestają mieścić się w jednym wierszu i przechodzą do kolejnego, zanim strona włączy nawigację mobilną. Sprawdziłbym też zachowanie paska po przewinięciu oraz przy powiększeniu tekstu w przeglądarce.

Na stronie głównej karuzela ma 12 slajdów, choć sama ich liczba nie dowodzi problemu ze sprzedażą. Zanim zamówiłbym kolejne banery, sprawdziłbym w danych, które z nich są klikane i czy oferta z ostatnich slajdów dostaje jakąkolwiek uwagę osób przeglądających sklep na telefonie. Wybrane promocje można pokazać jako stałe kafle pod głównym banerem, dostępne podczas przewijania bez czekania na zmianę slajdu.

Cztery ceny i ilość 0 na karcie sztybletów

Przy tym samym modelu widnieją 179 zł, przekreślone 269 zł, 299 zł opisane jako cena poza promocjami oraz 199 zł jako najniższa cena z 30 dni przed obniżką. Kwota do zapłaty jest wskazana. Wątpliwość dotyczy dwóch punktów odniesienia: co dokładnie oznaczają przekreślone 269 zł i podane niżej 299 zł? Źródło: karta produktu.

Uporządkowałbym etykiety. Cena bieżąca powinna dominować, a przy każdej pozostałej kwocie musi być jasne, do czego się odnosi i skąd pochodzi. Osoba zarządzająca katalogiem powinna również sprawdzić spójność tych wartości z oznaczeniem promocji na liście produktów. Sam zrzut nie wyjaśnia historii cen.

Poniżej jest wybór koloru i rozmiaru, a w polu ilości na początku widnieje 0. Formularz prosi o dodatkowy krok:

Podaj ilość aby móc dodac produkt do koszyka:

To cytat z karty produktu. Dla dostępnego wariantu ustawiłbym domyślnie jedną sztukę. Przed wyborem rozmiaru przycisk powinien jasno wskazywać brakujący krok, a po wyborze pokazywać możliwość zakupu albo konkretną informację o niedostępności. Sam szary panel tego nie wyjaśnia.

Przy butach przydałaby się też tabela długości wkładki przypisana do tego modelu. W sprawdzonym opisie są informacje o materiale i zamku, ale nie znaleźliśmy takiej tabeli. Sprzedawca musiałby pozyskać pomiary od producenta lub wykonać je według ustalonej metody, bo przypadkowa tabela rozmiarów mogłaby wprowadzać w błąd. Te wymiary musi zatwierdzić osoba odpowiedzialna za katalog, zanim trafią na stronę.

Na telefonie kategoria zaczyna się od kontrolek

W widoku 390 × 844 px kategoria sztybletów pokazuje nagłówek, osobne sekcje nawigacji i filtrów, a następnie producenta oraz sortowanie. Pierwsze zdjęcie produktu wypada poniżej ekranu, więc kupujący musi przewinąć stronę, zanim zacznie porównywać buty.

Filtry już istnieją. Zamiast projektować je od zera, połączyłbym ich otwieranie i sortowanie w zwięzły pasek nad listą, ograniczył odstępy oraz zostawił licznik wyników obok nazwy kategorii. Osobne drzewo nawigacji można schować pod przyciskiem kategorii. Po wybraniu rozmiaru 38 aktywny filtr powinien zostać widoczny z możliwością usunięcia jednym kliknięciem.

W katalogu jest również kwestia nazewnictwa. Nagłówek tej kategorii mówi o sztybletach skórzanych, a opis modelu Kilkenny wskazuje materiał syntetyczny. Do listy trafiły też gumowce. Kategoria i opis butów wymagają wspólnego przeglądu.

Zmieniłbym nazwę kategorii na odpowiadającą jej zawartości, a materiał dodał jako cechę produktu i filtr. Gumowce można przenieść do właściwej grupy lub świadomie poszerzyć kategorię o różne rodzaje obuwia, dlatego przed rysowaniem nowej listy produktów trzeba ustalić jej zawartość z osobą odpowiedzialną za ofertę.

Pusty koszyk potrzebuje własnego widoku

W pustym koszyku zostały angielskie nagłówki kolumn REMOVE, IMAGE, PRODUCT, TOTAL, a pod nimi formularz kuponu, przycisk aktualizacji oraz podsumowanie z zerowymi kwotami. Wyświetla się też przycisk przejścia do kasy.

Wystarczy osobny stan pustego koszyka. Krótka informacja i przycisk powrotu do zakupów wyjaśnią sytuację, a formularz rabatu oraz podsumowanie mogą pojawić się dopiero po dodaniu towaru. Nagłówki tabeli trzeba przetłumaczyć. Sprawdziliśmy tutaj pusty koszyk, bez składania zamówienia i wykonywania płatności.

Przed koszykiem jest jeszcze pytanie o dostawę. Na stronie metod dostawy sklep rozróżnia produkty wysyłane do dwóch dni roboczych po wpłacie oraz takie, których realizacja może potrwać do dwóch tygodni. To duża różnica dla osoby kupującej buty na zbliżające się zawody.

Termin umieściłbym przy wybranym wariancie. Obok przycisku zakupu można pokazać także koszt dostępnej formy dostawy i link do pełnych warunków, żeby klient nie musiał opuszczać karty butów w poszukiwaniu tej informacji. Treść musi wynikać z rzeczywistego stanu magazynowego oraz reguł wysyłki, bo ogólna obietnica 48 godzin dla całego katalogu byłaby tu myląca.

W jakiej kolejności modernizować sklep?

Zacząłbym od menu nachodzącego na tytuł, wyjaśnienia cen i stanów formularza produktu. Każde z tych zadań da się opisać jednym scenariuszem odbioru. Przykładowo: przy szerokości 1280 px wszystkie pozycje nawigacji i pełna nazwa sztybletów mają być czytelne, również po przewinięciu strony.

Potem skróciłbym górę kategorii na telefonie i przygotował widok pustego koszyka. W tym samym czasie osoba odpowiedzialna za ofertę może uzupełniać tabele rozmiarów, porządkować materiały i ustalać terminy wysyłki wariantów. Grafik nie odtworzy tych danych ze zdjęcia butów.

Wydajność wymaga osobnego pomiaru. W tym przeglądzie nie mierzyliśmy Core Web Vitals, więc nie przypisujemy sklepowi wyniku szybkości. Przed wymianą zdjęć czy skryptów trzeba zebrać dane z telefonu i sprawdzić, co faktycznie opóźnia pokazanie produktu lub reakcję na wybór rozmiaru. Pozostaje też test wyszukiwarki. W dalszym audycie sprawdziłbym zapytania o konkretne produkty, literówki i sytuację, w której sklep nie znajduje niczego pasującego do wpisanej frazy.

Efekt wdrożenia oceniałbym przez przejścia z kategorii na produkt, dodania do koszyka i ukończone zamówienia, osobno dla telefonu i komputera. Uwzględnij sezon oraz kampanie. Sam wzrost zamówień po zmianie strony nie wystarczy, jeśli w tym samym tygodniu sklep uruchomił dużą promocję albo otrzymał dostawę popularnych rozmiarów.

Budżet opisujemy w tekście o kosztach sklepu internetowego. Przy późniejszej obsłudze przyda się zestawienie kosztów utrzymania strony. Jeżeli chcesz zlecić modernizację sklepu internetowego, przygotuj adres sklepu oraz przykłady zakupów, z którymi klienci mają trudność, i dołącz zgłoszenia dotyczące rozmiarów, dostawy lub koszyka.