105 Tips UX E-niaga: Cara Merayu Pengunjung untuk Membeli

Diterbitkan: 2022-02-20

Setiap hari orang mengunjungi toko Anda dan pergi karena mereka tidak dapat menemukan apa yang mereka inginkan.

Anda membutuhkan lebih dari sekadar peringkat teratas di Google. Orang harus dapat menavigasi ke produk yang mereka inginkan dan cukup mempercayai Anda untuk membeli. UX (pengalaman pengguna) e-niaga Anda harus berfokus pada membangun kepercayaan pengunjung Anda dengan membantu mereka menyelesaikan tujuan mereka.

Ecommerce UX Guide

Menurut Nielson Norman Group, sebuah firma riset pengalaman pengguna, ada lebih dari 800 praktik terbaik untuk kegunaan e-niaga. Kecuali Anda memiliki miliaran dolar untuk dibelanjakan pada pengembangan, Anda tidak akan memenuhi setiap pedoman. Posting ini diisi dengan tips dan contoh sehingga Anda dapat meningkatkan desain UX e-niaga Anda dan mendapatkan lebih banyak konversi.

Mari kita uraikan praktik terbaik dasar menurut jenis halaman. Lihat artikel ini untuk tips tentang ux seluler.

Sembunyikan Panduan UX E -niaga
Beranda Halaman Kiat UX yang Membangun Kepercayaan Secara Cepat
Navigasi: Landasan UX
Halaman Kategori: Dapatkan Pembeli Satu Langkah Lebih Dekat
Halaman Daftar Produk: Menginformasikan dan Membangun Keyakinan
Halaman Produk: Tempat SEO, UX, dan Penjualan Bertemu
Proses Checkout: Dibangun Untuk Kepercayaan
Bagaimana Situs Anda Stack Up?

Beranda Halaman Kiat UX yang Membangun Kepercayaan Secara Cepat

Halaman beranda Anda mendapatkan lalu lintas terbanyak. Tunjukkan bahwa Anda menjual produk. Pikirkan halaman rumah Anda sebagai jendela ke toko Anda. Pikirkan Macy di Magnificent Mile. Hiasi halaman rumah Anda dengan produk dan gambar terbaik Anda. Satu hal yang tidak pernah Anda lihat di Macy's adalah gaun-gaun berbeda yang disapu satu per satu di jendela. Saya berbicara tentang slider di sini. Jika Anda harus menggunakannya, pastikan mereka ramah pengguna.

Praktik Terbaik Area Pahlawan

Area pahlawan Anda (juga disebut area unggulan) adalah real estat paling menonjol di halaman beranda Anda. Anda hanya memiliki 50 milidetik untuk meninggalkan kesan yang baik, berikut adalah cara menghitungnya.

UX-Best-Practices-LL-Bean-Home
LL Bean memiliki banyak produk, tetapi foto-foto yang rapi dan salinan yang ringkas membuatnya mudah untuk menavigasi lini produk utama mereka.
Hal-hal yang harus dilakukan Hero Area
  1. Gunakan desain yang sederhana dan tidak berantakan. Gunakan kata-kata sesedikit mungkin.
  2. Hilangkan segala sesuatu yang tidak berdampak. Misalnya, posting blog terbaru Anda.
  3. Gunakan antrean visual seperti warna atau panah untuk memusatkan perhatian pada satu ajakan bertindak.
  4. Memudahkan orang untuk mengidentifikasi diri. Apakah Anda menjual jaket mahal untuk wanita?
UX-Best-Practices-People-Version
Area Pahlawan Jangan
  1. Menghias. Berputar, berkilau, dan simbol tidak berarti lainnya menambah beban kognitif dan mengalihkan perhatian pelanggan Anda.
  2. Memiliki konten usang seperti promosi dari minggu lalu atau bahkan bulan lalu. Anda akan langsung kehilangan kredibilitas.
  3. Buat area berantakan dengan terlalu banyak pesan atau promosi.
  4. Memiliki penggeser atau korsel yang maju secara otomatis.
  5. Tekankan produk yang tidak mewakili keseluruhan campuran Anda.

