# Sepuluh keputusan desain ecommerce yang terukur menaikkan konversi

> Bukan 'pakai lebih banyak ruang kosong', bukan 'uji warna tombol Anda'. Pilihan hierarki visual, fotografi, tipografi, dan mobile yang benar-benar menggerakkan konversi di toko sungguhan.

Ryan Badger - 3 November 2024 - 7 menit baca

## Keputusan desain yang benar-benar menggerakkan konversi

Artikel desain biasanya jatuh ke dua kubu. "Pakai banyak ruang kosong!" (terlalu kabur) atau "A/B test 47 warna tombol" (terlalu rinci). Keduanya tidak membantu orang yang menatap tokonya dan bertanya-tanya kenapa konversinya hanya 1,3%.

Artikel ini membahas keputusan desain visual spesifik yang terukur menggeser konversi di toko ecommerce. Bukan selera. Bukan estetika brand. Pilihan tata letak, hierarki, warna, dan tipografi yang entah membantu orang membeli atau menghalangi mereka.

## 1. Hierarki visual: yang terpenting harus tampak paling penting

Kebanyakan toko memberi bobot visual yang sama untuk semuanya di halaman produk: teks isi 16px, harga 18px, judul 18px. Setiap elemen bersaing; tidak ada yang menang. Mata tidak punya pintu masuk.

Solusi: hal yang ingin Anda klik harus menjadi yang terbesar dan berkontras tertinggi di halaman.

- Judul produk: 28-36px
- Harga: 20-24px, tebal, terpisah dengan jelas
- Tombol Tambah ke Keranjang: lebar penuh di mobile, elemen paling berat secara visual di halaman
- Deskripsi, daftar spesifikasi, info pengiriman: 14-16px, lebih tenang

Ketika Anda melihat halaman produk dari jarak 2,5 meter (ya, secara harfiah bersandarlah ke belakang), bisakah Anda tahu apa aksi utamanya? Kalau seluruh halaman tampak seperti sup abu-abu, hierarki Anda rusak.

## 2. Ruang kosong di sekitar CTA, bukan di mana-mana

"Pakai lebih banyak ruang kosong" sering dikeluarkan sebagai tips desain universal. Yang sebenarnya penting adalah ruang kosong di sekitar tombol dan elemen kunci, bukan ruang kosong demi ruang kosong.

- Setidaknya 40-60px padding di sekitar area Tambah ke Keranjang
- Harga berada di ruangnya sendiri yang bersih, tidak berdesakan dengan teks lain
- Gambar produk diberi ruang (bukan tepi-ke-tepi tanpa margin)

Rapatkan semua yang lain (ulasan, info pengiriman, produk terkait). Itu sekunder. Area CTA menang karena menjadi satu-satunya yang punya ruang bernapas.

## 3. Fotografi produk yang konsisten mengalahkan fotografi produk yang "lebih baik"

Katalog 50 produk dengan foto yang semuanya sedikit berbeda (latar berbeda, pencahayaan berbeda, tingkat zoom berbeda) tampak amatir. Katalog dengan sudut, pencahayaan, pemotongan, dan latar yang sama di setiap foto tampak profesional.

Ini masalah volume, bukan masalah kualitas. 5 produk terlaris Anda boleh punya foto hero yang dipoles. Selebihnya harus dipotret secara identik, meski sedikit kurang glamor. Ketidakkonsistenan menandakan "toko kecil yang tidak bisa diandalkan" lebih daripada kualitas rendah.

Aturan praktis:

- Foto utama: latar putih atau polos, di tengah, pemotongan sama di seluruh katalog
- Foto sekunder: gaya hidup / sedang dipakai, nada konsisten
- Semua foto dengan rasio aspek dan resolusi yang sama

## 4. Kontras CTA, bukan warna CTA

"Tombol oranye berkonversi X% lebih tinggi daripada hijau!" Klaim hasil uji ini sering Anda lihat. Itu omong kosong kalau berdiri sendiri. Yang penting adalah **kontras dengan halaman di sekitarnya**. Tombol oranye di situs bertema oranye tidak terlihat. Tombol biru di situs yang sama adalah mercusuar.

