Nu trebuie să faceți designul coșului de cumpărături pe mobil: 6 deversări practice (Ghid aprofundat mCommerce)

Știți deja că pagina dvs. de coș este un element esențial vital în mașina dvs. de comerț electronic. Dar paginile dvs. de coș mobil - paginile pe care le văd vizitatorii înainte de a plăti - își aduc greutatea?

La Growcode descoperim în mod repetat că paginile coșului de cumpărături sunt una dintre cele mai ignorate părți ale magazinelor clienților noștri, mai ales când vine vorba de dispozitive mobile. Iar consecințele sunt semnificative, afectându-le serios rezultatele.

Vânzările de comerț mobil sunt de așteptat să reprezinte 52,9% din totalul vânzărilor de comerț electronic până în 2021. Cu toate acestea, în 2017, rata medie de abandonare a coșului de cumpărături mobile a fost de 85,65%.

Asta înseamnă că din toți clienții care au adăugat un produs sau produse într-un coș, aproape 9 din 10 au rămas fără a finaliza achiziția.

# Vânzările de comerț mobil ar trebui să reprezinte 52,9% din totalul vânzărilor de comerț electronic până în 2021. #EcommerceStats Click To Tweet
Mobile conduce la abandonarea coșului. Amintiți-vă că datele agregate, ca în graficul de mai sus, nu iau în considerare diferențele considerabile între industrii. Sursă.
În această postare, vom arunca o privire la șase exemple de pagini cu recenzii despre coș. Primele trei utilizează practici solide de proiectare pe care ar trebui să le luați în considerare să le reproduceți, în timp ce exemplele rămase includ elemente care sunt cel mai bine evitate.

De asemenea, merită menționat faptul că, deși ne concentrăm asupra greșelilor anumitor modele de coșuri de cumpărături, nu înseamnă că acestea sunt complet teribile în general. Să ne scufundăm pentru cele mai bune practici ale coșului de cumpărături mobil.

1. Faceți: Amazon

Coșul de cumpărături Amazon pentru site-urile mobile este un exemplu strălucit de proiectare a coșului de cumpărături mobilă bine realizată. Nu este aglomerat, dar nici nu este prea minimal. Sunt incluse toate elementele necesare, fără a atrage atenția de la CTA principal. Există, de asemenea, o serie de „programe de completare” discrete care pot fi selectate pentru a crește valoarea comenzii, de la ambalarea cadourilor la articole conexe.
Coșul de cumpărături mobil al Amazon ux. Sunt incluse toate elementele necesare.

Sfatul nr. 1: un CTA clar în partea de sus a paginii setat într-o culoare contrastantă. Pe măsură ce utilizatorul derulează în jos, acest CTA continuă să plutească în partea de sus a ecranului.

Sfat de optimizare #Mobile #cart: aveți un #CTA clar în partea de sus a paginii, într-o culoare contrastantă. #ecommerce #optimization Faceți clic pentru a trimite un Tweet
CTA plutește în partea de sus a ecranului atunci când utilizatorul derulează în jos.
Sfatul nr. 2: CTA are un ecran larg, astfel încât este ușor să-l atingeți atât pentru utilizatorii din stânga, cât și pentru cei din dreapta.
Sfatul nr. 3: Reiterarea transportului gratuit în partea de sus a paginii pentru a atenua orice îndoieli și pentru a „îndulci afacerea”.
Sfatul # 4: Imaginile și numele produselor se leagă de pagina de descriere pentru cei care doresc să verifice din nou detaliile produsului.
Sfat # 5: Există butoane clare și ușor de atins pentru a schimba suma comenzii, a șterge articole și a le salva pentru mai târziu.
Sfatul nr. 6: Notificarea „În stoc” îi asigură pe clienți că nu vor trebui să aștepte produsul.
Sfat de optimizare #Mobile #cart: Notificarea „În stoc” îi asigură pe # clienți că nu vor trebui să aștepte produsul. #ecommerce Faceți clic pentru a trimite un Tweet
Sfatul # 7: Amazon prezintă produsele care au fost „Salvate pentru mai târziu”, cu un buton ușor „Mută în coș” dedesubt.
Articolele salvate pentru mai târziu sunt clar vizibile.
Sfatul nr. 8: includerea produselor conexe - „Cumpărătorii au cumpărat și” - care pot fi adăugate în coș fără a părăsi pagina. Un plus suplimentar pentru proiectarea acestui element, deoarece al treilea element nu este complet afișat și, astfel, sugerează o mișcare de glisare.
Sfatul # 9: O mulțime de spațiu alb și absența detaliilor inutile despre „umplutură”. Amazon a inclus doar ceea ce este absolut necesar.
Sfatul # 10: Link către „Partea de sus a paginii” din subsol.

Doriți mai multe informații de acest gen?

Obțineți sfaturi săptămânale despre comerț electronic, strategii și cunoștințe de top din industrie.
Livrat direct în căsuța de e-mail.

pe Am citit politica de confidențialitate și accept termenii și condițiile buletinului informativ.