Navigasi Halaman Beranda

Saat orang mengunjungi situs Anda, Anda ingin membantu mereka menemukan tujuan mereka. Menurut pakar konversi, Tim Ash, fokus utama halaman beranda Anda adalah menyediakan navigasi tingkat kategori. Ikuti petunjuk ini untuk membantu pengunjung menemukan apa yang mereka cari.

UX-Best-Practices-Home-Page-Macys
Navigasi Halaman Beranda Lakukan
  1. Berikan pengunjung "tampilan 30.000 kaki" tentang apa yang dijual situs Anda sehingga mereka dapat menelusuri kategori tertentu.
  2. Tambahkan alat atau panduan pembelian yang paling sering Anda gunakan.
  3. Berikan tautan ke halaman kebijakan pengembalian, layanan pelanggan, pengiriman, dan privasi.
Navigasi Halaman Beranda Jangan
  1. Asumsikan Anda tahu apa yang dicari orang.
  2. Jam setiap kategori dan subkategori di halaman rumah Anda.
  3. Mendorong promosi tingkat produk. Jika Anda hanya memiliki beberapa produk, Anda dapat mengabaikannya.
  4. Gunakan foto stok generik. Ini meneriakkan ketidakaslian.

Navigasi: Landasan UX

Navigasi sangat penting ketika Anda memiliki banyak kategori, produk variabel, atau produk dengan banyak pilihan. Tidak ada yang lebih membuat frustrasi daripada menu yang rumit. Semakin cepat orang dapat menemukan apa yang mereka inginkan, semakin cepat Anda dapat memindahkan mereka ke proses pembayaran.

Tujuan dari menu navigasi adalah untuk mengarahkan orang ke tempat yang mereka inginkan. Berikut adalah rincian dari apa yang harus Anda atasi:

UX-Best-Practices-Best-Buy-Navigation
Menu Navigasi Utama Yang Harus Dilakukan
  1. Batasi menu teratas hingga 7 pilihan.
  2. Gunakan navigasi sekunder di kanan atas untuk item seperti "Hubungi Kami"
  3. Gunakan menu multi kolom yang mengatur kategori dan sub kategori.
  4. Tampilkan gambar berkualitas tinggi dari produk Anda.
  5. Jadikan menu navigasi Anda menonjol dengan warna yang kontras.
  6. Produk referensi silang ke dalam beberapa kategori. Seseorang yang mencari drive USB mungkin mencari di bawah Laptop, Aksesoris, Atau Komputer.
This ambiguous menu creates a lot of hesitation.
Menu ambigu ini menciptakan banyak keraguan.
Menu Navigasi Utama Jangan
  1. Miliki satu drop down yang memakan kolom panjang.
  2. Tampilkan tautan halaman kategori kosong ke navigasi utama.
  3. Mengklasifikasikan produk secara berlebihan. Jika hanya ada satu produk dalam (sub)kategori, hapus kategori dan klasifikasi ulang produk tersebut.
  4. Jangan gunakan opsi yang tidak jelas seperti "lebih".

Menu Keranjang Belanja

Menu keranjang kemungkinan merupakan tombol terakhir yang akan diklik pengguna sebelum mengeluarkan kartu kredit. Jangan terlalu melihat ikon kecil ini.

UX-Best-Practices-Cart-Menui
Menu Keranjang Belanja Yang Harus Dilakukan
  1. Tampilkan total harga dan jumlah item dalam keranjang.
  2. Tautan ke halaman keranjang tempat mereka dapat melihat detail isinya
UX-Best-Practices-Cart-Menu
Gesekan tercipta ketika orang harus berhenti dan berpikir. Gesekan memperlambat pembeli.
Menu Keranjang Belanja Jangan
  1. Gantikan "kereta mini" dengan kereta penuh. Situs e-niaga Anda, membutuhkan halaman keranjang, bukan hanya widget keranjang.
  2. Tautkan langsung ke halaman checkout yang tidak menampilkan setiap detail produk di keranjang belanja.

