👉 11 Prinsip Reka Bentuk Web yang Akan Meningkatkan Kadar Penukaran Anda

31 Idea Generasi Membawa Pintar Anda Boleh Melaksanakan Segera (Dikemaskini)

Adakah anda mahu meningkatkan penukaran di tapak web anda? Sebagai pemasar pintar tahu, reka bentuk anda boleh membuat semua perbezaan. Dalam siaran ini, kami akan berkongsi 11 prinsip reka bentuk web yang akan meningkatkan kadar penukaran anda.

Ramai pemasar harganya mengenai pentingnya SEO, media sosial, yang membuat magnet utama yang menukar dan sebagainya, tetapi mempunyai reka bentuk laman web yang sangat baik untuk bermula dengan begitu sering diabaikan. Walaupun semua komponen ini penting, reka bentuk web anda bukan sekadar "wajah cantik": ia sebenarnya boleh membuat atau memecah kadar penukaran anda.

Menurut kajian dari Stanford University, 46.1% orang mengatakan reka bentuk laman web adalah kriteria utama untuk menentukan sama ada syarikat itu boleh dipercayai atau tidak. Oleh itu, sangat penting bahawa reka bentuk anda kelihatan profesional.

Sama ada laman web anda estetika menyenangkan atau memainkan peranan besar dalam pengoptimuman kadar penukaran. Diberi 15 minit untuk mengambil kandungan, dua pertiga orang lebih suka membaca sesuatu yang direka dengan indah daripada sesuatu yang jelas (menurut kajian ini oleh Adobe). Jadi jika anda mahu orang membaca catatan blog anda, mereka perlu kelihatan menarik.

Tetapi itu bukan semua. Jika laman web anda tidak menarik, orang akan benar-benar meninggalkan laman web anda sama sekali. 38% orang, tepatnya. Itulah banyak petunjuk yang hilang!

Oleh itu tanpa mengira sama ada atau tidak reka bentuk adalah forte anda, anda tidak boleh mengabaikannya. Pelajari reka bentuk web, menyewa syarikat bebas, menggunakan pereka, atau lakukan apa sahaja!

Untuk memulakan, berikut adalah beberapa prinsip reka bentuk penting yang akan memberi anda rangsangan yang segera dan lestari dalam penukaran …

1. Ikut Undang-undang Hick

Undang-undang Hick adalah teori popular yang dikutip oleh pelbagai individu untuk tujuan yang berbeza, tetapi sering dirujuk dari segi reka bentuk web. Dinamakan oleh ahli psikologi British, William Edmund Hick, undang-undang menyatakan bahawa masa yang diperlukan untuk seseorang membuat keputusan adalah berpadanan secara langsung dengan pilihan yang mungkin dia ada.

Dengan kata lain, dengan meningkatkan bilangan pilihan, masa keputusan juga meningkat.

Imej melalui Usabilla

Anda mungkin pernah mendengar tentang kajian terkenal oleh ahli psikologi Sheena Iyengar dan Mark Lepper di mana mereka mendapati meja paparan dengan 24 jenis jam kurang menarik minat daripada meja yang mempamerkan hanya enam jenis jem. Malah, orang yang melihat paparan yang lebih besar hanya satu per sepuluh seperti yang mungkin dibeli sebagai orang yang melihat paparan kecil!

Itulah contoh Hick's Law dalam tindakan: tindakan hilang berkadaran dengan jumlah pilihan yang dibentangkan.

Dari segi reka bentuk web, anda boleh meningkatkan penukaran dengan mengehadkan bilangan pilihan yang ada pengguna. Perkara pertama yang perlu difikirkan apabila memikirkan di mana untuk mengurangkan bilangan pilihan di laman web anda ialah bar navigasi. Jelas, anda tidak mahu terlalu banyak pautan untuk dipilih, jika tidak, pengguna akan kehilangan minat terhadapnya sama sekali.

Dengan kata lain, jangan lakukan ini:

Walau bagaimanapun, Undang-undang Hick tidak berhenti di sana. Fikirkan semua keputusan penting yang penting yang perlu dibuat pengguna di laman web anda, selain daripada pautan navigasi yang hendak ditekan.

