Amalan Halaman Utama Terbaik – 9 Elemen Paling Penting (+ Contoh)

Sama ada anda membina perniagaan atau laman web peribadi, banyak soalan mungkin terlintas di fikiran. Salah satu yang terbesar: Bagaimana anda membuat laman utama yang sebenarnya membuat pelawat melakukan apa yang anda mahu mereka lakukan?


Sekiranya anda ingin memanfaatkan sepenuhnya pengunjung anda, ada beberapa perkara yang anda mahukan mesti lakukan.

Sepanjang karier saya, saya telah membuat dan mengoptimumkan puluhan halaman utama di banyak industri, dan mempelajari ratusan yang lain. Terdapat amalan terbaik tertentu yang dikongsi oleh semua halaman pendaratan dengan penukaran tertinggi, dan anda akan mempelajarinya sekarang. Laman web anda akan mempunyai halaman utama yang terbaik.

Letakkan Matlamat Utama Anda di Atas Lipat

Apabila seseorang mengunjungi laman utama anda, mereka berminat dengan apa yang ditawarkan oleh perniagaan anda. Dalam banyak kes, anda mempunyai hanya satu peluang untuk menyampaikan mesej anda dan beri mereka alasan untuk terus berada di laman web anda.

Anda akan mendapat beberapa pengecualian, tetapi hampir semua laman utama yang hebat mempunyai CTA (ajakan bertindak) di bahagian atas (kandungan yang muncul tanpa perlu menatal).

Mungkin terdapat banyak hasil pelawat yang anda pasti gembira (mis. Mereka mengunjungi blog, halaman kenalan, atau halaman produk anda), tetapi anda perlu pilih yang paling penting untuk fokus pada bahagian atas.

Selebihnya boleh pergi ke tempat lain di halaman, atau bahkan di bahagian atas dengan kurang penekanan.

Berikut adalah beberapa contoh tujuan utama untuk pelbagai jenis laman web:

  • Blog. Kumpulkan alamat e-mel pelawat.
  • Perisian. Dapatkan pelawat untuk mendaftar alat anda.
  • E-dagang. Dapatkan pelawat untuk mengunjungi kedai atau halaman produk anda.

Mari kita lihat contoh masing-masing.

Backlinko adalah blog SEO yang terkenal. Matlamat utama halaman utama adalah jelas: untuk mendapatkan alamat e-mel anda.

meletakkan-anda-utama-tujuan-di atas-lipatan

Wix adalah salah satu pembangun laman web yang paling popular untuk perniagaan, dengan templat untuk semua jenis laman web (mis. perundingan, haiwan peliharaan, harta tanah, dll.).

Kebetulan mempunyai laman utama yang hebat:

meletakkan-anda-utama-tujuan-di atas-the-fold1

CTA “Bermula” membawa anda ke jalan untuk mendaftar dan menggunakan alat untuk membuat laman web.

Akhirnya, mari kita lihat contoh laman utama e-dagang.

Yang di bawah adalah templat yang ditawarkan oleh Weebly, yang merupakan pembangun laman web lain yang lebih tertumpu pada perniagaan e-dagang.

meletakkan-anda-utama-tujuan-di atas-the-fold2

Terdapat CTA yang jelas di bahagian atas untuk membawa anda ke “Shop the Collection” dan mengunjungi kedai dalam talian.

Petua Pro:

  • Jangan gunakan slaid dan karusel. Walaupun kelihatan mewah, pengunjung tidak menggunakannya. Anda lebih baik memindahkan kandungan ke bawah di laman web sehingga pengguna dapat menatal ke halaman tersebut.
  • Gunakan gambar dengan wajah manusia apabila boleh. Manusia tertarik kepada orang lain, jadi gambar ini menarik perhatian anda. Kami juga mengikuti mata orang dalam gambar, jadi jika wajah dalam gambar anda diarahkan ke CTA anda, lebih baik lagi.

Kurangkan Jumlah Potensi Tindakan untuk Pelawat

Orang mahu membuat pilihan yang tepat, sebab itulah mempunyai terlalu banyak pilihan dapat meningkatkan kegelisahan mereka.

Ahli psikologi Britain William Hick mendapati bahawa semakin banyak pilihan yang diberikan seseorang, semakin lama mereka memerlukan keputusan. Ini sekarang dikenali sebagai Hick’s Law, dan ia adalah akal fikiran.