Mencari

Banyak pengguna melewatkan menu navigasi sama sekali dan mengandalkan pencarian/pencarian segi untuk menelusuri lebih jauh. Pencarian segi bisa menjadi rumit dengan cepat. Dari perspektif pengembangan dan biaya, tetapi juga perspektif pengguna. Ikuti panduan ini agar semuanya tetap sederhana dan bermanfaat.

Cari yang Harus Dilakukan
  1. Gunakan kotak bidang teks terbuka di bagian atas setiap halaman.
  2. Gunakan pencarian segi ketika ada lebih dari 20 produk dalam satu kategori.
  3. Filter berdasarkan harga, warna, ukuran adalah opsi pencarian dasar.
Cari Jangan
  1. Gunakan teks pengisi pada input pencarian. Biarkan kosong, atau ucapkan "Cari".
  2. Gunakan opsi pemfilteran subjektif seperti "tugas berat" atau "tugas ringan".

Halaman Kategori: Dapatkan Pembeli Satu Langkah Lebih Dekat

Halaman kategori bisa sedikit rumit. Anda ingin memastikan isinya tidak terlalu tipis. Area teks tambahan dapat bekerja dengan sangat baik dengan peringkat Google, tetapi terlalu banyak teks dapat membingungkan pelanggan Anda.

Mengingat permintaan pencarian, "baju renang" hasil dari Macy's sangat relevan. Sangat mudah bagi pengguna untuk lebih menyempurnakan apa yang mereka cari.

Jaga Navigasi Kategori Bebas dari Clutter

Selektif tentang subkategori apa yang Anda sajikan di halaman kategori Anda. Macy's bisa saja menunjukkan gambar baju renang merah muda, baju renang hitam, one-piece, two-piece, dll. Jika setiap pilihan disajikan, pembeli akan dilumpuhkan oleh jumlah pilihan. Anda juga tidak ingin orang salah mengira halaman kategori Anda sebagai halaman daftar produk yang buruk.

Ecommerce User Guidelines for Category Pages
Halaman kategori ini untuk Macy's menempati urutan 5 teratas untuk "Bathing Suit"
Kategori Navigasi Do's
  1. Gunakan banyak ruang putih dan teks terbatas.
  2. Jelaskan subkategori dalam kata-kata sesedikit mungkin, tetapi spesifik.
  3. Gunakan gambar untuk mewakili subkategori utama dengan tepat.
  4. Gunakan hanya teks untuk mewakili kategori yang kurang populer.
  5. Memiliki kategori induk jika menggunakan mega atau menu drop down.
UX-Best-Practices-Taget-Category-Page
Target peringkat di belakang Macy untuk "Bathing Suit" meskipun memiliki backlink 30X lebih banyak daripada halaman baju renang Macy.
Navigasi Kategori Jangan
  1. Tampilkan gambar yang tidak relevan.
  2. Hanya mengandalkan teks.
  3. Gunakan beberapa teks warna.
  4. Promosi yang gencar dilakukan.
  5. Gunakan nama produk untuk subkategori.

Di situs Target. Anda harus terlihat sangat sulit untuk menemukan "baju renang junior."

Konten Halaman Kategori

Halaman kategori tidak perlu tipis pada konten. Riset kata kunci dapat membantu Anda memahami pertanyaan yang membara dari pembeli. Gunakan kata kunci tersebut untuk menjawab pertanyaan umum tentang lini produk Anda.

Kategori Halaman Konten Yang Harus Dilakukan
  1. Fokus pada kebutuhan pembeli Anda.
  2. Gunakan kata kunci semantik untuk melengkapi kata kunci utama Anda.
  3. Alamat FAQ yang terkait dengan kategori.
Kategori Konten Jangan
  1. Letakkan blok besar salinan di bagian atas halaman.
  2. Gunakan kata kunci utama Anda berulang-ulang.
  3. Gunakan gambar yang tidak relevan. Percayakah Anda foto jas pria di halaman baju renang Target?
  4. Masukkan teks ke dalam gambar.