Berikut adalah beberapa:

  • Menentukan sama ada untuk menggunakan bar navigasi atau tatal ke bawah halaman lebih
  • Memetik berita utama untuk melihat catatan blog mana yang hendak dibaca
  • Memutuskan sama ada untuk memuat turun magnet utama anda, berkongsi siaran anda di media sosial, atau tinggalkan komen
  • Memilih antara membuat pembelian, membaca ulasan produk, atau menyemak imbas untuk lebih banyak produk

Ini hanya menggaru permukaan kebanyakan keputusan yang perlu dibuat oleh pengguna anda. Adalah normal untuk merasa terharu cuba untuk mencari tahu di mana untuk memulakan pemotongan keputusan ini, bagaimanapun, terdapat cara mudah untuk menggunakan Undang-undang Hick …

Apa yang anda perlu lakukan ialah memasang pintu masuk selamat penuh skrin pada halaman utama anda. Pintu selamat datang merangkumi keseluruhan skrin dengan satu panggilan untuk bertindak, jadi pengguna hanya melihat satu pilihan yang tersedia pada mulanya. Jika mereka mahu melihat lebih banyak pilihan, mereka perlu menatal ke bawah.

Ini membolehkan anda meminimumkan gangguan pada halaman utama anda, sambil tetap menjaga kefungsian halaman utama anda.

Secara keseluruhannya, apabila menggunakan Hick's Law ke laman web anda, penting bagi anda untuk mengetahui tindakan mana yang paling penting untuk garis bawah anda. Sebagai contoh, adakah anda mahu pengguna memilih untuk menggunakan magnet utama anda, atau adakah anda mahu mereka meletakkan produk di dalam troli beli-belah mereka? Setiap halaman di tapak anda harus mencapai satu tujuan utama.

Semakin anda boleh mengehadkan pilihan pengguna anda, lebih mudah laman web anda akan digunakan, dan penukaran anda akan meroket.

2. Leverage the Third Ketiga

Peraturan Ketiga adalah prinsip fotografi yang popular yang juga boleh digunakan untuk reka bentuk web. Dengan Peraturan Ketiga, anda sepatutnya secara visual membahagikan imej (atau halaman laman web) menjadi ketiga (kedua-dua menegak dan mendatar).

Ini memberi anda sembilan dataran yang sama:

Menurut peraturan itu, empat persimpangan tengah adalah tempat menarik yang strategik. Apabila objek diletakkan pada titik-titik ini, ia menghasilkan imej atau reka bentuk yang paling berkesan.

Dari segi reka bentuk web, anda boleh meletakkan elemen paling penting halaman di persimpangan ini untuk memberi tumpuan kepada mereka, meningkatkan penukaran anda.

Contohnya, laman utama Chris Lema mempunyai unsur-unsur yang paling penting (testimoni dan butang "Mula Sini") di dua persimpangan kiri:

Imej pahlawan John Lee Dumas mengandungi panggilan untuk tindakan butang tepat di persimpangan kiri bawah:

Kissmetrics juga meletakkan panggilan mereka ke butang tindakan di persimpangan kiri bawah:

Perhatikan bagaimana tiada laman web ini meletakkan bar navigasi mereka di mana-mana berhampiran persimpangan.Ini membantu untuk memastikan pengunjung menumpukan pada panggilan utama untuk bertindak di halaman, dan bukannya memimpin mereka untuk menavigasi di tempat lain.

Anda tidak perlu merancang keseluruhan laman web anda dengan ketat oleh peraturan ketiga, sebaliknya anda boleh menggunakannya sebagai alat untuk membantu anda meletakkan elemen terpenting anda.

Cuba tangkapkan tangkapan skrin laman web anda (tepat di atas lipatan atau hanya seksyen header anda, bukan keseluruhan laman kerana tiada siapa yang melihat laman web dengan cara itu), dan bahagikannya ke sembilan dataran yang sama. Kemudian, anda boleh membuat keputusan jika anda mahu membuat sebarang tweak.

