Cara Mendesain Alur Checkout E-niaga yang Mengonversi

Alur checkout e-niaga Anda adalah tempat uang berada. Pikirkan tentang itu. Pengunjung acak meninggalkan situs sebelum memasuki corong checkout. Pembeli yang termotivasi datang ke sini untuk menyelesaikan pesanan mereka.

Setiap peningkatan desain kecil di UX checkout Anda biasanya berdampak langsung pada berapa banyak uang yang dihasilkan situs Anda.

Situs e-niaga yang saya analisis baru-baru ini memiliki halaman pembayaran di mana 84,7% lalu lintas melanjutkan untuk membeli. Saya menghitung bahwa jika kami dapat meningkatkannya hingga 90%, itu akan menghasilkan 461 pesanan lebih banyak dan tambahan $87.175 per bulan—pertumbuhan pendapatan 23,9%. Keuntungan "kecil" bisa sangat besar.

Jadi, pertanyaannya adalah, “Bagaimana kami membuat lebih banyak orang melalui alur pembayaran kami dan menyelesaikan pembelian? Taktik khusus bergantung pada situs Anda, tetapi prinsip untuk menemukan jawabannya bersifat universal.

Kerangka kerja untuk memikirkan pembayaran e-niaga: Model Perilaku Fogggg

Intinya adalah ini: Perilaku = Motivasi x Kemampuan x Pemicu.

Berikut modelnya:

Anda ingin membidik bagian kanan atas grafik—motivasi tinggi, mudah dilakukan, pemicu tersedia. Jika Anda memiliki motivasi tinggi dan kemampuan rendah (sulit dilakukan), yang akan Anda dapatkan adalah frustrasi. Jika motivasinya rendah tetapi mudah dilakukan (misalnya membuang sampah), Anda akan terganggu.

Bagaimana Amazon menggunakan Model Perilaku Fogg

Ketika Amazon mengirimi Anda email dengan promosi produk, itu adalah motivasi dan pemicu. Orang-orang mengklik tautan dan membuka halaman produk. Mereka membaca salinan dan ulasan, dan melihat gambar, yang semuanya meningkatkan motivasi. “Tambahkan ke Keranjang” adalah pemicu untuk memulai proses checkout.

Bagaimana dengan kemampuan? Seberapa mudah menyelesaikan proses checkout? Di sinilah Amazon menendang pantat. Anda hanya perlu mengetikkan kata sandi Anda dan mengklik beberapa kali. Alur checkout bebas gesekan.

Berikut adalah alur kerja sebenarnya pada aplikasi mobile commerce Amazon:

Selesai dan selesai. Mari kita telusuri seluruh alur pembayaran selangkah demi selangkah untuk melihat apa yang membuatnya bagus.

Catatan: Anda bisa mendapatkan banyak tips lain untuk e-niaga dari laporan pedoman e-niaga komprehensif kami (247 pedoman khusus untuk e-niaga).

Cara Mendesain Fungsi “Tambahkan ke Keranjang” dan Halaman Keranjang Belanja

Semuanya dimulai dengan orang-orang menambahkan sesuatu ke keranjang. Saat pengunjung menambahkan item pertama ke keranjang mereka, mereka tidak menjelajah—mereka sedang berbelanja.

Seperti Apa Seharusnya "Tambahkan ke Keranjang"?

Ketika orang menambahkan sesuatu ke keranjang di halaman produk Anda, apa yang seharusnya terjadi?

Saya seharusnya sangat jelas bahwa mereka telah menambahkan sesuatu ke troli. Konfirmasi yang jelas. Sungguh menggelikan betapa banyak situs yang mengacaukan ini baik dengan tidak menampilkan konfirmasi yang tepat atau dengan menampilkan animasi kecil atau teks konfirmasi kecil yang sulit untuk diperhatikan.

Anda tidak dapat melewatkan penambahan keranjang di Bonobos. Setelah Anda mengklik “Tambahkan ke Keranjang”, gerobak muncul dengan animasi kecil, yang bagus karena mata manusia bereaksi terhadap gerakan. Ini adalah isyarat visual halus yang menunjukkan pergeseran dari pengunjung ke pembeli.

Isi keranjang bersama dengan tombol "Checkout" juga tetap terlihat sampai pengguna mengklik di tempat lain. Itu bagus. Saya akan mengubah warna tombol "Checkout" menjadi sesuatu selain biru—itu tidak cukup menonjol. Hal utama dalam hierarki visual adalah tombol "Tambahkan ke Keranjang", tetapi produk sudah ada di keranjang.

