Terkadang desain dibuat dengan cermat dan dengan kepedulian yang besar, kali lain, secara sembarangan dan nyaris tidak sadar. Apakah kita melakukannya sengaja atau tidak, setiap kali kita merancang sesuatu, kita memberinya aliran. Kuncinya adalah mengetahui bagaimana mengontrol aliran untuk mencapai tujuan kita, terutama dengan sesuatu yang terfokus sebagai Landing Page. Bagaimana Anda melakukan ini? Tanyakan kepada diri sendiri tiga pertanyaan penting:

1. Di mana mata pemirsa akan pergi untuk fokus
2. Apa yang akan mempengaruhi bagaimana mata mereka bergerak dan di mana fokus mereka akan pergi berikutnya?
3. Bisakah kita mendesain halaman kita untuk mengendalikan fokus mereka dalam rangka membimbing mereka menuju tujuan kita?

Ada beberapa alat dan teori yang dapat membantu kami menemukan jawaban atas pertanyaan ini, dan membantu kami merancang halaman Landing dengan alur yang disengaja, yang mengarahkan pemirsa ke CTA dan membuatnya lebih mungkin untuk bertindak.

Penting di antara alat ini, pelacakan mata telah menjelaskan cara orang melihat sesuatu-baik pada halaman tercetak dan di web. Ketika datang ke halaman arahan, sangat penting untuk memahami bagaimana orang akan melihat halaman yang kita buat:

Di sinilah pola gerakan mata masuk.

Pelacakan mata: Lihat di mana mereka mencari

Pelacakan mata telah menjelaskan cara orang melihat sesuatu — baik di halaman tercetak maupun di web. Sebagai bidang studi, itu datang ke sendiri pada tahun 1980-an, tetapi pengamatan sedang dibuat tentang bagaimana mata bergerak di halaman sedini tahun 1800-an. Sejarawan kredit Louis Émile Javal sebagai yang pertama untuk mengamati bahwa daripada menyapu mulus mata di sebuah halaman, membaca melibatkan serangkaian fikations dan saccades-berhenti untuk fokus pada titik diikuti oleh gerakan cepat ke titik fokus berikutnya.

Tentu saja ini menimbulkan pertanyaan mengapa seseorang mungkin fokus pada satu hal, bukan yang lain, dan bagaimana seseorang memutuskan di mana untuk memindahkan fokus seseorang ke depan. Pertanyaan ini membentuk dasar dari lebih dari satu abad penelitian mata-pelacakan. Sementara kemajuan penting telah dibuat dalam menjawab mereka, mereka tetap menjadi titik intrik hari ini.

Pola F

Temuan dari Nielsen Norman Group, disusun dalam berbagai laporan, tetap mungkin yang paling dikutip dan sumber daya yang paling berguna pelacakan mata dalam komunitas desain. Kepala di antara temuan mereka, laporan ini menggambarkan yang sekarang terkenal F-pola:

1. Pengguna pertama kali membaca dalam gerakan horisontal, biasanya di bagian atas area konten. Elemen awal ini membentuk Bar atas F.
2. Selanjutnya, pengguna berpindah ke bawah halaman sedikit dan kemudian membaca di dalam gerakan horisontal kedua yang biasanya mencakup area yang lebih pendek daripada gerakan sebelumnya. Elemen tambahan ini membentuk Bar bawah F.
3. Akhirnya, pengguna memindai sisi kiri konten dalam gerakan vertikal. Elemen terakhir ini membentuk batang F.

Peta panas berikut menunjukkan pola F:

Dengan tidak adanya apa pun yang ditempatkan sengaja untuk menarik perhatian mereka, pola F menjelaskan cara mata seseorang akan bergerak di seluruh halaman yang padat dengan teks, sehingga sangat berlaku untuk posting blog dan halaman hasil pencarian.

Hal yang penting untuk dicatat adalah bahwa mata akan mulai di kiri atas sebelum memindai ke bawah halaman untuk mencari sesuatu yang menarik atau relevan. Jika Anda memiliki sesuatu yang Anda ingin seseorang untuk memperhatikan (seperti proposisi nilai) – dan halaman Anda adalah teks-berat-itu ide yang baik untuk menempatkannya ke arah kiri atas untuk memastikan hal itu akan mendapatkan perhatian yang layak.

