Hero Section: Lima Keputusan yang Menentukan

Hero section adalah area utama di bagian atas halaman web yang pertama kali dilihat pengunjung, menampilkan pesan utama, visual menarik, dan CTA yang mendorong keterlibatan.

Optimization

Hero Section: Lima Keputusan yang Menentukan - Arfadia

Pengujian hero section yang dilakukan Carrot menaikkan tingkat konversi antara 25% hingga 55%, dan itulah sebabnya hero section bisa dibilang bagian terpenting yang kami rancang untuk klien di Arfadia.

Masalahnya, kebanyakan bisnis keliru besar dalam menggarap hero section. Mereka menjejalinya dengan bahasa korporat, menambahkan foto stok yang generik, lalu bertanya-tanya mengapa bounce rate mereka melambung. Namun, jika digarap dengan benar? Hero section bekerja dalam mode konversi, melakukan segala cara untuk mengubah pengunjung menjadi pelanggan yang membayar.

Jadi, Apa yang Membuat Hero Section Begitu Penting bagi Bisnis Anda?

Akui saja: hero section banyak dicari karena suatu alasan. Riset tentang kesan pertama, termasuk studi Google tahun 2012 yang sering ditautkan sebagai riset Google tentang kesan pertama, menemukan bahwa pengguna membentuk penilaian estetika atas sebuah situs web hanya dalam 17 hingga 50 milidetik, lebih cepat dari kedipan mata. Penilaian sekejap itu bisa menentukan apakah pengunjung bertahan di situs Anda atau menambah satu angka di penghitung bounce rate.

Coba lihat dari sisi lain: hero Anda adalah sampul buku. Ya, orang menilai buku dari sampulnya, dan mereka menilai situs web dari hero-nya. Di Arfadia, kami melihat kenaikan konversi yang jelas pada bisnis yang kami tangani hanya dengan mengoptimalkan satu bagian penting situs web mereka ini.

Anatomi hero section dengan konversi tinggi

Saat kami membedah apa yang membuat hero section efektif, ada lima bahan utama yang bekerja bersama:

Headline Anda adalah elevator pitch digital Anda. Headline perlu menjelaskan apa yang Anda tawarkan dalam sekitar delapan kata atau kurang. Headline didukung oleh subheading, yang menambah konteks tanpa membingungkan pengunjung.

Visual hero, baik gambar, video, maupun ilustrasi, mendukung pesan Anda dan membangun ikatan emosional. Call to action (CTA) Anda jelas dan menonjol agar pengunjung tahu apa yang harus dilakukan berikutnya. Terakhir, navigasi memudahkan pengunjung menjelajah jika mereka belum siap bertindak.

Riset eye-tracking Nielsen Norman Group sudah lama menemukan bahwa orang menghabiskan sebagian besar waktu melihatnya di area above the fold (sekitar 57% dalam studi 2018), dan panduan studi riset kegunaan Nielsen Norman Group menekankan bahwa mengurangi beban kognitif meningkatkan kegunaan. Hero section Anda menanggung beban berat dalam menentukan apakah pengunjung bertahan.

Sains di Balik Kesan Pertama yang Meyakinkan

Memahami psikologi di balik kinerja hero section telah mengubah cara kami merancang di Arfadia. Seperti kata Steve Krug, penulis "Don't Make Me Think": "Kita tidak membaca halaman. Kita memindainya." Fakta itu membentuk filosofi kami untuk membuat hero section mudah dipindai, bukan sekadar bisa dibaca.

Teori beban kognitif menjadi faktor utama di sini. Memori kerja hanya bisa menampung segelintir hal sekaligus (riset klasik menyebut sekitar tujuh), sehingga hero section yang paling efektif merangkul kesederhanaan radikal. Setiap elemen harus punya peran, atau dibuang.

i

"Hero section bukan sekadar lahan digital, melainkan mesin konversi. Setelah mengoptimalkan ribuan situs web sejak 2008, saya melihat bagaimana satu hero section yang digarap dengan baik bisa mengubah bisnis yang sedang kesulitan menjadi bisnis yang berkembang pesat. Rahasianya adalah memahami bahwa Anda hanya punya hitungan milidetik untuk menyampaikan nilai, bukan menit."

Tessar Napitupulu, Founder dan CEO Arfadia

