• Desain E-Commerce & Antarmuka Pengguna (UI)

Desain UI E-niaga: Cara Membuat Halaman Koleksi Produk yang Menarik (6 Taktik yang Dapat Ditindaklanjuti)

  • Felix Rose-Collins
  • 6 min read
Desain UI E-niaga: Cara Membuat Halaman Koleksi Produk yang Menarik (6 Taktik yang Dapat Ditindaklanjuti)

Intro

Halaman koleksi produk sayangnya sering diabaikan oleh para desainer dan copywriter. Meskipun banyak upaya yang dilakukan untuk membuat halaman produk dan halaman arahan yang sangat menarik, halaman koleksi produk sering diabaikan dan tetap tidak menarik.

Mari kita lihat enam cara yang dapat ditindaklanjuti untuk membuat halaman koleksi produk yang menarik, menginspirasi tindakan, dan mendorong lalu lintas dan konversi.

Pastikan Foto Produk Utama Menarik

Hambatan desain pertama yang harus diatasi oleh halaman koleksi produk adalah memastikan foto utama menarik dan menarik. Jika Anda tidak menarik perhatian pembeli secara praktis segera setelah mereka membuka halaman atau dalam beberapa gulir, Anda mungkin telah kehilangan mereka.

Mulailah dengan mempertimbangkan segala sesuatu yang Anda ketahui tentang audiens target Anda. Apa yang mereka sukai? Mengapa mereka menyukai produk Anda? Apa yang mereka sukai dari produk Anda? Bagaimana Anda dapat menempatkan fitur-fitur ini di depan dan di tengah?

Kemudian, mulailah mempertimbangkan tata letaknya. Apakah gambar perlu diperbesar? Apakah mereka memerlukan latar belakang yang cerah atau netral? Berapa banyak produk yang harus Anda tampilkan secara berurutan?

Idealnya, Anda akan menguji A/B beberapa variasi desain. Terkadang, perubahan terkecil dapat membuat perbedaan besar.

Lihatlah halaman koleksi pakaian bayi ini. Produknya sendiri sudah lucu dan menarik, jadi tidak perlu ditampilkan dengan cara yang baru. Label "new in" dengan jelas membedakan produk tertentu dan memastikan pembeli memperhatikannya.

Perkenalkan Ranktracker

Platform Lengkap untuk SEO yang Efektif

Di balik setiap bisnis yang sukses adalah kampanye SEO yang kuat. Namun dengan banyaknya alat dan teknik pengoptimalan yang dapat dipilih, mungkin sulit untuk mengetahui dari mana harus memulai. Nah, jangan takut lagi, karena saya punya hal yang tepat untuk membantu. Menghadirkan platform lengkap Ranktracker untuk SEO yang efektif

Kami akhirnya membuka pendaftaran ke Ranktracker secara gratis!

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

Menetapkan produk seperti ini pada latar belakang netral adalah cara yang bagus untuk membuatnya menonjol.

mamasandpapas

Sumber: mamasandpapas.com

Cara lain untuk membuat foto utama pada halaman koleksi menarik adalah dengan menunjukkan benda yang sedang digunakan. Jika Anda melihat halaman rumah kaca yang ramping ini, Anda akan melihat bagaimana hal ini bisa dilakukan dengan mudah. Setiap gambar benar-benar berbeda, dalam palet warna yang berbeda dan menunjukkan item dari sudut yang berbeda. Mereka membuatnya mudah untuk membayangkan produk di rumah Anda sendiri.

greenhouseemporium

Sumber: greenhouseemporium.com

Perkenalkan Ranktracker

Platform Lengkap untuk SEO yang Efektif

Di balik setiap bisnis yang sukses adalah kampanye SEO yang kuat. Namun dengan banyaknya alat dan teknik pengoptimalan yang dapat dipilih, mungkin sulit untuk mengetahui dari mana harus memulai. Nah, jangan takut lagi, karena saya punya hal yang tepat untuk membantu. Menghadirkan platform lengkap Ranktracker untuk SEO yang efektif

Kami akhirnya membuka pendaftaran ke Ranktracker secara gratis!

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

Ini adalah taktik yang bagus jika Anda ingin memudahkan pelanggan untuk melihat seperti apa produk akhir, dan membantu mereka membayangkan seluruh gaya hidup.

Memastikan Filter Tidak Terlalu Mengganggu

Halaman koleksi memerlukan filter agar dapat berguna. Pelanggan tidak dapat diharapkan untuk menelusuri halaman demi halaman produk untuk menemukan satu item tertentu. Mereka mungkin tidak menyadari luasnya penawaran Anda, dan mereka mungkin tidak memiliki waktu untuk window shopping yang lama.

Filter harus mengkategorikan produk Anda dengan cara yang berarti. Harga, ukuran dan bahan hanyalah beberapa filter yang paling umum digunakan. Pertimbangkan produk itu sendiri dan apa saja faktor pembedanya.