Ini juga layak disebutkan bahwa pola F tidak harus mengikuti tradisional “F” dengan dua batang horisontal. Untuk menunjukkan, halaman Landing Fleetmatic menunjukkan tiga batang (logo, Headline, CTA), namun F-pattern masih terlihat jelas:

Pola Z

Halaman yang kurang kepadatan informasional, atau sebagai Jerry Cao menulis, “terorganisir longgar”, cenderung menimbulkan gerakan mata yang menyerupai huruf ‘ Z ‘. Ini disebut pola Z memiliki banyak karakteristik yang sama sebagai pola F. Tapi seperti Mr Cao menunjukkan, “di mana kesederhanaan adalah prioritas dan ajakan bertindak adalah Takeaway utama,” pola Z akan muncul bukan pola F.

Fokus pada kesederhanaan ini membuat pola Z unik sesuai dengan desain halaman Landing, di mana Anda ingin satu fokus tunggal untuk menarik orang dan mendorong mereka untuk mengambil tindakan. Untuk memanfaatkan pola Z, Brandon Jones, tempatkan ajakan bertindak Anda di sepanjang jalur Z untuk memastikan pemirsa Anda melihatnya. Ini akan menghasilkan lebih banyak konversi.

Lihatlah halaman arahan Offerpop dan bagaimana pola Z diterapkan, menarik lebih banyak perhatian ke form dan CTA:

Contoh di atas menggunakan halaman Landing-halaman terfokus dengan tujuan tunggal-untuk menunjukkan penggunaan efektif pola F dan pola Z. Perhatikan bagaimana komponen utama dari setiap halaman, CTA dalam contoh pertama dan bentuk di kedua, ditempatkan tepat di sepanjang jalan mata seseorang akan secara alami mengambil ketika mereka melihat halaman. Menempatkan komponen terpenting Anda di sepanjang jalur alami seperti ini, dan melakukan sedikit pengoptimalan halaman Landing, akan memastikan Anda mendapatkan konversi terbanyak. Terkadang jalan alami ini cocok persis dengan pola F atau Z, tetapi pada intinya strateginya adalah tentang menggunakan hierarki visual untuk memandu orang.

Hirarki Visual: Kunci Untuk Desain Yang Baik

Baik pola F dan pola Z didokumentasikan dengan sangat baik, dan telah digunakan oleh desainer untuk efek yang besar pada halaman di seluruh web. Dengan tidak adanya aliran lain sengaja dibuat, ini adalah pola mata orang akan mengikuti. Dan itu adalah pengetahuan yang sangat berguna untuk dimiliki ketika menyusun halaman.

Namun, pada akhirnya, desain adalah tentang membimbing orang menuju tujuan yang Anda inginkan. pola F dan pola Z tanpa diragukan lagi alat yang kuat, tetapi bahkan lebih kuat adalah gagasan untuk membangun hirarki visual untuk memandu orang melalui halaman.

Berbeda dengan halaman bermotif F dan bermotif Z di atas, mari kita lihat contoh lain:

Ketika Anda pertama kali melihat Halaman ini, Kemana mata Anda melihat?

• Wajah wanita itu?
• Tag harga kuning?
• Jaminan uang kembali?
• Bentuknya?
• Grafis di kanan bawah?

Masing-masing elemen di Halaman ini telah dirancang untuk menarik perhatian sebanyak mungkin, dengan hasilnya adalah bahwa tidak satupun dari mereka berhasil. Ini seperti mencoba untuk memiliki percakapan dengan seseorang di sebuah ruangan yang penuh dengan orang yang berteriak pada Anda. Dengan begitu banyak gangguan, halaman gagal untuk memusatkan perhatian pada tujuan tunggal mendapatkan “Laporan Audit SEO gratis.”