Sebagian besar pengambilan keputusan kita terjadi secara tidak sadar dan dibentuk oleh emosi, sebuah poin yang ditekankan psikolog perilaku Dr. Susan Weinschenk di sepanjang buku "100 Things Every Designer Needs to Know About People". Wawasan inilah yang kami pakai untuk menyusun hero section: pemicu emosional lebih dulu, lalu manfaat yang logis.

Bagaimana pemicu psikologis membentuk desain hero

Prinsip Gestalt membentuk cara pengunjung melihat hero section Anda. Hal-hal yang berdekatan tampak berkaitan (proximity), hal-hal yang mirip terlihat satu kelompok (similarity), dan pikiran melengkapi bentuk yang tidak terlihat utuh (closure). Kami memakai prinsip-prinsip ini agar hero section terasa intuitif dan menuntun pengunjung secara alami menuju aksi konversi.

Warna juga penting. Riset desain Prismic menyarankan warna yang kontras agar CTA menonjol. Asosiasi warna bersifat budaya dan kontekstual, tetapi biru sering dikaitkan dengan kepercayaan (itulah sebabnya banyak perusahaan keuangan memakainya), merah dengan urgensi, dan hijau dengan pertumbuhan serta keberhasilan.

Spesialis konversi sering menyarankan penambahan bukti sosial di hero section. Melihat bahwa orang lain sudah lebih dulu bertindak mengurangi risiko yang dirasakan dan meningkatkan keyakinan pengunjung atas keputusannya.

Kisah Sukses Hero Section di Dunia Nyata

Mari lihat bagaimana sejumlah perusahaan sukses menguasai seni hero section, dimulai dari salah satu kisah paling bermanfaat yang pernah kami temui.

Pendekatan minimalis Carrot dan kenaikan konversi 46%

Carrot, perusahaan teknologi pemasaran properti, membuktikan sebuah kebenaran yang berlawanan dengan intuisi lewat pengujian A/B yang ketat: lebih sedikit memang lebih baik. Dengan menghapus deskripsi formulir dan memangkas konten di sekitar formulir pada hero section-nya, Carrot meraih hasil yang mengesankan.

Hero yang dirampingkan, dengan headline yang bersih dan formulir yang menonjol, menghasilkan kenaikan konversi 45,87% di satu situs uji (398 konversi dibanding 259) dan kenaikan 46,86% di situs lain. Itu bukan salah ketik: hampir 50% konversi lebih banyak dari satu variasi.

Mengapa cara ini begitu berhasil bagi Carrot? Pengunjung mobile mencakup 57% dari seluruh trafik dan 61% dari seluruh konversi di jaringannya, sehingga formulir harus terlihat di area above the fold. Dengan menghapus gangguan dan mendesain secara mobile-first, Carrot mendapatkan hero section yang memberi hasil lebih banyak dengan elemen lebih sedikit.

Figma memusatkan energi keputusan pengunjung pada satu hal saja

Figma adalah contoh hebat kekuatan fokus dalam desain hero section. Hero-nya sejak lama hanya menampilkan satu CTA utama, misalnya "Get started for free." Tanpa penawaran yang bersaing, tanpa permintaan kedua, tanpa gangguan.

Pendekatan ini sejalan dengan temuan ekonomi perilaku tentang kelebihan pilihan: ketika orang dihadapkan pada terlalu banyak pilihan yang bersaing, mereka sering tidak memilih apa pun. Sejumlah artikel bahkan mengklaim bahwa banyak CTA yang bersaing bisa memangkas konversi hingga 266%, angka yang mustahil benar karena penurunan tidak bisa melebihi 100%. Prinsipnya tetap berlaku: satu jalur yang jelas menghasilkan konversi lebih baik daripada beberapa jalur yang saling bersaing.

Lebih baik lagi, Figma memanfaatkan ruang kosong dan hierarki visual sehingga CTA tunggal itu mustahil diabaikan. Dipadukan dengan teks proposisi nilai yang lugas dan menjawab masalah pengguna, fokus tunggal ini menciptakan jalur maju yang jelas dan tanpa hambatan.

Minimalisme Apple yang berfokus pada produk menjadi standar

Hero section Apple menjadi standar bagi desain berbasis produk. Gaya "chromeless"-nya menampilkan produk dengan latar putih atau hitam polos, sering terlihat seolah desainer memakai alat untuk menghapus latar belakang yang mengganggu, dan menciptakan dampak besar lewat kesederhanaan radikal.