Pilih warna yang berkontras paling tinggi dengan palet dominan situs Anda. Kalau halaman Anda putih + hitam + krem, CTA Anda harus satu warna yang tidak muncul di tempat lain.

Poin sekunder: hindari tombol hantu (hanya garis tepi, tanpa isi) untuk CTA utama. Terlihat elegan tetapi hasil uji konversinya buruk karena memberi sinyal "sekunder" ke mata. Gunakan isian solid untuk Tambah ke Keranjang, Buat Pesanan, Beli Sekarang.

## 5. Ukuran huruf dan panjang baris di mobile

Kebanyakan toko mobile punya teks yang terlalu kecil dan terlalu lebar. Ponsel menampilkan teks dengan kepadatan piksel lebih tinggi; yang 16px di desktop terasa kecil di mobile.

Batas bawah tipografi mobile:

- Teks isi: minimal 16-18px
- Panjang baris: 40-60 karakter per baris
- Tinggi baris: 1,4-1,6x ukuran huruf
- Tombol / target ketuk: tinggi minimal 44px (pedoman aksesibilitas Apple)

Kalau pengunjung mencubit untuk memperbesar deskripsi produk Anda, huruf Anda terlalu kecil. Uji di ponsel sungguhan pada jarak lengan, bukan di emulator mobile browser.

## 6. Tambah ke Keranjang yang menempel di mobile

Gulir ke bawah halaman produk yang panjang di mobile: saat Anda selesai membaca deskripsi, tombol Tambah ke Keranjang sudah 3 layar di atas. Pelanggan yang sudah memutuskan membeli sekarang harus menggulir kembali, dan itu menurunkan tingkat konversi.

Solusi: Tambah ke Keranjang yang menempel dan mengambang di bagian bawah viewport mobile begitu tombol aslinya keluar layar. Satu ketukan, keranjang terbuka, tanpa berburu dengan menggulir.

Desktop: keranjang yang menempel menjadi opsional (viewport lebih besar). Mobile: tidak bisa ditawar.

## 7. Citra hero yang menunjukkan hasil, bukan produknya

Kebanyakan bagian hero menampilkan produk, terisolasi, di latar putih. Bagus untuk foto referensi; salah untuk hero. Hero harus mengomunikasikan "seperti apa hidup dengan ini" dalam 2 detik.

Lebih baik: produk sedang dipakai, dalam konteks, dengan orang atau suasana yang cocok dengan target pembeli Anda.

- Perawatan kulit: seseorang memakainya, cahaya pagi, kamar mandi
- Furnitur: perabotnya di ruangan sungguhan, yang terasa dihuni
- Pakaian: dipakai di tubuh, bergerak, bukan manekin
- Makanan/kopi: sedang disiapkan atau dinikmati, bukan foto produk

Hero produk-sedang-dipakai berkonversi lebih baik daripada hero produk-terisolasi karena ia mengerjakan lebih banyak kerja imajinasi bagi pembeli. Mereka bisa melihat dirinya memakainya tanpa perlu membayangkan.

## 8. Komponen yang konsisten di seluruh toko

Kegagalan umum: halaman produk memakai satu gaya kartu, halaman kategori gaya lain, beranda punya gaya ketiga. Pelanggan merasakan ketidakkonsistenan ini meski tidak bisa menyebutkannya. Toko tampak tepercaya ketika komponen yang sama muncul secara konsisten.

Sistem desain ecommerce kecil terdiri dari:

- Satu komponen kartu produk (dipakai di unggulan beranda, grid kategori, produk terkait, hasil pencarian)
- Satu sistem tombol (primer, sekunder, tersier; hanya tiga ini)
- Satu sistem gaya judul (H1, H2, H3; diterapkan secara konsisten)
- Satu palet warna (maksimal 3 warna brand, plus skala abu-abu)
- Satu skala huruf (maksimal 3-4 ukuran)

Kebanyakan toko membuat 15 variasi dari masing-masing padahal satu sudah cukup. Variasi lebih sedikit = tampilan lebih profesional.