ASOS menunjukkan animasi kecil juga. Mereka membuka isi keranjang, lalu melipatnya setelah beberapa detik. Tombol "Tambahkan ke Tas" juga berubah menjadi "Ditambahkan," yang merupakan konfirmasi bagus untuk pembeli:

Saya akan menjaga isi keranjang tetap terbuka sampai pengguna membuat pilihan dengan mengklik di suatu tempat. Dengan cara ini, tombol "Checkout" terus menatap wajah mereka.

Meskipun kami selalu ingin mereka membeli lebih banyak barang, meningkatkan proses untuk membeli bahkan satu barang pun dapat menghasilkan peningkatan besar. Mendorong mereka ke kasir selalu merupakan ide yang bagus.

Setelah produk ada di keranjang, lalu apa?

Ada dua pendekatan utama:

1. Tampilkan konfirmasi "tambah keranjang" dan pertahankan pengguna di halaman yang sama. Kelebihan: Orang tidak meminta untuk pindah ke halaman lain, jadi tidak ada kejutan. Mereka mungkin juga mempertimbangkan untuk menambahkan lebih banyak item ke keranjang sebelum check out. Cons: Mereka sudah memiliki produk yang sekarang mereka lihat di keranjang. Akan lebih berguna bagi Anda jika mereka melihat barang lain yang mungkin ingin mereka beli.
2. Transfer pengguna ke halaman keranjang. Kelebihan: Anda membawa mereka selangkah lebih dekat untuk melakukan pembayaran. Ini juga merupakan peluang bagus untuk membuat penawaran upsell. Cons: Anda mungkin kehilangan memaksimalkan “item per cart.”

Amazon membawa Anda ke halaman keranjang, mengonfirmasi bahwa Anda menambahkan produk ke keranjang, dan menunjukkan peningkatan penjualan. Apa yang dilakukan Amazon dengan baik adalah mengecilkan isi keranjang, jadi peningkatan penjualan menonjol:

Keseimbangan yang tepat dari strategi potensial tergantung pada industri dan tujuan Anda, dan Anda pasti ingin menguji ini.

Metrik yang perlu diingat:

• Nilai transaksi rata-rata;
• Jumlah rata-rata per transaksi.

Kami tidak ingin meningkatkan jumlah transaksi saja tetapi juga jumlah yang dikeluarkan untuk setiap transaksi.

Tampilkan isi keranjang dengan baik

Prinsip utama untuk menampilkan isi keranjang secara efektif adalah kejelasan dan kontrol.

• Kejelasan. Sangat mudah dan jelas untuk memahami apa yang ada di keranjang dan biaya akhir, termasuk pengiriman dan pajak. Biaya kejutan di telepon membuat orang meninggalkan gerobak.
• Kontrol: Sangat mudah untuk melakukan perubahan, seperti memperbarui jumlah atau menghapus produk.

ASOS memiliki pandangan yang baik tentang halaman keranjang:

Apa yang mereka dapatkan dengan benar:

• foto produk;
• Nama dan harga produk;
• Kemampuan untuk menghapus, menyimpan untuk nanti, atau mengubah detail seperti ukuran;
• Tunjukkan jenis pembayaran yang mereka terima;
• Tunjukkan harga total dan konfirmasi pengiriman gratis;
• Hapus ajakan bertindak ke "Checkout";
• Kurangi ketidakpastian dengan menyorot “Pengembalian mudah.”

Indochino memiliki pendekatan minimalis yang menyenangkan untuk menyajikan isi keranjang. Meskipun demikian, halaman tersebut masih memiliki beberapa masalah, seperti kotak kupon yang menonjol dan ketidakmampuan untuk mengubah jumlah:

Dapatkan hierarki visual dengan benar

Hal nomor satu dalam hierarki visual adalah melanjutkan ke kasir. (Uji CTA yang berbeda.). Harus ada dua ajakan bertindak: satu di atas dan satu di bawah keranjang.

Sesuatu seperti ini—dua tombol checkout jelas terlihat:

Modcloth telah meningkatkan halaman ini sejak terakhir kali kami meninjaunya. Sebelumnya, perbarui kuantitas yang diperlukan pengetikan. Sekarang, Anda dapat menggunakan stepper untuk menambah atau mengurangi kuantitas.

Perhatikan bahwa Modcloth juga menawarkan opsi PayPal. Sementara kebanyakan orang lebih suka membayar dengan kartu kredit, menawarkan 1-2 metode pembayaran alternatif (misalnya PayPal, Amazon) adalah ide yang bagus dan telah terbukti membantu konversi. Namun, terlalu banyak pilihan itu menyakitkan.