Hero section Apple mengikuti formula yang serupa: gambar produk yang indah, teks singkat yang berfokus pada manfaat, dan CTA menonjol yang kontras dengan latar polos. Konsistensi itu memperkuat brand di seluruh properti Apple dan membantu pengunjung memutuskan tanpa berpikir panjang.

Lihat apa yang dilakukan Apple dan Anda akan melihat bagaimana pengendalian diri bisa menjadi pernyataan desain. Apple menampilkan lebih sedikit dan menyampaikan lebih banyak, sebuah prinsip yang ikut menjadikannya salah satu perusahaan paling bernilai di dunia.

Tren Desain Baru yang Akan Mengubah Hero Section

Desain hero section terus berkembang seiring kebiasaan pengguna dan teknologi yang mendorongnya maju. Dengan merujuk sumber seperti analisis tren DesignerUp, kami melihat beberapa tren yang mengubah apa yang mungkin dilakukan.

Hero section yang terpecah dan didekonstruksi mulai meninggalkan tata letak rata tengah yang standar. Alih-alih komposisi yang mudah ditebak, gaya ini memakai blok konten yang bertingkat dan tipografi berukuran besar. Gaya ini cocok untuk startup teknologi dan agensi kreatif yang ingin menonjol di pasar yang ramai.

Namun, yang paling membuat saya antusias adalah tata letak Bento Grid, yang terinspirasi dari penyajian kotak bekal Jepang, karena memungkinkan kami menyampaikan beberapa pesan tanpa membuat pengguna kewalahan. Blok konten mandiri di dalam hero bisa menawarkan jalur "pilih petualanganmu sendiri" untuk berbagai niat pengguna.

Etalase komponen menjadi tren kuat bagi startup SaaS. Alih-alih mockup layar produk secara utuh, hero section kini menampilkan elemen UI individual dari aplikasi, dan menarik minat lewat elemen yang ditumpuk dan diposisikan dengan cerdas.

Yang mungkin paling menarik adalah sejauh mana tipografi tebal telah berkembang. Kami membuat hero section dengan headline yang memenuhi 40-60% ruang yang terlihat, disertai kontras warna yang kuat untuk menarik perhatian seketika. Pesannya: di dunia digital yang ramai, Anda perlu bersuara lantang agar didengar, tetapi lantang dengan gaya.

Eksekusi Teknis Tanpa Mengorbankan Kinerja

Hero section yang indah tidak ada gunanya jika butuh waktu lama untuk dimuat. Google pernah melaporkan bahwa 53% kunjungan mobile ditinggalkan jika halaman butuh lebih dari tiga detik untuk dimuat, dan Gostellar, yang ditautkan di sini sebagai studi Google, melaporkan dari pengujiannya sendiri bahwa tingkat konversi turun 4,42% untuk setiap detik keterlambatan. Angka-angka ini membentuk pendekatan kami terhadap hero section di Arfadia.

Itulah sebabnya bobot aset penting: setiap kilobyte tambahan di hero section ada biayanya, jadi optimasi harus selalu ada di pikiran Anda. Kami telah menyempurnakan metode yang menjaga waktu muat hero di bawah tiga detik sambil tetap memberikan pengalaman visual yang hebat.

Strategi optimasi gambar yang berhasil

Begitu optimasi dimulai, format gambar menjadi penting. Menurut Google, gambar WebP lossy biasanya 25-34% lebih kecil daripada JPEG yang sebanding, dan format AVIF yang lebih baru mengompresi lebih jauh lagi. Kami memakai gambar responsif dengan atribut srcset agar pengguna mobile tidak mendapat aset berukuran desktop.

Kami menjaga gambar hero dalam anggaran 200-400KB, dengan memakai alat kompresi seperti alat kompresi TinyPNG setiap kali. Kedengarannya membatasi, tetapi justru membebaskan: batasan memicu kreativitas.

Pemuatan progresif mengubah permainan untuk kinerja yang dirasakan. Kami menyajikan placeholder berkualitas rendah yang sangat kecil (3-5KB) yang langsung dimuat, lalu menggantinya dengan versi berkualitas tinggi. Metode dua tahap ini bisa memperbaiki Largest Contentful Paint (LCP) secara nyata dan menjaga perhatian pengguna sementara aset lain dimuat di latar belakang.