3. Hormati Kesabaran Pengguna

(Ataupun, imkesabaran.) Ternyata orang sangat tidak sabar, terutamanya ketika melayari web.

Menurut satu kajian oleh Kumpulan Aberdeen, penundaan semata-mata kedua dalam masa beban halaman menghasilkan pengurangan 7% dalam penukaran!

Oleh itu, apabila datang ke kelajuan memuatkan halaman, setiap hitungan kedua. Untuk memeriksa kelajuan halaman anda dan menyelesaikan masalah, jalankan tapak anda melalui satu atau lebih alat gratis ini:

  • Wawasan Google PageSpeed
  • Pingdom
  • GTmetrix
  • KeyCDN
  • Sucuri

4. Gunakan Ruang Negatif

Dalam reka bentuk web, ruang spasi sering dirujuk sebagai ruang negatif. Ruang positif adalah ruang yang mengandungi semua elemen di laman web anda, sedangkan ruang negatif adalah semua ruang kosong di antara.

Walaupun namanya, ruang negatif sebenarnya adalah positif perkara dalam reka bentuk web, kerana tanpa laman web anda akan terbaca dan tidak dapat digunakan.

Ruang negatif tidak hanya merujuk kepada ruang antara elemen yang lebih besar pada halaman anda, seperti ruang diantara pengepala dan kandungan anda, atau ruang antara bar sisi dan kandungan anda. Ia juga merujuk kepada ruang antara semua elemen yang lebih kecil pada halaman anda, seperti ruang antara perenggan, ruang antara baris teks, dan juga ruang antara huruf.

Beri perhatian kepada semua dari bentuk ruang negatif di laman web anda berfungsi untuk memastikan segala sesuatu dapat dibaca, mudah diakses (sangat penting, kerana itu adalah cara orang membaca laman web) dan mudah di mata. Dan tentu saja, semua ini membawa kepada peningkatan penukaran.

Flat.io menggunakan satu ton ruang negatif di laman web mereka untuk menjaga fokus pada panggilan utama mereka untuk bertindak, yang akan mendaftar dengan Google atau Facebook.

Berikut adalah beberapa petua untuk memastikan anda menggunakan ruang negatif yang mencukupi:

  • Lebih kecil fon anda adalah, lebih banyak ruang yang anda perlukan di antara huruf.
  • Ketinggian baris anda (menentukan ruang di atas dan di bawah baris teks) hendaklah lebih kurang 150% daripada saiz fon untuk salinan badan (dalam CSS, ini akan dibaca:garis ketinggian: 1.5;).Imej melalui Pearsonified
  • Walau bagaimanapun, fon yang lebih kecil memerlukan lebih tinggi tahap pemurah. Perhatikan perbezaan yang menjadikan garis ketinggian yang lebih besar dalam kedua-dua perenggan di bawah ini:Imej melalui W3.org
  • Memecahkan blok besar teks ke dalam perenggan yang lebih kecil untuk meningkatkan ruang negatif di antara mereka dan membuat catatan blog anda lebih mudah dibaca.
  • Tambahkan ruang putih di antara elemen yang lebih besar di tapak anda (bar sisi, header, badan, footer, dan sebagainya) dengan menggunakan margin dan padding yang mencukupi.

5. Pertimbangkan F-Layout

Para penyelidik telah mendapati bahawa kelakuan semulajadi pengguna ketika menyemak imbas web adalah untuk membaca skrin dalam corak "F".

Berikut adalah peta haba yang menunjukkan di mana mata pengguna biasanya mendarat di laman web:

Imej melalui Envato

Dan inilah yang kelihatan seperti wireframe:

Seperti yang anda lihat, orang mula melihat dari kiri ke kanan di bahagian atas skrin. Kemudian mereka mengimbas halaman ke bawah, membuat penempahan kecil ke dalam kandungan. Kawasan halaman yang mendapat jumlah penglihatan yang paling rendah adalah bahagian bawah kanan.