Modcloth juga mengingatkan Anda bahwa mereka memiliki pengembalian gratis dan pengiriman gratis untuk pesanan di atas $75.

Jangan membuat kupon menonjol

Saat orang melihat kolom “Masukkan kode kupon di sini”, mereka merasa kurang istimewa. “Kenapa aku tidak punya?” Banyak yang pergi ke Google untuk menemukan kupon; banyak yang tidak pernah kembali. Meninggalkan situs untuk mencari kupon adalah alasan umum pengabaian keranjang belanja.

Jadi, ini bukan ide yang bagus:

Alih-alih, miliki tautan teks yang bertuliskan “Punya kupon?” atau sesuatu yang serupa. Saat seseorang mengklik tautan, buat kolom input—seperti yang di atas—muncul. Tautan teks kurang menonjol, sehingga lebih sedikit orang yang akan memperhatikannya.

Pelanggan yang sudah memiliki kode kupon akan mencari cara untuk memasukkannya. Kecuali Anda menyembunyikannya dengan sangat baik, mereka akan menemukannya dan dapat menerapkan kode kupon mereka.

Ingatkan pembeli tentang barang bagus: pengiriman, pengembalian, dan keamanan

Kapan mereka akan mendapatkan barangnya? Berapa pengirimannya. Ini gratis? Apakah transaksi akan aman? Ingatkan orang.

Berikut adalah contoh yang menunjukkan tiga pesan utama di bawah tombol checkout, yang juga mengatakan “Bayar dengan Aman Sekarang”:

Kereta gigih FTW

Ketika orang menambahkan sesuatu ke troli, jangan biarkan isi troli kedaluwarsa. Gunakan email pengabaian keranjang dan iklan penargetan ulang untuk membawa orang kembali minggu depan atau bulan depan sehingga mereka dapat melanjutkan dari tempat terakhir mereka tinggalkan.

Proses pendaftaran: Untuk membuat akun atau tidak?

Banyak situs e-niaga ingin pembeli mendaftar sebelum mereka membeli. Beberapa bahkan memaksa pendaftaran (yaitu tidak mungkin untuk membeli tanpa mendaftar). Singkat cerita: Jangan lakukan itu. Itu menyakitkan konversi. Banyak.

Satu dari empat meninggalkan pembelian online karena pendaftaran paksa. Pendaftaran paksa adalah bagian dari "sindrom pemasar serakah." Sangat mudah untuk memahami mengapa pemasar e-niaga ingin melakukannya—mereka berharap pengguna "terkunci" dan akan berbelanja lebih banyak karena mereka memiliki akun.

Apakah itu benar - benar terjadi? Bisa aja. Berapa banyak situs web tempat Anda memiliki akun terdaftar? Apakah Anda sekarang merasa setia kepada mereka karena alasan itu? Saya yakin Anda belum masuk ke sebagian besar dari mereka lebih dari sekali.

Inilah cerita bagus tentang pendaftaran paksa, yang diceritakan oleh guru kegunaan Jared Spool:

Sulit membayangkan bentuk yang bisa lebih sederhana: dua bidang, dua tombol, dan satu tautan. Namun, ternyata formulir ini mencegah pelanggan membeli produk dari situs e-commerce besar, hingga $300.000.000 setahun. Yang lebih buruk lagi: para perancang situs tidak tahu bahwa ada masalah.

Bentuknya sederhana. Bidangnya adalah Alamat Email dan Kata Sandi. Tombolnya adalah Login dan Daftar. Tautannya adalah Lupa Kata Sandi. Itu adalah formulir login untuk situs tersebut. Ini adalah bentuk yang ditemui pengguna sepanjang waktu. Bagaimana mereka bisa memiliki masalah dengan itu?

Masalahnya bukan tentang tata letak formulir seperti di mana formulir itu tinggal. Pengguna akan menemukannya setelah mereka mengisi keranjang belanja mereka dengan produk yang ingin mereka beli dan menekan tombol Checkout . Itu terjadi sebelum mereka benar-benar dapat memasukkan informasi untuk membayar produk.

Tim melihat formulir tersebut memungkinkan pelanggan tetap untuk membeli lebih cepat. Pembeli pertama kali tidak akan keberatan dengan upaya ekstra untuk mendaftar karena, bagaimanapun, mereka akan kembali lagi dan mereka akan menghargai kemanfaatan dalam pembelian berikutnya. Semua orang menang, kan?