Tetapi bagaimana anda dapat menerapkan prinsip ini untuk memperbaiki laman utama anda? Baiklah, fikirkan jumlah tindakan yang mungkin dilakukan oleh pengunjung anda:

  • Untuk bahagian skrin tertentu, biarkan hanya satu atau dua tindakan yang mungkin, maks.
  • Untuk seluruh laman utama anda, biarkan hanya beberapa tindakan yang mungkin – aturan praktis, cuba fokus pada tidak lebih daripada lima tindakan.

Sekiranya pautan tertentu tidak kritikal, tetapi anda mahu memasukkannya, masukkan ke menu atau footer.

Asana, alat pengurusan projek, berfungsi dengan baik tidak membebankan pengunjung laman webnya dengan terlalu banyak pilihan:

mengurangkan-jumlah-potensi-tindakan-untuk-pelawat

Asana mengutamakan tindakan yang paling penting di bahagian atas, dan ia meletakkan pautan ke bahagian penting laman web lain yang lebih rendah di halaman. Ini termasuk CTA untuk:

  • Tonton video demo.
  • Lihat pelanggan menggunakan Asana.
  • Terokai fungsi portfolio alat.
  • Muat turun laporan mengenai pengurusan kerja kolaboratif.
  • Cuba Asana secara percuma (sekali lagi).

Secara keseluruhan, itu adalah lima tindakan utama yang diserlahkan di halaman utama.

Saya tidak mengesyorkan untuk pergi lebih tinggi daripada itu dalam kebanyakan kes, walaupun bergantung pada jenis perniagaan anda. Blog atau majalah mungkin dapat menghilangkan 10-20 pautan ke kandungan di bahagian lain laman web mereka.

Tulis Tajuk Utama yang Sederhana dan Jelas

Sejak permulaan pemasaran, selalu ada argumen tentang apakah kandungan atau reka bentuk adalah “raja.” Yang benar adalah bahawa kedua-duanya sangat penting untuk laman web, terutama di laman utama.

Walaupun kebanyakan amalan terbaik tertumpu pada reka bentuk, yang paling banyak memberi tumpuan kepada reka bentuk teks paling penting di halaman anda: tajuk utama (dan mungkin sub-tajuk utama).

Sekiranya pelawat tidak dapat memahami apa yang anda tawarkan dalam beberapa saat setelah mendarat di laman utama anda, mereka akan segera pergi. Satu atau dua ayat tersebut memberi kesan besar terhadap keberkesanan laman utama anda.

Untuk menggambarkannya, mari kita lihat contoh laman utama yang boleh digunakan banyak pertolongan utama. Lihat kawasan bahagian atas di laman web AAK:

tulis-ringkas-dan-jelas-tajuk utama

Apa yang anda rasa syarikat itu lakukan?

Saya juga tidak tahu.

Nampaknya, AAK menjual lemak dan minyak bersumber secara lestari.

Adakah itu jelas dari “Bersama-sama, mari buat momen inspirasi” kepada anda?

Jadi, bagaimana anda menulis tajuk utama yang hebat? Potong kata kunci dan jelas. Kejelasan lebih penting daripada kreativiti, jadi fokus pada perkara itu terlebih dahulu.

Ini lebih mudah bagi sebilangan perniagaan daripada yang lain.

Contohnya, tukang paip mempunyai perniagaan yang senang digambarkan. Berikut adalah contoh tajuk utama yang cukup baik untuk laman utama perniagaan tempatan:

menulis-ringkas-dan-jelas-tajuk utama1

Sekiranya seseorang dari Toronto mendarat di halaman, mereka akan tahu bahawa mereka berada di tempat yang tepat untuk “tukang paip kecemasan Toronto.”

Mari kita lihat beberapa tajuk utama dari perniagaan dalam talian.

menulis-ringkas-dan-jelas-tajuk utama2

Akademi Kod: “Sertailah Jutaan Belajar Mengekod …”

Tajuknya jelas, dan sesiapa yang mendarat di laman utama akan segera memahami bahawa Codecademy mengajar orang untuk membuat program.

Berikut adalah beberapa kebaikan lain:

  • Asana: “Asana adalah platform pengurusan kerja pasukan menggunakan untuk terus fokus pada tujuan, projek, dan tugas harian yang mengembangkan perniagaan. “
  • WordPress:Bina laman web, membina pergerakan. “
  • Copyblogger:Perkataan Kerja itu untuk Pemasaran dan Jualan Digital yang lebih pintar.”