Bifați această casetă de selectare pentru a continua

Woo hoo! Tocmai v-ați înscris. Verificați căsuța de e-mail pentru a confirma abonamentul.

2. Faceți: Capse

Frumusețea căruciorului Staples este simplitatea sa. Produsele pot fi revizuite în câteva secunde. Rezultatul este un accent mai mare pe opțiunile incluse.
Frumusețea căruciorului Staples este simplitatea sa. Una dintre cele mai bune cărucioare de comerț electronic mobil.
Sfatul nr. 1: La fel ca Amazon, se atrage atenția asupra faptului că produsul va fi livrat gratuit, atât în ​​partea de sus a paginii, cât și în rezumatul plăților. Mai mult, textul este verde, ceea ce face ca notificarea să iasă în evidență. Se afișează și data exactă a „livrării preconizate”.
Sfat # 2: Designul este ultra-simplu, iar utilizarea excelentă este făcută din spațiul alb. Clienții își pot verifica rapid comenzile, pot face modificările necesare fără a părăsi pagina și pot verifica totalul.
Sfatul nr. 3: caseta „Cupoane și recompense” este discretă. Opțiunea importantă de a „prelua în magazin” este, de asemenea, oferită fără a atrage atenția de la CTA principal.
Sfatul nr. 4: Cuvântul „Securizat” este inclus în CTA de plată.
Sfatul # 5: subsolul a fost eliminat.

Este ceva in neregula? În timp ce Staples este foarte corect, o problemă cu acest design de coș este simplitatea antetului, care nu include un meniu extensibil sau un formular de căutare. Dacă o companie vinde doar un produs, aceasta poate fi o soluție viabilă. Cu toate acestea, pentru site-urile cu produse multiple, merită întotdeauna să le oferiți clienților opțiunea de a naviga din nou dacă doresc.

3. Fă: Sears

Sears oferă o mulțime de opțiuni suplimentare - inclusiv planuri de plată, ridicare în magazin, opțiuni de cadouri și promoții. Coșul lor este un bun exemplu pentru comercianții cu amănuntul care doresc să combine multe elemente diferite pe o singură pagină, fără a distruge designul care împiedică abandonarea coșului de cumpărături mobil.
Designul căruțului mobil Sears conține o mulțime de elemente, dar îl păstrează totuși simplu.
Sfatul nr. 1: Un CTA este inclus în partea de sus a paginii alături de subtotal. O pictogramă de blocare creează în continuare încredere și este oferită și opțiunea de a plăti folosind Paypal.
Sfatul nr. 2: Ca articol cu ​​bilet ridicat, sunt incluse planuri de plată pentru a elimina orice ezitare în această etapă.
Sfatul nr. 3: Economiile la vânzare sunt incluse în roșu în secțiunea cu rezumatul comenzilor, încurajând clienții să facă clic pentru a face checkout, creând atât urgența, cât și reducând îndoielile.
Sfatul # 4: este furnizat un link pentru a vă conecta la schema de loialitate, care acționează ca un stimulent suplimentar pentru noii clienți. Este important să rețineți că acesta nu este un link pentru a configura un cont de magazin fără niciun beneficiu, care ar fi mai bine încorporat în formularul de plată.
Sfatul # 5: un sigiliu „plată securizată” este inclus în partea de jos a paginii.
Este ceva in neregula? Există doar un pic prea mult, iar efectul este probabil o atenție împrăștiată pentru unii clienți. De exemplu, nu este necesar să oferiți abonamente la reviste și un link către programul de loialitate din partea de jos.

4. Nu faceți: Vitacost

Deși Vitacost folosește o mulțime de elemente descrise mai sus, implementarea lor este adesea defectuoasă. Rezultatul este o pagină de cărucior slab concepută, care probabil ar vedea o creștere a conversiilor coșului de cumpărături cu câteva modificări mici.
Vitacost folosește o mulțime de elemente descrise mai sus, dar implementarea lor este adesea defectuoasă.
Greșeala nr. 1: includerea unei bare de căutare obscure care îi îndepărtează pe oameni de pagina de coș. Este o idee bună să includeți o pictogramă a barei de căutare (ca în exemplul Amazon) pentru persoanele care doresc să continue navigarea. Dar nu o face prea mare.

Sfat de optimizare #Mobile #cart: Nu includeți o bară de căutare obuzivă care să îndepărteze oamenii de coș. #ecommerce Faceți clic pentru a trimite un Tweet
Greșeala nr. 2: includerea automată a produsului „BOGO” neclar (cumpărați unul obțineți jumătate din preț) care poate deruta sau deranja clienții.
MIstake # 3: Bară de cod promoțională neplăcută . Acest lucru distrage atenția de la principalul CTA și încurajează clienții să părăsească coșul de cumpărături pentru a căuta promoții online. Cutiile promoționale ar trebui să fie vizibile, dar nu prea mult. Cu siguranță ar trebui să urmeze un CTA.
MIstake # 4: Costul de expediere este stabilit ca „TBD”, ceea ce stimulează îndoielile (în general, ar trebui să evitați abrevierile)
Greșeala nr. 5: subsolul este prea mare. Vitacost dorește ca clienții să termine achiziția sau să descarce aplicația?
Greșeala nr. 6: opțiunile produsului - pentru îndepărtarea sau creșterea articolelor - sunt mult prea mici și dificil de atins.
Greșeala # 7: bara plutitoare, care poate fi văzută chiar în partea de jos a capturii de ecran, ocupă prea mult spațiu pe ecran pe telefoanele mai mici.

