Panduan Utama untuk Desain Situs Web eCommerce

Penjualan eCommerce AS terus mencapai ketinggian baru pada tahun 2018. Di seluruh dunia, eCommerce akan terus membukukan keuntungan yang solid hingga $2,3 triliun. Tapi apa yang membuat satu situs eCommerce menang atas yang lain?

Beberapa faktor menentukan keberhasilan keseluruhan situs web eCommerce termasuk kualitas produk, pengenalan merek, biaya pengiriman, kebijakan pengembalian, kepercayaan, dan layanan pelanggan. Namun, desain pengalaman pengguna yang bijaksana juga merupakan kunci untuk memberikan pengalaman yang memuaskan dan bebas gesekan kepada pelanggan. Ini tidak hanya akan mengubah klik potensial menjadi transaksi eCommerce yang sebenarnya tetapi membuat pelanggan kembali lagi dan lagi.

Berikut adalah panduan desain UX eCommerce yang komprehensif untuk membuat situs web eCommerce yang hebat, lengkap dengan contoh.

Rancang eCommerce untuk Kepercayaan Dan Keamanan

Pertama dan terpenting, penting untuk merancang situs web yang menurut pembeli dapat dipercaya. Sebagian besar pembeli mengkhawatirkan privasi dan apakah situs akan melindungi data pribadi mereka dengan menyediakan transaksi yang aman. Jika situs web tidak merasa dapat dipercaya, mereka hanya akan memilih untuk berbelanja di tempat lain.

Berikut adalah beberapa metode yang akan mengkomunikasikan kepercayaan:

• Sertakan ikhtisar bisnis:

  • Memberikan informasi umum
  • Foto orang-orang di belakang bisnis
  • Kontak informasi
  • Tautan ke media sosial
  • Halaman Pertanyaan yang Sering Diajukan (FAQ)

• Publikasikan kebijakan toko dan pastikan tidak terlalu sulit ditemukan:

  • Kebijakan pengiriman dan pengembalian
  • Garis besar proses pengembalian dan produk apa yang dapat dikembalikan
  • Memberikan akses mudah ke kebijakan privasi yang mencakup informasi pribadi dan keuangan pembeli (ini sangat penting)

Tulis dalam bahasa sederhana dan hindari jargon hukum atau kebijakan internal.

• Bagikan ulasan produk. Memberikan ulasan produk untuk membantu pembeli lebih memahami produk; ini akan membantu meringankan kekhawatiran yang mungkin mereka miliki dan memberikan UX eCommerce yang hebat. Selangkah lebih maju dengan menawarkan ulasan produk bersama dengan informasi tambahan tentang pengulas, atau dengan meringkas ulasan. Langkah ini dapat membantu memudahkan pembeli untuk mendapatkan manfaat penuh dari pendapat orang lain.
• Gunakan server yang aman. Pembeli berharap bahwa informasi pribadi mereka akan tetap aman saat mereka membeli secara online. Sertifikat SSL (lapisan soket aman) mengotentikasi identitas situs web dan mengenkripsi informasi yang perlu tetap aman. Ini adalah tanda penting yang menunjukkan bahwa checkout aman. Yakinkan pembeli bahwa data mereka dilindungi dengan menerapkan SSL dan menampilkan lencana sertifikat SSL.

• Tambahkan segel kepercayaan yang diakui. Segel kepercayaan memverifikasi legitimasi dan keamanan situs web. Beberapa perusahaan perwalian bahkan menambahkan lapisan perlindungan ekstra dengan menawarkan beberapa asuransi jika transaksi tersebut ternyata curang. Menggunakan segel kepercayaan yang diakui memastikan pembeli potensial dari proses transaksi yang aman, yang mengarah pada peningkatan penjualan dan menyediakan UX eCommerce yang lebih baik.
• Tunjukkan perhatian terhadap detail. Jadikan situs web terlihat sah dan profesional dengan menghindari kesalahan ketik, gambar hilang, tautan rusak, kesalahan 404 (halaman tidak ditemukan), atau kesalahan mematikan UX eCommerce lainnya.

Pertimbangan Desain UI eCommerce

