fbpx
Kategoria: Design/UX/UI
Jak zaprojektować koszyk w sklepie internetowym

Jak zaprojektować koszyk w sklepie internetowym

Czy wiesz, do czego w sklepie internetowym konsumenci używają koszyka zakupowego? Wydaje się to oczywiste, jednak nie wszystkie funkcje są widoczne na pierwszy rzut oka. Ten artykuł pomoże Ci zrozumieć: w jaki sposób użytkownicy Twojego sklepu internetowego używają koszyka zakupowego, do jakich celów oraz jak zaprojektować koszyk zakupowy by ten był użyteczny i spełniał swoją funkcję.

Jakie funkcje spełnia koszyk zakupowy

Koszyk zakupowy to niezwykle kluczowy etap projektowanie sklepu internetowego oraz – już po wdrożeniu – procesu zakupowego. To od niego zaczyna się proces zakupowy i na etapie koszyka zakupowego najczęściej zapada decyzja o finalizacji transakcji.

Dlatego, jest to obecnie jeden z najważniejszych elementów sklepu internetowego i dlatego, przed rozpoczęciem prac nad jego optymalizacją warto zastanowić się jakie funkcje on spełnia.

Koszyk jako lista produktów

Jedną z kluczowych funkcji koszyka w sklepie internetowym jest funkcja listy produktów. Czy też ich magazynu. Wielu użytkowników wykorzystuję koszyk, w celu zebrania kilku, czy też kilkunastu towarów, a następnie wybrania z nich tylko tych, na których zakup, się zdecydują.

Koszyk jako porównywarka

Z powyższej funkcji wynika, funkcja kolejna. A więc funkcja porównywarki. Użytkownik bardzo często, zanim zdecyduje się na kupno towaru, porównuje produkty. Do tego celu często służy właśnie koszyk zakupowy. Zwłaszcza jeśli w sklepie internetowym nie ma porównywarki lub wishlisty.

W koszyku zakupowym porównujemy rozmiary, warianty, konfiguracje czy też podobne produkty z tej samej kategorii.

Zwiększenie wartości koszyka

Inną niezwykle ważną funkcją koszyka w sklepie internetowym, jest zachęcanie do zwiększenia sumy wydanych w naszych e-commerce środków.

A więc poprzez oferowanie produktów o wyższej wartości z tej samej kategorii lub towarów komplementarnych do tych już znajdujących się w koszyku.

Funkcja informacyjna

Jednym z podstawowych parametrów użyteczności w sklepach internetowych jest czytelność informacji oraz informowanie użytkownika o aktualnym stanie systemu. Dlatego, niezwykle istotną funkcją jest funkcja informacyjna.

Zapewnij użytkownikowi Twojego e-commerce łatwy dostęp do kluczowych informacji takich jak:

  • Ceny standardowa
  • Cena promocyjna
  • Ilość sztuk w koszyku
  • Ilość danego produktu w koszyku
  • Czas realizacji zamówienia
  • Koszt dostawy
  • Kwota brakująca do darmowej dostawy

Duże znaczenie ma też informacja o możliwych formach płatności oraz dostawy w Twoim sklepie. Klienci w Polsce często wybierają Paczkomaty InPost formę dostawy. Cieszy się ona dużą popularnością. Dlatego warto pokazać ją już na etapie koszyka.

Kolejną ważną kwestią jest informacja o kolejnych krokach procesu zakupowego. Pokaż klientom kolejne etapy procesu zakupowego już na etapie koszyka. Ilość etapów, skróć do minimum. Najlepiej, aby nie było ich więcej niż trzy.

Koszyk, pierwszym krokiem procesu zakupowego

Ostatnią, ale jednocześnie najważniejszą jego funkcją jest oczywiście zachęcenie użytkowników do kolejnych kroków procesu zakupowego. Musisz zadbać, aby użytkownik wiedział jak przejść do następnego etapu zamówienia, czyli np. płatności.

