Pilihan estetika harus lebih strategis dari biasanya untuk mengeluarkan produk dari layar dan ke tangan pelanggan. Untuk membuatnya lebih mudah, berikut para pakar telah menyusun panduan utama untuk desain halaman produk.

Tujuan halaman produk : Dalam istilah dasar, halaman produk dibuat untuk menghasilkan pembelian. Tetapi menuju tujuan menyeluruh itu, ada beberapa hal yang harus dicapai oleh halaman produk. Harus menjelaskan apa yang dijual . Halaman produk harus menunjukkan kepada pengunjung seperti apa produk itu, bagaimana fungsinya, dan berapa harganya. Harus membangun kepercayaan. Pembelian pertama kali adalah lompatan keyakinan, terutama ketika produk sedang online, sehingga halaman produk harus mengantisipasi dan meredakan keraguan pengunjung. Harus menciptakan pengalaman. Halaman produk akan menggunakan media dan salinan yang menarik untuk membuat sesuatu yang digital terasa nyata bagi pelanggan. Harus intuitif, Halaman produk harus mencapai semua tujuan di atas tanpa membombardir pengguna dengan informasi.

Sasaran halaman produk pada dasarnya harus selaras dengan sasaran pembeli. Pelanggan ada di halaman ini karena mereka mencoba memenuhi kebutuhan. Dengan asumsi produk adalah solusi, itu adalah tugas halaman produk untuk meyakinkan pengunjung bahwa ini benar. Jika produk tidak, ini juga harus segera dibuat jelas. Semua ini, tentu saja, memerlukan pemahaman akan kebutuhan pembeli. Harus terlebih dahulu memahami audiens yang dituju produk tersebut serta jenis produk dan halaman web yang digunakan untuk berinteraksi dengan mereka.

Demografi luas, survei, wawancara, dan profil psikografis adalah semua teknik standar untuk penelitian audiens target . Desainer kemudian harus menerjemahkan pengetahuan mereka tentang pembeli ke prinsip-prinsip psikologi dalam desain .

Konten halaman produk : Konten dasar halaman produk disusun di sekitar "lipatan", atau titik di mana layar memotong sisa halaman. Karena pengguna harus menggulir untuk melihat apa yang ada di paro bawah, dengan kata lain, mereka harus membuat pilihan aktif untuk melanjutkan penelusuran, bagian awal “paro atas” adalah tempat penyimpanan informasi terpenting. Jadi mari dimulai dari sana:

Header : Berisi logo merek dan opsi menu navigasi. Cukup standar di sebagian besar halaman web, jadi tidak harus terlalu besar. Banyak merek memilih versi navigasi yang diperkecil bahkan di desktop, seperti ikon hamburger.

Deskripsi produk : Berisi nama produk, harga, proposisi nilai , dan terkadang cuplikan ulasan (seperti peringkat bintang). Pada dasarnya, mengidentifikasi produk dan menjelaskan mengapa pengunjung harus membelinya.

Gambar dan media produk : berisi gambar produk utama, biasanya dalam korsel bagi pengunjung untuk berputar melalui berbagai sudut, juga akan mencakup opsi tampilan, seperti warna atau model yang berbeda.

Tombol Call-To-Action(CTA) : adalah tombol yang mengarah ke halaman pembelian. Termasuk di dekat CTA adalah opsi pembelian seperti jumlah atau ukuran.

Informasi pendukung : mencakup informasi cara kerjanya yang lebih rinci tentang produk, seperti berat dan dimensi, FAQ, dan bahkan rincian bagian-bagian tertentu dari suatu produk.

Dukungan sejawat : termasuk testimonial, ulasan, dan daftar merek atau orang terkenal yang pernah menggunakan produk di masa lalu.

Grafik pendukung : adalah gambar non-esensial yang membantu pengguliran, seperti ilustrasi/animasi yang membantu halaman terasa lebih interaktif dan hidup. Mereka biasanya terkait dengan merek umum situs.

Produk yang direkomendasikan : menampilkan daftar produk lain yang dapat dipertimbangkan pengunjung. Jika pengunjung pada akhirnya tidak tertarik dengan produk ini, produk yang direkomendasikan dapat memberi mereka kesempatan untuk terus menelusuri halaman produk lain daripada hanya meninggalkan situs.

Konten halaman produk dapat bervariasi tergantung pada sifat produk/layanan. Perbedaan paling umum terjadi antara produk fisik dan digital (atau terlihat dan tidak terlihat). Produk fisik memiliki kelemahan yang melekat dalam ruang digital, dan tujuan dari konten halaman mereka adalah untuk menggantikan toko fisik. Mereka mungkin melakukannya dengan memasukkan lebih banyak sumber daya ke media, spesifikasi produk terperinci, atau menyoroti kebijakan pengiriman/pengembalian.

Pada saat yang sama, produk fisik seperti lilin atau anggur yang mengandalkan indera nonvisual, cenderung meniru produk digital dalam strategi halamannya, yaitu penekanan pada deskripsi persuasif. Tetapi karena mereka mengandalkan selera pribadi, tren di arena ini adalah menggunakan kuis orientasi di depan halaman produk. Menanyakan pertanyaan pengunjung (menyenangkan tapi strategis) tentang preferensi mereka untuk menciptakan kesan bahwa halaman produk yang akhirnya mereka lihat telah dikuratori untuk mereka.

