Checklist halaman produk: penyebab pembeli batal membeli

Checklist halaman produk dari riset Baymard dan WebAIM: harga, ongkir dan retur, foto, ulasan, tombol beli di ponsel, pop-up, pencarian, dan keyboard.

Tim Redaksi FixReports10 menit baca

Pembeli paling sering berhenti di halaman produk ketika mereka tidak bisa mengetahui total biayanya, tidak menemukan ketentuan pengiriman dan retur, tidak bisa menilai produk dari foto dan ulasannya, atau tidak bisa dengan mudah menjangkau dan menekan tombol beli, terutama di ponsel. Pop-up yang menutupi halaman, halaman kebijakan yang sulit ditemukan, pencarian situs yang tidak bisa menjawab pertanyaan sederhana, dan kontrol yang tidak berfungsi dengan keyboard juga menghalangi pembelian. Angka-angka di bawah ini adalah angka riset industri dari Baymard Institute dan WebAIM, berdasarkan sampel besar situs dan pembeli; angka tersebut menggambarkan pola umum, bukan prediksi untuk satu toko tertentu.

Poin penting

  • Dalam survei Baymard tahun 2026 terhadap 1.083 orang dewasa di AS yang pernah berbelanja online dalam tiga bulan terakhir, 40% mengatakan mereka pernah membatalkan pembelian saat checkout karena biaya tambahan seperti ongkos kirim, pajak, dan biaya lain terlalu tinggi (Baymard Institute (terbuka di tab baru)).
  • Benchmark halaman produk Baymard menemukan bahwa 67% situs e-commerce terkemuka tidak memberikan estimasi total biaya di dekat bagian pembelian, dan 44% tidak menampilkan atau menautkan kebijakan retur dari konten utama produk (Baymard Institute (terbuka di tab baru), diperbarui 18 Maret 2026).
  • Dalam benchmark yang sama, 62% situs seluler memiliki UX halaman produk yang "biasa saja" (mediocre) atau lebih buruk.
  • WebAIM mendeteksi kegagalan WCAG di 95,9% dari satu juta halaman beranda teratas pada Februari 2026 (WebAIM (terbuka di tab baru)).
  • Dalam tinjauan Baymard tahun 2021 terhadap 33 situs e-commerce dengan pendapatan tertinggi, 45% memiliki fungsi yang tidak bisa dioperasikan dengan keyboard (Baymard Institute (terbuka di tab baru)).

Mengapa pembeli membatalkan pembelian?

Jawaban yang paling umum adalah pembeli hanya melihat-lihat; setelah itu menyusul biaya tambahan, pengiriman yang lambat, kurangnya kepercayaan dalam penanganan data kartu, dan kewajiban membuat akun.

Halaman cart abandonment Baymard menyebutkan rata-rata tingkat pengabaian keranjang yang terdokumentasi sebesar 70,22%, dihitung dari 50 studi (halaman terakhir diperbarui 22 September 2025). Grafik alasannya, yang diberi label data 2026, berasal dari survei terhadap 1.083 orang dewasa di AS yang pernah berbelanja online dalam tiga bulan sebelumnya. Responden boleh memilih lebih dari satu alasan (Baymard Institute (terbuka di tab baru), per Oktober 2026):

Alasan membatalkan pembelian online saat checkoutPersentase responden
Saya hanya melihat-lihat / belum siap membeli42%
Biaya tambahan terlalu tinggi (ongkos kirim, pajak, biaya lain)40%
Pengiriman terlalu lambat20%
Saya tidak percaya untuk memberikan informasi kartu kredit saya ke situs itu19%
Situs mewajibkan saya membuat akun18%
Proses checkout terlalu panjang atau rumit17%
Website mengalami error atau crash17%
Kebijakan retur tidak memuaskan13%
Saya tidak bisa melihat atau menghitung total biaya pesanan sejak awal12%
Kartu kredit ditolak10%
Metode pembayaran kurang beragam9%

Ini adalah hasil survei di AS tentang checkout, bukan pengukuran atas toko Anda. Beberapa di antaranya bermula lebih awal, di halaman produk, tempat pembeli pertama kali melihat harga, ketentuan pengiriman, dan syarat retur. Hanya analitik Anda sendiri yang dapat menunjukkan alasan mana yang penting bagi toko Anda.

Apakah harga lengkap terlihat jelas di halaman produk?

Harga saat ini, harga asli jika ada, apa yang sudah atau belum termasuk, dan estimasi ongkos kirim semuanya sebaiknya berada di dekat tombol beli.

