“Haruskah aku membuang ini atau membacanya?” subyek riset bertanya-tanya ketika mereka memeriksa sepotong surat langsung. Dari atas ke bawah mereka mengevaluasi surat itu, dan setelah hanya 11 detik mereka membuat keputusan.
Selama waktu itu, para peneliti dari Marketing Association Langsung Munich melihat sesuatu yang aneh pada mata subjek. Mereka tidak mengikuti jalur linier, membaca setiap kata secara berurutan, melainkan melompat-lompat ke berbagai titik di badan surat. Jadi apa yang mereka lihat?
Jawabannya adalah kunci untuk membuat post-click landing page yang mengonversi, dengan bantuan apa yang disebut “visual hierarchy.” Untuk memahaminya sepenuhnya, kita harus melakukan perjalanan kembali ke Jerman tahun 1912, di mana tiga psikolog mulai membentuk dasar-dasar Psikologi Gestalt.
Daftar isi
Psikologi Gestalt Dan Pondasi Visual Hierarchy
Lebih dari seabad yang lalu, pemikir Jerman Wolfgang Kohler, Max Wertheimer, dan Kurt Koffka mulai mempelajari bagaimana orang memandang dunia. Nama mereka dan teori “Psikologi Gestalt” mungkin tidak terlihat asing, tetapi pesan yang mencakup riset mereka akan:
“Keseluruhan adalah selain jumlah dari bagian-bagiannya” – yang berarti keseluruhan memiliki “keberadaan independen dalam sistem persepsi,” kata Dr Russ Dewey.
Dengan kata lain, ketiga pria itu mengusulkan agar manusia tidak melihat sekelilingnya secara individual dan setara. Sebaliknya, kami mengaturnya dengan cara tertentu untuk memahaminya secara keseluruhan.
Ambil gambar berikut sebagai contoh. Apa yang kamu lihat?
Anda mungkin melihat tiga lingkaran yang digambar sebagian, tetapi juga segitiga terbalik di tengahnya yang tidak ada. Lingkaran yang tidak lengkap membentuk sudut segitiga, dan pikiran Anda memenuhi tepinya. Ini disebut “kontur ilusi,” dan itu menunjukkan dengan tepat apa yang dimaksud Koffka ketika dia berkata, “keseluruhan adalah selain jumlah dari bagian-bagiannya.” Ada lebih dari tiga lingkaran yang digambar sebagian dalam gambar ini. Bersama-sama, diposisikan sebagaimana adanya, lingkaran-lingkaran itu membentuk segitiga putih.
Dari riset mereka, ketiga pria itu menciptakan delapan hukum organisasi perseptual — cara-cara di mana manusia memandang komponen-komponen suatu kelompok secara keseluruhan. Satu lebih dari yang lain berkaitan dengan cara orang menemukan informasi penting di post-click landing page Anda.
Hukum Kesamaan
Hukum kesamaan menyatakan bahwa hal-hal serupa tampak seolah-olah mereka dikelompokkan bersama. Pada gambar di bawah, apa yang kamu lihat?
Jika Anda mengatakan “36 lingkaran” atau “6 baris lingkaran”, atau “6 kolom lingkaran”, Anda termasuk minoritas. Kebanyakan orang melihat tiga baris lingkaran hitam dan tiga baris lingkaran putih. Karena setiap baris lain berwarna dan berbentuk sama, baris itu dilihat sebagai bagian dari kelompoknya sendiri di dalam keseluruhan.
Pada saat yang sama, karena kecenderungan untuk mengelompokkan hal-hal yang serupa bersama-sama, kami juga memperhatikan hal-hal yang tidak serupa dengan kelompok tersebut. Psikolog Gestalt menyebut ketidakmiripan ini sebagai “anomali”.
Pada gambar di atas, kami mengelompokkan semua apel hijau yang serupa bersama-sama dan yang merah menonjol sebagai anomali. Apakah anomali itu berbeda dalam ukuran, warna, atau bentuk, itu menarik perhatian kita karena berbeda dari kelompok lainnya.
Proses pengelompokan elemen perseptual ini dapat menjelaskan apa yang diperhatikan oleh para peneliti dari Marketing Association Langsung Munich di mata subjek riset.
Apa Itu Visual Hierarchy?
Brandon Jones dari Tuts+ mengatakan orang bukanlah “pelihat kesempatan yang sama.” Kita tidak hanya memiliki kecenderungan untuk memperhatikan perbedaan antar kelompok, tetapi juga membuat kesimpulan tentang pentingnya perbedaan tersebut. Misalnya, beri peringkat lingkaran pada gambar ini:
Tanpa mengetahui apa-apa tentang mereka, Anda mungkin memeringkatnya sebagai berikut:
Dan itu karena lingkaran terbesar paling menarik perhatian, lalu terbesar kedua, dan seterusnya. Sekarang mari kita terapkan prinsip yang mirip dengan kata-kata di halaman.
Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting.
Dalam kutipan itu, mata Anda kemungkinan besar tertarik pada anomali. Anda mengelompokkan kalimat yang tidak diformat menjadi satu, dan kata-kata yang dicetak tebal menonjol. Saat Anda memperkenalkan perbedaan ukuran, perhatian akan tertuju ke tempat lain.
Ini adalah kalimat yang paling penting.
Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting. Ini adalah kalimat yang paling penting.
Kali ini, sebelum Anda memperhatikan kata-kata yang dicetak tebal di dalam paragraf, Anda mungkin melihat kata-kata yang lebih besar dan dicetak tebal di atasnya. Kami dapat terus mengubah kata-kata dengan warna dan posisi untuk membuatnya lebih menonjol, tetapi Anda mengerti maksudnya. “Berbeda” menarik perhatian, dan perhatian adalah apa yang Anda ingin berikan pada informasi terpenting di post-click landing page Anda.
Dengan perbedaan dalam desain, Anda dapat secara strategis menarik perhatian pengunjung ke pesan pemasaran yang penting untuk mendorong konversi — proposisi nilai Anda, manfaat produk Anda, dan ajakan bertindak, misalnya. Strategi-strategi yang menarik perhatian ini membentuk “visual hierarchy.”
Dalam hierarki itu, informasi terpenting adalah di mana mata pengunjung Anda pertama kali mendarat di halaman, dan kemudian informasi terpenting kedua adalah di mana mata mereka selanjutnya, dan seterusnya. Tanpa disadari, mereka secara mental mengurutkan elemen-elemen ini dari yang penting hingga yang tidak dibutuhkan berdasarkan perbedaan.
Gaya Membaca Di Dalam Dan Di Luar Web
Sekarang mari kita tinjau kembali percobaan oleh Marketing Association Langsung Munich, di mana subjek memilih apakah akan membuang sampah atau membaca surat penjualan hanya dalam 11 detik. Mereka mampu membuat keputusan begitu cepat karena perbedaan desain.
Pertama, mata mereka tertuju pada apa yang mereka anggap sebagai informasi paling penting di halaman: berita utama dan foto. Selanjutnya, keterangan, daftar berpoin, dan paragraf pendek menarik perhatian. Salinan panjang dan tidak diformat dicerna terakhir, jika sama sekali.
Sejak itu, banyak riset telah memperkuat temuan, terutama Riset Nielsen Norman Group yang melahirkan “F-Shaped Pattern”.Setelah melacak pandangan 232 subjek pada ribuan halaman web, kelompok tersebut menemukan:
- Pengguna pertama membaca di bagian atas halaman, membuat bilah horizontal atas berbentuk “F”.
- Kemudian, orang-orang maju lebih jauh ke bawah halaman, membaca subjudul untuk membentuk bilah horizontal bawah “F.”
- Terakhir, pengguna memindai sisi kiri, membentuk batang vertikal “F.”
Itu terlihat seperti ini:
Namun, nama “F-shaped” sedikit menyesatkan. Seperti yang dijelaskan para peneliti, pattern membaca pengguna internet tidak selalu begitu rapi:
Jelas, pattern pemindaian pengguna tidak selalu terdiri dari tiga bagian. Terkadang pengguna akan membaca sepertiga bagian konten, membuat pattern lebih terlihat seperti huruf E daripada F. Di lain waktu, mereka hanya membaca satu kali, membuat pattern terlihat seperti huruf L terbalik (dengan palang di bagian atas). Namun, umumnya pattern pembacaan secara kasar menyerupai huruf F, meskipun jarak antara bilah atas dan bawah bervariasi.
Terlepas dari apakah itu “F”, “L”, “E”, atau bahkan “Z-Shaped Pattern Untuk halaman yang tidak terlalu banyak teks, implikasinya sama: orang berbahasa Inggris membaca dari kiri ke kanan dan dari atas ke bawah sambil memindai perbedaan konten. Judul, subjudul, gambar, kata-kata yang dicetak tebal, keterangan, daftar — ini adalah elemen yang berbeda dari teks standar yang tidak diformat.
Lihatlah halaman tiruan di bawah ini:
Mereka tidak mengandung kata-kata yang sebenarnya, namun Anda mungkin dapat mengatur mental yang benar lebih baik daripada yang kiri. Yang kanan mengakomodasi gaya membaca F-pattern, sementara yang kiri tidak mengatur isinya ke dalam visual hierarchy sama sekali.
Kita sudah tahu dari riset bahwa blok teks seperti yang ada di halaman kiri jarang dibaca. Jadi bagaimana Anda memastikan milik Anda?
Desain Dengan Perbedaan Dalam Pikiran
Sebelum Anda mulai membuat visual hierarchy, Anda memerlukan tujuan, kata Intip Laja dari CXL:
Anda harus memberi peringkat elemen di website Anda berdasarkan tujuan bisnis Anda. Jika Anda tidak memiliki tujuan tertentu, Anda tidak tahu apa yang harus diprioritaskan.
Dia menggunakan tangkapan layar beranda Williams Sonoma untuk menunjukkan:
Penangkap mata terbesar adalah sepotong besar daging (membuat saya menginginkannya), diikuti oleh judul (katakan apa itu) dan tombol ajakan bertindak (dapatkan!). Tempat keempat jatuh ke paragraf teks di bawah judul, kelima adalah spanduk pengiriman gratis, dan navigasi teratas adalah yang terakhir. Ini adalah visual hierarchy yang dilakukan dengan baik.
Namun, pada post-click landing page Anda, seharusnya tidak ada menu navigasi. Jadi, perhatian akan ditarik sedikit berbeda. Mari kita lihat post-click landing page dari Simply Measured:
Di mana mata Anda pertama kali mendarat? Lanjut? Terakhir? Jika kami harus menebak, kami akan mengatakan…
- Judulnya: “Cara Membuat Keputusan Pemasaran Sosial Lebih Cepat.”
- Subjudul: “Pelajari cara menghemat waktu dan terlihat seperti profesional.”
- Teks yang dicetak tebal: “Dalam panduan ini Anda akan belajar bagaimana…”
- Salinan berpoin di bawah teks yang dicetak tebal.
- Call to action: “Submit.”
Ini adalah contoh visual hierarchy yang hebat karena menyampaikan informasi dalam urutan yang paling relevan bagi pengunjung. Pertama, headline dan subheadline mengkomunikasikan USP dari penawaran dengan cara yang berorientasi pada keuntungan. Prospek segera mengerti bahwa mereka akan belajar bagaimana membuat keputusan sosial lebih cepat dengan penawaran di halaman ini.
Setelah itu, memindai sisi kiri halaman dalam F-pattern yang khas, pengunjung melihat teks yang dicetak tebal yang mengarahkan mereka ke daftar berpoin, yang merinci dengan tepat apa yang akan diperoleh dengan mengklaim penawaran tersebut.
Terakhir, prospek memindai sedikit lebih jauh ke bawah, lalu melintasi halaman, di mana mereka melihat tombol ajakan bertindak yang telah diwarnai secara berbeda dari elemen lainnya di halaman untuk menarik perhatian. Ini memungkinkan mereka mengetahui cara mengklaim penawaran mereka.
Salinan isi dapat dibaca secara penuh setelah ketiga elemen tersebut difiksasi, tetapi mungkin tidak — itulah mengapa penting untuk menonjolkan informasi terpenting Anda. Dalam urutan ini, visual hierarchy Anda setidaknya harus:
- Tarik perhatian dengan judul dan beri tahu pengunjung mengapa mereka harus membaca sisa halaman Anda.
- Uraikan secara singkat manfaat penawaran Anda dengan kata-kata yang dicetak tebal, teks berpoin, dan paragraf kecil.
- Tunjukkan kepada mereka cara mengklaim penawaran dengan ajakan bertindak.
Jadi bagaimana tepatnya Anda melakukannya dengan elemen desain? Anda tahu “berbeda” menarik perhatian, yang pada gilirannya menyampaikan pentingnya — tetapi elemen desain mana yang harus Anda gunakan saat membuat visual hierarchy?
Karakteristik Yang Mempengaruhi Visual Hierarchy
Berdasarkan desainer lepas dan penulis Steven Bradley, lima karakteristik dapat dimanipulasi untuk membentuk visual hierarchy di laman Anda:
- Ukuran — Seperti yang Anda harapkan, elemen yang lebih besar membawa lebih banyak bobot
- Warna — Tidak sepenuhnya dipahami mengapa, tetapi beberapa warna dianggap lebih berat daripada yang lain. Merah tampaknya paling berat sementara kuning tampaknya paling ringan.
- Kepadatan — Mengemas lebih banyak elemen ke dalam ruang tertentu, memberi bobot lebih pada ruang itu
- Nilai — Objek yang lebih gelap akan memiliki bobot yang lebih besar daripada objek yang lebih terang
- Ruang putih — Ruang positif lebih berat daripada ruang negatif atau ruang putih
Sejauh mana Anda menggunakan elemen-elemen ini pada post-click landing page Anda akan mempengaruhi tempat mata pengunjung Anda mendarat. Berikut cara menggunakannya untuk membuat visual hierarchy Anda:
- Ukuran: Judul Anda harus menjadi teks terbesar di halaman Anda. Jika Anda memilikinya, subjudulnya harus menjadi yang terbesar kedua. Lebih kecil dari itu adalah subjudul yang Anda gunakan untuk memisahkan konten jika halaman Anda panjang, dan yang terkecil adalah body copy yang tidak diformat.
- Warna: Elemen ini paling penting untuk ajakan bertindak Anda. Skema warna memainkan peran besar dalam memandu pengunjung Anda ke tombol Anda. Itu kuncinya di sini adalah kontras. Perhatikan bahwa pada post-click landing page Cukup Diukur, warna oranye hanya muncul sekali pada halaman yang sebagian besar berwarna biru dan putih. Itu membuat tombol CTA sangat terlihat oleh pengunjung.
- Kepadatan: Lihat lagi halaman Williams-Sonoma. Judul dan ajakan bertindak keduanya dihamparkan pada gambar unggulan. Dengan mengemas semua elemen ini ke dalam ruang yang begitu kecil, para desainer telah menarik lebih banyak perhatian daripada menu atau spanduk di atas.
- Nilai: Kata-kata yang dicetak tebal menarik lebih banyak perhatian daripada yang tidak diformat. Judul, subjudul, dan body copy Anda yang memperkenalkan manfaat penawaran Anda harus memiliki nilai lebih daripada teks lainnya di halaman Anda.
- Ruang kosong: Ingat kembali hasil studi oleh Marketing Association Langsung Munich — salah satu yang paling menarik perhatian adalah paragraf kecil. “Chunking” teks Anda menjadi beberapa bagian yang terdiri dari maksimal tiga kalimat dapat membuatnya tidak hanya lebih menarik perhatian, tetapi juga lebih mudah dibaca dan disimpan.
Dapatkan Informasi Terpenting Yang Kamu Baca
Hirarki visual membantu pengunjung memprioritaskan informasi di post-click landing page Anda. Buat pengunjung Anda berkonversi dengan membuat yang:
- Tekankan USP Anda di tajuk utama
- Sampaikan manfaat penawaran Anda di body copy
- Beri tahu prospek cara mengklaim penawaran Anda dengan tombol CTA Anda