Jadi apa maksudnya untuk meningkatkan penukaran anda? Nah, anda boleh memanfaatkan kelakuan ini dengan meletakkan objek yang paling penting dan panggilan untuk bertindak sepanjang garis F-bentuk, dan meletakkan objek yang kurang penting dalam kawasan penglihatan yang lebih rendah.

Sebagai contoh, anda boleh meletakkan panggilan utama anda untuk bertindak di bahagian atas halaman ke arah sebelah kiri kerana itu adalah di mana pengguna akan melihat terlebih dahulu.

Kemudian, jika anda mahu pengguna anda bertahan untuk membaca jawatan blog terbaharu anda, anda boleh meletakkan tajuk utama tersebut di sebelah kiri halaman. Maklumat yang kurang penting (seperti iklan ditaja) boleh pergi di bar sisi di sebelah kanan halaman anda, dan anda boleh meletakkan maklumat yang anda ingin mendapatkan keterlihatan yang paling rendah (seperti dasar cookie) di bahagian bawah kanan- sudut tangan halaman.

6. Warna Perkara

"Warna adalah aspek reka bentuk web yang sering direndahkan tetapi ia boleh memainkan peranan penting dalam kebolehgunaan serta menyampaikan makna keseluruhan jenama serta suasana keseluruhan laman web," kata pereka Tom Kenny. "Kombinasi warna yang berbeza boleh membangkitkan emosi dan tindak balas yang berbeza."

Apabila memilih skema warna untuk tapak web anda, pastikan untuk memilih kombinasi yang membangkitkan emosi yang anda mahu menyampaikan jenama anda.

Satu cara praktikal untuk melakukan ini adalah dengan mengkaji papan Pinterest dengan imej yang mencerminkan penglihatan anda untuk jenama anda. Kemudian anda boleh memuat naik beberapa imej tersebut ke Roda Warna Adobe menggunakan ikon kamera di penjuru kanan sebelah atas skrin.

Apabila imej dimuat naik, ia akan secara automatik membuat skema warna untuk anda berdasarkan warna dalam foto. Anda juga boleh menggerakkan pilihan sekitar jika anda mahu mengubah warna individu.

Sebaik sahaja anda telah mencipta skema warna anda, ada satu perkara yang perlu diingat yang akan membuat atau memecahkan penukaran anda:

Sebaliknya.

Gunakan kontras untuk menyimpan teks, tajuk utama, dan panggilan kepada butang tindakan yang ketara dan boleh dibaca. Dengan kata lain, font dan warna butang anda harus berbeza dengan latar belakang (mis.latar belakang putih dengan teks hitam), dan unsur-unsur yang anda ingin menyerlahkan (cth. melanggan butang) mestilah dalam warna yang menonjol dari seluruh tapak anda.

Oleh itu, jika kita menggunakan skema warna yang kita buat di atas, kita mahu menjadikan warna biru sebagai warna utama, dan gunakan warna kuning cerah sebagai panggilan kepada warna tindakan (kerana ia memberikan kontras yang paling).

Lihatlah MailChimp sebagai contoh. Unsur-unsur yang menarik mata anda?

Nah, sudah tentu imej di tengah dengan wanita itu sangat menarik perhatian, namun dua panggilan oren untuk butang tindakan benar-benar menarik perhatian. Itulah kerana mereka sangat berbeza dengan semua blues di seluruh halaman.

Ketika datang untuk memilih warna yang tepat untuk butang anda, anda mungkin ingin melihat artikel kami tentang butang warna yang paling baik (inilah yang menunjukkan penyelidikan).

7. Ingat untuk K.I.S.S.

Anda mungkin pernah mendengar mantra "Keep it Simple, Stupid" sebelum ini. Nah, ia juga digunakan untuk reka bentuk web.

Kesederhanaan sangat penting ketika memandu penukaran. Sebaik sahaja anda membuat halaman, tanya diri anda sama ada ada cara untuk menjadikannya lebih mudah. Hasilnya biasanya lebih estetik menyenangkan, dan ia hampir selalu menjadi lebih baik.