Benchmark halaman produk Baymard tahun 2026 menemukan bahwa 67% situs tidak memberikan estimasi "total biaya pesanan" di dekat bagian pembelian, dan 81% tidak menampilkan harga per satuan untuk produk yang dijual dalam jumlah atau ukuran berbeda (Baymard Institute (terbuka di tab baru)). Pastikan halaman menampilkan:

  • Harga saat ini dan, untuk barang diskon, harga aslinya.
  • Harga per satuan untuk produk yang dijual dalam beberapa ukuran.
  • Apakah pajak atau bea sudah termasuk.
  • Ongkos kirim, atau nilai pesanan minimum untuk mendapatkan gratis ongkir.

Shopify: di tema Dawn, blok harga menambahkan teks "Taxes included." dan tautan "Shipping calculated at checkout." jika pengaturan tersebut dan kebijakan pengiriman sudah ada (kode sumber Dawn (terbuka di tab baru)). Itu akurat, tetapi bukan estimasi, jadi tambahkan tarif sebenarnya atau batas gratis ongkir Anda di blok teks.

WooCommerce: opsi "Enable the shipping calculator on the cart page" dan "Hide shipping costs until an address is entered" di WooCommerce > Settings > Shipping memengaruhi halaman keranjang dan checkout, bukan halaman produk (kode sumber WooCommerce (terbuka di tab baru)). Cantumkan tarif di template produk atau deskripsi singkat.

Bisakah pembeli menemukan informasi pengiriman dan retur sebelum menambahkan ke keranjang?

Letakkan ringkasan singkat tentang waktu pengiriman, ongkos kirim, dan batas waktu retur di dekat tombol beli, dengan tautan ke kebijakan lengkapnya.

Dalam survei Consideration & Purchase Behavior dari Baymard terhadap 1.032 responden, 60% mengatakan mereka mencari informasi kebijakan retur di halaman produk, tetapi 44% situs yang di-benchmark tidak menampilkan atau menautkannya dari konten utama produk (Baymard Institute (terbuka di tab baru)). Dalam survei pengabaian 2026 di atas, 20% menyebut pengiriman yang lambat dan 13% kebijakan retur yang tidak memuaskan.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: tulis kebijakan Anda di Settings > Policies (Shopify Help Center (terbuka di tab baru)). Di Dawn, blok Collapsible row di halaman produk dapat menampilkan teks atau isi sebuah halaman (kode sumber Dawn (terbuka di tab baru)), sehingga satu halaman pengiriman dan retur bisa muncul di setiap produk.

WooCommerce: WooCommerce membuat halaman "Refund and Returns Policy" sebagai draf (kode sumber WooCommerce (terbuka di tab baru)). Halaman itu tetap tidak dipublikasikan sampai Anda mengedit dan memublikasikannya.

Apakah foto produk menjawab pertanyaan pembeli?

Foto sebaiknya menampilkan produk dari beberapa sudut, dengan skala, dan saat digunakan, karena banyak pembeli menilai ukuran dan kecocokan dari foto, bukan dari spesifikasi.

Pengujian Baymard menemukan bahwa 42% pengguna mencoba memperkirakan ukuran produk dari fotonya, sementara 37% situs yang di-benchmark tidak menyediakan foto "dengan skala" yang menampilkan produk di samping orang atau benda yang familier. Selain itu, 23% tidak menyediakan foto dengan model manusia, yang paling penting untuk pakaian, aksesori, dan kosmetik (Baymard Institute (terbuka di tab baru)).

Periksa juga bahwa galeri berganti ke foto yang tepat saat warna dipilih, bahwa fitur zoom berfungsi di ponsel, dan bahwa setiap foto memiliki teks alt yang menjelaskan apa yang ditampilkan, misalnya "Kemeja linen, tampak belakang".

Apakah ulasan mudah ditemukan dan dipercaya?

Tampilkan rating rata-rata dan jumlah ulasan di dekat judul produk, tautkan ke ulasan lengkap, dan balas ulasan negatif.

Baymard menemukan bahwa 89% situs yang di-benchmark tidak menanggapi ulasan negatif, dan 63% tidak memungkinkan pembeli berpindah dari foto satu pengulas ke foto pengulas berikutnya di seluruh ulasan (Baymard Institute (terbuka di tab baru)). Widget ulasan yang dimuat terlambat juga dapat mendorong halaman ke bawah, jadi sediakan ruang untuknya.

Shopify: blok Product rating di Dawn menampilkan bintang dari aplikasi ulasan, dan tema tersebut mencatat bahwa aplikasi diperlukan (kode sumber Dawn (terbuka di tab baru)).

WooCommerce: di WooCommerce > Settings > Products, opsi ulasan mencakup "Enable product reviews", "Show 'verified owner' label on customer reviews", "Reviews can only be left by 'verified owners'", dan "Enable star rating on reviews" (kode sumber WooCommerce (terbuka di tab baru)).