Kami mendapat pelajaran berharga tentang kinerja mobile dari latar video. Video bisa meningkatkan engagement, tetapi juga bisa menambah LCP secara signifikan. Solusi kami? Gambar poster statis dengan pemutaran yang dikendalikan pengguna di mobile, sehingga hero tetap tampak menarik tanpa beban kinerja.

Kesalahan Hero Section yang Harus Anda Hentikan Jika Ingin Menaikkan Konversi

Setelah mengaudit ratusan hero section untuk klien, kami melihat pola dari hal-hal yang tidak berhasil: kesalahan yang tampak kecil tetapi menghancurkan tingkat konversi. Mengetahui apa yang harus dihindari membantu hero section Anda memberi hasil, bukan mengusir pengunjung.

Pembunuh konversi nomor satu yang kami lihat adalah informasi yang berlebihan: hero section yang dijejali banyak judul, paragraf panjang, tombol CTA yang saling bertentangan, dan gambar latar yang ramai. Ingat, pengguna membentuk penilaian dalam sepersekian detik. Jika mereka tidak langsung paham apa yang Anda tawarkan dan mengapa itu berharga, mereka akan pergi.

Solusinya? Terapkan hukum kegunaan ketiga Steve Krug: "Buang separuh kata di setiap halaman, lalu buang separuh dari sisanya." Kedengarannya kejam, tetapi berhasil.

Kesalahan lain yang terus kami lihat: foto stok yang generik. Pebisnis tersenyum yang sedang berjabat tangan itu mungkin juga muncul di puluhan situs pesaing. Gambar generik tidak membedakan brand Anda dan bisa membuatnya tampak kurang tepercaya.

Fotografi khusus dan visual lain yang khas membantu brand menonjol dengan cara yang jarang bisa dicapai foto stok generik. Investasinya bisa dengan mudah terbayar.

Mobile kini menyumbang lebih dari separuh trafik web, tetapi optimasi mobile yang buruk masih sering ditemui. Kami terus melihat hero section dengan teks yang terlalu kecil, CTA yang sulit diketuk, dan gambar yang tidak menyesuaikan ukuran dengan baik.

Solusinya sederhana: desain mobile lebih dulu, lalu perbesar untuk desktop, jangan sebaliknya. Hero section mobile Anda harus kuat berdiri sendiri, bukan tampak seperti tambahan yang canggung.

Kesalahan CTA yang merugikan konversi

CTA yang lemah atau saling bertentangan sangat merugikan potensi konversi. Kami pernah melihat hero section dengan lima tombol berbeda yang berebut perhatian, atau lebih buruk lagi, tombol CTA dengan kata-kata samar seperti "Learn More" atau "Submit."

CTA yang baik memakai teks yang mendorong aksi ("Start Free Trial," "Get Instant Access") dan menjaga hierarki visual lewat ukuran, warna, dan posisi. CTA yang berorientasi aksi umumnya mengungguli CTA generik, terutama jika jelas menyebut apa yang akan didapat pengunjung.

Membangun Hero Section yang Paling Sesuai dengan Industri Anda

Desain hero section tidak bisa disamaratakan. Yang berhasil untuk startup SaaS kemungkinan tidak memberi efek yang sama bagi pembeli e-commerce atau pengambil keputusan B2B. Lewat pekerjaan kami dengan klien di berbagai industri, kami di Arfadia telah menyempurnakan strategi khusus per industri yang memberi pengunjung konten dan fungsi yang sesuai dengan janji brand Anda.

Perusahaan SaaS: Hasil, bukan fitur

Bagi perusahaan SaaS, hero section sebaiknya berfokus pada hasil, bukan fitur. Alih-alih "Powerful Email Marketing Software," cobalah sesuatu seperti "Close deals faster with automated follow-ups." Demo produk interaktif dan etalase komponen sangat efektif, memberi sekilas tampilan antarmuka tanpa banjir informasi.

Bukti sosial, seperti logo pelanggan dan metrik ("Trusted by 10,000+ marketers"), menciptakan kredibilitas seketika. Rangkuman statistik studi Landingi mengutip temuan bahwa halaman penjualan dengan testimoni menjual 34% lebih banyak dan bahwa bukti sosial di bawah CTA bisa menaikkan tingkat konversinya hingga 68%.