Halaman Daftar Produk: Menginformasikan dan Membangun Keyakinan

Saya terkejut melihat berapa banyak halaman daftar produk yang isinya tipis. Halaman daftar produk yang kaya konten dan ramah pengguna Best Buy secara konsisten berperingkat tinggi. Halaman mereka menggambarkan banyak praktik terbaik. Halaman daftar produk Best Buy memungkinkan untuk mengonversi bahkan tanpa mengunjungi halaman produk. Halaman daftar produk e-niaga harus memberikan informasi produk penting seperti: gambar, harga, opsi, dan ketersediaan. Biarkan halaman ini melakukan beberapa penjualan untuk Anda.

Konten SEO Untuk Halaman Daftar Produk

Salinan ramah pengguna secara alami akan ramah SEO. Anda ingin orang (dan Google) memahami dengan jelas konten halaman Anda. Anda juga ingin dengan lembut menavigasi orang-orang keluar dari halaman ini jika mereka tidak melihat apa yang mereka inginkan.

Best Buy nails the basics.
Best Buy memakukan dasar-dasarnya.
Konten SEO yang Harus Dilakukan
  1. Gunakan kata kunci yang paling relevan dengan tingkat kesulitan terendah dalam judul halaman dan tag h1 Anda. Baca lebih lanjut tentang penelitian kata kunci.
  2. Gunakan kata kunci tambahan dalam ringkasan singkat kategori.
  3. Jika informasi tambahan diperlukan, letakkan di bawah daftar produk.
  4. Gunakan remah roti untuk membantu pengguna menavigasi dan mendistribusikan PageRank ke halaman kategori Anda.
  5. Tampilkan harga dan opsi.
  6. Berikan gambaran produk, jika ada tombol tambahkan ke keranjang.
Konten SEO Jangan
  1. Isi terlalu banyak konten sebelum produk terdaftar.
  2. Gunakan nama yang imut atau kiasan untuk produk. Jika Anda menjual sepatu anak-anak, jangan sebut sandal cokelat "George".

Navigasi Daftar Produk

Setelah pengguna memiliki ide tentang apa yang ingin mereka beli, mereka akan berbelanja di halaman daftar produk Anda. Jelaskan bahwa mereka memiliki banyak opsi dan halaman untuk berbelanja. Anda ingin mereka terus mencari jika mereka tidak melihat apa yang mereka inginkan di halaman pertama.

Daftar Produk Navigasi Halaman Lakukan
  1. Tunjukkan jumlah halaman sebelum dan sesudah daftar produk.
  2. Tunjukkan jumlah total produk dalam kategori tersebut.
  3. Izinkan pengguna untuk mengurutkan berdasarkan: harga,
  4. Izinkan pengguna untuk melompat ke halaman tertentu dalam hasil.
Navigasi Halaman Daftar Produk Jangan
  1. Buat pengguna mengklik panah untuk mengubah halaman.
  2. Asumsikan orang akan menggulir kembali ke atas atau mengklik tombol "Lihat Semua".
  3. Gunakan foto produk yang kecil atau buram.

Halaman Produk: Tempat SEO, UX, dan Penjualan Bertemu

Detail produk lengkap sangat penting. Untuk SEO dan pengalaman pengguna. Tautan internal meningkatkan SEO dan membantu pengguna menavigasi kembali ke halaman daftar produk. Desain halaman produk yang ramah pengguna akan memiliki informasi produk penting di paro atas.

Halaman produk adalah daging dari situs Anda, mereka harus persuasif. Jika pelanggan Anda harus memilih opsi sebelum menambahkan ke keranjang, tampilkan pesan kesalahan saat tombol “Tambahkan ke Keranjang” diklik.

Pelapisan Konten Halaman Produk