Tampilan dan nuansa situs web adalah pendorong utama kesan pertama. Penelitian menyimpulkan bahwa orang akan menentukan apakah mereka menyukai sebuah situs web atau tidak hanya dalam 50 milidetik.

Berikut adalah beberapa tip desain antarmuka pengguna yang penting:

• Ikuti identitas merek. Pencitraan merek harus terlihat jelas di seluruh situs web. Pilih warna yang mencerminkan merek, dan atur gaya untuk memperjelas jenis produk apa yang dijual. Pastikan pengalaman merek konsisten di semua saluran—baik online, di dalam toko, atau di perangkat seluler. Ini akan membantu membangun hubungan merek-pelanggan yang kuat.
• Mengadopsi hierarki visual. Konten yang paling penting harus ditampilkan di paro atas. Dalam beberapa kasus, menggunakan lebih sedikit ruang kosong untuk mendekatkan item lebih baik daripada mendorong konten penting ke paro bawah.
• Jangan over desain. Batasi format font seperti bentuk font, ukuran, dan warna. Ketika teks terlihat terlalu mirip grafik, itu akan disalahartikan sebagai iklan. Gunakan teks kontras tinggi dan warna latar belakang untuk membuat konten sejelas mungkin.
• Tetap berpegang pada simbol yang dikenal. Gunakan ikon atau simbol yang mudah dikenali. Ikon yang tidak dikenal hanya akan membingungkan pembeli. Cara yang baik untuk menghindari kemungkinan kebingungan adalah dengan memberikan label untuk ikon.
• Hindari jendela popup. Jendela popup adalah pengalih perhatian. Meskipun berisi informasi berharga, pembeli kemungkinan besar akan langsung mengabaikannya—setelah hilang, bahkan jika mereka menginginkannya, sulit bagi pembeli untuk menemukan informasi itu lagi.

Pentingnya Navigasi Situs eCommerce Tanpa Gesekan

Bebas gesekan adalah caranya. Navigasi adalah tentang betapa mudahnya orang menjelajahi situs web, menemukan apa yang mereka cari, dan akhirnya mengambil tindakan. Pengalaman belanja eCommerce harus mulus sehingga pembeli tidak berhenti di tengah proses.

Beberapa aspek kunci dari desain situs web eCommerce untuk navigasi yang mudah meliputi:

Kategori Produk yang terdefinisi dengan baik

Navigasi tingkat atas harus menunjukkan kumpulan kategori yang ditawarkan situs. Kelompokkan produk ke dalam kategori dan subkategori yang masuk akal. Label kategori berfungsi paling baik sebagai kata tunggal yang menggambarkan rangkaian produk, sehingga pembeli dapat memindainya dan langsung memahami apa yang diwakilinya. Yang terbaik adalah menguji pengguna navigasi situs sebanyak mungkin untuk UX e-niaga yang hebat karena ini adalah fitur utama untuk membuat atau menghancurkan situs.

Pencarian Produk

Sederhananya, jika pembeli tidak dapat menemukan produk, mereka tidak dapat membeli produk—buatlah fungsi pencarian yang membantu mereka dengan mudah menemukan apa yang mereka cari:

• Jadikan pencarian ada di mana-mana. Letakkan kotak pencarian di setiap halaman dan di lokasi yang sudah dikenal. Kotak harus terlihat, cepat dikenali, dan mudah digunakan. Posisi standar untuk menerapkan kotak pencarian adalah kanan atas atau tengah atas halaman, atau pada menu utama.
• Mendukung semua jenis pertanyaan. Penelusuran perlu mendukung semua jenis kueri seperti nama produk, kategori, dan atribut produk, serta informasi terkait layanan pelanggan. Sebaiknya sertakan contoh kueri penelusuran di bidang masukan untuk menyarankan kepada pembeli penggunaan berbagai fungsi.
• Memiliki fungsi pelengkapan otomatis pencarian. Fungsionalitas pelengkapan otomatis memudahkan pembeli menemukan apa yang mereka cari dan meningkatkan potensi penjualan dengan menyarankan hal-hal dalam area yang sudah mereka cari.
• Izinkan penyortiran dan pemfilteran hasil. Biarkan pembeli mengurutkan hasil pencarian berdasarkan berbagai kriteria (penjualan terbaik, harga tertinggi atau terendah, peringkat produk, item terbaru, dll.) serta menghilangkan item yang tidak sesuai dengan kategori tertentu.

