Co robić, a czego nie robić w projektowaniu mobilnego koszyka na zakupy: 6 praktycznych rozwiązań (dogłębny przewodnik po mCommerce)

Wiesz już, że Twoja strona koszyka jest niezbędnym trybem w Twojej maszynie e-commerce. Ale czy Twoje mobilne strony koszyka – strony, które odwiedzający widzą przed dokonaniem zakupu – przyciągają uwagę?

W Growcode wielokrotnie stwierdzamy, że strony koszyka to jedna z najbardziej ignorowanych części sklepów naszych klientów, zwłaszcza jeśli chodzi o mobile. Konsekwencje są znaczące, poważnie wpływając na ich wyniki finansowe.

Oczekuje się, że sprzedaż mobilna będzie stanowić 52,9% całej sprzedaży e-commerce do 2021 r. Jednak w 2017 r. średni wskaźnik porzucania mobilnych koszyków zakupowych wyniósł aż 85,65%.

Oznacza to, że ze wszystkich klientów, którzy dodali produkt lub produkty do koszyka, prawie 9 na 10 pozostało bez sfinalizowania zakupu.

# Oczekuje się, że sprzedaż mobilna będzie stanowić 52,9% całej sprzedaży e-commerce do 2021 roku. #EcommerceStats Kliknij, aby tweetować
Mobilni potencjalni klienci po porzuceniu koszyka. Pamiętaj, że dane zagregowane, jak na powyższym wykresie, nie uwzględniają znacznych różnic między branżami. Źródło.
W tym poście przyjrzymy się sześciu przykładom stron z recenzjami koszyka. Pierwsze trzy wykorzystują solidne praktyki projektowe, których powielanie należy rozważyć, podczas gdy pozostałe przykłady zawierają elementy, których najlepiej unikać.

Warto również wspomnieć, że chociaż skupiamy się na błędach niektórych projektów koszyków na zakupy, nie oznacza to, że są one ogólnie okropne. Przyjrzyjmy się sprawdzonym sposobom korzystania z mobilnego koszyka na zakupy.

1. Czy: Amazonka

Koszyk Amazona dla mobilnych stron internetowych jest doskonałym przykładem dobrze wykonanego projektu mobilnego koszyka na zakupy. Nie jest zatłoczony, ale też nie jest zbyt minimalny. Wszystkie niezbędne elementy są uwzględnione, bez odwracania uwagi od głównego CTA. Istnieje również wiele dyskretnych „dodatków”, które można wybrać, aby zwiększyć wartość zamówienia, od pakowania prezentów po powiązane przedmioty.
Mobilny koszyk na zakupy Amazon ux. Wszystkie niezbędne elementy są w komplecie.

Porada 1: Jedno wyraźne wezwanie do działania na górze strony w kontrastowym kolorze. Gdy użytkownik przewija w dół, to wezwanie do działania nadal unosi się na górze ekranu.

#Wskazówka dotycząca optymalizacji koszyka #komórka: jedno wyraźne #CTA u góry strony w kontrastowym kolorze. #ecommerce #optymalizacja Kliknij, aby tweetować
CTA unosi się na górze ekranu, gdy użytkownik przewija w dół.
Porada 2: CTA obejmuje cały ekran, więc łatwo jest go dotknąć zarówno dla użytkowników leworęcznych, jak i praworęcznych.
Porada 3: Potwierdzenie bezpłatnej wysyłki na górze strony, aby rozwiać wszelkie wątpliwości i „osłodzić umowę”.
Porada 4: Zdjęcia i nazwy produktów prowadzą do strony opisu dla tych, którzy chcą ponownie sprawdzić szczegóły produktu.
Porada 5: Istnieją jasne i łatwe do dotknięcia przyciski, aby zmienić kwotę zamówienia, usunąć elementy i zapisać je na później.
Wskazówka #6: Powiadomienie „W magazynie” zapewnia klientom, że nie będą musieli czekać na produkt.
#Mobilna #wskazówka dotycząca optymalizacji koszyka: Powiadomienie „W magazynie” zapewnia #klientów, że nie będą musieli czekać na produkt. #ecommerce Kliknij, aby tweetować
Wskazówka 7: Amazon prezentuje produkty, które zostały „zapisane na później”, z łatwym przyciskiem „Przenieś do koszyka” pod spodem.
Elementy zapisane na później są wyraźnie widoczne.
Wskazówka nr 8: Uwzględnianie powiązanych produktów – „Klienci też kupowali” – które można dodać do koszyka bez opuszczania strony. Dodatkowy plus za konstrukcję tego elementu, ponieważ trzeci element nie jest w pełni pokazany i tym samym sugeruje ruch machnięcia.
Wskazówka nr 9: Dużo pustej przestrzeni i brak zbędnych szczegółów „wypełniacza”. Amazon uwzględnił tylko to, co absolutnie konieczne.
Wskazówka nr 10: Link do „Góry strony” w stopce.