Halaman produk Anda dapat dengan cepat mengalami kelebihan informasi. Anda menginginkan tingkat informasi produk yang tepat untuk orang-orang yang sudah tahu apa yang ingin mereka beli, tetapi juga melayani pembeli yang membutuhkan setiap detail produk terakhir. Dengan melapisi informasi Anda, Anda dapat melayani kedua jenis pembeli tersebut.

Samsung's Product Page Illustrates Many Best Practices
Tombol tambahkan ke troli Samsung tidak dapat dilewatkan.
After the button is clicked, it is very clear the product was added. Users are sent right to the shopping page.
Setelah tombol diklik, sangat jelas produk telah ditambahkan. Pengguna diarahkan langsung ke halaman keranjang belanja.
Lakukan Pelapisan Konten Halaman Produk
  1. Berikan ringkasan produk singkat di bagian atas halaman atau di samping foto.
  2. Tambahkan batas atau latar belakang berbayang ke "area tindakan" Anda – tempat orang memilih opsi dan mengeklik tombol Anda.
  3. Sajikan opsi pemesanan di dekat bagian atas di area tindakan
  4. Memiliki remah roti di halaman produk.
  5. Letakkan detail produk, review, data, dll di bawah gambar produk dan area CTA.
Why Hide The Most Important Button?
Mengapa Menyembunyikan Tombol Paling Penting?
Lapisan Konten Halaman Produk Jangan
  1. Letakkan blok besar salinan di dekat atau di atas tombol CTA.
  2. Sembunyikan tombol tambahkan ke keranjang sampai seseorang membuat pilihan.
  3. Jadikan informasi ketersediaan hanya dengan sekali klik.
  4. Dapatkan perubahan halus ketika seseorang mengklik tombol tambahkan ke troli Anda. Orang-orang akan melewatkan pesan "Berhasil ditambahkan" Anda.

Kesalahan umum yang saya lihat dengan banyak tema e-niaga WordPress adalah tombol "Tambahkan Ke Keranjang" yang disembunyikan.

Victoria's Secret Is To Not Hide The Button
Rahasia Victoria Adalah Tidak Menyembunyikan Tombolnya

Gambar Halaman Produk

Foto besar dan zoom adalah yang paling dekat yang bisa didapatkan pembeli Anda tanpa menyentuh produk secara fisik. Gambar yang kabur dan berkualitas buruk membuat produk juga terlihat berkualitas buruk. Lihat studi kasus ini, di mana gambar produk yang lebih besar dan lebih baik meningkatkan konversi lebih dari 300%.

UX-Best-Practices-Product-Photos
Gambar Halaman Produk Lakukan
  1. Gunakan foto beresolusi tinggi dan besar dengan latar belakang putih.
  2. Gunakan fitur zoom untuk memungkinkan pengguna melihat detailnya sendiri.
  3. Izinkan pengguna untuk menggulir bolak-balik di antara gambar.
  4. Berikan instruksi yang jelas bahwa gambar tambahan atau fitur zoom diaktifkan.
UX-Best-Practices-Bad-Product-Photo
Gambar Halaman Produk Jangan
  1. Tampilkan gambar “gaya hidup” atau produk Anda. Tunjukkan produknya saja.
  2. Jangan memperkeruh foto Anda dengan logo, tanda air, atau latar belakang.
  3. Paksa pop-up gambar untuk melihat detail lebih lanjut atau foto tambahan.

Proses Checkout: Dibangun Untuk Kepercayaan

Proses checkout Anda harus sederhana, logis, dan bebas gangguan. Jangan mempersulitnya. Halaman keranjang Macy menyentuh banyak poin utama. Keranjang menunjukkan detail produk dengan gambar, harga, pajak, dan tautan kembali ke halaman produk individual.

Halaman Keranjang Belanja

Halaman pertama dalam proses checkout Anda adalah halaman keranjang Anda. Halaman ini menegaskan kembali apa yang ingin mereka beli secara rinci. Ini membantu mereka membangun kepercayaan dan kepercayaan di toko Anda. Usia troli yang dirancang dengan baik akan membantu Anda mengurangi pengabaian troli.

