eCommerce UX – Strategi dan Prinsip Desain Esensial
Diterbitkan: 2022-03-11Karena lanskap ritel secara keseluruhan terus berkembang dan rantai bata-dan-mortir berjuang, pasar eCommerce siap untuk tumbuh. Pada tahun 2021, penjualan eCommerce global diperkirakan akan tumbuh menjadi lebih dari 4,48 triliun dolar, yang lebih dari dua kali lipat angka dari tahun 2017.
Pengecer dan desainer eCommerce yang sangat memperhatikan pengalaman pengguna dan mematuhi seperangkat standar prinsip desain UX eCommerce untuk alur belanja pelanggan dapat memanfaatkan pertumbuhan pasar ini dan melihat pengembalian finansial yang nyata.
Alur belanja adalah perjalanan pengguna umum yang, bila diterapkan dengan benar, menghasilkan lebih banyak pembelian impulsif, lebih sedikit pengabaian keranjang, dan konversi keseluruhan yang lebih tinggi.
Perjalanan pengguna meliputi:
- Penemuan situs web
- Cari dan jelajahi produk
- halaman produk
- Keranjang
- Periksa
- Konfirmasi
Artikel ini membahas poin-poin penting dari perjalanan pengguna ini dan bagaimana desainer eCommerce dapat membuat pengalaman pelanggan menyenangkan, lugas, dan bebas repot.
Penemuan Situs Web
Posisikan Merek dengan Jelas
Pengunjung membentuk kesan pertama situs web hanya dalam 50 milidetik. Situs web eCommerce perlu menarik perhatian pengguna dengan menunjukkan dengan jelas dan cepat apa yang dijualnya dan di mana itu cocok di pasar secara keseluruhan.
Misalnya, situs web pengecer perhiasan mewah kemungkinan besar akan terlihat dan terasa sangat berbeda dari situs untuk toko kotak besar dengan anggaran terbatas. Pengecer elektronik kelas atas Bang & Olufsen menyampaikan kualitas mereknya dengan menggunakan font yang elegan, palet warna yang canggih, dan gambar produk yang ramping.
Tampilkan Ajakan Bertindak yang Relevan
Saat pengguna tiba di halaman beranda, sambut mereka dengan konten tepat waktu dan ajakan bertindak (CTA) khusus. Gambar spanduk besar yang sesuai dengan musim saat ini atau acara tertentu bersama dengan CTA yang sesuai membantu pengguna pindah ke langkah berikutnya dalam proses belanja. Saat membuat CTA, hindari frasa umum seperti "mulai" yang tidak memberi tahu pengguna apa yang akan terjadi selanjutnya dengan jelas.
Polaroid menciptakan CTA yang efektif selama musim liburan dengan membantu pengguna yang berbelanja hadiah. Alih-alih menggunakan frasa umum, Polaroid menggunakan "Hadiah Toko", memperjelas bahwa pengguna akan dibawa ke suatu area di situs dengan saran hadiah.
Sesuaikan Halaman Arahan untuk SEO
Dengan menghubungkan istilah pencarian pengguna dari mesin pencari seperti Google ke halaman arahan tertentu, pengecer eCommerce dapat menangkap pengguna yang sedang dalam misi untuk menemukan produk tertentu.
Saat pengguna menelusuri sesuatu, ada kemungkinan besar mereka ingin membelinya. Membuat halaman arahan khusus untuk istilah pencarian produk umum meningkatkan peluang pengecer untuk mendapatkan penjualan (dan mungkin pelanggan baru). Perusahaan alat tulis Papier melakukannya dengan baik dengan laman yang dibuat khusus untuk undangan pernikahan yang muncul di hasil penelusuran Google.
Cari dan Jelajahi Produk
Menyediakan Pencarian Di Tempat
Meskipun mungkin tampak cukup mendasar, banyak situs masih tidak menawarkan pencarian umum di seluruh situs, atau jika memang demikian, itu tidak dioptimalkan dengan benar. Tetapi pencarian di tempat sangat penting untuk pengalaman belanja eCommerce yang solid.
Menurut Invesp, 60% dari pembelian online tidak impulsif. Orang sering tahu apa yang mereka cari, dan mengetik kueri mereka ke dalam bilah pencarian di situs web eCommerce—seperti nama produk atau nomor model—jauh lebih cepat daripada memilah-milah opsi menu.
Fitur tambahan seperti pencarian prediktif atau pelengkapan otomatis membantu pengguna melihat opsi dengan cepat. Apple menggunakan taktik ini dengan bidang pencarian yang diperbarui secara dinamis dengan tautan cepat ke produk dan pencarian yang disarankan populer.
Menginspirasi Pengunjung dalam Mode Penemuan
Sementara banyak pembeli memiliki item tertentu dalam pikiran untuk dibeli, tidak semua pengunjung yakin. Menurut Nielsen Norman, ada lima jenis pembeli eCommerce, salah satunya adalah “browser”. Browser tidak selalu mencari sesuatu yang spesifik. Sebaliknya, mereka dengan santai melihat sekeliling untuk melihat apakah mereka menemukan sesuatu yang menarik.
Situs web eCommerce dapat mendukung pembelanja dalam mode penemuan dengan menunjukkan kepada mereka produk baru atau terlaris dan memungkinkan mereka untuk melihat kategori produk dengan mudah dan cepat.
Etsy melibatkan browser dengan menunjukkan kepada mereka apa yang sedang populer saat ini serta dengan jelas menampilkan kategori produk secara keseluruhan, baik di navigasi maupun di konten halaman beranda.
Gunakan Filter dan Pencarian Bersegi
Pencarian faceted menggunakan pemfilteran dan mengambil satu langkah lebih jauh dengan memungkinkan pengguna untuk memilih beberapa atribut sekaligus.
Saat membuat filter, daripada membatasi opsi pada kriteria umum seperti ukuran, warna, atau harga, tambahkan filter khusus untuk kategori khusus untuk produk yang dijual. Filter tersebut dapat berupa hal-hal seperti fit atau kain untuk pakaian, font, atau acara untuk undangan, dan ukuran layar atau prosesor untuk gadget.
Setelah pengguna menerapkan filter, itu harus segera terlihat di UI filter apa yang telah diterapkan. Pengguna juga harus dapat dengan mudah menghapus filter yang diterapkan.
ASOS menunjukkan rentang filter yang terperinci untuk setiap kategori dan dengan jelas menunjukkan filter mana yang telah diterapkan.
Halaman Produk
Menampilkan Tindakan Utama dengan Jelas
Pengguna seharusnya tidak pernah bertanya-tanya bagaimana melakukan sesuatu yang penting, seperti menempatkan produk di keranjang belanja mereka. Tampilkan tindakan utama seperti "tambahkan ke keranjang" atau "beli sekarang" sebagai tombol, dan letakkan di lokasi yang menonjol di layar dibandingkan dengan konten lainnya.
Pengecer perbaikan rumah Lowe's memberi tahu pengguna cara menambahkan produk ke troli mereka dengan tombol hijau besar sebagai salah satu hal yang paling menonjol di halaman.

Memberikan Informasi Produk Detil
Tampilkan foto profesional berkualitas tinggi dan deskripsi terperinci untuk membantu pembeli memahami produk.
Gunakan pengungkapan progresif dan hierarki visual untuk memberi pengguna jumlah informasi yang tepat saat mereka membutuhkannya. Beri mereka informasi terpenting segera, lalu tambahkan detail lebih jauh ke bawah halaman untuk pengguna yang ingin mempelajari lebih lanjut.
Bagi deskripsi panjang menjadi beberapa bagian; misalnya, gambaran umum, ukuran/dimensi, fitur detail, dan informasi pengiriman. Menggunakan navigasi luaskan/ciutkan untuk bagian tambahan, seperti halnya Myprotein, membantu menjaga pengguna agar tidak merasa kewalahan.
Bangun Kepercayaan Pelanggan
Hindari membuat pelanggan menebak-nebak tentang opsi pengiriman, ketersediaan produk, dan kebijakan pengembalian. Memastikan semua informasi ini tersedia, yang membangun kepercayaan dan kepercayaan pelanggan dan dapat membantu mendorong pelanggan yang ragu-ragu untuk membeli. Mengetahui apakah dan bagaimana mereka dapat mengembalikan sesuatu membantu mereka membuat keputusan yang lebih tepat.
ASOS dengan jelas menampilkan informasi pengiriman dan pengembalian yang penting pada setiap halaman produk menggunakan modal yang diakses dari tautan di bawah setiap nama produk.
Tambahkan Bukti Sosial
Bukti sosial adalah konsep yang berarti orang dipengaruhi oleh perilaku orang lain. Konsep ini merupakan bagian dari prinsip persuasi Dr. Robert Cialdini (seorang peneliti terkemuka dalam ilmu pengaruh) dan telah terbukti berhasil.
Pengecer eCommerce dapat meningkatkan kepercayaan pembeli dengan bukti sosial dengan menambahkan peringkat, ulasan, dan komentar pelanggan. Produk di Amazon sering memiliki ribuan ulasan, dan pengguna dapat mengurutkannya berdasarkan tingkat peringkat bintang.
Kereta Belanja
Tampilkan Ringkasan Pesanan yang Jelas
Sebelum pembeli menyelesaikan pembeliannya, tunjukkan kepada mereka ringkasan pesanan yang jelas dan ringkas yang mencakup barang yang dibeli, jumlah dan harga setiap barang, dan total pesanan. Izinkan pengguna untuk mengedit item apa pun yang mungkin ingin mereka perbarui atau hapus, dan hindari kejutan biaya pengiriman dengan menyertakan ringkasan pengiriman.
Modist menunjukkan ringkasan pesanan yang jelas dan tanda terima. Pengguna dapat dengan mudah mengelola item yang telah mereka pilih (pindah ke daftar keinginan, hapus, ubah kuantitas) dan lihat ringkasan dan rincian rincian pengiriman dan pajak.
Periksa
Biarkan Pengguna Check Out sebagai Tamu
Pembelian impulsif mewakili hampir 40% dari semua uang yang dihabiskan di eCommerce. Hilangkan rintangan ekstra untuk membuat akun atau masuk dengan mengizinkan pembeli untuk check out sebagai tamu. Selama proses check-out sebagai tamu, integrasi sederhana untuk membuat akun dapat mengubah beberapa tamu menjadi pengguna akun.
Aesop memungkinkan pengguna untuk dengan mudah check out sebagai tamu sambil juga memberikan opsi untuk masuk atau mendaftar. Menyediakan beberapa opsi dalam satu formulir menghilangkan kemungkinan pemblokir pembelian bagi mereka yang ingin check out dengan cepat, tetapi juga memberi pengguna yang ingin mendaftar kesempatan untuk melakukannya.
Berikan Umpan Balik Visual Selama Proses Checkout
Menyertakan bilah kemajuan membantu pelanggan memahami di mana mereka berada dalam proses checkout dan berapa banyak yang tersisa untuk diselesaikan.
Apple menunjukkan kepada pengguna setiap langkah dalam proses dan memungkinkan mereka untuk menavigasi di antara langkah-langkah menggunakan tautan kemajuan. Kemajuan disimpan, sehingga pengguna tidak kehilangan apa pun saat berpindah antar langkah.
Gunakan Metode Pembayaran Umum
Selain mengizinkan pembayaran melalui kartu kredit utama, menambahkan metode pembayaran populer lainnya seperti PayPal dapat meningkatkan konversi untuk pembeli yang tidak ingin menyerahkan informasi kartu kredit mereka.
Di Belanda, iDEAL sering digunakan untuk transaksi eCommerce, dan 60% konsumen Belanda telah menggunakannya dalam pembelian baru-baru ini. Pengecer pakaian Scotch & Soda memungkinkan pembeli untuk check out dengan iDEAL dan PayPal.
Konfirmasi pesanan
Tampilkan Konfirmasi Pesanan Terperinci Setelah Pembelian
Setelah pelanggan menyelesaikan pembelian, beri mereka konfirmasi yang mencakup pemrosesan pembayaran yang berhasil dan detail pengiriman seperti alamat, metode pengiriman, dan tanggal pengiriman yang diharapkan.
Konsep email konfirmasi untuk Amazon ini menunjukkan nomor pesanan, memberikan gambaran umum tentang barang yang dibeli, dan memberikan tanggal pengiriman dan beberapa rekomendasi untuk pembelian di masa mendatang.
Kirim Pembaruan Pesanan dan Pengiriman melalui Email
Selain layar konfirmasi, mengirim email konfirmasi membantu pengguna tetap mendapat informasi tentang status pembelian mereka. Meskipun semua pelanggan harus menerima konfirmasi email, ini sangat membantu dalam kasus di mana pengguna telah check out sebagai tamu dan tidak memiliki akun di situs web untuk memeriksa pesanan mereka sebelumnya.
Jika ada perubahan dengan pesanan, seperti keterlambatan pengiriman, kirim pembaruan. Setelah barang dikirim, kirim pembaruan email dengan nomor pelacakan.
Ringkasan
Prinsip-prinsip dalam artikel ini memberikan dasar titik kontak perjalanan pengguna yang harus diikuti oleh setiap desainer eCommerce, tetapi ini baru permulaan. Untuk pembelajaran tambahan tentang lebih spesifik tentang eCommerce UX seluler, kunjungi eCommerce untuk Pengalaman Seluler atau baca lebih lanjut tentang desain halaman arahan Cara Merancang Halaman Arahan yang Efektif.
Pasar eCommerce yang berkembang mewakili banyak peluang bagi pengecer. Mereka yang menyadari pentingnya UX dan mengikuti praktik terbaik untuk perjalanan pengguna eCommerce dapat tetap kompetitif dan secara positif memengaruhi laba mereka.
• • •
Bacaan lebih lanjut di Blog Desain Toptal:
- Tren eCommerce Terkemuka dan Pengaruhnya pada Desain (dengan Infografis)
- eCommerce UX untuk Pengalaman Seluler
- eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
- Panduan Utama untuk Desain Situs Web eCommerce
- eCommerce Didesain Ulang: Bagaimana Perubahan Kecil Membuat Peningkatan UX Besar