Petua Pro:

  • Anda boleh menguji kejelasan tajuk anda dengan menunjukkan halaman utama anda kepada seseorang yang belum pernah melihatnya sebelum ini. Sekiranya mereka tidak dapat mengetahui apa yang anda lakukan dalam masa lima saat, itu tidak cukup jelas.
  • Bertujuan untuk membuat tajuk utama yang ringkas mungkin (tidak lebih dari dua ayat).

Bersikap Pemurah dengan Ruang Putih antara Elemen

Ruang putih hanyalah ruang kosong di skrin yang, apabila digunakan dengan betul, dapat membuat kandungan anda:

  • Nampak lebih baik. Ruang putih menjadikan kandungan kelihatan lebih elegan.
  • Lebih mudah dicerna. Apabila kandungan disebarkan, pembaca tidak begitu memberatkan dan lebih senang mengetahui perkara yang harus difokuskan.
  • Aliran dengan lebih jelas. Dengan ruang kosong, anda mempunyai bahagian yang jelas, sehingga anda dapat memimpin pengunjung melalui rangkaian idea yang logik yang memberi mereka maklumat berharga.

Semua halaman utama yang baik mempunyai banyak ruang kosong, sama ada di antara bahagian, atau di dalam kandungan itu sendiri (mis., Ruang di sekitar baris teks, tajuk, gambar, dll.).

Snappa, alat pembuatan gambar, menggunakan banyak ruang putih di laman utama untuk membuat pembahagian yang jelas antara teks, gambar, dan bahagian kandungan.

bermurah hati-dengan-putih-ruang-antara-elemen

Perhatikan bahawa “ruang kosong” hanyalah istilah umum untuk ruang kosong. Ini tidak bermaksud latar belakang anda mesti putih; ia boleh menjadi warna apa pun.

Pinta Seruan Bertindak Terlihat Sepanjang Masa

Pelawat yang berbeza bersedia untuk bertindak pada masa yang berlainan. Ada yang memerlukan lebih banyak maklumat daripada yang lain dan tidak akan langsung mendaftar atau mengkliknya.

Tetapi anda harus mempermudah tindakan bila-bila masa mereka bersedia.

Itulah sebabnya anda akan melihat beberapa CTA di satu halaman utama. Banyak CTA mungkin untuk tujuan yang sama.

Jangan melampaui batas, tetapi cubalah agar sekurang-kurangnya satu CTA dapat dilihat sepanjang masa di laman utama anda (untuk skrin desktop biasa).

Laman utama Tesla adalah contoh yang baik dari konsep ini. Ia bermula dengan CTA yang jelas untuk memesan kereta:

mempunyai-a-a-call-to-action-visible-at-all-time

Sekiranya anda menatal ke bahagian seterusnya, terdapat dua CTA baru, dengan penekanan pada yang lebih penting, yang mengarahkan anda untuk mengunjungi kedai (bukannya untuk memesan produk tertentu).

mempunyai-a-a-call-to-action-visible-at-all-time1

Tatal ke bawah sekali lagi, dan ada butang yang diserlahkan ke barisan produk lain yang dijual oleh Tesla, panel solar dan Powerwall mereka. Terdapat CTA sekunder jika pelawat memerlukan lebih banyak maklumat.

mempunyai-a-call-to-action-visible-at-all-times2

Terdapat beberapa lagi skrin di laman utama Tesla, masing-masing dengan CTA sendiri (atau dua).

Petua Pro:

  • Gunakan CTA biasa. Pengunjung memahami maksud “tambahkan ke troli” dan “cuba secara percuma” kerana mereka pernah melihat yang serupa berkali-kali. Anda boleh menjadi sedikit kreatif, tetapi CTA biasa biasanya menunjukkan prestasi terbaik (jadi langkau yang tidak dikenali seperti “dapatkan inspirasi!”).
  • Gunakan peraturan pertiga. Bahagikan skrin atau gambar menjadi sembilan bahagian. Mata penonton secara automatik ditarik ke persimpangan garis-garis ini (dilingkari dengan warna hijau di bawah). Masukkan CTA dan tajuk utama dekat persimpangan tersebut untuk memastikan ia diperhatikan terlebih dahulu.

Lihat peraturan tindakan ketiga di laman web Snappa:

mempunyai-a-a-call-to-action-visible-at-all-time3