Kami melakukan tes kegunaan dengan orang-orang yang perlu membeli produk dari situs tersebut. Kami meminta mereka untuk membawa daftar belanja mereka dan kami memberi mereka uang untuk melakukan pembelian. Yang perlu mereka lakukan hanyalah menyelesaikan pembelian.

Kami salah tentang pembeli pertama kali. Mereka keberatan mendaftar. Mereka tidak suka harus mendaftar ketika mereka menemukan halaman tersebut. Seperti yang dikatakan seorang pembelanja kepada kami, “Saya di sini bukan untuk menjalin hubungan. Aku hanya ingin membeli sesuatu.”

Dengan menghapus pendaftaran paksa, mereka meningkatkan penjualan sebesar $300 juta.

Tim Spool juga menemukan bahwa kebanyakan orang memiliki banyak akun dalam sistem. Orang-orang lupa bahwa mereka sudah memiliki akun. Mereka mendapat pesan kesalahan saat mencoba membuatnya dengan email standar, jadi mereka harus menggunakan email alternatif untuk membuat lebih banyak akun.

Apa yang harus Anda lakukan sebagai gantinya? Selalu tawarkan pembayaran tamu. Anda dapat mengerjakan pendaftaran setelah penjualan:

• Bahkan tidak menyebutkan kata "Daftar." Ucapkan "Pelanggan Baru" atau istilah serupa.
• Setelah mereka check out, tawarkan pembuatan akun di halaman “Terima Kasih”. Anda sudah memiliki nama, email, dan alamat mereka dari checkout, jadi tidak perlu lebih dari beberapa klik untuk membuat akun. Mintalah kata sandi yang mereka inginkan (atau berikan opsi untuk membuatnya secara otomatis) dan konfirmasikan izin untuk membuat akun mereka.

Menurut pengalaman saya, pendekatan paling umum di situs e-niaga masih kurang optimal. Secara keseluruhan, itu terlalu sibuk, dan meminta pelanggan baru untuk membuat pilihan, yang menyebabkan keraguan:

Ada beberapa opsi yang jauh lebih disukai.

Opsi pendaftaran checkout 1

Beri pengguna dua pilihan, baru atau kembali:

Asos tidak selalu memiliki pendekatan ini. Ini adalah halaman pendaftaran mereka sebelumnya, yang memiliki tiga pilihan:

Membunuh pendekatan ini dan beralih ke versi yang disederhanakan mengurangi pengabaian keranjang sebesar 50%!

Ini masih (pada dasarnya) pendaftaran paksa, tetapi dikemas secara berbeda. Ini juga lebih mudah dengan opsi login sosial. Masalah kegunaan yang khas dikurangi menjadi hanya beberapa klik.

Opsi pendaftaran checkout 2

Pengabaian keranjang belanja adalah masalah utama. Meminta email Anda di awal memudahkan untuk memulai proses pemulihan keranjang yang ditinggalkan. Juga, ada dua pilihan mudah—tidak ada kelebihan sensorik:

Opsi pendaftaran checkout 3

Cara hebat lainnya adalah dengan melewatkan layar masuk sama sekali. Sebagai gantinya, cukup default ke checkout tamu. Orang dengan akun yang ada dapat masuk melalui tautan, dan klien baru dapat membuat akun setelah mereka membayar:

Apa yang dilakukan dengan baik oleh Diamond Candles bahkan tidak terlihat. Mereka membuat akun untuk Anda secara otomatis tetapi tidak menyebutkannya. Katakanlah Anda melalui empat checkout tamu dengan alamat email yang sama, lalu akhirnya memutuskan untuk membuat akun (masukkan kata sandi, pada dasarnya).

Semua pesanan Anda sebelumnya dengan alamat email tersebut digabungkan untuk akun ini, jadi akun Anda yang baru dibuat dilengkapi dengan riwayat pesanan yang tepat.

Opsi pendaftaran checkout 4

Dengan opsi ini, pendaftaran akun ditawarkan bersama dengan insentif setelah menyelesaikan pembelian. Berikut ini contoh dari Speedo:

Orang-orang tidak terganggu dengan pendaftaran akun apa pun sampai mereka membayar Anda uang. Jika Anda harus memilih, apa yang lebih penting bagi Anda: pendaftaran akun atau pembelian?