E-commerce: Daya tarik visual bertemu urgensi

Hero section e-commerce unggul dalam menciptakan urgensi dan efek memukau. Kampanye musiman, penawaran terbatas waktu, dan fotografi gaya hidup yang membantu pembeli membayangkan memakai produk dalam keseharian mereka bisa benar-benar menaikkan konversi.

Kami melihat bahwa menampilkan satu produk atau koleksi unggulan, alih-alih mencoba menampilkan semuanya, cenderung menaikkan click-through rate. Sinyal kepercayaan, seperti lencana keamanan dan jaminan pengiriman, langsung meredam keraguan membeli yang umum.

Layanan B2B: Tunjukkan keahlian dengan cepat

Penyedia layanan B2B membutuhkan hero section yang membuktikan keahlian dan membuat penawaran yang rumit mudah dipahami. Mulailah dengan pesan masalah-solusi yang menyentuh masalah para eksekutif.

Menempatkan testimoni klien yang dikenal, termasuk testimoni video singkat, di hero section bisa membuat penawaran jauh lebih meyakinkan. Yang terpenting, buat langkah berikutnya sangat jelas, entah itu memesan demo, mengunduh whitepaper, atau meminta penawaran harga.

Mengukur Hero Section Anda di Luar Metrik Semu

Meluncurkan hero section yang efektif baru permulaan; keajaiban sesungguhnya ada pada iterasi berdasarkan data nyata. Di Arfadia, kami membangun kerangka pengukuran yang menilai kinerja hero section melampaui metrik halaman yang sederhana.

Tingkat konversi tetap menjadi metrik utama, tetapi kami melihat lebih dalam untuk mendapat gambaran lengkap. Kami memantau konversi mikro (pendaftaran newsletter, pemutaran video, kedalaman gulir) bersama konversi makro (pembelian, permintaan demo) untuk memahami bagaimana hero section menuntun pengguna di sepanjang perjalanan pelanggan.

Alat heat map seperti analitik perilaku Hotjar menunjukkan ke mana perhatian pengunjung tertuju dan di mana trafik menurun. Informasi ini sering menantang asumsi tentang apa yang "berhasil" di hero section.

Metrik kunci yang penting

Metrik engagement menceritakan banyak hal tentang kinerja hero section. Waktu di halaman, bounce rate, dan kedalaman gulir menunjukkan apakah pengunjung langsung menemukan nilai. Menurut pengalaman kami, hero section yang dioptimalkan berkinerja lebih baik pada metrik engagement ini, dan itu menjadi dasar kuat untuk meningkatkan tingkat konversi di tahap berikutnya.

Pengujian A/B memberi jawaban yang jelas tentang apa yang berhasil. Kami menguji semuanya: headline, gambar, warna CTA, posisi tombol, bahkan tanda baca. Salah satu pengujian terbaik kami, misalnya, menaikkan konversi hanya dengan mengganti headline yang berfokus pada produk dengan headline yang berfokus pada manfaat.

Triknya adalah menguji satu elemen pada satu waktu agar Anda tahu apa yang mendorong kenaikan. Dengan terlalu banyak variabel, Anda tidak bisa tahu apa yang berhasil.

Melihat kinerja lintas perangkat bisa memunculkan wawasan yang tak terduga. Hero section yang konversinya 8% di desktop, misalnya, mungkin hanya 2% di mobile, sehingga terlihat peluang optimasi. Kami melacak metrik per perangkat secara terpisah agar hero section bekerja maksimal dari mana pun pengunjung datang.

Praktik Terbaik Optimasi Hero Section

Sekarang mari bahas strategi yang benar-benar berhasil. Ini bukan gagasan teoretis; ini pendekatan yang kami pakai bersama klien di Arfadia setiap hari.

Menulis headline yang menghasilkan konversi

Headline Anda adalah wilayah penentu. Seperti ditulis legenda periklanan David Ogilvy: "Rata-rata, jumlah orang yang membaca headline lima kali lebih banyak daripada yang membaca isi teksnya." Di hero section, rasio itu kemungkinan lebih tinggi lagi.