Produk atau layanan digital mungkin tidak dapat menampilkan gambar karena produk tidak dapat difoto. Sebuah layanan juga sering kali baru atau asing, membutuhkan lebih banyak waktu yang dihabiskan untuk menetapkan siapa merek itu dan apa yang mereka tawarkan. Untuk alasan ini, harga sering disimpan untuk yang terakhir. Harga yang tercantum tanpa pemahaman penuh tentang penawaran mungkin membuat pengunjung takut.

Beberapa tip desain dan melihat beberapa contoh.

1. Gunakan perangkat lunak desain halaman produk yang tepat

Proses desain umumnya akan dimulai dengan ringkasan atau daftar fitur yang diperlukan. Sebagian besar desainer kemudian akan beralih ke sketsa pena-dan-kertas untuk menghasilkan ide tentang bagaimana elemen-elemen tersebut akan cocok bersama. Disebut sebagai wireframe, representasi kerangka yang disederhanakan dari struktur halaman. Setelah mempersempitnya, harus beralih ke perangkat lunak.

Aplikasi pembuatan prototipe seperti Sketch dan Figma membuat mockup yang lebih canggih, memberi gambaran yang lebih akurat tentang tampilan halaman. InvisionApp, sementara itu, membuat prototipe interaktif, yang mempercepat proses pengujian.

Manfaat dari aplikasi prototyping adalah bahwa mereka memungkinkan desainer untuk fokus hanya pada pengalaman pengguna sejak dini. Mereka juga cenderung mengarah pada desain yang kurang orisinal. Meskipun ini sering kali lebih disukai, tujuannya adalah pengalaman berbelanja yang mulus, jika ingin membuat desain, tekstur, atau animasi yang lebih kreatif, memerlukan perangkat lunak seperti Photoshop dan After Effects.

2. Gunakan pendekatan tata letak berbasis template

Mengingat situs e-niaga akan memiliki banyak produk (jika bukan ratusan), menyesuaikan halaman produk untuk setiap item individual tidak mungkin dilakukan. Sebagian besar desainer bertujuan untuk tata letak template, membuat penambahan halaman produk baru semudah menyalin dan menempelkan konten. Salah satu pendekatan adalah dengan menggunakan satu template untuk semua halaman produk atau template yang sedikit berbeda untuk kategori produk yang berbeda.

Desain berbasis template memerlukan perencanaan: pemasar dan copywriter harus berkomitmen pada jumlah gambar yang konsisten, daftar fitur, Tanya Jawab, testimonial, dll. untuk setiap produk. Pada saat yang sama, template halaman produk tidak selalu harus 100% identik. Misalnya, jika warna akan bervariasi antar produk, skema warna halaman produk dapat divariasikan agar sesuai.

Banyak halaman produk hari ini memiliki tata letak yang cukup standar bahkan di berbagai perusahaan. Misalnya, situs e-niaga cenderung menampilkan gambar di sisi kiri dengan deskripsi produk, opsi penyesuaian, dan CTA di sisi kanan. Di bawah ini muncul daftar spesifikasi dan manfaat, diikuti oleh FAQ dan ulasan/testimonial.

Kekuatan tata letak di mana-mana seperti ini adalah keakrabannya: sebagian besar pengunjung secara intuitif akan tahu di mana menemukan informasi yang mereka cari. Keterusterangannya sangat ideal untuk platform pembeli/penjual (seperti Ebay) di mana merek tidak akan memiliki kendali atas gambar dan salinan produk.

3. Desain dengan mempertimbangkan sisa situs

Tentu saja, halaman produk tidak dirancang secara terpisah: halaman tersebut harus terintegrasi dengan situs web lainnya. Konsistensi seperti ini penting tidak hanya untuk branding, tetapi karena halaman produk yang sumbang secara tidak sadar dapat terlihat kurang dapat dipercaya oleh calon pembeli.

Membatasi halaman produk ke branding yang ada juga dapat menghadirkan tantangan bagi desainer. Katakanlah tim branding telah memutuskan untuk beberapa alasan yang tidak terkait untuk menggunakan filter hitam-putih untuk semua gambar, sekarang halaman produk akan menjadi off-brand jika menekankan warna item. Inilah sebabnya mengapa bisnis e-commerce yang mengutamakan belanja online harus memulai proses desain web dengan desain halaman produk.

Pada saat yang sama, membiarkan kepribadian merek bersinar melalui halaman produk juga dapat menghasilkan kebebasan berkreasi, desain yang memberikan gambaran yang jelas tentang sikap merek. Tetapi juga tidak ada kata terlambat untuk mempertimbangkan desain ulang situs yang lengkap jika membantu mengoptimalkan halaman produk.

Demikian pula, halaman checkout seringkali merupakan versi halaman produk yang sangat disederhanakan, menampilkan gambar produk utama dalam miniatur, harga, dan kuantitas dengan opsi untuk membuat perubahan.