Semakin kompleks produknya, semakin banyak filter yang harus ada. Anda juga bisa menawarkan filter yang bermanfaat seperti "bukan untuk pemula" atau "hanya untuk profesional" jika filter tersebut akan membantu pelanggan memilih item yang tepat.

Filter juga tidak boleh terlalu mengganggu. Filter seharusnya mudah diakses, tetapi tidak menghabiskan sebagian besar halaman, atau dengan cara apa pun mengganggu pengalaman penjelajahan.

Lihatlah halaman koleksi papan dek komposit ini. Filter disediakan di sebelah kiri, dan filter ini memberikan keseimbangan yang tepat antara mudah terlihat dan tidak mengganggu. Perhatikan bahwa filter ini juga dapat dilipat, sehingga jumlah informasi yang banyak tidak akan membebani pelanggan.

Mereka juga telah dipesan dengan cara yang logis - kebanyakan orang ingin mempersempit warna dan bahan sebelum mereka menyelami detail yang lebih spesifik, seperti ukuran.

Ovaeda

Sumber: Ovaeda.com

Anda dapat dengan mudah menerapkan solusi serupa yang tidak akan memakan banyak tempat namun tetap akan meningkatkan pengalaman pengguna secara signifikan dan memungkinkan pelanggan mempersempit pilihan mereka dalam hitungan detik.

Menampilkan Deskripsi Produk Singkat pada Hover

Pikirkan halaman koleksi produk sebagai pusat informasi. Di sinilah Anda menampilkan semua produk Anda dalam kategori tertentu. Semakin Anda membantu, semakin besar kemungkinan pelanggan untuk berkonversi.

Cobalah untuk tidak membuat pembeli mengklik sebuah barang, membaca deskripsi produk, dan kemudian mengklik kembali. Mereka harus membuang waktu untuk menggulir untuk mencari tahu di mana mereka baru saja berhenti. Atau, jika mereka terus membuka produk di tab baru, mereka akan segera kewalahan dengan jumlah item yang mereka coba bandingkan.

Semakin banyak informasi berguna yang dapat Anda tampilkan di halaman koleksi, semakin baik. Dengan menambahkan deskripsi produk yang sederhana dan singkat saat seseorang mengarahkan kursor ke produk, Anda dapat membantu pelanggan membandingkan produk saat itu juga.

Halaman koleksi kalsium bariatrik ini bekerja dengan sangat baik. Anda mendapatkan deskripsi produk singkat, yang memberi tahu Anda vitamin dan mineral apa saja yang bisa Anda temukan di dalam produk. Manfaatnya juga disorot: rasanya enak, meningkatkan kesehatan kekebalan tubuh, dan sebagainya.

Bariatricfusion

Sumber: Bariatricfusion.com _

Perhatikan betapa singkatnya deskripsi tersebut. Anda dapat membacanya dalam beberapa detik dan terus membandingkan produk.

Saat menerapkan taktik ini, pertimbangkan dengan cermat deskripsi hover. Deskripsi tidak harus sama dengan deskripsi pada halaman produk. Deskripsi tersebut harus membahas secara singkat manfaat atau fitur utama dari produk tersebut, dengan jelas membedakannya dari produk lain di halaman tersebut.

Fokuslah untuk menjadi informatif daripada mendorong penjualan di sini. Pelanggan lebih cenderung melakukan konversi jika mereka yakin dengan pilihan mereka.

Berikan Beberapa Bukti Sosial

Bukti sosial adalah alat yang hebat untuk membuat halaman lebih menarik dan bermanfaat. Bukti sosial akan menunjukkan kepada pelanggan bahwa Anda dapat dipercaya, dapat diandalkan, dan produk Anda berkualitas baik. Hal ini sangat penting terutama bagi pelanggan baru yang belum terbiasa dengan merek Anda dan yang mungkin lebih ragu-ragu untuk melakukan konversi.

Bukti sosial hadir dalam berbagai bentuk, tetapi peringkat bintang adalah jenis bukti yang paling berguna untuk dicantumkan pada halaman koleksi Anda. Mereka akan melayani beberapa tujuan:

  • menilai kualitas masing-masing produk
  • menunjukkan berapa banyak pelanggan yang telah membelinya dan meluangkan waktu untuk mengulasnya
  • membantu pelanggan membuat keputusan pembelian yang lebih cepat

Peringkat bintang mudah untuk dimasukkan. Lihat halaman koleksi palet eyeshadow Sephora. Mereka mudah dikenali dan menampilkan semua informasi yang relevan: berapa banyak ulasan yang ada dan apa kepuasan keseluruhan dengan item tersebut. Anda juga bisa melihat dengan jelas bahwa salah satu dari palet ini jauh lebih populer daripada yang lain.

sephora

Sumber: sephora.com

Sinyal bukti sosial lainnya yang bagus untuk dimasukkan pada halaman koleksi Anda adalah notifikasi penjualan waktu nyata.

Lihat halaman stiker laptop khusus ini. Saat Anda menjelajah, popup yang tidak mengganggu akan muncul di sudut kanan bawah, memberi tahu Anda siapa saja yang telah melakukan pembelian di situs web, dari mana mereka berasal, dan apa yang mereka beli.

Ini adalah cara yang bagus untuk menambahkan sedikit FOMO pada taktik pemasaran Anda. Pelanggan akan diperlihatkan barang-barang lain, barang-barang yang jelas-jelas populer karena seseorang baru saja membelinya. Hal ini juga akan mengirimkan sinyal kepercayaan dan kredibilitas yang kuat.

Pastikan popup tidak terlalu mencolok atau mengganggu. Selain itu, cobalah untuk memberi jarak agar tidak mengganggu pembeli.

vinylstatus

Sumber: vinylstatus.com

Menampilkan Beberapa Tampilan Produk

Semakin baik pelanggan dapat melihat suatu produk, semakin tinggi peluang mereka untuk melakukan konversi. Semakin banyak gambar item yang Anda tampilkan di halaman koleksi, semakin banyak keterlibatan dan minat yang akan Anda hasilkan.

Anda bisa menggabungkan lebih dari satu gambar dengan beberapa cara. Anda dapat mengizinkan pengguliran galeri produk, atau Anda dapat menampilkan foto yang berbeda saat melayang.

Halaman pakaian anak laki-laki dari H&Mini menampilkan galeri produk yang dapat digulir. Anda bisa melihat semua foto yang ditampilkan pada halaman produk individual langsung dari halaman koleksi, jadi Anda tidak perlu mengklik lagi.

hm

Sumber:hm.com

Jika Anda lebih suka menampilkan foto yang berbeda pada hover, lihat halaman koleksi pakaian pantai wanita ini untuk mendapatkan inspirasi. Merek ini dengan cerdik menampilkan bagian belakang item saat melayang, sehingga Anda bisa melihat keseluruhannya tanpa harus membuka halaman lain. Ini adalah taktik yang bagus untuk merek pakaian.

simplybeach

Sumber:simplybeach.com

Saat memilih apakah akan menambahkan galeri atau foto yang melayang, pertimbangkan sifat item. Berapa banyak foto yang perlu dilihat oleh pembeli? Dan foto-foto apa saja yang harus ditampilkan?

Anda dapat menunjukkan produk yang sedang digunakan, atau Anda dapat menampilkan foto pelanggan jika foto tersebut dapat mempengaruhi pembeli baru. Anda dapat menunjukkan produk dari dekat, atau bahkan mencantumkan spesifikasi produk.

Menampilkan Item yang Baru Dilihat

Rekomendasi produk biasanya disediakan untuk halaman produk individual. Di sinilah merek akan meletakkan korsel "yang baru saja dilihat".

Namun, dengan menampilkannya di halaman koleksi, Anda dapat dengan lembut mengingatkan pelanggan tentang item yang telah mereka lihat dan sukai. Menghemat waktu dan tenaga mereka untuk membuka kembali riwayat mereka yang membuka banyak tab secara bersamaan.

Lihatlah halaman sepatu lari pria Adidas. Segera setelah Anda melihat satu produk, Anda akan mendapatkan fitur "yang baru dilihat" di bagian bawah halaman koleksi, sehingga Anda dapat terus memantau item yang menarik minat Anda.

adidas

Perkenalkan Ranktracker

Platform Lengkap untuk SEO yang Efektif

Di balik setiap bisnis yang sukses adalah kampanye SEO yang kuat. Namun dengan banyaknya alat dan teknik pengoptimalan yang dapat dipilih, mungkin sulit untuk mengetahui dari mana harus memulai. Nah, jangan takut lagi, karena saya punya hal yang tepat untuk membantu. Menghadirkan platform lengkap Ranktracker untuk SEO yang efektif

Kami akhirnya membuka pendaftaran ke Ranktracker secara gratis!

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

Sumber: adidas.com

Korsel yang sama juga ditampilkan pada masing-masing halaman produk, membuat pengalaman penjelajahan yang disesuaikan secara individual.

Anda juga dapat merekomendasikan produk kepada pelanggan berdasarkan item yang telah mereka lihat, seperti yang Anda lakukan pada halaman produk.

Membungkus

Pertimbangkan taktik desain halaman koleksi produk yang mana yang dapat Anda terapkan pada halaman Anda sendiri. Mungkin keenamnya dapat berperan dalam meningkatkan tingkat konversi Anda.

Selalu ingatlah sifat produk Anda dan poin-poin penting dari audiens Anda. Apa yang mereka cari, dan bagaimana upaya desain Anda dapat membantu mereka menemukannya?

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Mulai gunakan Ranktracker... Gratis!

Cari tahu apa yang menghambat situs web Anda untuk mendapatkan peringkat.

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

Different views of Ranktracker app