Anjuran dan Larangan Desain Keranjang Belanja Seluler: 6 Teardown Praktis (Panduan Mendalam mCommerce)

Anda sudah tahu halaman keranjang Anda adalah roda penggerak penting dalam mesin e-niaga Anda. Tetapi apakah halaman keranjang seluler Anda – halaman yang dilihat pengunjung sebelum mereka checkout – menarik perhatian mereka?

Di Growcode, kami berulang kali menemukan bahwa halaman keranjang adalah salah satu bagian yang paling diabaikan dari toko klien kami, terutama dalam hal seluler. Dan konsekuensinya signifikan, sangat merusak garis bawah mereka.

Penjualan mobile commerce diperkirakan mencapai 52,9% dari semua penjualan e-commerce pada tahun 2021. Namun, pada tahun 2017, rata-rata tingkat pengabaian keranjang belanja seluler adalah 85,65%.

Itu berarti dari semua pelanggan yang menambahkan produk atau produk ke keranjang, hampir 9 dari 10 yang tersisa tanpa menyelesaikan pembelian.

#Penjualan perdagangan seluler diharapkan mencapai 52,9% dari semua penjualan e-niaga pada tahun 2021. #EcommerceStats Klik Untuk Tweet
Prospek seluler tentang pengabaian keranjang. Ingat bahwa data agregat, seperti pada grafik di atas, tidak memperhitungkan perbedaan yang cukup besar antar industri. Sumber.
Dalam posting ini, kita akan melihat enam contoh halaman ulasan keranjang. Tiga yang pertama menggunakan praktik desain yang solid yang harus Anda pertimbangkan untuk ditiru, sedangkan contoh lainnya menyertakan elemen yang sebaiknya dihindari.

Perlu juga disebutkan bahwa sementara kami berfokus pada kesalahan desain keranjang belanja tertentu, itu tidak berarti bahwa mereka benar-benar buruk secara keseluruhan. Mari selami praktik terbaik keranjang belanja seluler.

1. Lakukan: Amazon

Keranjang belanja Amazon untuk situs web seluler adalah contoh brilian dari desain keranjang belanja seluler yang dilakukan dengan baik. Tidak ramai, tapi juga tidak terlalu minim. Semua elemen yang diperlukan disertakan, tanpa mengalihkan perhatian dari CTA utama. Ada juga sejumlah "add-ons" yang tidak mencolok yang dapat dipilih untuk meningkatkan nilai pesanan, mulai dari pembungkus kado hingga barang-barang terkait.
Keranjang belanja seluler Amazon ux. Semua elemen yang diperlukan disertakan.

Tip #1: Satu CTA yang jelas di bagian atas halaman diatur dalam warna yang kontras. Saat pengguna menggulir ke bawah, CTA ini terus mengambang di bagian atas layar.

#Kiat pengoptimalan #keranjang seluler: Tetapkan satu #CTA yang jelas di bagian atas laman dengan warna yang kontras. #ecommerce #optimization Klik Untuk Tweet
CTA mengapung di bagian atas layar saat pengguna menggulir ke bawah.
Tip #2: CTA adalah layar lebar sehingga mudah untuk mengetuknya untuk pengguna kidal dan tangan kanan.
Tip #3: Pengulangan pengiriman gratis di bagian atas halaman untuk menghilangkan keraguan dan “mempermanis kesepakatan”.
Tip #4: Tautan gambar dan nama produk ke halaman deskripsi bagi mereka yang ingin memeriksa kembali detail produk.
Tip #5: Ada tombol yang jelas dan mudah diketuk untuk mengubah jumlah pesanan, menghapus item, dan menyimpannya untuk nanti.
Tip #6: Pemberitahuan “Tersedia” meyakinkan pelanggan bahwa mereka tidak perlu menunggu produk.
#Kiat pengoptimalan #keranjang seluler: Pemberitahuan 'Tersedia' meyakinkan #pelanggan bahwa mereka tidak perlu menunggu produk. #ecommerce Klik Untuk Tweet
Tip # 7: Amazon menampilkan produk yang telah "Disimpan untuk nanti", dengan tombol "Pindahkan ke Keranjang" yang mudah di bawahnya.
Item yang disimpan untuk nanti terlihat jelas.
Tip #8: Penyertaan produk terkait – “Pelanggan juga berbelanja” – yang dapat ditambahkan ke troli tanpa meninggalkan halaman. Plus tambahan untuk desain elemen ini karena item ketiga tidak sepenuhnya ditampilkan dan dengan demikian menunjukkan gerakan menggesek.
Tip #9: Banyak ruang putih dan tidak adanya detail "pengisi" yang tidak perlu. Amazon hanya menyertakan apa yang benar-benar diperlukan.
Tip #10: Tautkan ke "Top of the Page" di footer.