Mulailah dari hasil yang diinginkan pelanggan, bukan cara produk Anda mewujudkannya. Bersikaplah spesifik jika memungkinkan ("Save 3 hours every week" lebih baik daripada "Save time"), sentuh masalah secara langsung, dan pakai kalimat aktif. Uji A/B headline manfaat melawan headline fitur; dalam data kami, headline manfaat mengalahkan headline kontrol.

Optimasi CTA yang berhasil

Tombol call-to-action Anda adalah tempat aksi terjadi, atau tidak terjadi. Dalam satu pengujian yang dijelaskan di panduan Creattie tentang studi pengujian A/B, tombol CTA merah mengungguli tombol hijau sebesar 21%, pengingat bahwa detail kecil layak diuji.

Warna juga penting, tetapi tidak ada warna CTA yang "terbaik" secara universal; yang paling penting adalah kontras dengan desain di sekitarnya. Ukuran: CTA harus menjadi elemen yang bisa diklik paling menonjol di hero section Anda.

Posisi juga memengaruhi kinerja. Menempatkan CTA di titik yang secara alami dilihat mata setelah membaca headline biasanya lebih berhasil daripada menaruhnya di mana saja yang muat, jadi uji juga penempatannya.

Prinsip hierarki visual

Semua elemen di hero section Anda harus mengarahkan mata ke CTA. Gunakan kontras, ukuran, dan penempatan untuk menuntun mata dari headline ke CTA. Ruang kosong bukan ruang yang sia-sia; itu ruang bernapas yang membuat pesan Anda lebih mudah dicerna.

Menurut studi desain UX ini, pengunjung sering memindai hero section dengan pola Z: dari sudut kiri atas ke kanan atas, lalu turun diagonal ke kiri bawah, dan menyeberang ke kanan bawah. Susun elemen Anda agar sesuai dengan jalur baca alami ini.

Taktik Hero Section Tingkat Lanjut

Ke depan, hero section akan terus berkembang seiring kemajuan teknologi dan ekspektasi pengguna. Personalisasi berbasis AI sudah mulai menyesuaikan konten hero dengan perilaku dan preferensi pengunjung.

Kami juga menguji hero section dinamis yang menyesuaikan diri saat itu juga, menampilkan pesan berbeda kepada pengunjung yang kembali atau berubah sesuai sumber trafik. Hasil awal menunjukkan engagement yang lebih kuat ketika pengunjung yang kembali dikenali lewat pesan yang dipersonalisasi.

Pertimbangan aksesibilitas

Membuat hero section yang aksesibel bukan sekadar praktik yang baik; hal ini juga memperluas audiens Anda. Panduan yang sejalan dengan standar Web Accessibility Initiative, seperti panduan Access Armada tentang hero yang aksesibel, menyarankan rasio kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar, serta mengingatkan bahwa video atau animasi yang diputar otomatis lebih dari lima detik bisa mengganggu orang dengan disabilitas kognitif atau gangguan atensi.

Pastikan kontras warna memadai (4,5:1 untuk teks normal), pakai elemen HTML semantik, dan tulis teks alt yang deskriptif untuk semua gambar. Pengguna dengan gangguan penglihatan harus bisa memahami proposisi nilai Anda seperti pengguna lainnya.

Optimasi mobile-first

Dengan mobile yang kini menyumbang sebagian besar kunjungan web, desain mobile-first bukan lagi pelengkap, melainkan keharusan. Hero section mobile Anda harus tampil indah dengan sendirinya, bukan terasa seperti versi desktop yang dijejalkan.

Perhatikan target sentuh yang ramah jempol (minimal 44px), ukuran teks yang mudah dibaca (minimal 16px), dan gambar supercepat yang ukurannya sesuai koneksi seluler. Yang lancar di Wi-Fi belum tentu lancar di 4G.

FAQ Hero Section: Pertanyaan Umum tentang Hero Section

Bagaimana saya tahu jika hero section saya terlalu ramai?

Jika pengunjung butuh lebih dari 3 detik untuk menemukan proposisi nilai utama dan CTA Anda, hero section Anda terlalu ramai. Kami suka "uji 5 detik": tunjukkan hero section Anda kepada orang yang tidak mengenal bisnis Anda selama lima detik, lalu minta mereka menjelaskan apa yang Anda lakukan dan apa yang harus mereka lakukan berikutnya.