Chcesz więcej takich informacji?

Otrzymuj cotygodniowe wskazówki, strategie i wiodącą wiedzę branżową na temat e-commerce.
Dostarczone prosto do Twojej skrzynki odbiorczej.

dalej Zapoznałem się z polityką prywatności i akceptuję regulamin newslettera.

Zaznacz to pole wyboru, aby kontynuować

Hurra! Właśnie się zapisałeś. Sprawdź swoją skrzynkę odbiorczą, aby potwierdzić subskrypcję.

2. Zrób: Zszywki

Piękno wózka Staples polega na jego prostocie. Produkty można przejrzeć w kilka sekund. Rezultatem jest większy nacisk na zawarte opcje.
Piękno wózka Staples polega na jego prostocie. Jeden z najlepszych mobilnych koszyków e-commerce.
Porada 1: Podobnie jak Amazon, zwracamy uwagę na to, że produkt zostanie wysłany bezpłatnie, zarówno na górze strony, jak i w podsumowaniu płatności. Co więcej, tekst jest w kolorze zielonym, co jeszcze bardziej wyróżnia powiadomienie. Pokazana jest również dokładna data „oczekiwanej dostawy”.
Porada 2: Projekt jest bardzo prosty i doskonale wykorzystuje białą przestrzeń. Klienci mogą szybko sprawdzić swoje zamówienia, dokonać niezbędnych zmian bez opuszczania strony i zweryfikować sumę.
Porada 3: Pole „Kupony i nagrody” nie rzuca się w oczy. Dostępna jest również ważna opcja „odbiór w sklepie” bez odwracania uwagi od głównego CTA.
Porada 4: Słowo „Bezpieczne” jest zawarte w CTA przy kasie.
Porada 5: Stopka została usunięta.

Czy coś jest nie tak? Chociaż firma Staples ma wiele racji, jednym z problemów związanych z projektem koszyka jest prostota nagłówka, który nie zawiera rozwijanego menu ani formularza wyszukiwania. Jeśli firma sprzedaje tylko jeden produkt, może to być opłacalne rozwiązanie. Jednak w przypadku witryn oferujących wiele produktów zawsze warto dać klientom możliwość ponownego przeglądania, jeśli chcą.

3. Zrób: Sears