Gunakan Kontras untuk Mengarahkan Perhatian Pengguna

Bahagian utama reka bentuk yang berkesan adalah kontras.

Kontras membolehkan anda menjadikan bahagian penting halaman utama anda menonjol. Ini mestilah CTA anda, dan mungkin tajuk utama anda.

Pertimbangkan laman utama Moz di bawah. Yang paling menonjol bagi anda?

gunakan-kontras-ke-langsung-pengguna-perhatian

Mata saya tertuju pada butang kuning terang terlebih dahulu, dan kemudian tajuk biru besar.

Ini kerana terdapat perbezaan yang tinggi antara butang kuning dan gambar latar gelap.

Petua Pro:

  • Sekiranya anda ingin menguji kontras CTA halaman utama anda sekarang, cari kalkulator nisbah kontras, dan masukkan warna butang atau pautan anda dengan warna latar belakang anda. W3C dikatakan mempunyai sekurang-kurangnya nisbah 3: 1 pada teks atau elemen besar (biasanya butang), atau nisbah 4.5: 1 pada teks kecil (di bawah 18 px).

penggunaan-kontras-ke-langsung-pengguna-perhatian1

  • Sekiranya anda tidak tahu bagaimana memilih warna dengan kontras tinggi, cara termudah adalah dengan Google “pemilih warna laman web”. Mana-mana yang popular akan dilakukan. Anda memasukkan warna asas, dan ia akan memberi anda kombinasi dua hingga empat warna lain yang sesuai dengannya.

Sertakan Bukti Sosial untuk Meringankan Minda Pelawat

Bukti sosial merangkumi apa sahaja yang menunjukkan orang lain menyukai syarikat anda. Testimoni, statistik pengguna, ulasan, kajian kes dan sebagainya.

Sebahagian besarnya, orang menyukai perkara yang dikatakan orang lain baik.

Lihat bahagian halaman utama HubSpot untuk contoh:

merangkumi-sosial-bukti-untuk-memudahkan-fikiran-pengunjung

Mereka mempunyai beberapa statistik yang mengagumkan:

  • Bilangan lawatan ke blog HubSpot
  • Bilangan pengikut sosial
  • Bilangan integrasi
  • Bilangan pelanggan (dan nama pelanggan yang besar)

Untuk contoh lain, Laluan Awan (syarikat hosting) mempunyai banyak testimoni di laman webnya:

merangkumi-sosial-bukti-untuk-menenangkan-fikiran-pelawat1

Petua Pro:

  • Sekiranya anda membina laman web yang baru, anda mungkin belum mempunyai ulasan atau statistik pengguna. Sekiranya begitu, hubungi rakan, bekas rakan sekerja, atau pengguna awal dan cuba dapatkan sesuatu yang boleh anda sertakan.
  • Tetapkan amaran Google untuk nama laman web anda (atau nama perniagaan jika berbeza) untuk memantau ketika anda disebut oleh orang lain. Anda boleh mengatakan bahawa anda telah disebut atau ditampilkan oleh laman web lain sebagai bukti sosial.

Optimumkan Imej untuk Mengurangkan Memuatkan Masa dan Meningkatkan Kekakuan

Menurut laporan terbaru yang diterbitkan oleh Google, 53% pelawat bergerak akan meninggalkan halaman jika tidak dimuat dalam masa tiga saat.

Ternyata rata-rata masa memuat halaman pada peranti mudah alih adalah 22 saat.

Kami membina laman web di desktop, biasanya dengan sambungan internet yang hebat, jadi laman web tersebut biasanya dimuat dalam beberapa saat.

Tetapi tidak semua orang mempunyai kelajuan sambungan yang hebat. Malah telefon saya pada 4G kadang-kadang perlahan, dan banyak orang mempunyai sambungan 3G atau lebih buruk.

Jadi, bagaimana anda menjadikan muatan halaman anda cepat? Anda perlu mempertimbangkan dua faktor:

  • Kualiti hosting anda
  • Saiz halaman utama anda

Sekiranya anda menggunakan pembina laman web seperti Wix atau Tapak123, hosting dijaga untuk anda, dan biasanya pada kualiti yang cukup tinggi sehingga anda tidak perlu risau. Itu meninggalkan saiz halaman utama anda sebagai isu utama yang perlu dibimbangkan.