Produk Penyaringan

Semakin banyak pilihan yang diberikan, semakin sulit untuk memilih. Bantu pembeli menemukan produk yang tepat dengan menerapkan filter. Ini akan membantu mereka mempersempit pilihan dan langsung beralih ke rangkaian produk yang diinginkan.

Tampilan Cepat Produk

“Tampilan cepat” mengurangi waktu yang dibutuhkan pembeli untuk menemukan produk yang tepat dengan menghilangkan pemuatan halaman yang tidak perlu. Biasanya, detail produk ditampilkan di jendela modal di atas halaman yang dilihat. Jangan mencoba untuk menampilkan semua detail produk, sebaliknya, sertakan tautan ke halaman produk lengkap untuk melihat detail lengkap. Juga, pastikan untuk menyertakan tombol “Tambahkan ke Keranjang” yang diposisikan dengan jelas serta fungsi “Simpan ke Daftar Keinginan”.

Penawaran khusus

Pembeli selalu mencari penawaran khusus, diskon, atau penawaran terbaik. Buat penawaran eksklusif terlihat sehingga pembeli mengetahuinya. Bahkan jika perbedaan harga tidak terlalu besar, perasaan psikologis menghemat uang menciptakan ilusi memiliki keunggulan.

Desain Halaman Produk eCommerce

Untuk UX eCommerce yang luar biasa ketika pembeli berhasil menemukan produk yang mereka inginkan, biarkan mereka mencari tahu tentang produk tersebut. Rancang halaman produk yang menciptakan pengalaman yang mirip dengan pengalaman berbelanja secara langsung, dengan menyertakan banyak gambar, deskripsi mendetail, dan informasi berguna dan terkait lainnya tentang produk. Mari kita lihat secara mendalam apa artinya ini.

Berikan Gambar Produk Hebat

Dengan eCommerce, pembeli tidak dapat menyentuh, merasakan, atau mencoba produk. Sebaliknya, semuanya tergantung pada apa yang mereka lihat online. Inilah sebabnya mengapa memberikan gambar produk yang secara jelas menunjukkan semua aspek produk sangat penting. Berikut adalah daftar periksa untuk gambar produk yang sempurna:

• Gunakan latar belakang putih. Latar belakang untuk gambar produk tidak boleh mengganggu atau bertentangan dengan produk itu sendiri. Latar belakang putih berfungsi paling baik karena memungkinkan produk menonjol, dan berfungsi dengan hampir semua gaya atau skema warna.
• Gunakan gambar besar dan berkualitas tinggi. Gambar yang bagus menjual produk. Gambar berkualitas tinggi menarik minat pembeli dan menunjukkan kepada mereka apa yang mereka beli. Memiliki gambar besar memungkinkan pembeli memperbesar dan memeriksa produk dengan detail yang bagus.

• Gunakan berbagai gambar. Tampilkan produk dari sejumlah sudut berbeda dan sertakan close-up untuk memberikan kesan produk yang lebih lengkap. Tampilan 360 derajat, tempat mereka dapat memindahkan produk, adalah cara yang baik untuk memberikan pengalaman yang dekat dengan secara fisik masuk ke toko dan terlibat dengannya. VR eCommerce adalah gelombang berikutnya dari pengalaman ini.
• Gunakan video. Video memiliki kemampuan untuk menyampaikan banyak informasi dalam waktu singkat. Gunakan video untuk menunjukkan produk yang digunakan, dan untuk memberikan informasi fungsional sebanyak mungkin.
• Konsisten. Gunakan gambar yang konsisten di beberapa halaman, dan juga sesuai dengan tampilan dan nuansa situs web lainnya. Ini akan membuat semuanya terlihat bersih dan rapi. Gambar produk utama harus sama di semua area situs, seperti sorotan produk atau di bagian item unggulan.

Berikan Informasi Produk Dalam Jumlah Yang Tepat