Sears oferuje wiele dodatkowych opcji – w tym plany płatności, odbiór w sklepie, opcje prezentów i promocje. Ich koszyk jest dobrym przykładem dla sprzedawców, którzy chcą połączyć wiele różnych elementów na jednej stronie, nie psując projektu zapobiegającego porzucaniu mobilnego koszyka.
Projekt wózka mobilnego Sears zawiera wiele elementów, ale nadal jest prosty.
Porada 1: CTA znajduje się u góry strony obok sumy częściowej. Ikona kłódki dodatkowo buduje zaufanie i oferowana jest również opcja realizacji transakcji za pomocą Paypal.
Porada 2: Jako pozycja o wysokim poziomie cenowym, plany płatności są uwzględnione, aby rozwiać wszelkie wahania na tym etapie.
Porada 3: Oszczędności na sprzedaży są zaznaczone na czerwono w sekcji podsumowania zamówienia, zachęcając klientów do przejścia do kasy, budując zarówno pilność, jak i zmniejszając wątpliwości.
Porada 4: Dostępny jest link umożliwiający zalogowanie się do programu lojalnościowego, który stanowi dodatkową zachętę dla nowych klientów. Należy pamiętać, że nie jest to link do założenia konta w sklepie bez żadnych korzyści, które lepiej byłoby włączyć do formularza zamówienia.
Wskazówka 5: Pieczęć „bezpiecznej kasy” znajduje się na dole strony.
Czy coś jest nie tak? To trochę za dużo, a efektem jest prawdopodobnie rozproszenie uwagi niektórych klientów. Nie ma potrzeby oferowania na przykład prenumeraty czasopism i linku do programu lojalnościowego na dole.

4. Nie: Vitacost

Chociaż Vitacost wykorzystuje wiele elementów opisanych powyżej, ich implementacja jest często błędna. Rezultatem jest źle zaprojektowana strona koszyka, która prawdopodobnie zwiększy liczbę konwersji koszyka na zakupy po kilku niewielkich poprawkach.
Vitacost wykorzystuje wiele elementów opisanych powyżej, ale ich implementacja jest często błędna.
Błąd 1: Włączenie natrętnego paska wyszukiwania, który odciąga ludzi od strony koszyka. Dobrym pomysłem jest dołączenie ikony paska wyszukiwania (jak w przykładzie Amazon) dla osób, które chcą kontynuować przeglądanie. Ale nie rób tego zbyt duży.

#Urządzenia mobilne #wskazówka dotycząca optymalizacji koszyka: nie umieszczaj natrętnego paska wyszukiwania, który odciąga ludzi od koszyka. #ecommerce Kliknij, aby tweetować
Błąd nr 2: Automatyczne uwzględnienie niejasnego produktu „BOGO” (kup jeden za pół ceny), który może dezorientować lub denerwować klientów.
Błąd nr 3: Natrętny pasek z kodem promocyjnym. Odwraca to uwagę od głównego CTA i zachęca klientów do opuszczenia koszyka w celu wyszukania promocji online. Pudełka promocyjne powinny być widoczne, ale nie nadmiernie. Z pewnością powinny być po CTA.
Błąd nr 4: Koszt wysyłki jest ustawiony jako „do ustalenia”, co budzi wątpliwości (ogólnie rzecz biorąc, należy unikać skrótów)
Błąd nr 5: Stopka jest za duża. Czy Vitacost chce, aby klienci dokończyli zakup lub pobrali aplikację?
Błąd #6: Opcje produktu – do usuwania lub powiększania przedmiotów – są zbyt małe i trudne do wykorzystania.
Błąd nr 7: Pływający pasek, który widać na dole zrzutu ekranu, zajmuje zbyt dużo miejsca na mniejszych telefonach.

5. Nie: Lonely Planet

Podczas gdy strona Staples skutecznie wykorzystuje minimalistyczny projekt, Lonely Planet wyklucza zbyt wiele elementów. Nie ma funkcji zmniejszających wahania i budujących zaufanie, żadnych rekomendacji ani sugestii produktowych, które zwiększają wartość zakupu, a wiele przycisków jest trudnych do kliknięcia.
Lonely Planet wyklucza zbyt wiele elementów. Pozostaje im dużo miejsca, które można by wykorzystać na usprawnienie koszyka.
Błąd nr 1: Przestrzeń jest słabo wykorzystana. Lepiej byłoby, gdyby koszyk wypełniał całą stronę i wykorzystywał białe miejsce, zamiast wyskakiwać nad bieżącą treścią.
Błąd nr 2: Brak informacji o dostawie, rabatach lub opcjach płatności. To prawdopodobnie zmniejszyłoby wątpliwości i obawy niepewnych klientów.
Błąd nr 3: Brak powiązanych propozycji produktów.
Błąd nr 4: Przyciski zwiększające lub zmniejszające liczbę produktów są tak małe, że praktycznie nie można ich kliknąć.
Błąd nr 5: CTA – „Przejdź do kasy” – nie wygląda jak przycisk.
Błąd nr 6: Format wyskakującego okienka utrudnia wybranie CTA z lewej strony. Pozwól klientom używać obu kciuków!