Ingin lebih banyak wawasan seperti ini?

Dapatkan kiat e-niaga mingguan, strategi, dan pengetahuan industri terkemuka.
Dikirim langsung ke kotak masuk Anda.

pada Saya telah membaca kebijakan privasi dan saya menerima syarat dan ketentuan buletin.

Silakan pilih kotak centang ini untuk melanjutkan

Woo hoo! Anda baru saja mendaftar. Periksa kotak masuk Anda untuk mengonfirmasi langganan.

2. Lakukan: Staples

Keindahan gerobak Staples adalah kesederhanaannya. Produk dapat ditinjau dalam hitungan detik. Hasilnya adalah penekanan yang lebih besar pada opsi yang disertakan.
Keindahan gerobak Staples adalah kesederhanaannya. Salah satu kereta e-niaga seluler terbaik.
Tip #1: Seperti Amazon, perhatian tertuju pada fakta bahwa produk akan dikirimkan secara gratis, baik di bagian atas halaman maupun di ringkasan pembayaran. Terlebih lagi, teksnya berwarna hijau, yang membuat notifikasi lebih menonjol. Tanggal pasti "pengiriman yang diharapkan" juga ditampilkan.
Tip #2: Desainnya sangat sederhana dan penggunaan yang sangat baik terbuat dari ruang putih. Pelanggan dapat dengan cepat memeriksa pesanan mereka, membuat perubahan yang diperlukan tanpa meninggalkan halaman, dan memverifikasi totalnya.
Tip #3: Kotak “Kupon dan Hadiah” tidak mencolok. Opsi penting untuk "mengambil di toko" juga disediakan tanpa mengalihkan perhatian dari CTA utama.
Tip #4: Kata "Aman" disertakan dalam CTA checkout.
Tip #5: Footer telah dihapus.

Apakah ada yang salah? Sementara Staples melakukan banyak hal dengan benar, satu masalah dengan desain keranjang ini adalah kesederhanaan header, yang tidak menyertakan menu atau formulir pencarian yang dapat diperluas. Jika perusahaan hanya menjual satu produk, ini mungkin solusi yang layak. Namun, untuk situs beberapa produk, selalu ada baiknya memberi pelanggan opsi untuk menjelajah lagi jika mereka mau.

3. Lakukan: Sears