Ingat Hick's Law? Yang datang bermain di sini, tetapi kesederhanaan lebih daripada sekadar membatasi pilihan. Ini tentang mewujudkan reka bentuk keseluruhan yang bersih yang tidak rapi dan mengurangkan gangguan.

Sama seperti Hick's Law adalah fakta bahawa orang hanya boleh mengendalikan banyak maklumat pada satu masa. Secara visual, jika kita melihat terlalu banyak perkara yang semuanya dijejali menjadi satu halaman, kita akan menjadi lemah dan ia mengganggu kita. Mewujudkan pengalaman pengguna yang hebat di laman web anda bermakna menyingkirkan apa-apa yang tidak semestinya diperlukan untuk reka bentuk.

Apple adalah salah satu daripada contoh kesederhanaan dalam reka bentuk web, dan sangat berkesan bahawa banyak jenama lain telah mengikuti.

8. Gunakan Peraturan 8-Kedua

Aturan umum ialah anda hanya mempunyai 8 saat untuk mendapatkan perhatian pengunjung, kerana itu adalah jangka panjang perhatian manusia. (Ya, ia lebih pendek daripada rentang perhatian ikan emas!)

Anda hanya mempunyai peluang yang sangat kecil untuk melibatkan pengguna apabila mereka pertama kali mendarat di laman web anda, jadi buat detik-detik tersebut!

Berikut adalah beberapa tip untuk menarik perhatian dan meningkatkan penukaran dalam 8 saat pertama:

  • Gunakan tajuk besar yang didorong oleh keuntungan yang ringkas dan tepat.
  • Gunakan imejan yang menarik yang menyampaikan titik utama atau tujuan halaman anda dan menarik mata ke arah panggilan utama anda untuk bertindak.
  • Buat butang pendaftaran besar, mudah dan jelas.
  • Gunakan kata-kata kuasa untuk membuat salinan anda lebih menarik dan menarik.
  • Menggabungkan multimedia seperti video, audio, atau kandungan interaktif lain.
  • Gunakan kesan hover pada butang anda (mis. Menjadikan mereka menukar warna pada tetikus) untuk menjadikannya lebih memuaskan untuk klik.
  • Gunakan animasi keluar animasi untuk melibatkan diri semula pelawat yang kehilangan minat.

9. Ingat Prinsip Kesamaan Gestalt

Prinsip reka bentuk Gestalt dapat diringkaskan oleh kenyataan ini dari psikologi Gestalt Kurt Koffka: "Seluruhnya adalah lain daripada jumlah bahagian. "Pada asasnya, mata manusia dan otak merasakan reka bentuk bersatu dengan cara yang berbeza daripada yang mereka anggap komponen individu reka bentuk itu.

Prinsip Gestalt yang pertama adalah hukum persamaan, yang mengatakan bahawa mata / otak manusia suka menggabungkan objek yang sama. Ia adalah satu mekanisme yang membolehkan kita memahami perkara-perkara, dan menyusun persekitaran yang bising.

Dari segi reka bentuk web, anda boleh memanfaatkan undang-undang ini dengan mengelompokkan item yang anda mahu dikaitkan dengan satu sama lain, seperti kotak testimoni, butang penukaran, atau imej.

Sebagai contoh, jika anda mempunyai testimonial yang luar biasa dan anda mahu menggunakannya untuk meningkatkan penukaran pada borang penyertaan anda, anda boleh meletakkannya terus di bawah borang. Walaupun testimoni itu tidak ditulis secara khusus berkaitan dengan magnet utama anda, pengguna akan mengaitkan keduanya kerana mereka berada dalam jarak dekat.

melalui Chris Lema

Undang-undang persamaan juga penting untuk pengalaman pengguna. Dengan mengumpulkan semua unsur utama borang pendaftaran anda bersama-sama (tajuk, deskripsi, dan butang ikut serta) dan menyimpannya cukup jauh dari elemen lain pada halaman anda (menggunakan ruang negatif), otak pengguna akan dapat untuk memproses maklumat dengan lebih cepat dan lebih cekap.

Ini sudah tentu bagus untuk penukaran terutamanya kerana, seperti yang kita katakan pada titik sebelumnya, orang mempunyai rentang perhatian yang sangat singkat!