Perhatikan kurangnya hirarki visual — itu tidak mengikuti pola F atau Z — membuatnya lebih sulit untuk menghasilkan konversi. Pikirkan tentang hal ini: jika Anda datang ke Halaman ini, apakah anda akan mengkonversi? Apakah Anda bahkan tahu apa yang harus dikonversikan, apa tawaran itu, dan apa itu segera diketahui oleh Anda? Apa yang akan Anda lakukan untuk memperbaiki hirarki dan tata letak keseluruhan?

Ruang Putih

Dalam posting di WordStream, Fahad Muhammad menjelaskan bagaimana ruang putih dapat menjadi kunci untuk membangun hirarki visual yang efektif:

“Semua elemen layak mendapatkan tempat yang nyata pada halaman khusus Anda karena keseimbangan antara elemen ini yang membantu membujuk pengunjung untuk mengkonversi menjadi Lead/pelanggan… Dengan bantuan ruang putih, Anda dapat membentuk hirarki visual bagi pengunjung dengan mendikte elemen mana yang harus mereka lihat terlebih dahulu dan elemen mana yang perlu diikuti. Ruang putih adalah alasan mengapa pengunjung Anda akan terlebih dahulu melihat judul Anda, kemudian pindah ke salinan, lanjutkan ke formulir dan akhirnya tombol ajakan bertindak Anda. Ruang putih memungkinkan Anda untuk memberikan hubungan spasial antara setiap elemen halaman-memungkinkan Anda untuk memandu pengunjung Anda melalui halaman. “

Menggunakan ruang putih untuk memandu pengunjung Anda melalui halaman membuat perbedaan antara hirarki visual yang efektif dan halaman tanpa struktur yang jelas atau indikasi dari apa yang harus dilakukan.

Lyft Landing Page untuk sign up driver memberikan setiap proposisi nilai besar – ruang putih buffer, yang memungkinkan mereka untuk masing-masing menarik pandangan kita. Sebuah halaman dengan hirarki visual yang jelas akan dikonversi pada tingkat yang jauh lebih baik karena orang yang mengunjungi halaman Anda akan tahu persis di mana mencarinya, mencapai kedua tujuan Anda dan memberikan mereka apa yang mereka datang untuk.

Ambil Alih Desain Anda!

Desain adalah kombinasi dari seni dan ilmu pengetahuan. Mari kita lihat satu contoh terakhir yang menunjukkan bagaimana pelacakan mata, hirarki visual dan psikologi manusia dapat isyarat pengunjung untuk fokus pada apa yang Anda ingin mereka untuk fokus pada.

Anda akan melihat peta panas di atas adalah untuk halaman yang sama, satu-satunya perbedaan adalah garis mata bayi. Di sebelah kiri, bayi mencari langsung pada Anda, dan bagian terpanas dari peta panas di wajah. Di sebelah kanan, bayi melihat judul, yang mengarahkan mata kita dari wajahnya ke Headline dan copy. Variasi ini kemungkinan akan berkinerja lebih baik ketika pengujian A/B karena perhatian pengunjung akan berada pada elemen halaman yang paling penting. Manusia secara otomatis ingin melihat di mana manusia lain mencari. Dengan menggeser pandangan bayi, kami kemudian mengambil kendali pandangan pengunjung kami dan diarahkan ke arah proposisi nilai.

Tidak hanya penting untuk memahami aturan struktural, tetapi juga peka terhadap isi teks dan gambar kita. Sementara pola F dan pola Z berfungsi sebagai alat yang berguna untuk penataan halaman, Anda akan menemukan lebih sukses (dan memiliki jauh lebih menyenangkan) jika Anda merangkul kekuatan sejati desain dan menciptakan hirarki visual untuk memandu orang melalui bagian yang paling penting dari halaman Anda. Kendalikan desain Anda dan gunakan untuk mencapai tujuan Anda – Anda akan senang Anda telah melakukannya.

Tentang penulis: Nicolai Doreng-Stearns adalah perancang pengalaman pengguna di Instapage dan berkomitmen kuat untuk menjalani kehidupan terbaiknya. Ketika ia tidak merancang pengalaman intuitif, dia pelatihan Jiu Jitsu Brasil, mengendarai sepedanya melalui San Francisco dan membuat musik yang mengerikan.

sumber: 99designs.com