6. Nie: Nike

Głównym problemem ze stroną Nike jest sposób, w jaki różne elementy zostały umieszczone w sposób losowy, bez wyraźnego zastanowienia się nad tym, jak mogą działać, jeśli zostaną umieszczone razem lub w różnych punktach strony. Istnieje również zamieszanie związane z CTA.
Na stronie Nike zostały losowo umieszczone różne elementy.
Błąd nr 1: Zniżki na wysyłkę są dostępne tylko dla członków. Powoduje to niepotrzebne tarcia i prawdopodobnie zniechęca tych klientów, którzy nie chcą dołączyć, którzy będą myśleć, że przegrywają. Zaoferuj klientom opcję logowania na etapie kasy, wraz z opcją rejestracji dla nowych klientów. Strona koszyka powinna służyć wyłącznie do przeglądania zamówień.

Błąd nr 2: Użycie dwóch CTA. Prawie zawsze lepiej mieć jedno CTA na stronach koszyka, ponieważ szukasz konkretnego sposobu działania. Jedynym powodem oferowania wielu CTA jest umożliwienie klientom wyboru między różnymi opcjami realizacji transakcji. Lepiej byłoby pokazać odpowiedni formularz (albo formularz logowania, albo formularz adresowy) po podaniu przez użytkownika swojego adresu e-mail.

Błąd nr 3: „Akceptowane rodzaje płatności” nie są wymienione w pobliżu CTA przy kasie. Dobrym pomysłem jest umieszczenie tych odznak na stronie koszyka, zwłaszcza jeśli nie jesteś tak znany jak Nike, ale stopka nie jest dla nich miejscem.

Błąd nr 4: Termin „gość” może wprowadzać w błąd, jeśli klienci nie identyfikują się w ten sposób (czy możesz zostać członkiem, jeśli robisz zakupy jako gość?)

Zawijanie projektu mobilnego koszyka na zakupy

Większość najskuteczniejszych stron koszyka ma przejrzysty i prosty wygląd, a jednocześnie zapewnia odpowiedni rodzaj i ilość informacji. Podczas przebudowy własnej strony pamiętaj, że celem stron koszyka jest przeglądanie i potwierdzanie zamówienia przez kupujących, usuwanie niepotrzebnych produktów i dodawanie podobnych produktów. Wszelkie inne pożądane działania, takie jak logowanie się na konto lub rejestracja, można pozostawić na stronie kasy. Pamiętaj więc o tych najlepszych praktykach dotyczących mobilnego koszyka na zakupy i innych technikach optymalizacji koszyka na zakupy.

I pamiętaj, że kluczowe są testy dzielone! Użyj opisanych tutaj taktyk, aby stworzyć własne testy i zobowiązać się do ulepszania elementów w dłuższej perspektywie. Jeśli to zrobisz, prawie na pewno zauważysz stały wzrost liczby konwersji.

Uzyskaj 115-punktową listę kontrolną optymalizacji e-commerce

Opierając się na ośmioletnim doświadczeniu, zebraliśmy wszystkie nasze najważniejsze spostrzeżenia w jednej książce: Lista kontrolna optymalizacji e-commerce w sklepie internetowym 7+ figurek. Jeśli chcesz zwiększyć wydajność wszystkich swoich stron – od strony głównej po kasę, pobierz swoją kopię tutaj.