Macy's cart page hits many best practices.
Halaman Keranjang Belanja Lakukan
  1. Konfirmasi semuanya. Produk, ukuran, warna, jumlah, ketersediaan, tanggal pengiriman, perkiraan pengiriman.
  2. Izinkan pengguna menavigasi langsung kembali ke produk di keranjang mereka.
  3. Permudah untuk mengubah jumlah atau menghapus produk. Biarkan pengguna mengubah qty menjadi 0 untuk menghapus produk atau mengklik tombol “hapus”.
  4. Tunjukkan gambar produk dengan warna yang dipesan. Jika pelanggan Anda memesan jaket hitam dan melihat yang biru saat checkout, mereka kehilangan kepercayaan.
  5. Buat tombol lanjutkan checkout menonjol, tetapi izinkan orang untuk terus berbelanja.
  6. Tunjukkan total harga out door.
Presentasi Halaman Keranjang Sopping Jangan
  1. Sebelum waktunya, mintalah kartu kredit atau alamat email. Biarkan orang mengkonfirmasi apa yang mereka beli.
  2. Jangan gunakan tombol "Perbarui" untuk menghapus produk.

Halaman Pendaftaran

Ini adalah momen penting bahwa Anda harus mendapatkan informasi dari pengunjung Anda. Biarkan pembeli checkout tanpa membuat akun. Pelanggan tidak dipaksa untuk membuat dan mengingat login dan kata sandi baru, tetapi manfaat membuat akun ditekankan. Perhatikan tata letak halaman yang sederhana. Pilihan sederhana mengurangi beban kognitif.

UX-Best-Practices-Checkout-As-Guest
Halaman Pendaftaran Lakukan
  1. Tekankan manfaat membuat akun.
  2. Gunakan tata letak yang sederhana.
  3. Jangan bertanya lebih dari 2 pertanyaan.
Halaman Pendaftaran Jangan
  1. Memaksa orang untuk membuat akun. Tidak ada yang ingin mengingat nama pengguna dan kata sandi baru.
  2. Sebelum waktunya, mintalah kartu kredit atau alamat email. Biarkan orang mengkonfirmasi apa yang mereka beli.
  3. Jangan gunakan tombol "Perbarui" untuk menghapus produk.

Halaman Keluar

Setelah pembeli merasa yakin bahwa mereka memesan produk yang tepat dari perusahaan yang tepat (milik Anda), sekarang saatnya untuk memulai pesta.

Setelah pengguna memulai proses check out, mereka ingin menyelesaikan pembelian secepat mungkin. Bantu mereka membantu Anda. Hilangkan gangguan dan buat prosesnya semudah mungkin. Jangan membuat mereka memasukkan kembali alamat mereka atau menebak-nebak cara mengisi formulir.

UX-Best-Practices-Macys-Checkout-Process
Halaman Checkout Lakukan
  1. Mintalah hanya informasi minimal yang diperlukan.
  2. Ganti navigasi utama dengan navigasi "kontak".
  3. Buat proses checkout Anda singkat dan langkah Anda jelas dan logis.
  4. Tampilkan kemajuan selama proses checkout.
  5. Izinkan pengguna menggunakan alamat penagihan sebagai alamat pengiriman dengan sekali klik.
Halaman Checkout Jangan
  1. Menyajikan informasi atau pilihan baru.
  2. Memaksa orang untuk “bergabung” atau “menjadi anggota.”
  3. Membuat orang memasukkan kembali informasi yang sama dua kali.

Bagaimana Situs Anda Stack Up?

Anda tidak perlu memiliki satu juta dolar untuk menciptakan pengalaman berbelanja yang positif. Tidak ada merek besar di atas yang memenuhi 800+ pedoman yang disarankan oleh Nielson Norman Group. Jangan berasumsi bahwa pelanggan Anda mengetahui situs Anda seperti Anda. Paku dasar-dasar ini dan Anda akan membuat Google dan pelanggan menyukai situs Anda dan membeli dari Anda.

Panduan UX E-niaga