## 9. Layar pertama adalah iklan untuk menggulir

Area yang terlihat saat pemuatan pertama (di atas lipatan) punya satu tugas: membuat pengunjung ingin menggulir. Itu saja. Jangan mencoba menuntaskan penjualan di layar pertama.

Yang dibutuhkan di atas lipatan:

- Untuk siapa ini (dalam satu baris)
- Apa produknya (secara visual, satu gambar yang bagus)
- Satu CTA yang jelas (Tambah ke Keranjang atau Belanja Sekarang)
- Satu sinyal kepercayaan yang menenangkan (rating + jumlah ulasan, atau kutipan pers, atau pelanggan terkenal)

Yang TIDAK dibutuhkan di atas lipatan:

- Banyak CTA yang bersaing merebut perhatian
- Carousel hero yang maju otomatis tiap 3 detik (pembunuh konversi; pelanggan membeku ketika konten bergerak)
- Semua manfaat yang dimiliki produk
- Galeri testimoni

## 10. Buang carousel di beranda Anda

Terkait dengan di atas, tetapi layak jadi poin sendiri: carousel hero di beranda sudah mati. Studi secara konsisten menunjukkan slide hero yang berputar diklik 1-3%, dan hanya slide pertama yang mendapat perhatian berarti. Pilih satu pesan yang akan Anda taruh di slide 1; pasang sebagai hero statis. Buang sisanya.

## Yang ditangani Shoprocket

Toko bertema datang dengan templat yang sudah mengikuti pola hierarki visual, kontras, dan mobile di atas. Kalau Anda memakai embed widget di situs sendiri, Anda mengendalikan desain halaman di sekitarnya, tetapi:

- **Laci keranjang** (bukan keranjang satu halaman penuh) adalah default
- **Keranjang mobile yang menempel** didukung
- **Gambar produk responsif** dengan pengiriman WebP otomatis dan rasio aspek yang tepat
- **Pembuat situs + 40+ tema** sehingga Anda tidak perlu membangun sistem desain dari nol
- **Hook CSS kustom** memungkinkan Anda menyesuaikan tema embed agar cocok dengan situs Anda

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Yang tidak dikendalikan Shoprocket: citra hero Anda, konsistensi fotografi Anda, copy Anda, sistem warna Anda. Itu sepenuhnya Anda yang menentukan berhasil atau gagalnya.

> **Tips:** Buka toko Anda di ponsel sekarang juga. Ambil satu halaman produk. Bisakah Anda melihat Tambah ke Keranjang tanpa menggulir? Apakah harga jelas menjadi hal terbesar kedua? Bisakah Anda membaca deskripsi tanpa menyipitkan mata? Kalau jawaban salah satunya tidak, itulah perbaikan desain pertama yang harus dilakukan.

## Ringkasnya

- **Hierarki:** elemen terpenting harus tampak paling penting. Periksa dengan uji jarak 2,5 meter
- **Ruang kosong di sekitar CTA**, bukan di mana-mana demi ruang kosong itu sendiri
- **Konsistensi fotografi** mengalahkan kualitas fotografi. Satu gaya di seluruh katalog
- **Kontras CTA, bukan warna.** Warna berkontras tertinggi terhadap palet halaman Anda menang
- **Tipografi mobile: teks isi 16px+, target ketuk 44px+**
- **Tambah ke Keranjang yang menempel di mobile** tidak bisa ditawar
- **Gambar hero menunjukkan hasil** (produk-sedang-dipakai), bukan produk-di-latar-putih
- **Sistem desain kecil (3 warna, 4 ukuran, 3 varian tombol)** tampak lebih profesional daripada 15 varian
- **Layar pertama menjual gulirannya**, bukan produknya. Satu pesan yang jelas, satu CTA
- **Buang carousel beranda**. Hero statis menang

[Mulai uji coba gratis](https://app-v3.shoprocket.io/signup) kalau Anda ingin toko bertema dengan pola-pola ini sudah tertanam. 14 hari, tanpa kartu.

---

- HTML version: https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi
- Language: Bahasa Indonesia (id)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)