10. Gunakan Faces untuk Meningkatkan Keterikatan

Orang suka muka manusia. "Apabila kita melihat wajah, kita dicetuskan secara automatik untuk merasakan sesuatu atau berempati dengan orang itu," kata pereka bentuk Sabina Idler. "Jika kita mengenali kandungan di laman web – seperti masalah, dilema, kebiasaan atau apa saja – kita rasa berkaitan dan difahami."

Pastikan anda memasukkan muka ke dalam artikel, kajian kes dan testimonial, halaman opt-in, dan halaman pendaratan untuk meningkatkan penukaran anda.

Jika anda adalah wajah jenama anda, ini mudah dilakukan. Dapatkan foto yang dilakukan, dan pastikan jurugambar mengambil banyak tembakan mendatar dengan ruang negatif pada satu sisi anda. Dengan cara itu, anda boleh membuat panggilan untuk bertindak, atau beberapa teks di sana.

Berikut adalah contoh dari Melanie Duncan:

Walau bagaimanapun, jika anda bukan wajah jenama anda, anda masih boleh menggunakan muka di laman web anda dengan menyewa model, atau menggunakan foto stok. Pastikan wajah yang anda pilih mewakili jenama anda dengan tepat, supaya pengguna dapat berkait dengan wajah.

Vendeve, rangkaian sosial untuk usahawan wanita, melakukan tugas yang baik dengan menggunakan muka yang mencerminkan demografi sasaran mereka:

11. Sumber Imej Tinggi

Jika ada satu perkara yang benar-benar boleh menyeret kualiti postingan blog atau sekeping kandungan, ia adalah imej berkualiti rendah.

Malah, imej boleh membuat atau memecahkan perjanjian. Tempatan Bright mendapati bahawa 60 peratus pengguna lebih bersedia untuk mempertimbangkan hasil carian yang menyertakan imej, dan 23 peratus lain lebih cenderung untuk menghubungi perniagaan mempamerkan imej.

Khususnya, anda harus mengelakkan penggunaan gambar stok tanpa hayat yang tidak relevan dan hambar. Penyelidikan dari Skyword mendapati bahawa jika kandungan anda termasuk imej yang menarik, anda akan mendapat purata 94% lebih banyak tontonan!

Oleh itu, bukannya menggunakan imej hambar, sumber foto bermutu tinggi yang membangunkan persatuan positif dengan kandungan dan perasaan itu peribadi. Ingat: orang seperti jenama yang mereka rasa sama dengan diri mereka sendiri. Sekiranya imejan anda terlalu "kaku" atau "korporat", anda akan mengalihkan pelawat anda.

Berikut adalah beberapa tempat kegemaran kami untuk mencari fotografi saham percuma yang berkualiti tinggi dan peribadi:

  • Peksel
  • Kematian ke Stok
  • StockSnap
  • Unsplash
  • Superfamous Studios
  • Ruang Negatif
  • Freeography
  • Visual Sedikit
  • Picjumbo
  • Kaboompics

Sekarang bahawa anda memahami prinsip reka bentuk web 11 ini, letakkannya dengan baik dengan melihat wajah anda yang rapi. Prinsip mana yang anda pecah?

Adakah anda mempunyai terlalu banyak pautan navigasi? Ruang tidak mencukupi? Atau mungkin anda tidak mempunyai sebarang muka di laman web anda?

Banyak masalah ini dengan cepat dan mudah diperbaiki dengan hanya beberapa tweak. Anda boleh menjalankan audit kadar penukaran untuk melihat di mana tapak anda boleh menggunakan rangsangan.

Selain itu, jika anda menikmati artikel ini, anda mungkin ingin menyemak pos kami yang lain pada 4 Tips Reka Bentuk untuk Meningkatkan Kadar Penukaran Laman Web.

Tonton video itu: Song of Phoenix (思 美人) – Episode 33 [Eng + Indo Subs]. Drama Cina

Like this post? Please share to your friends:
Tinggalkan Balasan

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: