Koszyk, w którym można zmienić zdanie: ilości, usuwanie i powrót do produktu

W koszyku są dwa białe kubki i jeden grafitowy. Klient chce usunąć grafitowy, a białych zamówić cztery. Dotyka minusa, potem plusa kilka razy. Liczby skaczą, suma na chwilę pozostaje stara, a po powrocie z karty produktu jedna pozycja pojawia się ponownie. Niewielki zakup zamienia się w ćwiczenie z odzyskiwania zaufania do liczb.

To hipotetyczna historia, lecz dobrze pokazuje rolę koszyka. Człowiek nie tylko przechowuje w nim wybory. Porównuje, przelicza i zmienia zamiar. Może coś usunąć, wrócić do produktu lub odłożyć decyzję. Dobry projekt pozwala wykonać te czynności ze świadomością ich skutku. Przed przejściem dalej klient powinien już wiedzieć, co sklep uznał za wybrane.

Rozpoznaj rzecz, zanim pozwolisz ją poprawić

Każda pozycja potrzebuje nazwy i informacji rozstrzygającej o wersji. Miniatura pomaga ją odszukać, ale sama nie potwierdza koloru, wymiaru ani zawartości zestawu. Jeśli klient zamawia podobne przedmioty, różnicę trzeba pokazać w tekście. „Kubek z kolekcji Dom” nie wystarczy dla dwóch modeli, które różnią się pojemnością i sposobem wykończenia.

Nie chowaj cech wariantu pod ogólnym komunikatem „wybrana opcja”. Kupujący nie powinien otwierać dodatkowego widoku tylko po to, żeby sprawdzić, co przed chwilą zaznaczył. Projekt wyboru wariantów kończy się dopiero wtedy, gdy ten sam model da się rozpoznać w koszyku oraz dalej w zamówieniu.

Sprawdź przypadek dwóch podobnych pozycji tego samego towaru. Mogą mieć inne wykończenie, personalizację lub warunki sprzedaży. Dokumentacja Cart API Shopify wskazuje, że kilka pozycji może współdzielić identyfikator wariantu i zaleca użycie klucza pozycji przy zmianie konkretnej z nich. To techniczny powód, by nie opierać poprawki wyłącznie na ogólnej nazwie produktu.

W interfejsie ta różnica musi być widoczna. Jeżeli dwa kubki mają inne napisy, pokaż je przy właściwych pozycjach. Klient nie ma dostępu do kluczy systemowych, więc potrzebuje zrozumiałego rozróżnienia. Nie łącz automatycznie pozycji, które wyglądają podobnie na zdjęciu, lecz mają istotnie odmienne parametry wykonania.

Link do produktu powinien odtworzyć odpowiednią wersję albo jasno pokazać zakres powrotu. Po obejrzeniu zdjęcia klient może chcieć wrócić do koszyka, zachowując wcześniejsze ilości. Nie myl tego z dodaniem kolejnej sztuki. Przejście do szczegółów i działanie zakupowe wymagają osobnych, czytelnych celów.

Jeżeli pozwalasz zmienić wariant bezpośrednio w koszyku, ustal zakres tej funkcji. Zmiana koloru może wpłynąć na cenę lub dostępność, a w produkcie personalizowanym także na wpisany tekst. Odbiorca powinien zobaczyć nowy wynik przed przejściem dalej. Samo zamknięcie okienka nie potwierdza, że zaakceptowano kompletną, możliwą do realizacji wersję.

Przy długiej nazwie zachowaj część rozróżniającą. Obcięcie końca może usunąć właśnie wymiar lub rodzaj zestawu. Zasady dla długich tekstów w interfejsie przydają się tu bardziej niż rygor identycznej wysokości wszystkich wierszy. Koszyk ma potwierdzać wybór, nawet jeśli jedna nazwa zajmie dodatkową linię.

Plus ma konsekwencje większe niż zmiana cyfry

Kontrolka ilości powinna pozwalać wpisać wartość i zrozumieć obowiązujące granice. Dla produktu sprzedawanego pojedynczo naturalny jest inny krok niż dla zestawu pakowanego po kilka sztuk. Nazwij jednostkę sprzedaży. „Ilość 2” może oznaczać dwa przedmioty, dwie paczki albo dwa komplety, a klient nie powinien ustalać tego dopiero z kwoty.

Oddziel cenę jednostkową od wartości pozycji. Jeśli pokazujesz obie, opis ma wyjaśniać ich relację. Przy większym zamówieniu osoba chce szybko sprawdzić, czy zmieniła liczbę sztuk, czy przypadkiem wybrała inny model. Nie wymagaj liczenia w pamięci tylko dlatego, że projekt zostawił miejsce na jedną elegancką kwotę.