Mengingat hampir 70% dari keranjang belanja ditinggalkan, waktu checkout adalah kesempatan ideal untuk menampilkan manfaat yang tercantum pada halaman produk seperti waktu pengiriman dan biaya rendah. Melapisi halaman checkout di atas halaman produk juga akan memudahkan pengguna untuk mengklik untuk kembali, daripada berpotensi meninggalkan situs web.

4. Secara selektif memprioritaskan informasi

Halaman produk harus menyeimbangkan menginformasikan calon pembeli tanpa membanjiri mereka dengan informasi. Ini berarti perancang harus membuat keputusan tentang apa yang harus dilihat pengguna dan kapan. Sebagian dari ini berkaitan dengan konten apa yang ditempatkan dalam kaitannya dengan flip. Namun teknik desain khusus (seperti ukuran, warna, dan gaya font) yang menjadi prioritas dirangkum dalam prinsip hierarki visual .

Informasi apa yang diprioritaskan dapat bergantung pada apa yang dijual. Untuk produk estetika seperti pakaian, furnitur, karya seni dll, citra produk akan menjadi nilai jual utama. Untuk layanan atau produk yang tidak memiliki elemen visual, deskripsi yang menjelaskan produk akan diprioritaskan.

Selalu dapat mengandalkan CTA untuk menjadi prioritas tinggi dalam konteks apa pun, tetapi itu tidak berarti harus berlebihan dengan warna yang keras atau tombol yang terlalu besar. Salah satu teknik utama untuk mendesain CTA adalah menciptakan kontras terhadap elemen halaman lainnya.

Terakhir, pelacakan mata dapat membantu mengidentifikasi secara lebih ilmiah bagian halaman mana yang menarik perhatian pengguna. Teknik penting untuk memprioritaskan informasi adalah dengan menyingkat atau menciutkan konten sekunder. Akan sangat umum di bagian FAQ, di mana daftar pertanyaan akan ditampilkan dan pengguna harus menekan tombol (seringkali ikon plus atau segitiga) untuk melihat jawabannya.

Demikian pula, carousel dapat digunakan untuk menampilkan sampel konten yang selektif (seperti gambar atau ulasan pelanggan) dalam bagian horizontal yang sempit, yang memungkinkan pengguna untuk menelusuri lebih lanjut.

Pendekatan-pendekatan ini tidak hanya menjaga situs agar tidak merasa terlalu berantakan, tetapi juga mengundang interaksi—menjaga pengunjung tetap terlibat daripada membaca secara pasif.

5. Ceritakan sebuah cerita dengan gambar

Gambar pasti merupakan bagian yang paling menarik dari desain halaman produk karena alasan sederhana bahwa mereka lebih cepat dipindai daripada teks. Mungkin tidak mengherankan bahwa pembeli online akhir-akhir ini mengharapkan untuk melihat rata-rata 6 gambar dan 3 video di halaman produk, menurut penelitian oleh Salsify.

Pada saat yang sama, gambar pada halaman produk harus lebih dari sekadar menarik perhatian: mereka harus membuat produk digital terasa nyata. Ini berarti bahwa gambar harus menciptakan pengalaman produk, menceritakan sebuah kisah tanpa kata-kata.

Bagaimana gambar melakukan ini dapat bergantung pada produk. Untuk produk fisik, dimensi seringkali penting, dan ini melibatkan lebih dari sekadar menampilkan pengukuran. Dengan furnitur, misalnya, gambar yang menunjukkan produk di ruangan berperabotan lengkap tidak hanya memberikan ide dekorasi kepada pelanggan, mereka juga dapat membandingkannya dengan objek terdekat untuk skala yang lebih baik.

Merek pakaian biasanya akan menggunakan model untuk memamerkan kecocokannya, tetapi mereka juga dapat bekerja lebih keras untuk menunjukkan model dalam pengaturan tertentu, mengisyaratkan potensi masa depan yang dapat menyertai pembelian. Dalam situasi di mana bahan-bahan (atau suku cadang mekanis) adalah nilai jual utama, ini dapat dipamerkan dengan cara yang artistik, seperti dalam butiran animasi desain Teh Bennett yang digambarkan di sini.

Untuk produk atau jasa tanpa komponen visual, desainer harus lebih kreatif, menggunakan gambar yang membangkitkan pengalaman menggunakan produk. Selain itu, menggunakan ikon atau ilustrasi sederhana untuk menyertai bagian cara kerjanya dapat dengan mudah merangkum langkah-langkah proses untuk pelajar visual. Untuk pendekatan ini, ambil inspirasi dari desain infografis untuk mendapatkan ide tentang cara memfilter data kompleks melalui gambar.

Desain halaman produk adalah sebagian ilmu, sebagian gaya, dan bisnis. Pada akhirnya, halaman produk yang hebat dirancang untuk mengangkat produk dari layar komputer dan menjadi kenyataan sehari-hari pelanggan. Semoga panduan ini memberikan tempat untuk memulai tentang cara mencapai keksuksesan penjualan online.

Gambar : Ecommerce campaign concept illustration dari freepik.com

Normal 0 false false false IN X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0cm; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Arial; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;}