Berikan pembeli informasi rinci tentang produk sehingga mereka dapat membuat keputusan pembelian yang tepat. Tampilkan ketersediaan, opsi untuk berbagai ukuran atau warna, dimensi, bagan ukuran, bahan yang digunakan, total biaya, garansi, dan banyak lagi. Semakin sedikit sisa pertanyaan yang mereka miliki tentang suatu produk, semakin besar kemungkinan mereka untuk melakukan pembelian.

Gunakan Desain Persuasif

Menurut prinsip kelangkaan, manusia menempatkan nilai yang lebih tinggi pada benda yang langka, dan nilai yang lebih rendah pada benda yang berlimpah. Ciptakan rasa urgensi dalam proses penjualan dengan menunjukkan kelangkaan—tampilkan berapa banyak produk yang tersisa, ukuran abu-abu yang kehabisan stok, atau tunjukkan tenggat waktu penjualan. Kelangkaan akan memotivasi calon pembeli untuk mengambil tindakan.

Semakin banyak perusahaan yang menggunakan penelitian psikologis tingkat lanjut, dan untuk mendorong lebih banyak keterlibatan dan pembelian, telah mengubah apa yang dulunya seni menjadi sains. Desain persuasif di eCommerce adalah cara yang sangat efektif untuk mengumpulkan lebih banyak pembelian.

Tampilkan Produk Terkait dan Direkomendasikan

Tampilkan produk serupa yang mungkin juga disukai pembeli yang cocok dengan produk saat ini, atau produk yang telah dibeli orang lain. Ini dapat ditampilkan di halaman detail produk atau di keranjang belanja dan akan membantu memandu pembeli ke produk yang memenuhi kebutuhan mereka, yang berpotensi mendorong mereka untuk terus berbelanja—cara yang bagus untuk menjual silang produk terkait.

Desain Keranjang Belanja

Keranjang belanja sangat penting karena merupakan tempat pembeli meninjau produk yang mereka pilih, membuat keputusan akhir, dan melanjutkan ke checkout. Tujuan utama dari keranjang belanja adalah untuk mengarahkan pembeli ke checkout. Di bawah ini adalah tips merancang keranjang belanja yang mudah digunakan, dan akan mendorong pembeli untuk membeli lebih lanjut.

• Gunakan ajakan bertindak (CTA) yang jelas. Panggilan utama untuk bertindak di halaman keranjang belanja adalah tombol checkout. Gunakan warna-warna cerah, banyak area yang dapat diklik, dan bahasa yang sederhana untuk membuat tombol checkout terlihat, lugas, dan mudah digunakan.
• Berikan umpan balik yang memadai. Pastikan ketika suatu produk ditambahkan ke keranjang belanja, itu segera dan dikonfirmasi dengan jelas. Pembeli menjadi bingung dengan umpan balik yang tidak memadai, seperti menampilkan teks konfirmasi yang tidak mencolok. Ide yang bagus adalah menggunakan animasi, karena gerakan menarik mata manusia.
• Gunakan widget kereta mini. Izinkan pembeli untuk menambahkan produk ke keranjang mereka tanpa meninggalkan halaman tempat mereka berada, dengan menggunakan kereta mini. Ini juga memungkinkan mereka untuk menavigasi, menemukan, dan menambahkan lebih banyak produk. Widget keranjang mini harus selalu tertaut ke keranjang belanja satu halaman penuh.

• Menampilkan detail produk. Menampilkan detail seperti nama produk, gambar, ukuran, warna, dan harga di keranjang belanja membantu pembeli mengingat setiap produk, serta membandingkan produk. Tautkan produk di keranjang kembali ke halaman produk lengkap mereka, sehingga pembeli dapat meninjau lebih banyak detail bila diperlukan.
• Jadikan keranjang mudah diedit. Kemampuan untuk menghapus, menyimpan untuk nanti atau mengubah detail seperti ukuran, warna, atau jumlah harus mudah diakses.
• Hindari kejutan biaya pengiriman dan pajak yang tidak terduga. Biaya pengiriman yang tidak terduga adalah salah satu alasan utama pembeli meninggalkan keranjang belanja mereka. Tempatkan opsi pengiriman dan pajak dengan perhitungan biaya yang tepat, dan tanggal pengiriman yang diharapkan di muka.