W tym celu umieść duży i kontrastowy przycisk „Przejdź do kasy” w widocznym miejscu. Najlepiej, jeśli będzie on przyklejony do scrolla i będzie pływał ze stroną.

Czym jest mały koszyk zakupowy

„Mały koszyk” to ten, który pojawia się w momencie dodania produktu do koszyka w postaci małego pop-up’u lub mikrokarty. Przede wszystkim musisz wiedzieć, że spełnia on nieco inną funkcję w procesie zamówienia niż Koszyk znajdujący się w procesie zakupowym. Jego zastosowanie ma swoje wady (czy też wyzwania) i zalety. Jakie?

Użytkownicy wykorzystują „Mały Koszyk„, aby kompletować zamówienie i mieć podgląd tego, co mamy aktualnie w koszyku. „Mały Koszyk„, można porównać do listy zakupów, czy też przechowalni produktów.

Co ciekawe i nieoczywiste, bardzo często Koszyk – zarówno mały, jak i właściwy – służą jako, porównywarka.

Kolejną funkcjonalnością jest podsumowanie ilości produktów znajdujących się w koszyku, ich ceny, sumy, wariantów itd.

Jakie funkcje spełnia „mały koszyk zakupowy”

Biorąc pod uwagę funkcje, jakie są oczekiwane przez klientów w Twoim sklepie internetowym. Standardowy koszyk zakupowy nie zawsze jest wygodny.

Na przykład mają oni w zwyczaju, często przechodzić na jego stronę w celu porównania produktów. Jeśli sklep nie jest zoptymalizowany, może to powodować frustrację np. ze względu na długi czas ładowania się strony.

Dlatego najczęściej wykorzystywane funkcje standardowego koszyka warto zamknąć w tzw. „Małym koszyku”, który pojawia się w sklepach w formie mikrokarty.

W tym wypadku najważniejszymi funkcjami i jednocześnie zaletami mikrokarty koszyka są:

  • Szybki przegląd produktów znajdujących się w koszyku zakupowym
  • Możliwość szybkiej modyfikacji listy zakupowej (usuwanie produktów, modyfikacja ich ilości)
  • Łatwe przejście do kolejnego etapu procesu zakupowego
  • Łatwe porównanie produktów znajdujących się w koszyku
  • Zwiększenie wartości koszyka zakupowego

Innym aspektem, który warto wziąć pod uwagę, jest fakt, że tylko na jednej stronie standardowego koszyka mamy bardzo dużo informacji. Zwróć zatem uwagę, by ich ilość na mikrokarcie ograniczyć do minimum.

Jak zaprojektować koszyk w sklepie internetowym

Wiesz już jakich funkcji związanych z koszykiem zakupowym oczekuje Twój klient, wiesz też, jakie ma zalety czas najwyższy zastanowić się, w jaki sposób go zaprojektować koszyk, aby poprawić doświadczenia użytkownika i sprawić by decyzje zakupowe zapadały szybciej. Co ważne, musimy też zastanowić się również jak zaprojektowany koszyk zakupowy wdrożyć w życie.

Dodawanie produktów do koszyka

Ważnym, aspektem projektowania koszyka jest informacja o samym dodaniu produktu do niego. Oznacza to tyle, że gdy użytkownik, a Twój potencjalny klient kliknie przycisk „Dodaj do koszyka” powinien otrzymać informację, że produkt został faktycznie do niego dodany.

Jak w praktyce może to wyglądać w Twoim sklepie internetowym?

Po pierwsze, pokazuj jasny i widoczny komunikat o dodaniu produktu do koszyka. Np. poprzez wyświetlenie apli z taką informacją oraz możliwością przejścia do koszyka zakupowego.

Po drugie, przy ikonce koszyka pokazuj ilość produktu znajdujących się aktualnie w koszyku.

Po trzecie, po dodaniu do koszyka zakupowego możesz wyświetlić mikrokartę małego koszyka z zaznaczonym aktualnie dodanym produktem.

Elementy koszyka zakupowego

Zacznijmy od tego, jakie elementy powinny znaleźć się w obrębie małego i standardowego koszyka.

