Hero section · layar pertama

Apa saja yang perlu dimasukkan ke hero section?

Hero section cukup memuat tiga hal: ‘tempat apa ini’, ‘kenapa harus di sini’, dan ‘apa yang bisa dilakukan sekarang’. Hanya dari layar pertama, pelanggan harus bisa memutuskan akan terus melihat atau menghubungi Anda.

Makin banyak isi tidak membuatnya makin baik. Makin banyak elemen, masing-masing makin kurang terlihat, jadi sebaiknya pisahkan yang wajib ada dan yang boleh dipindah ke bawah.

Jenis usaha dan daerah dimasukkan demi pelanggan yang datang dari pencarian. Jika pelanggan yang mencari ‘kue Mangwon-dong’ melihat kata yang sama di layar pertama, mereka yakin sudah datang ke tempat yang tepat.

Apakah pelanggan benar-benar menilai hanya dari layar pertama?

Pelanggan tidak hanya melihat layar pertama, tetapi memang paling lama berada di sana. Dalam studi pelacakan mata yang dirilis Nielsen Norman Group pada 2018, sekitar 57% waktu melihat layar terpusat di area sebelum menggulir.

Dalam studi yang sama, dua layar pertama menyerap sekitar 74% waktu melihat. Artinya pelanggan memang menggulir, tetapi makin ke bawah makin kurang teliti melihatnya.

Karena itu, layar pertama juga berperan memberi ‘alasan untuk terus menggulir’. Pelanggan baru akan membaca harga · testimoni di bawah setelah yakin di layar pertama bahwa usaha Anda yang mereka cari.

Meski begitu, tidak perlu memasukkan semuanya ke layar pertama. Pelanggan menggulir jika melihat alasan untuk turun, jadi jika konten berikutnya sedikit terlihat di bagian bawah layar pertama, mereka akan melanjutkan dengan sendirinya.

Bagaimana cara menulis teks hero section?

Dasarnya, teks hero memakai kata yang dipakai pelanggan saat mencari dan memuat jenis usaha · daerah · keunggulan dalam satu kalimat. Ungkapan yang langsung dipahami lebih mudah dibaca daripada ungkapan yang keren.

Jika ditulis mengikuti urutan di bawah, hampir semua usaha akan mendapat teks yang layak. Jangan berusaha sempurna sejak awal; buat dua-tiga versi lalu bandingkan.

Jika semua keunggulan dimasukkan ke satu baris, kalimatnya jadi panjang dan tidak ada yang teringat. Jika keunggulannya banyak, taruh satu yang paling Anda yakini di layar pertama, dan uraikan sisanya satu per satu di bagian bawah.

Setelah teks ditetapkan, ada baiknya kata pada judul halaman di hasil pencarian disamakan dengan teks layar pertama. Jika kata yang terlihat di pencarian sama dengan di layar pertama, pelanggan tidak bingung.

1. 01Tulis kata-kata yang kemungkinan dipakai pelanggan saat mencari usaha Anda. (Contoh: ‘pesan kue Mangwon-dong’, ‘layered cut Hongdae’)
2. 02Dari situ, buat judul besar singkat yang memuat jenis usaha dan daerah.
3. 03Tambahkan satu hal yang membedakan Anda dari usaha lain sebagai satu baris keterangan kecil. (Contoh: ‘bisa pesan di hari yang sama’, ‘perawatan setelah konsultasi 1:1’)
4. 04Tentukan teks tombol berupa tindakan yang akan dilakukan pelanggan. (Contoh: ‘Tanya pemesanan kue’, ‘Lihat jadwal kosong’)
5. 05Masukkan ke layar ponsel, dan jika barisnya terlalu sering patah, kurangi katanya.
6. 06Tunjukkan selama 5 detik kepada orang yang tidak mengenal usaha Anda, lalu tanyakan ‘Menurut Anda ini tempat apa?’.

Apakah foto atau video besar di layar pertama membuat situs lambat?

Jika tidak dikelola, ya. Foto besar di layar pertama biasanya elemen terbesar di layar, sehingga langsung tercermin pada LCP (waktu sampai konten terbesar tergambar), metrik Google untuk mengukur kecepatan pemuatan.

