Kita tentu tahu betapa pentingnya kesan pertama.
Kesan pertama (first impression) sering menjadi faktor kuat bagi seseorang dalam menilai sesuatu.
Karena itulah kita berusaha tampil sebaik mungkin saat wawancara kerja. Atau ketika pertama kali bertemu dengan calon mertua.
Betul atau betul banget?
Di website, kesan pertama juga sangat penting.
Jika website memberikan kesan pertama yang baik, maka pengunjung akan tertarik untuk mengeksplorasi web lebih lanjut.
Sebaliknya, jika kesan pertama buruk, maka pengunjung akan meninggalkan website dan mungkin saja tidak pernah datang kembali.
Pertanyaannya, bagaimana caranya agar website memiliki kesan pertama yang baik?
Inilah tugas dari hero.
Note
Website kita hanya punya kesempatan kurang dari 1 detik untuk membuat kesan pertama yang baik.
Apa itu hero?
Hero (sering juga disebut hero banner atau hero section) adalah bagian yang pertama muncul dan dilihat pengunjung ketika memasuki website.
Hero inilah yang mewakili first impression dari website kita. Sesuai namanya, bagian ini bisa menjadi pahlawan yang menentukan sukses tidaknya website kita.
![](https://imajinerid.b-cdn.net/wp-content/uploads/2023/12/ssgid-hero.gif)
Komposisi hero
Hero pada website biasanya terdiri dari:
- Logo perusahaan / brand
- Menu navigasi
- Heading utama
- Deskripsi singkat
- Tombol call to action
- Elemen visual pendukung (video, foto, icon, dsb.)
Komposisi di atas tidaklah bersifat baku dan dapat disesuaikan dengan brand maupun strategi.
Manfaat dari hero pada website
Hero yang dirancang dengan baik dan tepat dapat memberikan manfaat berikut:
- menarik perhatian pengunjung
- memotivasi pengunjung untuk menjelajahi website lebih lanjut dan melakukan action
- meningkatkan engagement
Itulah sebabnya mengapa website kita harus memiliki hero yang kuat.
Tips membuat hero banner yang baik
Berikut tips untuk membuat hero yang kuat dan menarik.
#1. Pesan yang jelas, singkat, dan deskriptif
Langkah pertama untuk membuat hero yang baik bukanlah dari segi desain, melainkan dari pesan.
Pesan yang disampaikan harus dapat menjawab 2 pertanyaan berikut:
- Ini website tentang apa?
- Apa benefit yang ditawarkan?
Jawablah pertanyaan tersebut dengan jelas menggunakan format: 1 kalimat headline dan 1-2 kalimat deskripsi singkat.
Kadang kita ingin menampilkan pesan yang keren, unik, dan kreatif. Namun hati-hati, jangan sampai pesan tersebut malah menjadi ambigu dan sulit dipahami orang awam.
Perhatikan dua contoh berikut.
Contoh 1:
Untuk masa depan yang lebih baik
Perlindungan menyeluruh untuk Anda dan keluarga yang dapat disesuaikan dengan kebutuhan.
Contoh 2:
Asuransi jiwa yang gak bikin kantong bolong
Lindungi keluarga Anda dengan proteksi dari asuransi jiwa. Proses pengajuan mudah dan cepat.
Dari kedua contoh di atas, kita bisa lihat bahwa contoh 2 lebih jelas dan deskriptif, serta mampu menjawab 2 pertanyaan penting.
Ini website tentang apa? Website untuk produk asuransi.
Apa benefit yang ditawarkan? Murah, mudah, dan cepat.
Note
Banyak website perusahaan besar yang menampilkan pesan yang tidak deskriptif di webnya.
Sebaiknya tidak ditiru karena perusahaan ini sudah dikenal banyak orang dan tidak perlu lagi membangun first impression.
![](https://imajinerid.b-cdn.net/wp-content/uploads/2023/12/image-15-1024x423.png)
#2. Cukup gunakan satu pesan
Dalam membuat hero disarankan untuk menggunakan satu pesan saja.
Mengapa? Karena satu pesan jauh lebih mudah diingat.
Kita sering melihat hero dengan model slide yang gambar dan tulisannya berganti-ganti secara otomatis setiap beberapa detik.
Meskipun terkesan keren dan praktis, metode ini bisa menyebabkan pengunjung kesulitan mencerna pesan yang ingin disampaikan.
![](https://imajinerid.b-cdn.net/wp-content/uploads/2023/12/hero-tugu.gif)
Jika ingin menggunakan slide pada hero, maka sebaiknya pesan yang ditulis tidak perlu berganti.
Dengan cara ini, website tetap memperoleh efek keren dari slide tanpa mengorbankan isi pesan yang ingin disampaikan.
![](https://imajinerid.b-cdn.net/wp-content/uploads/2024/01/hero-arsaritambang-ezgif.com-optimize.gif)
#3. Visual yang kontras, menarik, dan relevan
Untuk membuat hero yang menarik dan eye-catching diperlukan desain yang menawan.
Artinya hero perlu memiliki:
- warna, tone, dan font yang sesuai dengan brand identity bisnis
- gambar, video, atau elemen visual yang mendukung
- keserasian dari seluruh elemen
Dalam mendesain hero perlu diingat bahwa simple is better.
Hero yang sederhana dan jelas akan terlihat lebih menarik dibandingkan hero yang terlalu ramai.
Pastikan setiap elemen yang ada di hero dapat berperan untuk meningkatkan trust, kredibilitas, dan daya tarik. Jika tidak, maka hilangkan elemen tersebut.
![](https://imajinerid.b-cdn.net/wp-content/uploads/2023/12/image-16-1024x410.png)
#4. Call to action yang kuat
Call to action pada hero memiliki peran yang penting.
Pertama, call to action pada hero dapat membantu meningkatkan conversion rate.
Kedua, memberikan gambaran kepada pengunjung mengenai tindakan yang dapat mereka lakukan, misalnya:
- mengisi form,
- mengklik tombol untuk terhubung ke WhatsApp,
- download brosur,
- menonton video,
- membaca berita terbaru,
- dsb.
Tanpa call to action, website akan terkesan pasif.
Untuk mendesain call to action yang kuat diperlukan:
- Kalimat ajakan yang kuat dan deskriptif. Contoh “lihat proses kerja kami” akan lebih baik dibandingkan “learn more”.
- Warna yang mencolok dan kontras. Perbedaan warna pada tombol call to action berpengaruh terhadap conversion rate, karena itu kita dapat melakukan eksperimen untuk menentukan warna yang terbaik.
#5. Tidak membebani performansi website
Kita ingin hero didesain sekeren dan secanggih mungkin agar pengunjung tertarik kan?
Ya, tapi kita juga tetap perlu memperhatikan performansi website.
Gambar, video, animasi, dan segala fitur lainnya dapat membebani website.
Jangan sampai hero yang sudah dirancang dengan susah payah tidak dapat dilihat pengunjung karena memerlukan waktu loading yang terlalu lama.
Kuncinya di sini adalah balance antara visual dan performansi.
Berikut langkah yang dapat Anda lakukan:
- Mulailah dengan hero yang minimalis. Berisi logo, 1 headline, 1 deskripsi, 1 call to action, dan 1 gambar visual.
- Tambahkan elemen lainnya (gambar, video, background, atau animasi) jika diperlukan.
- Cek dan analisa, apakah tambahan elemen tersebut menyebabkan penurunan performansi secara signifikan.
- Jika tidak, maka elemen tersebut dapat ditambahkan.
- Ulangi proses ini hingga Anda mendapatkan keseimbangan yang dirasa tepat.
Baca juga: Berapa Kecepatan Website yang Ideal?
Penutup
Semoga artikel ini dapat memberikan Anda informasi yang jelas mengenai hero pada website.
Apakah website Anda sudah memiliki hero yang kuat? Atau menurut Anda masih perlu di-improve lebih lanjut?
Silakan bagikan pendapat Anda pada kolom komentar.