5. Nu: Lonely Planet

În cazul în care pagina Staples utilizează în mod eficient un design minimal, Lonely Planet exclude prea multe elemente. Nu există caracteristici care să reducă ezitarea și să creeze încredere, nu există recomandări sau sugestii de produse pentru a crește valoarea achiziției și multe dintre butoane sunt greu de făcut clic.
Lonely Planet exclude prea multe elemente. Rămân cu mult spațiu care ar putea fi folosit pentru a îmbunătăți cart ux.
Greșeala # 1: spațiul este slab folosit. Ar fi mai bine ca coșul să completeze întreaga pagină și să utilizeze spațiul alb, mai degrabă decât să apară peste conținutul curent.
Greșeala nr. 2: Nu sunt incluse informații despre livrare, reduceri sau opțiuni de plată. Acestea ar diminua probabil îndoielile și temerile clienților incerti.
Greșeala nr. 3: nu există sugestii legate de produs.
Greșeala # 4: butoanele pentru creșterea sau reducerea numărului de produse sunt atât de mici încât pot fi practic de neclicat.
Greșeala nr. 5: CTA - „Continuați cu plata” - nu arată ca un buton.
Greșeala nr. 6: formatul pop-out face dificilă atingerea CTA din stânga. Lăsați clienții să-și folosească ambele degete!

6. Nu: Nike

Problema principală a paginii Nike este modul în care diferite elemente au fost incluse în mod aleatoriu, fără să se gândească puțin la modul în care ar putea funcționa dacă sunt așezate împreună sau în diferite puncte ale paginii. Există, de asemenea, confuzie cu privire la CTA.
Pe pagina Nike au fost incluse aleatoriu diferite elemente.
Greșeala nr. 1: reducerile de expediere sunt disponibile numai membrilor. Acest lucru adaugă fricțiuni inutile și este probabil să acționeze ca un factor de descurajare pentru acei clienți care nu doresc să se alăture, care vor crede că pierd. Oferiți clienților opțiunea de a vă conecta la etapa de plată, împreună cu opțiunea de a se înscrie pentru clienți noi. Pagina coșului ar trebui să fie exclusiv pentru examinarea comenzilor.

Greșeala nr. 2: utilizarea a două CTA-uri. Aproape întotdeauna este mai bine să aveți un CTA pe paginile coșului, deoarece căutați un anumit curs de acțiune. Singurul motiv pentru a oferi mai multe CTA-uri este de a oferi clienților opțiunea între diferite opțiuni de plată. Ar fi mai bine să afișați un formular adecvat (fie un formular de autentificare, fie un formular de adresă) după ce un utilizator vă furnizează adresa sa de e-mail.

Greșeala nr. 3: „Tipurile de plată acceptate” nu sunt afișate în apropierea CTA de plată. Este o idee bună să includeți aceste ecusoane pe pagina coșului de cumpărături, mai ales dacă nu sunteți la fel de cunoscut ca Nike, dar subsolul nu este locul pentru ei.

Greșeala nr. 4: Termenul „invitat” poate duce la confuzie dacă clienții nu se autoidentifică în acest fel (puteți deveni membru dacă faceți cumpărături ca invitat?)

Înfășurarea designului coșului de cumpărături mobil

Majoritatea paginilor de cărucioare performante au un design curat și simplu, dar oferă, de asemenea, tipul și cantitatea potrivite de informații. Pe măsură ce vă reproiectați propriile dvs., rețineți că scopul paginilor de coș este ca cumpărătorii să revizuiască și să confirme comanda lor, eliminând orice articole inutile și adăugând produse similare. Orice alte acțiuni dorite, cum ar fi conectarea la contul lor sau înscrierea, pot fi lăsate pe pagina de plată. Așadar, amintiți-vă despre aceste cele mai bune practici ale coșului de cumpărături mobile și despre alte tehnici de optimizare a coșului de cumpărături.

Și amintiți-vă, testarea divizată este esențială! Utilizați tacticile descrise aici pentru a vă forma propriile teste și vă angajați să modificați elementele pe termen lung. Dacă faceți acest lucru, veți vedea cu siguranță creșteri constante ale conversiilor.

Obțineți lista de verificare pentru 115 puncte de optimizare a comerțului electronic

Pe baza a opt ani de experiență, ne-am adunat toate ideile de top într-o singură carte: Lista de verificare pentru optimizarea comerțului electronic a unui magazin online de 7+ figuri. Dacă doriți să creșteți performanța tuturor paginilor dvs. - de la pagina de pornire până la finalizare, luați copia dvs. aici.