Jika mereka tidak bisa menjawab kedua pertanyaan itu dengan jelas, saatnya menyederhanakan. Hapus pesan yang saling bertentangan, CTA sekunder, dan elemen apa pun yang tidak langsung mendukung tujuan konversi utama Anda.

Bolehkah memakai video di hero?

Latar video bisa meningkatkan engagement jika dipakai dengan baik, tetapi tidak selalu menjadi pilihan yang tepat. Pertimbangkan video jika Anda menjual produk rumit yang perlu diperagakan, punya kisah brand yang hebat untuk diceritakan, atau perlu membangun ikatan emosional dengan cepat.

Lewati video jika audiens Anda sebagian besar memakai perangkat mobile (pikirkan pemakaian data), jika kecepatan sangat penting, atau jika video tidak menambah banyak nilai dibanding gambar statis. Selalu beri pengguna kontrol dan buat video aksesibel (dengan teks).

Berapa banyak kata yang ideal untuk teks hero section?

Untuk teks hero section, lebih sedikit memang lebih baik. Batasi headline sekitar 5-8 kata untuk menangkap proposisi nilai instan Anda. Subheading bisa mencapai 15-20 kata untuk menambah konteks, tetapi setiap kata harus layak berada di sana.

Ingat bahwa pengguna banyak membaca sekilas, terutama di mobile. Menurut pengalaman kami, hero section dengan kurang dari 40 kata biasanya mengungguli blok teks yang panjang.

Seberapa sering saya perlu menguji A/B hero section?

Pengujian berkelanjutan menghasilkan perbaikan berkelanjutan, tetapi frekuensinya ada aturannya. Kami menyarankan menjalankan satu pengujian setiap 2-4 minggu, tergantung trafik Anda, karena Anda butuh signifikansi statistik untuk hasil yang bermakna.

Garap elemen yang paling berdampak lebih dulu: headline, CTA, dan gambar hero biasanya memberi kenaikan terbesar. Setelah dasarnya optimal, Anda bisa bereksperimen dengan penyesuaian kecil seperti warna tombol dan microcopy.

Apakah hero section bisa memengaruhi SEO saya?

Jika digarap dengan benar, hero section bisa mendukung SEO lewat engagement yang baik. Namun, beberapa kesalahan bisa merugikan peringkat, seperti gambar tanpa teks alt, teks yang disematkan di dalam gambar (yang sulit dibaca mesin pencari), dan bagian yang lambat dimuat sehingga menurunkan skor Core Web Vitals.

Pastikan hero section Anda memakai HTML semantik, memuat tag H1 dengan kata kunci inti, dan dimuat dengan cepat agar membantu, bukan merugikan, SEO.

Apa bedanya hero section desktop dan mobile?

Hero section mobile perlu dipikirkan ulang, bukan sekadar diskalakan secara responsif. Hero section desktop bisa memakai komposisi horizontal dan efek hover, sedangkan mobile membutuhkan susunan vertikal dan interaksi yang ramah sentuhan.

Di mobile, kami memperbesar tipografi (tidak lebih kecil dari 16px), membuat CTA ramah jempol (target sentuh minimal 44px), dan memangkas konten untuk layar kecil. Kinerja bahkan lebih penting di mobile, karena kecepatan koneksi sangat beragam.

Apa saja tips menulis headline hero section yang baik?

Headline hero section terbaik itu jelas, berfokus pada manfaat, dan kurang dari 10 kata. Mulailah dari kondisi akhir yang diinginkan pelanggan, bukan fungsi produk Anda. Bersikaplah sekonkret mungkin ("Save 3 hours a week" lebih baik daripada "Save time"), jangan ragu menyentuh masalah, dan seperti biasa, tulis dengan kalimat aktif.

Uji headline yang berfokus pada manfaat melawan headline yang berfokus pada fitur; dalam data kami, headline manfaat unggul dalam konversi.

Istilah Terkait

Above the Fold - Konten yang terlihat di halaman web tanpa perlu menggulir, penting untuk optimasi konversi
Call to Action (CTA) - Ajakan yang mendorong pengguna melakukan aksi tertentu, seperti mengklik, membeli, atau berlangganan
Conversion Rate Optimization (CRO) - Proses sistematis untuk meningkatkan persentase pengunjung yang melakukan konversi
Landing Page - Halaman web khusus yang dituju pengunjung setelah mengklik iklan