Menurut panduan web.dev, LCP dianggap ‘baik’ jika 2.5 detik atau kurang. Dasarnya, foto layar pertama diperkecil sesuai ukuran layar, diubah ke format ringan, dan tidak diberi pemuatan tertunda (lazy loading).

Kecepatan lebih lambat di ponsel daripada komputer, dan di data seluler daripada Wi-Fi. Saat mengecek layar pertama, mematikan Wi-Fi dan membukanya langsung di ponsel paling mendekati kondisi pelanggan.

Video latar memang menghidupkan suasana, tetapi ukurannya besar sehingga membebani koneksi data ponsel. Jika tetap dipakai, buat singkat, dan siapkan juga foto diam yang ditampilkan sebelum video muncul.

Bagaimana menyusun layar pertama per jenis usaha?

Hal yang ingin dicek pelanggan di layar pertama berbeda per jenis usaha, jadi foto dan tombol juga harus dipilih sesuai itu. Berikut susunan yang banyak dipakai usaha kecil.

Sebisa mungkin pakai foto yang diambil di tempat usaha sungguhan. Foto dari situs stok memang rapi, tetapi jika berbeda dengan kondisi saat pelanggan datang, kepercayaan justru bisa turun.

Di layar ponsel, foto vertikal panjang hampir memenuhi layar sehingga teks dan tombol mudah terdorong. Jika foto untuk komputer dan ponsel dipotong terpisah, kedua tampilan jadi rapi.

Teks dan foto layar pertama boleh diganti sesuai musim atau acara. Namun jika setiap kali harus meminta ke pembuat situs, jadi repot, jadi cek dulu apakah bisa diganti sendiri lewat panel admin.

• Kafe: foto ruangan atau minuman andalan, ‘Kafe hand drip Yeonnam-dong · setiap hari pukul 10–22’, tombol ‘Petunjuk arah’.
• Salon: foto hasil perawatan asli, ‘3 menit dari Stasiun Hapjeong · spesialis keriting minim kerusakan’, tombol ‘Reservasi per desainer’.
• Studio kerajinan: foto tangan yang sedang berkarya, ‘Kelas keramik satu hari akhir pekan’, tombol ‘Lihat jadwal bulan ini’.
• Penjualan online: foto produk andalan, ‘Granola buatan tangan dipanggang sendiri · kirim ke seluruh Korea’, tombol ‘Lihat produk’.

Apa kesalahan umum di layar pertama?

Kesalahan paling umum adalah hanya memasang foto suasana berukuran besar tanpa teks. Anda mengenal usaha Anda sehingga foto saja terasa cukup, tetapi pelanggan baru sulit langsung tahu itu usaha apa.

Slide yang berganti otomatis sehingga teks penting cepat hilang juga masalah umum. Sering juga tampilan di komputer baik-baik saja tetapi di ponsel tombolnya terdorong ke bawah layar, jadi wajib dicek di ponsel.

Pop-up yang muncul begitu pelanggan masuk juga perlu diwaspadai. Jika jendela acara menutupi layar, pelanggan sibuk menutupnya sebelum sempat melihat profil usaha, dan Google pun menyebut pop-up yang menutupi konten sebagai salah satu pengalaman halaman yang buruk.

Memulai dengan satu foto dan teks alih-alih slide juga lebih mudah dikelola. Jika ingin menampilkan banyak foto, Anda bisa membuat bagian galeri tersendiri di bawah layar pertama.

Apa yang perlu ditanyakan ke pembuat situs saat melihat draf layar pertama?

Saat menerima draf desain, tanyakan empat hal di bawah ini ke pembuat situs. Jika jawabannya berdasarkan tampilan ponsel, perbaikan setelah rilis berkurang.

• Apakah tombol terlihat tanpa menggulir di layar pertama ponsel?
• Apakah ukuran file dan kecepatan muat foto layar pertama ikut dicek?
• Apakah tulisan di atas foto tetap terbaca meski fotonya terang?
• Jika memakai slide, bisakah pelanggan menghentikan atau menggesernya sendiri?