Walaupun beberapa perkara dapat menjadikan halaman utama anda lebih besar daripada yang diperlukan (mis., Fail statik yang tidak dikompresi, JavaScript yang tidak dioptimalkan), masalah yang paling biasa sejauh ini adalah gambar yang tidak dioptimumkan.

Berita baiknya ialah mengoptimumkan gambar adalah mudah.

Mari kita teliti contoh hipotesis mengapa ini sangat penting.

Saya pergi ke Pexels (laman web gambar stok percuma), dan mendapat gambar yang bagus untuk laman web laman web saya (ditunjukkan di bawah). The gambar asal ialah 2.02 MB, yang akan mengambil masa beberapa saat untuk dimuat sendiri pada sambungan yang perlahan.

mengoptimumkan-gambar-untuk-mengurangkan-memuat-masa-dan-meningkatkan-melekatkan

Saya melakukan carian pantas untuk pemampat gambar dalam talian dan masukkan gambar melalui alat. Itu menurunkan ukuran sebanyak 56%, tanpa penurunan kualitas yang nyata, dan kami turun hingga 902 KB.

Tetapi ternyata saya tidak memerlukan gambar bersaiz penuh di laman utama saya, hanya lebar 1000 piksel.

Oleh itu, saya mencari alat dalam talian lain yang mudah untuk membantu (iaitu, “penukar gambar dalam talian”):

mengoptimumkan-gambar-untuk-mengurangkan-memuat-masa-dan-meningkatkan-melekatkan1

Kami bermula pada 2 MB, dan kini turun hingga 75 KB, tanpa penurunan kualiti yang ketara (sebelum dan sesudahnya di bawah). Gambar yang dioptimumkan dapat dimuat dalam beberapa saat, walaupun dengan sambungan yang perlahan.

mengoptimumkan-gambar-untuk-mengurangkan-memuat-masa-dan-meningkatkan-melekatkan2

Ini adalah kes yang melampau, tetapi tidak jarang anda fikirkan.

Petua Pro: Mengoptimumkan gambar anda adalah senang menang yang boleh memberi kesan besar pada kadar penukaran anda. Ini semua yang perlu anda lakukan untuk gambar di laman utama anda. Lakukan ini mengikut urutan:

  • Ubah saiz gambar ke lebar terkecil yang anda perlukan untuk pelawat.
  • Jalankan gambar melalui a alat pemampatan.

Jadikan Halaman Utama Anda Mudah Alih

Lihatlah analitik laman web mana pun, dan anda akan perhatikan bahawa peratusan pengguna mudah alih merangkumi sebilangan besar pengunjung.

Sekiranya halaman utama anda kelihatan aneh pada telefon atau tablet seseorang, anda mungkin kehilangan kemungkinan penukaran.

Laman web responsif menyesuaikan dengan ukuran skrin, dan dipaparkan dengan baik pada skrin dari semua saiz. Ia melakukannya melalui CSS dan kadang-kadang JavaScript.

menjadikan-laman utama anda-mudah alih-responsif

Sekiranya anda tidak selesa dengan mereka, saya cadangkan menggunakan pembangun laman web. Baca artikel kami mengenai pembangun laman web terbaik untuk laman web yang responsif.

Bagaimana Anda Membangunkan Laman Utama Penukaran Tinggi?

Sekiranya anda sudah tahu membina laman web, kami kini mempunyai senarai semak kecil yang bagus bahagian yang paling penting laman utama berkualiti tinggi:

  • Matlamat utama adalah di bahagian atas.
  • Pelawat tidak dibebani dengan banyak CTA.
  • Tajuk utama senang difahami.
  • Bahagian dibahagi dengan ruang putih.
  • Pelbagai CTA di seluruh halaman.
  • Kontras yang digunakan untuk menjadikan CTA menonjol.
  • Bukti sosial disertakan.
  • Imej dioptimumkan.

Tetapi jika anda tidak tahu membina laman web, atau membuat kod satu dari awal, cara termudah untuk membuatnya dan berjalan dalam beberapa jam adalah dengan gunakan pembina laman web.

Terdapat banyak yang baik, masing-masing direka untuk tujuan yang berbeza. Berikut adalah yang paling mudah yang saya gunakan pada masa lalu dan akan mengesyorkan:

  • Untuk laman web e-dagang, gunakan Weebly.
  • Untuk laman web untuk industri tertentu (mis. Harta tanah, seni, restoran), gunakan Wix.
  • Untuk pembangun laman web semudah mungkin, gunakan Tapak123.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector