eCommerce UX – Strategi dan Prinsip Desain Esensial

Diterbitkan: 2022-03-11

Karena 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.

Fase perjalanan pelanggan e-niaga ux
Fase perjalanan pengguna dalam desain situs web eCommerce .

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.

desain ux e-niaga untuk halaman arahan
Positioning merek menggunakan font, fotografi, dan salinan oleh Bang & Olufsen.

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.

ajakan bertindak e-niaga
Polaroid menunjukkan CTA untuk berbelanja hadiah di halaman beranda.

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.

Halaman arahan e-niaga seluler
Halaman arahan khusus untuk alat tulis pernikahan oleh Papier.

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.

bidang pencarian e-niaga
Implementasi pencarian oleh Apple.

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.

ux e-niaga - penemuan produk
Etsy membantu pengguna menemukan apa yang populer selain menampilkan kategori.

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.

Pemfilteran e-niaga seluler
Filter khusus kategori oleh ASOS.

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.

praktik terbaik e-niaga ux menampilkan tindakan utama dengan jelas
Lowe's menunjukkan tindakan utama "Tambahkan ke Keranjang" sebagai tombol hijau besar.

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.

ux e-niaga seluler - deskripsi produk
Deskripsi produk diatur dalam satu set bagian yang dapat diperluas di Myprotein.

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.

ecommerce ux - kebijakan pengiriman dan pengembalian
ASOS menunjukkan informasi pengiriman dan pengembalian dalam modal yang ditautkan dari halaman detail 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.

ulasan pelanggan ecommerce ux
Ulasan produk di Amazon.

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.

Tas belanja ux e-niaga seluler
Ikhtisar pesanan dan rincian rinci tentang The Modist.

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.

masuk ux e-niaga
Layar masuk Aesop dengan opsi "lanjutkan sebagai tamu".

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.

bilah kemajuan checkout ux e-niaga
Apple memiliki bilah kemajuan checkout langkah demi 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.

opsi pembayaran e-niaga
Metode pembayaran yang berbeda dalam proses checkout Scotch & Soda.

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.

konfirmasi pesanan ux e-niaga
Konsep email konfirmasi pesanan oleh Drew Christiano.

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