Uzgodnij, kiedy zmiana zostaje przyjęta: po wpisaniu, opuszczeniu pola czy osobnym potwierdzeniu. Wygląd kontrolki nie powinien sugerować innej reguły. Jeżeli klient wpisuje dwucyfrową liczbę, odświeżenie po pierwszej cyfrze może utrudnić dokończenie zamiaru. Wykonawca potrzebuje opisanego zachowania także dla wpisywania, a nie wyłącznie dotykania plusa.

WooCommerce opisuje obieg danych bloków koszyka: zmiana ilości, dodanie lub usunięcie pozycji wywołuje żądanie do Store API, a lokalny koszyk aktualizuje odpowiedź serwera. Widoczna liczba i potwierdzony stan to zatem momenty, które projekt musi ze sobą czytelnie połączyć.

Podczas oczekiwania pokaż, czego dotyczy aktualizacja. Nie trzeba zasłaniać całej strony przy każdej zmianie jednej pozycji. Trzeba jednak zapobiec pomyleniu starej sumy z nową. Dobierz zachowanie do tego, czy klient może nadal zmieniać inne pola i jak system obsługuje kilka szybko następujących po sobie żądań.

Gdy odpowiedzi wracają w innej kolejności, ostateczny widok ma odpowiadać ostatniemu zamiarowi potwierdzonemu przez sklep. Uzgodnij to zachowanie z osobą odpowiedzialną za wdrożenie. Przy mikrointerakcjach dopracuj sygnał oczekiwania i zakończenia, lecz nie przykrywaj nim niespójnego przepływu danych.

Jeżeli zwiększenie ilości jest niemożliwe, zachowaj poprawny stan i wyjaśnij ograniczenie. Komunikat „błąd” nie mówi, czy zabrakło sztuk, przerwano połączenie czy obowiązuje krok pakowania. Odbiorca potrzebuje wskazówki, co może zmienić. Nie zastępuj jego liczby inną bez informacji, bo wtedy nadal musi odkryć decyzję sklepu przez porównywanie kwot.

Nie pozwalaj, by powtarzane dotykanie nieaktywnego plusa było jedyną drogą poznania limitu. Jeśli granica jest znana, pokaż ją w odpowiednim miejscu. Jeżeli zmienia się dynamicznie, komunikat powinien potwierdzić bieżący stan. To różne sytuacje i potrzebują innej treści, choć obie mogą kończyć się tą samą liczbą w polu.

Zbadaj także minus przy jednej sztuce. Czy usuwa pozycję, zatrzymuje się na minimum, czy otwiera wyjaśnienie? Każda z tych decyzji wymaga spójnego nazwania. Osobny przycisk usuwania bywa czytelniejszy, szczególnie gdy minimum zakupu jest większe niż jeden. Użytkownik nie powinien poznawać znaczenia zera dopiero po zniknięciu produktu.

Usunięcie może mieć drogę cofnięcia, jeżeli system pozwala bezpiecznie odtworzyć pozycję. Wtedy pokaż nazwę usuniętej rzeczy i krótkie działanie przywrócenia. Nie obiecuj zachowania stanu, którego sklep nie potrafi odtworzyć, zwłaszcza przy personalizacji. O tym, czy potrzebne jest potwierdzenie, zdecyduj na podstawie skutku i łatwości poprawki, nie automatycznie dla każdego kliknięcia.

Przerwany kontakt ze sklepem wymaga ostrożniejszego komunikatu niż zwykłe odrzucenie zmiany. Być może żądanie dotarło, lecz nie wróciło potwierdzenie. Nie pokazuj wtedy arbitralnie, że nic się nie wydarzyło. Ustal z wdrożeniem sposób ponownego odczytania koszyka i odzyskania znanego stanu, zanim klient podejmie kolejne działanie na niepewnym wyniku.

Nie polecaj również powtarzania dodania jako uniwersalnego lekarstwa. W niektórych sytuacjach druga próba może zwiększyć ilość, choć pierwsza została już przyjęta. Interfejs powinien najpierw wyjaśnić, co udało się potwierdzić. Rozdzielenie próby od jej skutku pomaga zachować kontrolę także wtedy, gdy połączenie wraca po chwili i strona ponownie otrzymuje dane.

Jeżeli część pozycji jest chwilowo niedostępna, zachowaj czytelny opis problemu przy właściwym produkcie. Klient może chcieć usunąć tylko tę rzecz i kontynuować zakup pozostałych. Nie kasuj całego zestawu ani nie przedstawiaj jednej ogólnej porażki na górze strony, gdy rozwiązanie wymaga decyzji o konkretnej, rozpoznawalnej pozycji.

Jeśli ostatnia pozycja znika, pusty koszyk powinien wyjaśnić nowy stan. To inna informacja niż awaria pobierania jego zawartości. Daj sensowną drogę powrotu do oglądanego katalogu. Przycisk prowadzący zawsze na stronę główną może odrzucić wcześniejsze filtry i zmusić klienta do rozpoczynania wyboru od zera.

Przeliczenie musi pozostawać zrozumiałe