Desain Pembayaran eCommerce

Desain yang bergaya dan trendi tidak menentukan situs web eCommerce yang sukses juga tidak selalu memberikan UX eCommerce yang hebat. Keberhasilan eCommerce hanya diukur dengan jumlah pembelian yang diselesaikan. Berikut adalah beberapa cara untuk membuat halaman checkout yang dirancang dengan baik, yang akan berkontribusi pada keberhasilan konversi:

• Menawarkan berbagai pilihan pembayaran. Pembeli yang berbeda memiliki preferensi yang berbeda dalam hal melakukan pembayaran. Melayani pilihan pembayaran sebanyak mungkin (bergantung pada audiens target) untuk memperluas basis pelanggan, dan untuk memudahkan pembeli menyelesaikan pesanan mereka.
• Tetap sederhana. Minimalkan jumlah bidang dan langkah untuk menyelesaikan pembelian. Menggunakan alamat pengiriman sebagai alamat penagihan secara default adalah cara yang baik untuk meminimalkan jumlah bidang—idealnya, rancang checkout satu halaman tempat pembeli dapat melihat keranjang mereka dan memasukkan informasi pengiriman dan pembayaran.

• Jadikan pendaftaran opsional. Memaksa pembeli untuk membuat akun sebelum pembelian pertama mereka akan membuat pembeli menjauh. Beri mereka pilihan untuk mendaftar setelah pembelian selesai, dan soroti manfaat pendaftaran saat meminta mereka mendaftar. Manfaatnya termasuk checkout lebih cepat berkat informasi pribadi seperti alamat pengiriman yang disimpan atau informasi pembayaran dan akses ke penawaran eksklusif yang hanya tersedia untuk anggota terdaftar.
• Gunakan indikasi kesalahan yang jelas. Tidak ada yang lebih membuat frustrasi daripada tidak dapat melakukan pembelian atau mencari tahu alasannya. Alih-alih menampilkan kesalahan setelah formulir dikirimkan, buat pemberitahuan kesalahan muncul secara real time. Tempatkan pesan kesalahan yang jelas dan ringkas tepat di atas, atau di sebelah item yang memerlukan koreksi, sehingga pembeli akan memperhatikan dan memahaminya.

• Jaga agar orang tetap pada jalurnya. Saat menggunakan checkout multi-halaman, sertakan bilah kemajuan yang menunjukkan berapa banyak langkah lagi yang tersisa untuk menyelesaikan pembelian. Ini akan menghilangkan ambiguitas, dan meyakinkan pembeli bahwa mereka berada di jalur yang benar. Saat pembelian selesai, tampilkan konfirmasi pesanan dan status pesanan dengan pelacakan pengiriman.
• Menawarkan dukungan. Sertakan obrolan langsung atau nomor kontak selama proses checkout, sehingga ketika pembeli memiliki pertanyaan, mereka dapat dengan cepat mendapatkan jawaban daripada harus meninggalkan situs dan pergi ke tempat lain.

Ringkasan

Pembeli online mengharapkan pengalaman tanpa gesekan apa pun yang terjadi. Saat mendesain situs eCommerce, ini bukan hanya tentang membangun situs web tetapi juga menciptakan pengalaman belanja online yang akan mengubah pembeli pasif menjadi pelanggan yang membayar.

Semoga, panduan desain situs web eCommerce ini akan membantu Anda membuat keputusan desain penting untuk membangun UX eCommerce hebat yang profesional, menarik, ramah pengguna, dan membuat pembeli kembali lagi dan lagi. Pertumbuhan cepat ditambah pangsa pasar yang relatif rendah berarti masih ada peluang besar bagi pemain baru untuk melampaui pemimpin industri tradisional.

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Strategi dan Prinsip Desain Esensial
• eCommerce UX untuk Pengalaman Seluler
• Cara Mengaitkan Pembeli eCommerce melalui Desain UX
• eCommerce Didesain Ulang: Bagaimana Perubahan Kecil Membuat Peningkatan UX Besar