Praktik desain ecommerce disusun berdasarkan halaman pembeli: beranda, navigasi, daftar kategori, pencarian, halaman produk, dan ponsel; termasuk hal yang perlu disertakan dan kesalahan umum.
Navigasi jelas mengikuti cara pembeli memikirkan produk, halaman cepat, foto produk besar yang bisa diperbesar, harga dan ongkir dekat tombol Tambah ke Keranjang, ulasan terlihat, pencarian situs berfungsi, serta checkout singkat dengan pembelian sebagai tamu. Rancang untuk ponsel lebih dulu karena sebagian besar penjelajahan toko terjadi di sana.
Cukup banyak agar pembeli bisa membandingkan tanpa berpindah halaman terus-menerus. Banyak toko menampilkan 24 hingga 48 produk per halaman atau memakai tombol Muat lainnya. Yang lebih penting adalah filter untuk atribut pilihan pelanggan, seperti ukuran, warna, harga, dan ketersediaan.
Nama produk, gambar utama, harga, pilihan varian penting (ukuran, warna), status stok, tombol Tambah ke Keranjang, dan keterangan ongkir atau waktu tiba. Rating bintang dan jumlah ulasan juga sebaiknya ada jika tersedia.
Biasanya tidak. Slider yang berganti otomatis sering diabaikan dan bisa mengganggu aksesibilitas serta waktu muat. Satu hero kuat dengan satu pesan jelas dan tautan ke kategori utama biasanya bekerja lebih baik.
Desain web ecommerce yang baik membantu pembeli melakukan tiga hal dengan cepat: menemukan produk yang tepat, cukup memercayainya untuk membeli, dan membayar tanpa hambatan. Praktiknya meliputi navigasi sesuai cara berpikir pelanggan, halaman ponsel yang cepat, foto produk besar, harga dan ongkir ditampilkan awal, ulasan terlihat, serta checkout singkat.
Alih-alih daftar prinsip umum, panduan ini membahas halaman demi halaman karena pertanyaan pembeli berubah di setiap halaman.
Beranda hanya punya beberapa detik untuk memastikan apa yang dijual dan untuk siapa.
Sertakan:
Hindari: carousel otomatis, pop-up sebelum halaman dimuat, dan video hero yang menunda tampilan pertama di ponsel.
Di sinilah sebagian besar perbandingan berlangsung.
| Elemen | Praktik terbaik |
|---|---|
| Kartu produk | Rasio gambar seragam, nama, harga, rating, dan gambar kedua saat diarahkan kursor |
| Filter | Sesuai pilihan nyata: ukuran, warna, harga, bahan, stok. Tampilkan jumlah hasil. |
| Urutan | Default “Unggulan” atau “Terlaris”; sediakan harga dan terbaru |
| Stok | Sembunyikan atau tandai produk habis dengan jelas |
| Halaman | Muat lainnya atau nomor halaman; pertahankan filter saat kembali |
| Ponsel | Filter dalam panel geser dengan tombol jelas “Tampilkan 34 hasil” |
Kesalahan umum adalah filter yang terhapus saat pembeli membuka produk lalu kembali. Uji tombol Kembali.
Pembeli yang menggunakan pencarian biasanya memiliki niat beli tinggi, jadi kolom pencarian yang buruk langsung mengurangi penjualan.
Halaman produk bertugas menjual. Tinjau dari atas ke bawah.
Mulai dari manfaat produk bagi pelanggan, lalu spesifikasi. Pakai tabel singkat untuk ukuran, bahan, dan perawatan. Panduan ukuran sebaiknya terbuka dalam panel di halaman yang sama, bukan mengarahkan pengunjung ke halaman lain.
Tambahkan data terstruktur Product (nama, gambar, harga, stok, ulasan) agar hasil pencarian dapat menampilkan harga dan rating.
Desain checkout adalah bidang tersendiri. Singkatnya: tampilkan seluruh biaya lebih awal, sediakan checkout tamu, ringkas formulir, dan tawarkan dompet ekspres seperti Apple Pay serta Google Pay. Panduan optimasi checkout menguraikan langkahnya.
Desain tidak berhenti di tombol Bayar. Hampir semua pembeli membaca halaman dan email konfirmasi pesanan.
Sebagian besar kunjungan toko berasal dari ponsel, jadi rancang dan uji tampilan ponsel dulu, lalu perluas ke desktop.
Keduanya adalah keputusan desain, bukan sekadar teknis.
Kecepatan: kompres gambar dan sajikan WebP atau AVIF, tetapkan lebar dan tinggi agar tata letak tidak bergeser, batasi aplikasi serta skrip pihak ketiga, dan periksa Core Web Vitals di Google PageSpeed Insights.
Aksesibilitas: kontras warna sesuai WCAG 2.2 AA, teks alt di gambar produk, label kolom, menu dan filter yang dapat dijangkau keyboard, serta pesan kesalahan yang menjelaskan masalahnya. Toko yang mudah diakses lebih mudah digunakan semua orang; di banyak wilayah aksesibilitas juga merupakan ketentuan hukum.
Jika mulai dari awal, tata letak awal yang baik menghemat banyak keputusan. Jelajahi template untuk desain toko, atau jelaskan toko kepada We.Inc lewat chat agar dibuatkan toko online dengan halaman produk, keranjang, dan checkout yang dapat disempurnakan secara visual atau lewat kode. Hosting dan SSL termasuk.
Mulai gratis · Tanpa kartu kredit