Berhenti Menggunakan Hero Image! Itu Merusak UX Anda

29 June 2025

Hero image adalah beban mati yang paling cantik di web—lambat, tidak jelas, dan terlalu sering digunakan. Sudah waktunya berhenti mendekorasi halaman depan dan mulai menyampaikan sesuatu yang benar-benar penting.

Ada satu pola yang menghantui desain web selama lebih dari satu dekade—begitu melekat dalam alur kerja kita sehingga mempertanyakannya terasa seperti sebuah penghujatan.

Hero image full-bleed.

Kamu tahu maksudnya. Kamu pernah mendesainnya. Bahkan, kamu mungkin secara otomatis menggunakannya di Figma tanpa berpikir. Sebuah visual besar dan mencolok di bagian paling atas homepage. Mungkin itu foto ruangan kerja yang penuh suasana, atau pendiri startup yang sedang berjalan sambil bicara. Mungkin ada slogan samar seperti “Mendorong Masa Depan.” Mungkin ada tombol CTA hantu yang melayang di pojok, berharap ada yang mengkliknya.

Kita meyakinkan diri sendiri bahwa desain seperti ini “memberikan kesan.” Bahwa itu menarik perhatian. Bahwa itu menyampaikan suasana dan nilai brand secara instan.

Tapi jika kita menyingkap kilau visualnya, yang tersisa seringkali hanyalah kesan pertama yang kosong: performa lambat, informasi minim, aksesibilitas buruk, dan rasa monoton yang membosankan. Kenyataannya, hero image diam-diam telah menjadi salah satu elemen yang paling disalahgunakan dan disalahpahami dalam desain web modern.

Dan sudah waktunya untuk mengevaluasinya kembali.

Mari kita kilas balik. Awal tahun 2010-an, ketika desain responsif mulai berkembang dan layar beresolusi tinggi menjadi arus utama, hero image terasa segar. Sinematik. Menarik. Menginspirasi. Tiba-tiba, homepage terasa seperti adegan pembuka film.

Tapi seperti kebanyakan tren, hero image menjadi komoditas. Ia berhenti menjadi keputusan kreatif dan mulai menjadi default.

Muncul di setiap template, setiap presentasi, setiap homepage SaaS “modern.” Apa yang awalnya dimaksudkan untuk menciptakan resonansi emosional berubah menjadi tongkat penyangga—pengganti strategi konten yang tak pernah benar-benar dibuat.

Hari ini, lebih sering dari tidak, hero image tidak mengkomunikasikan... melainkan mendekorasi. Mengganggu. Menunda!

Ada alasan kenapa LCP (Largest Contentful Paint) kamu buruk. Dan mungkin penyebabnya ada di bagian hero.

Dalam banyak kasus, JPEG resolusi tinggi atau video latar belakang autoplay di hero adalah elemen paling besar yang menghambat render halaman. Tak peduli sebersih apa grid CSS kamu, atau sepintar apa JavaScript kamu—jika gambar hero berukuran 2MB dan dimuat di atas layar pertama (above the fold), kamu sudah kalah dalam permainan performa.

Dan performa bukan cuma masalah developer. Itu juga keputusan desain. Desainer yang mengabaikan metrik performa sedang mendesain dalam ruang hampa. Kamu mungkin memenangkan penghargaan, tapi pengguna menunggu lima detik hanya untuk melihat foto stok secangkir kopi.

Itu bukan bercerita. Itu sabotase.

Tapi bahkan jika performanya sempurna—yang hampir tidak pernah terjadi—ada dosa yang lebih besar: abstraksi.

Terlalu banyak hero image dipasangkan dengan slogan yang begitu abstrak hingga terdengar seperti parodi. “Memberdayakan Kemungkinan.” “Di Mana Inovasi Bertemu Dampak.” Frasa ini terdengar rapi dalam ruang hampa, tapi dalam praktiknya, tidak mengatakan apa-apa.

Ini setara dengan basa-basi visual. Kamu punya tiga detik untuk menarik perhatian pengguna dan memberi tahu mereka apa yang kamu lakukan—dan kamu menghabiskannya dengan menunjukkan pemandangan kota dari udara?