Alat dan Sumber Daya Hero Section

Alat yang tepat bisa mempercepat pembuatan dan optimasi hero section secara signifikan. Berdasarkan pengujian kami di Arfadia, berikut beberapa alat penting yang perlu dijajal setiap pemasar digital.

Untuk desain dan prototipe, Figma adalah pilihan utama kami berkat fitur kolaborasi dan pustaka templatnya yang besar. Paket gratisnya cukup untuk banyak keperluan, dan paket berbayar menambah fitur lanjutan. (Adobe XD, yang dulu menjadi alternatif umum, kini tidak lagi dikembangkan secara aktif.)

Kemampuan pengujian A/B adalah syarat dasar untuk optimasi. Editor visual VWO memberi pemasar non-teknis akses mudah ke pengujian; panduan Contentsquare mencantumkan paket Growth-nya mulai $314 per bulan. Kemampuan enterprise Optimizely cocok untuk klien korporasi. Google Optimize, yang dulu populer sebagai pilihan gratis, sudah dihentikan pada September 2023.

Pemantauan kinerja menjaga hero section tetap cepat. Lighthouse dari Google yang gratis dan GTmetrix sama-sama menawarkan audit yang rinci, dan GTmetrix menambahkan pelacakan riwayat serta peringatan di paket berbayarnya. Untuk data kinerja dunia nyata, Google PageSpeed Insights sulit dikalahkan, karena mencerminkan bagaimana pengguna sungguhan merasakan hero section Anda.

Aset stok bisa melengkapi fotografi khusus saat anggaran terbatas. Unsplash dan Pexels menyediakan gambar gratis berkualitas tinggi, tetapi kami menyarankan platform berbayar seperti Shutterstock atau Adobe Stock jika Anda ingin foto yang lebih khas dan profesional yang tidak muncul di mana-mana.

Masa Depan Hero Section

Seiring teknologi dan ekspektasi pengguna terus maju, kami tidak sabar melihat perkembangan hero section berikutnya. Personalisasi berbasis AI sudah mulai menyesuaikan konten hero dengan perilaku dan minat pengunjung. Kami menguji hero section dinamis yang berubah secara real-time, menampilkan pesan berbeda kepada pengunjung yang kembali atau menyesuaikan diri dengan sumber trafik.

Augmented reality (AR) adalah garis depan berikutnya, terutama untuk e-commerce. Bayangkan hero section yang memungkinkan pengunjung melihat produk di ruangan mereka sendiri atau berinteraksi langsung dengan model 3D. Teknologinya masih muda, tetapi bisa mengubah cara kita memandang kesan pertama.

Kami juga menjajaki optimasi antarmuka suara. Seiring pencarian suara tumbuh, konten hero perlu berfungsi bagi pengguna yang tidak bisa melihatnya, sehingga dibutuhkan pendekatan baru untuk arsitektur informasi dan aksesibilitas.

Ambil Tindakan: Mulai Rombak Hero Section Anda Sekarang

Buktinya jelas: dalam pengujian Carrot, hero section yang dioptimalkan menghasilkan 25-55% konversi lebih banyak. Hero yang kuat juga membantu menurunkan bounce rate dan menciptakan kesan pertama yang membekas sehingga pengunjung berubah menjadi pelanggan. Baik Anda memulai dari nol maupun menyempurnakan yang sudah ada, gagasan di atas memberi cetak biru untuk sukses.

Mulailah dengan mengaudit hero section Anda saat ini berdasarkan praktik terbaik yang kami bagikan. Apakah orang cepat memahami apa yang Anda lakukan? Apakah call to action Anda jelas dan berorientasi aksi? Apakah hero Anda siap untuk mayoritas pengunjung yang datang lewat mobile (57% trafik di jaringan Carrot)?

Di Arfadia, kami telah bekerja dengan ratusan bisnis untuk mengubah hero section mereka dari penghalang menjadi pendorong konversi. Yang membawa hero dari baik menjadi hebat adalah pengujian yang ketat, optimasi tanpa henti, dan pemahaman mendalam tentang apa yang diinginkan audiens spesifik Anda.

Ingat, hero section Anda lebih dari sekadar elemen desain: hero section adalah kesan pertama digital, elevator pitch, dan alat konversi utama Anda, semuanya sekaligus. Manfaatkan sebaik-baiknya.