Ustal relację między małym panelem koszyka a pełną stroną. Jeśli panel pokazuje skrót, powinien jasno prowadzić do miejsca poprawiania pozycji. Nie duplikuj dwóch odmiennych mechanizmów zmiany ilości bez wspólnej reguły. Odbiorca nie powinien otrzymywać innych ograniczeń zależnie od tego, z którego przycisku otworzył ten sam zestaw produktów.

Przy dużej liczbie pozycji zadbaj o ponowne odnalezienie zmienionej rzeczy. Usunięcie wiersza może przesunąć pozostałe, a powrót z okna wariantu zgubić miejsce. Zachowaj czytelne potwierdzenie działania i sensowną pozycję obsługi klawiaturą. To niewielkie decyzje w projekcie, które pozwalają spokojnie poprawiać bardziej rozbudowane zamówienie.

Zmiana ilości może wpłynąć na więcej niż jedną wartość. Koszt dostawy, rabat czy warunek konkretnej oferty zależą od rzeczywistej konfiguracji sklepu. Nie twórz własnej uniwersalnej reguły. W projekcie wskaż, które elementy podsumowania muszą zostać odświeżone i jak pokażesz, że przeliczenie nie zostało jeszcze potwierdzone.

Jeżeli koszt nie jest znany bez adresu lub wyboru metody, nazwij brakujące dane. „Dostawa do ustalenia po wyborze miejsca” jest uczciwsze niż pokazanie zera wyglądającego jak bezpłatna dostawa. Informacja ma prowadzić do właściwego działania, bez sugerowania ceny, której system jeszcze nie obliczył. To prezentacja stanu zamówienia, a nie miejsce na zaskoczenie na ostatnim ekranie.

Przy kodzie rabatowym pokaż, czy został przyjęty i jaki ma skutek dla aktualnego koszyka. Samo zazielenienie pola nie wyjaśnia, czy rabat obejmuje wszystkie pozycje. Jeżeli po zmianie zamówienia warunek przestaje być spełniony, przekaż tę informację. Nie zostawiaj starej etykiety sukcesu obok nowej sumy bez obniżki.

Nie pozwól, by dodatkowe rekomendacje zasłaniały możliwość sprawdzenia własnego wyboru. Koszyk może proponować akcesoria, lecz klient przyszedł także po to, żeby porównać ilości i przejść dalej. Przy dodaniu rekomendowanego przedmiotu pokaż jego wynik tak samo starannie jak wynik poprzednich działań. To nadal nowa pozycja zamówienia, a nie neutralny element treści.

Dobrze nazwij główny następny krok. Jeśli przycisk prowadzi do danych dostawy i płatności, powinien opisywać tę drogę. Nie sugeruj zakończonego zakupu przed etapem, na którym klient ma jeszcze podejmować decyzje. Sam formularz kontaktowy jest prostszym zadaniem; checkout wymaga zachowania stanu wielu wzajemnie zależnych informacji.

Przejście do zakupu bez konta nie powinno zerować koszyka ani stawiać pytania o hasło jako warunku obejrzenia dalszej drogi. Zalogowanie może pomóc powracającej osobie, ale jego korzyść ma wynikać z zadania. Nie wymagaj nowego konta bez wyjaśnienia, do czego jest potrzebne w tym zakupie.

Zachowanie koszyka między wizytami wymaga własnej decyzji. Ustal, czy klient wracający po dłuższej przerwie otrzyma wcześniejszy wybór i jak dowie się o zmienionej dostępności. Nie obiecuj rezerwacji towaru przez samo pozostawienie go w koszyku, jeżeli sklep tak nie działa. Wcześniejsza liczba na ekranie nie jest dowodem aktualnego zapasu. Podobną kontrolę trzeba wykonać przy ponownym zakupie z dawnego zamówienia, bo stary wybór dopiero staje się nowym koszykiem.

Sprawdź również dwie otwarte karty i powrót z przycisku przeglądarki. Widoki mogą mieć różny moment odświeżenia. Projekt powinien odzyskać spójność przed kolejną istotną czynnością i wyjaśnić zauważalną zmianę. Osoba kupująca nie potrzebuje wiedzy o synchronizacji; potrzebuje jednej wiarygodnej odpowiedzi na pytanie, co znajduje się w jej zamówieniu.

W odbiorze całej drogi zakupowej uwzględnij poprawkę błędnej decyzji. Wybierz niewłaściwy wariant, zmień ilość, usuń pozycję i wróć do szczegółów. To pozwala zobaczyć, czy klient potrafi odzyskać kontrolę bez pomocy obsługi. Sam udany zakup przygotowanego wcześniej zestawu pokazuje znacznie węższy fragment działania.

Aeneia Design projektuje sklepy w uzgodnionym zakresie, z uwzględnieniem tej drogi oraz potrzebnych integracji. Do rozmowy przynieś kilka rzeczywistych produktów i reguły ilości, wariantów oraz realizacji. Klient powinien móc zmienić zdanie i spokojnie sprawdzić wynik. Nawet po trzecim dotknięciu plusa.