Apakah tombol tambahkan ke keranjang mudah dijangkau dan diketuk di ponsel?

Di ponsel, pembeli seharusnya bisa melihat harga, memilih varian, dan mengetuk tombol tambahkan ke keranjang tanpa harus mencari-cari, dengan kontrol yang cukup besar untuk diketuk.

Dalam benchmark Baymard tahun 2026, 52% situs desktop dan 62% situs seluler memiliki UX halaman produk yang "biasa saja" atau lebih buruk, dan 57% situs tidak memakai tombol untuk pemilihan ukuran, sehingga ukuran tersembunyi di menu drop-down (Baymard Institute (terbuka di tab baru)).

Buka halaman produk di ponsel sungguhan dan periksa:

  • Layar pertama. Dalam tata letak ponsel yang bertumpuk, galeri sering muncul lebih dulu, sehingga foto yang tinggi dapat mendorong judul, harga, dan tombol ke bawah layar pertama.
  • Bar beli yang menempel (sticky). Jika Anda memakainya, bar itu tidak boleh menutupi elemen yang sedang difokus. Ringkasan W3C tentang kriteria WCAG 2.2 2.4.11 (Level AA) memakai footer sticky yang menyembunyikan elemen yang difokus sebagai contohnya (W3C (terbuka di tab baru)).
  • Target ketuk. WCAG 2.5.8 (Level AA) menetapkan ukuran minimum 24 × 24 piksel CSS, dengan beberapa pengecualian (W3C (terbuka di tab baru)); panduan tema Shopify menyarankan minimal 48 × 48 piksel di seluler (Shopify (terbuka di tab baru)).
  • Scroll ke samping. WCAG 1.4.10 Reflow mewajibkan konten tetap berfungsi pada lebar 320 piksel CSS tanpa scroll ke dua arah (W3C (terbuka di tab baru)). Tabel ukuran dan tabel perbandingan yang lebar sering menjadi penyebabnya.

Apakah pop-up menghalangi pembelian?

Pop-up yang menutupi halaman produk saat pembeli tiba menyembunyikan informasi yang mereka cari, jadi pilihlah banner kecil dan batasi ajakan untuk mendaftar.

Panduan Google Search Central menggambarkan interstisial dan dialog yang mengganggu sebagai elemen yang menghalangi tampilan konten dan menyarankan banner kecil sebagai pengganti overlay satu halaman penuh (Google Search Central (terbuka di tab baru)). Shopify mencatat bahwa konten pop-up juga dapat menyebabkan pergeseran tata letak (Shopify Help Center (terbuka di tab baru)). Setiap dialog yang Anda pertahankan harus bisa ditutup dengan keyboard; WCAG 2.1.2 No Keyboard Trap (Level A) mewajibkan fokus dapat keluar dari sebuah komponen hanya dengan keyboard (W3C (terbuka di tab baru)).

Bisakah pembeli menemukan halaman kepercayaan dan kebijakan Anda?

Tautkan halaman pengembalian dana, pengiriman, privasi, syarat dan ketentuan, serta kontak dari footer di setiap halaman.

Dalam survei Baymard tahun 2026, 19% responden mengatakan mereka pernah membatalkan pembelian karena tidak percaya untuk memberikan data kartu mereka ke situs tersebut. Kebijakan dan detail kontak yang jelas adalah sinyal dasar bahwa sebuah toko itu sah.

Shopify: setelah Anda menambahkan kebijakan di Settings > Policies, Shopify otomatis menautkannya di footer checkout; untuk menampilkannya di toko, tambahkan ke menu di Content > Menus (Shopify Help Center (terbuka di tab baru)) atau aktifkan pengaturan footer Policy links di Dawn.

WooCommerce: publikasikan draf halaman pengembalian dana, lalu tambahkan halaman kebijakan dan kontak Anda ke footer.

Apakah pencarian situs menemukan produk dan jawaban?

Pencarian seharusnya menampilkan produk yang tepat untuk nama, salah ketik, dan sinonim, dan juga menjawab pertanyaan seperti "retur" atau "pengiriman".

Benchmark pencarian Baymard tahun 2026 terhadap lebih dari 170 situs dan aplikasi menilai 46% pengalaman desktop, 58% seluler, dan 64% aplikasi sebagai "biasa saja" atau lebih buruk, dan menemukan masalah pada pencarian non-produk, seperti pencarian kebijakan retur yang justru menampilkan produk, di 66% situs (Baymard Institute (terbuka di tab baru), diperbarui 29 April 2026).