Elementy małego koszyka (mikrokarta koszyka)

  • Lista produktów w koszyku
  • Cena produktu
  • Suma wszystkich produktów w koszyku
  • Usuwanie produktów z koszyka
  • Zwiększanie i zmniejszanie liczby danego produktu
  • Opcjonalnie: Wybrany wariant danego produktu
  • Opcjonalnie: Sposoby dostawy
  • Opcjonalnie: Sposoby płatności
  • Przycisk „Przejdź do kasy”
  • Przycisk „Wróć do zakupów”
  • Opcjonalnie: Informacja o kwocie brakującej do darmowej wysyłki
  • Opcjonalnie: przycisk przy każdym produkcie dla zalogowanego użytkownika: „Dodaj do schowka”
  • Produkty dodane do koszyka przed zalogowaniem, pozostają w nim po zalogowaniu
  • Opcjonalnie: Cross sell, Up sell

Elementy standardowego koszyka (karta koszyka)

  • Cena produktu
  • Suma wszystkich pozycji w koszyku
  • Suma kosztów dostawy i płatności
  • Lista produktów
  • Usuwanie produktów z koszyka
  • Zwiększanie i zmniejszanie liczby danego produktu
  • Wybrany wariant danego produktu
  • Kluczowe parametry (jeśli takie są)
  • Sposoby dostawy
  • Sposoby płatności
  • Miejsce na kod rabatowy
  • Przycisk „Przejdź do kasy”
  • Kolejne etapy procesu zakupowego
  • Informacja o tym, że dodanie do koszyka nie zapewnia jego rezerwacji
  • Przycisk „Wróć do zakupów”
  • Informacja o kwocie brakującej do darmowej wysyłki
  • Opcjonalnie: przycisk przy każdym produkcie dla zalogowanego użytkownika: „Dodaj do schowka”
  • Produkty dodane do koszyka przed zalogowaniem, pozostają w nim po zalogowaniu
  • Cross sell, Up sell

Przykłady dobrze zaprojektowanego koszyka zakupowego

Zatem jak w praktyce powinien zostać zaprojektowany koszyk w sklepie internetowym? Przyjrzyjmy się zarówno mikrokarcie, jak i standardowemu koszykowi.

Koszyk zakupowy w formie mikrokarty

Standardowy koszyk zakupowy

Czego unikać projektując kartę koszyka

W przypadku mikrokarty unikaj wywierania presji zakupowej. Może to wywołać frustrację, a w konsekwencji zniechęcić użytkowników do dokonania zakupu. Wywoływanie presji zakupowej zastosuj na etapie płatności czy porzucania koszyka. W niewielkim stopniu wywieraj ją również, na stronie standardowego koszyka np. informując o tym, że dodanie produktu do koszyka nie gwarantuje jego rezerwacji.

Postaw na prosty i czytelny design. Nie przesadź z efektami i banerami. Postaw na prostotę nie tylko w designie, ale również w ilości etapów. Znaczne uproszczenie procesu zakupowego sprawi, że kolejne jego etapy będą szybsze i łatwiejsze dla użytkownika.

Koszty dostawy pozostaw zawsze widoczne. To samo dotyczy ew. dodatkowych kosztów za transakcję online. Nikt z nas nie lubi takich niespodzianek. Te zazwyczaj przyczyniają się do porzucenia koszyka.

Kolejnym aspektem jest logowanie i rejestracja. Niektóre sklepy internetowe wymuszają konieczność rejestracji na użytkowniku, aby ten mógł dokonać zakupów. Ty, tego nie rób. Zachęcaj, motywuj. Jednak nie wymuszaj zakładania konta w Twoim sklepie internetowym. W koszyku możesz informować o zaletach rejestracji, korzyściach wynikających z tego np. tzw. rabatach dla early birds.

Zestawienie produktów powinno być czytelne, najlepiej w formie listy. Powinno zawierać zdjęcie produktu, jego cenę i wybrany wariant (np. rozmiar czy kolor). Nie dodawaj zbędnych elementów. Na etapie projektowania koszyka zwróć uwagę na czytelność listy, to bardzo istotne ze względu na funkcje pełnione przez koszyk.