Sears menawarkan banyak opsi tambahan – termasuk paket pembayaran, pengambilan di toko, opsi hadiah, dan promo. Keranjang mereka adalah contoh yang baik untuk pengecer yang ingin menggabungkan banyak elemen berbeda pada satu halaman tanpa merusak desain yang mencegah pengabaian keranjang belanja seluler.
Desain keranjang seluler Sears mengandung banyak elemen tetapi tetap sederhana.
Tip #1: CTA disertakan di bagian atas halaman di samping subtotal. Ikon kunci semakin membangun kepercayaan dan opsi untuk checkout menggunakan Paypal juga ditawarkan.
Tip #2: Sebagai item tiket tinggi, rencana pembayaran disertakan untuk menghilangkan keraguan pada tahap ini.
Tip #3: Penghematan penjualan termasuk dalam warna merah di bagian ringkasan pesanan, mendorong pelanggan untuk mengklik untuk checkout dengan membangun urgensi dan mengurangi keraguan.
Tip #4: Tautan disediakan untuk masuk ke skema loyalitas yang bertindak sebagai insentif lebih lanjut bagi pelanggan baru. Penting untuk dicatat bahwa ini bukan tautan untuk menyiapkan akun toko tanpa manfaat apa pun, yang akan lebih baik dimasukkan ke dalam formulir pembayaran.
Tip #5: Segel “checkout aman” disertakan di bagian bawah halaman.
Apakah ada yang salah? Hanya ada sedikit terlalu banyak, dan efeknya kemungkinan akan membuat perhatian beberapa pelanggan tercerai-berai. Tidak perlu menawarkan langganan majalah dan tautan ke program loyalitas di bagian bawah, misalnya.

4. Jangan: Vitacost

Meskipun Vitacost menggunakan banyak elemen yang dijelaskan di atas, implementasinya sering kali salah. Hasilnya adalah halaman keranjang yang dirancang dengan buruk yang kemungkinan akan mengalami peningkatan konversi keranjang belanja dengan beberapa penyesuaian kecil.
Vitacost menggunakan banyak elemen yang dijelaskan di atas tetapi implementasinya sering cacat.
Kesalahan #1: Penyertaan bilah pencarian menonjol yang membuat orang menjauh dari halaman keranjang. Sebaiknya sertakan ikon bilah pencarian (seperti pada contoh Amazon) untuk orang yang ingin melanjutkan penelusuran. Tapi jangan terlalu besar.

#Kiat pengoptimalan #keranjang seluler: Jangan sertakan bilah pencarian mencolok yang membuat orang menjauh dari keranjang. #ecommerce Klik Untuk Tweet
Kesalahan #2: Penyertaan otomatis produk “BOGO” yang tidak jelas (beli satu dapat setengah harga) yang dapat membingungkan atau mengganggu pelanggan.
KESALAHAN #3: Bilah kode promo yang mencolok . Ini mengalihkan perhatian dari CTA utama dan mendorong pelanggan untuk keluar dari troli untuk mencari promo secara online. Kotak promo harus terlihat tetapi tidak terlalu terlihat. Mereka tentu harus mengejar CTA.
Kesalahan #4: Biaya pengiriman ditetapkan sebagai “TBD”, yang menimbulkan keraguan (secara umum Anda harus menghindari singkatan)
Kesalahan #5: Footer terlalu besar. Apakah Vitacost ingin pelanggan menyelesaikan pembelian atau mengunduh aplikasi?
Kesalahan #6: Opsi produk – untuk menghapus atau menambah item – terlalu kecil dan sulit untuk disentuh.
Kesalahan # 7: Bilah mengambang, yang dapat dilihat tepat di bagian bawah tangkapan layar, memakan terlalu banyak ruang layar pada ponsel yang lebih kecil.

5. Jangan: Lonely Planet

Di mana halaman Staples secara efektif menggunakan desain minimal, Lonely Planet mengecualikan terlalu banyak elemen. Tidak ada fitur untuk mengurangi keragu-raguan dan membangun kepercayaan, tidak ada rekomendasi atau saran produk untuk meningkatkan nilai pembelian, dan banyak tombol yang sulit untuk diklik.
Lonely Planet mengecualikan terlalu banyak elemen. Mereka dibiarkan dengan banyak ruang yang dapat digunakan untuk meningkatkan cart ux.
Kesalahan #1: Ruang tidak digunakan dengan baik. Akan lebih baik jika keranjang mengisi seluruh halaman, dan memanfaatkan ruang putih, daripada memunculkan konten saat ini.
Kesalahan #2: Tidak ada informasi tentang pengiriman, diskon, atau opsi pembayaran yang disertakan. Ini kemungkinan akan mengurangi keraguan dan ketakutan pelanggan yang tidak pasti.
Kesalahan #3: Tidak ada saran produk terkait.
Kesalahan #4: Tombol untuk menambah atau mengurangi jumlah produk sangat kecil sehingga hampir tidak dapat diklik.
Kesalahan #5: CTA – “Lanjutkan ke Checkout” – tidak terlihat seperti tombol.
Kesalahan #6: Format pop-out menyulitkan untuk mengetuk CTA dari kiri. Biarkan pelanggan menggunakan kedua ibu jari mereka!