Itu bukan cuma malas. Itu tidak jujur. Karena ketika pengguna membuka situsmu dan tidak langsung bisa memahami apa yang kamu tawarkan, untuk siapa, dan kenapa itu penting—mereka akan pergi. Tak peduli seindah apapun tipografi kamu.

Lalu ada pengalaman mobile.

Di layar desktop besar, hero image masih punya ruang untuk “bernapas.” Ada ruang untuk komposisi dan cropping. Tapi begitu tata letak itu dikompresi ke viewport 390px, semuanya berantakan. Teks saling tumpang tindih. CTA tenggelam di bawah layar. Komposisi gambar “rule of thirds” yang sempurna? Hilang.

Kenyataannya, hero di mobile seringkali hanya berupa gambar setengah layar yang tidak berguna dan mendorong konten penting ke bawah.

Desain untuk mobile bukan sekadar breakpoint responsif—ini tentang konteks penggunaan. Dan dalam konteks layar ponsel, gambar besar yang abstrak seringkali adalah hal paling tidak berguna yang bisa kamu tampilkan.

Di sinilah segalanya makin rumit. Hero section sering jadi tempat aksesibilitas diabaikan.

Teks di atas foto jarang lulus uji kontras. Video latar belakang sering autoplay tanpa kontrol jeda atau caption. Gambar yang memuat konten penting ditandai sebagai dekoratif. Dan struktur semantik dibuang begitu saja demi memasukkan H1 ke dalam container yang tidak bisa dijangkau screen reader.

Yang menyedihkan? Ini semua masalah yang bisa diselesaikan. Tapi jarang diselesaikan—karena hero image dianggap sebagai aset visual, bukan wadah konten.

Dan ketika visual diprioritaskan daripada makna, orang dengan disabilitas adalah yang pertama dikucilkan.

Ini kenyataan pahitnya: kebanyakan hero image ada karena tidak tahu harus menaruh apa.

Ini adalah “properti” paling mahal di halaman—bagian atas homepage, kesan pertama, penghambat scroll—dan yang dipajang hanya... sebuah foto. Bukan karena foto itu bermakna, tapi karena pesan belum siap. Value proposition belum jelas. Produk sulit dijelaskan. Jadi kita tampilkan pemandangan kota, tulis sesuatu yang ambigu, dan berharap pengguna cukup sabar untuk scroll ke bawah.

Hero image bukan musuh. Tapi sekarang ia sering digunakan untuk menghindari kerja keras menjelaskan dengan jelas.

Mereka menyamarkan ketidaktegasan. Mereka menyembunyikan pesan yang belum matang.

Mereka menunda momen ketika produk harus bicara sendiri.

Tidak, kita tidak harus melarang semua gambar. Visual tetap punya tempat—kalau memang layak.

Homepage yang baik harus dimulai dengan kejelasan. Jika seseorang masuk ke situsmu, mereka harus bisa menjawab tiga pertanyaan dalam hitungan detik:

Apa ini? Untuk siapa? Kenapa saya harus peduli?

Jika bagian hero kamu menjawab pertanyaan-pertanyaan itu—secara visual atau dengan teks—kamu berada di jalur yang tepat. Tapi jika kamu mengandalkan gambar abstrak untuk mengerjakan semuanya, sudah waktunya untuk mempertimbangkan ulang.

Tidak ada aturan yang mengatakan situs kamu harus punya banner besar. Kamu bisa memulai dengan headline kuat, subhead ringkas, dan gambar sederhana yang mendukung pesan, bukan mengganggunya. Kamu bisa menunjukkan produk sedang digunakan. Bisa menampilkan kisah nyata pelanggan. Bisa langsung ke demo interaktif—bahkan langsung ke navigasi.

Karena pada akhirnya, desain bukan hanya soal tampilan yang indah—tapi soal apa yang benar-benar bekerja.

Dan untuk semakin banyak situs saat ini, hero image tidak lagi bekerja.