Pole na wpisanie kodu rabatowego pokaż w widocznym miejscu. Nie ukrywaj go w swoim sklepie internetowym. Wiele e-commerce 'ów to robi. Niesłusznie. Najpierw rozdają kody, a następnie ukrywają pole kodu, liczą, że użytkownik dokona zakupu bez wykorzystania kodu. To prosta droga do frustracji użytkowników.

W procesie zakupowym najlepiej już na karcie koszyka pozostaw dla klienta możliwość zalogowania. Pamiętaj jednak, aby po zalogowaniu do konta klienta użytkownik nie stracił wszystkich wybranych towarów.

Testowanie koszyka w sklepie internetowym

W Nestry szczególną uwagę przykładamy do testowania i optymalizacji zaprojektowanych sklepów online. Dobre praktyki, wiedza oraz doświadczenie pomagają nam projektować świetne e-Commerce, jednak musisz pamiętać, że sklep każdego klienta jest inny. Dlatego podejście również musi się różnić.

Różnią się produktami, grupą docelową, celami. Dlatego tak ważna jest optymalizacja i testowanie. Nie każde założenie się sprawdzi. Z części będzie trzeba zrezygnować, część zaprojektować od nowa, a część rozwiązań wymyślić na potrzeby danego klienta.

Jak testować? Przede wszystkim obserwuj użytkowników. Możesz do tego wykorzystać narzędzia takie jak HotJar. Dzięki niemu zobaczysz, w jaki sposób każdy Twój klient używa Twojej strony w tym koszyka.

Aby testować rozwiązania, możesz z kolei wykorzystać darmowe narzędzie takie jak Google Optimize. Pozwala ono wykonywać liczne, nawet zaawansowane testy A/B/X na Twojej stronie WWW.

Po przeprowadzeniu testów należy zoptymalizować sklep.

Wynotuj wszystkie obserwacje i uwagi. Rozważ, co należałby zmienić, gdzie użytkownicy mają problemy w obsłudze koszyka. Pomyśl jak ułatwić klientowi złożenie zamówienia, jak zachęcić do przejścia przez wszystkie etapy procesu zakupowego.

Podsumowanie

Jak widzisz niektóre strona koszyka zakupowego, mimo że w swojej budowie jest prosta, to jej znaczenie jest ogromne. Dołóż wszelkich starań, aby w Twoim sklepie karta koszyka – zarówno mikro, jak i standardowa – były zoptymalizowane w sposób zachęcający klienta do złożenia zamówienia w sklepie online.

Ważne jest też, aby koszyk zakupowy spełniał wszystkie swoje funkcje. W przeciwnym razie utrudnisz klientowi złożenie zamówienia, zmniejszysz swoje szanse na zwiększenie wartości sprzedaży i spowodujesz frustrację klienta.

Jeśli masz pytania, koniecznie skontaktuj się z nami. Pomożemy Ci zoptymalizować Twój sklep tak, że zmieni się w maszynę do sprzedawania Twoich towarów.

5/5 - (11 ocen)

Autor wpisu:

Marcin Gajda

CEO

Ponad dziesięć lat doświadczenie w Digital Marketingu, obsłudze klienta, sprzedaży online. Prowadziłem projekty dla największych polskich i międzynarodowych firm takich jak Rockwool, GPW, Provident, Aviva, Medivet, Acciona czy Zepter.

Jak zaprojektować koszyk w sklepie internetowymWróć do bazy wiedzy
5/5 - (11 ocen)

Baza wiedzy

Wpisy, które mogą Cię zainteresować

  • Kategoria: Design/UX/UI
    Jak zaprojektować koszyk w sklepie internetowym

    Jak zaprojektować koszyk w sklepie internetowym

    Czytaj dalejJak zaprojektować koszyk w sklepie internetowym

Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do Twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje. Akceptując ciasteczka - akceptujesz politykę prywatności. [polityka cookies]