Biasanya, halaman "terima kasih" tidak terlalu berguna, tetapi tidak demikian di sini. Mereka memberi Anda tawaran yang mudah: Masukkan kata sandi dan dapatkan kupon (ditambah pelacakan pesanan, pembelian lebih cepat, dll.). Persentase pembuatan akun untuk pengguna baru di sini sering kali lebih dari 75%.

Halaman Checkout E-niaga

Ini adalah halaman uang. Setiap peningkatan pada halaman checkout akhir Anda akan membuat perbedaan yang bagus untuk rekening bank Anda. Berikut adalah beberapa prinsip yang akan membantu Anda membuat langkah terakhir yang lebih baik dalam alur pembayaran Anda.

Minta info kartu kredit terakhir

Minta orang melengkapi informasi pengiriman sebelum mereka masuk ke penagihan. Ini menempatkan prinsip-prinsip Komitmen dan Konsistensi Cialdini ke dalam tindakan. Begitu orang mulai melakukan sesuatu, mereka merasa harus menyelesaikannya.

Mereka sudah diminta untuk memasukkan nama, email, dan info pengiriman, yang idealnya sama dengan alamat penagihan, jadi mereka tidak perlu mengetiknya lagi.

Prinsip yang sama, kadang-kadang disebut teknik foot-in-the-door, berlaku untuk bidang formulir. Mulailah dengan bidang yang lebih mudah terlebih dahulu, seperti nama. Kolom nomor kartu kredit adalah yang “paling sulit”, jadi harus berada di urutan terakhir.

Inilah yang tidak boleh Anda lakukan:

Ini lebih baik. (Anda sampai di sini dari halaman pengiriman.)

Yang baik: Ini memiliki aliran langkah 1-2–3 yang jelas. Bidang nama ada sebelum detail kartu, dan alamat penagihan (jika sama dengan pengiriman) tidak perlu dimasukkan lagi.

Yang buruk: CTA utama adalah "Simpan & Lanjutkan." Terus dimana ? Itu harus spesifik, seperti "Lanjutkan untuk Meninjau," atau apa pun tindakan selanjutnya.

Gunakan formulir pembayaran yang terlihat seperti kartu kredit asli

Tambahkan sentuhan kehidupan nyata dengan merancang formulir pembayaran dengan cara skeuomorphic ini:

Anda bisa mendapatkan antarmuka untuk ini yang disebut Skeuocard secara gratis(!) untuk diimplementasikan pada sistem Anda. Coba demo di sini.

Jadikan proses pembayaran terlihat aman

Keamanan menjadi perhatian serius. Selain benar-benar membuat pembayaran aman dengan SSL, beri tahu orang-orang tentang hal itu. Ini adalah contoh formulir yang dibuat agar terlihat aman:

Beberapa alasan mengapa ini berhasil:

• Warna latar belakang yang berbeda untuk bidang nomor kartu kredit.
• logo SSL.
• Pernyataan tertulis: “Pembayaran kartu kredit yang aman. Ini adalah pembayaran terenkripsi SSL 128-bit yang aman.”
• Penjelasan untuk kedaluwarsa dan kode keamanan.

Perhatikan bahwa jika audiens Anda tidak paham teknologi, mereka mungkin tidak tahu apa itu SSL atau HTTPS, jadi bicaralah secara sederhana.

Simpan kartu kredit di sistem Anda

Tentu, Anda harus berurusan dengan kepatuhan PCI, dan ada risiko diretas, tetapi Anda akan menghasilkan lebih banyak uang dari pengguna yang kembali. Ketika orang tidak perlu memasukkan info penagihan mereka, pembelian menjadi proses sekali klik.

Amazon membunuhnya sebagian besar karena gesekan untuk pembeli yang kembali hampir sepenuhnya dihilangkan! Alur checkout hampir tidak mengalir—ini adalah peristiwa sekali klik.

Pengunjung yang kembali lebih cenderung membeli daripada pengunjung baru, tetapi itu tidak seberapa dibandingkan dengan pembeli yang kembali . Permudah mereka.

Kesimpulan

Mulai upaya pengoptimalan e-niaga Anda di alur pembayaran. Keuntungan relatif di sini akan menghasilkan jumlah absolut yang sangat bagus.

Untuk meningkatkan UX proses checkout Anda:

• Buat fungsi "Tambahkan ke Keranjang" menjadi jelas.
• Memudahkan pengunjung untuk mengubah atau menghapus item keranjang.
• Sederhanakan proses pendaftaran—biarkan pembeli baru mendaftar setelah pembelian.
• Pada halaman checkout, mintalah informasi yang paling mudah terlebih dahulu.