6. Jangan: Nike

Masalah utama dengan halaman Nike adalah cara berbagai elemen dimasukkan secara acak, dengan sedikit pemikiran yang jelas tentang bagaimana mereka dapat bekerja jika ditempatkan bersama atau pada titik yang berbeda pada halaman. Ada juga kebingungan tentang CTA.
Di halaman Nike, berbagai elemen telah dimasukkan secara acak.
Kesalahan #1: Diskon pengiriman hanya tersedia untuk anggota. Ini menambah gesekan yang tidak perlu dan kemungkinan akan bertindak sebagai disinsentif bagi pelanggan yang tidak ingin bergabung, yang akan berpikir bahwa mereka kalah. Tawarkan pelanggan opsi untuk masuk pada tahap checkout, bersama dengan opsi untuk mendaftar pelanggan baru. Halaman keranjang harus khusus untuk meninjau pesanan.

Kesalahan #2: Penggunaan dua CTA. Hampir selalu lebih baik untuk memiliki satu CTA di halaman keranjang karena Anda mencari tindakan tertentu. Satu-satunya alasan untuk menawarkan beberapa CTA adalah untuk memberi pelanggan opsi di antara opsi checkout yang berbeda. Akan lebih baik untuk menunjukkan formulir yang tepat (baik formulir login atau formulir alamat) setelah pengguna memberi Anda alamat emailnya.

Kesalahan #3: “Jenis pembayaran yang diterima” tidak tercantum di dekat CTA checkout. Sebaiknya sertakan lencana ini di halaman keranjang Anda, terutama jika Anda tidak setenar Nike, tetapi footer bukanlah tempatnya.

Kesalahan #4: Istilah “tamu” dapat menyebabkan kebingungan jika pelanggan tidak mengidentifikasi diri dengan cara itu (dapatkah Anda menjadi anggota jika berbelanja sebagai tamu?)

Menyelesaikan Desain Keranjang Belanja Seluler

Sebagian besar halaman keranjang dengan kinerja terbaik memiliki desain yang bersih dan sederhana, namun juga menyediakan jenis dan jumlah informasi yang tepat. Saat Anda mendesain ulang milik Anda sendiri, ingatlah bahwa tujuan halaman keranjang adalah agar pembeli meninjau dan mengonfirmasi pesanan mereka, menghapus item yang tidak perlu, dan menambahkan produk serupa. Tindakan lain yang diinginkan, seperti masuk ke akun mereka atau mendaftar, dapat dibiarkan di halaman checkout. Jadi, ingatlah tentang praktik terbaik keranjang belanja seluler ini dan teknik pengoptimalan keranjang belanja lainnya.

Dan ingat, pengujian terpisah adalah kuncinya! Gunakan taktik yang dijelaskan di sini untuk membentuk tes Anda sendiri dan buat komitmen untuk mengubah elemen dalam jangka panjang. Jika Anda melakukannya, Anda hampir pasti akan melihat peningkatan yang stabil dalam konversi Anda.

Dapatkan Daftar Periksa Pengoptimalan E-niaga 115-Point

Berdasarkan pengalaman delapan tahun, kami mengumpulkan semua wawasan teratas kami ke dalam satu buku: Daftar Periksa Pengoptimalan E-niaga dari Toko Online 7+ Gambar. Jika Anda ingin meningkatkan kinerja semua halaman Anda – dari beranda hingga checkout, ambil salinan Anda di sini.