Uji toko Anda dengan nama produk terlaris, versi salah ketiknya, kata kategori, dan kata "retur". Di Shopify, pencarian etalase menampilkan produk, postingan blog, dan halaman, dengan predictive search dan toleransi salah ketik yang aktif secara default, dan aplikasi Search & Discovery menambahkan filter dan product boost (Shopify Help Center (terbuka di tab baru)). Karena itu, halaman biasa yang merangkum pengiriman dan retur dapat muncul untuk pencarian tersebut.

Bisakah seseorang membeli hanya dengan keyboard?

Setiap langkah, mulai dari memilih varian hingga mencapai checkout, seharusnya berfungsi hanya dengan keyboard, dengan indikator fokus yang terlihat.

WCAG 2.2 mewajibkan semua fungsi dapat dioperasikan dengan keyboard (2.1.1, Level A), tidak ada jebakan keyboard (2.1.2, Level A), indikator fokus yang terlihat (2.4.7, Level AA), dan elemen yang difokus tidak sepenuhnya tertutup konten lain (2.4.11, Level AA) (W3C (terbuka di tab baru)). Dasar-dasar ini sering tidak terpenuhi. Tinjauan Baymard tahun 2021 terhadap 33 situs dengan pendapatan tertinggi menemukan bahwa 45% memiliki fungsi yang tidak bisa dioperasikan dengan keyboard dan 48% tidak menjaga indikator fokus tetap terlihat setiap saat (Baymard Institute (terbuka di tab baru)). Pemindaian WebAIM pada Februari 2026 menemukan rata-rata 56,1 error terdeteksi per halaman beranda, dan 71,0 untuk situs dalam kategori Shopping (WebAIM (terbuka di tab baru)).

Tes lima menit:

  1. Buka halaman produk dan tekan Tab tanpa menyentuh mouse.
  2. Pastikan Anda selalu bisa melihat posisi fokus.
  3. Pilih ukuran dan warna, lalu ubah jumlahnya.
  4. Tekan tombol tambahkan ke keranjang dan pastikan fokus berpindah ke laci keranjang (cart drawer) dan laci itu bisa ditutup dengan keyboard.
  5. Capai tombol checkout.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Pemindaian gratis memeriksa banyak poin ini dalam sekitar satu menit. Laporan Konversi mengubah hasil pemeriksaan halaman, seperti visibilitas harga, tombol tambahkan ke keranjang di ponsel, informasi pengiriman dan retur, pop-up, tautan kebijakan di footer, pencarian, alur pembelian dengan keyboard, dan scroll ke samping, menjadi rekomendasi yang diprioritaskan. Laporan ini didasarkan pada pemeriksaan halaman, bukan data penjualan Anda, dan tidak menjamin penjualan.

Pertanyaan yang sering diajukan

Apa alasan paling umum pembeli membatalkan pembelian?

Dalam survei Baymard tahun 2026 terhadap 1.083 orang dewasa di AS, jawaban teratas adalah "hanya melihat-lihat" (42%). Di antara alasan lainnya, biaya tambahan seperti ongkos kirim, pajak, dan biaya lain menempati urutan pertama dengan 40%, di atas pengiriman yang lambat dengan 20%.

Apakah memperbaiki masalah ini akan meningkatkan tingkat konversi saya?

Tidak ada yang bisa menjanjikannya. Riset ini menggambarkan hambatan yang umum ditemukan di sampel besar situs dan pembeli; apakah menghilangkannya akan mengubah hasil Anda bergantung pada produk, harga, dan trafik Anda, jadi ukurlah sebelum dan sesudah setiap perubahan.

Di mana sebaiknya informasi pengiriman dan retur diletakkan di halaman produk?

Di dekat harga dan tombol beli, sebagai ringkasan singkat dengan tautan ke kebijakan lengkapnya. Dalam riset Baymard, 60% responden mengatakan mereka mencari informasi kebijakan retur di halaman produk.

Apakah tombol tambahkan ke keranjang harus terlihat tanpa scroll di ponsel?

Tidak ada aturan yang mewajibkannya, tetapi pembeli sebaiknya bisa melihat harga dan menjangkau tombol itu dengan cepat. Bar beli sticky adalah salah satu pilihan, asalkan tidak menyembunyikan elemen yang difokus atau konten lain.

Apakah aksesibilitas termasuk bagian dari konversi?

Ya, dalam arti yang sederhana: pembeli yang tidak bisa mengoperasikan pemilih varian atau tombol tambahkan ke keranjang dengan keyboard atau pembaca layar tidak bisa membeli. WCAG 2.2 Level AA mencakup dasar-dasar ini.

Sumber

Semua panduan