Görsel Hiyerarşi Yaratmak: Dikkat Çekme Sanatı

“Bunu çöpe mi atayım yoksa okuyayım mı?” araştırma denekleri bir parça doğrudan postayı incelerken merak ederler. Yukarıdan aşağıya mektubu değerlendirirler ve sadece 11 saniye sonra bir karar verirler.

Bu süre zarfında, Münih'in Doğrudan Pazarlama Derneği'nden deneyciler, deneklerin gözlerinde tuhaf bir şey fark ettiler. Her kelimeyi art arda okuyarak doğrusal bir yol izlemezler, bunun yerine harfin gövdesindeki farklı noktalara atlarlar. Peki neye bakıyorlardı?

Cevap, "görsel hiyerarşi" denilen şeyin yardımıyla dönüşüm sağlayan bir tıklama sonrası açılış sayfası oluşturmanın anahtarıdır. Bunu tam olarak anlamak için, üç psikoloğun Gestalt Psikolojisinin temellerini oluşturmaya başladığı 1912 Almanya'sına geri dönmemiz gerekecek.

Gestalt Psikolojisi ve görsel hiyerarşinin temeli

Bir asırdan fazla bir süre önce Alman düşünürler Wolfgang Kohler, Max Wertheimer ve Kurt Koffka insanların dünyayı nasıl algıladıklarını incelemeye başladılar. İsimleri ve “Gestalt Psikolojisi” teorisi tanıdık gelmeyebilir, ancak araştırmalarını kapsayan mesaj:

Dr. Russ Dewey, "Bütün, parçalarının toplamından farklıdır" - yani bütünün "algısal sistemde bağımsız bir varlığı vardır" diyor.

Başka bir deyişle, üç adam, insanların çevrelerini bireysel ve eşit olarak algılamadıklarını öne sürdüler. Bunun yerine, onları bir bütün olarak anlamlandırmak için belirli şekillerde düzenleriz.

Örneğin aşağıdaki resmi alın. Ne görüyorsun?

Muhtemelen üç tane kısmen çizilmiş daire fark etmişsinizdir, fakat aynı zamanda ortada hiçbirinin olmadığı bir ters üçgen de vardır. Eksik daireler üçgenin köşelerini oluşturur ve zihniniz kenarları doldurur. Buna "yanıltıcı kontur" denir ve Koffka'nın "bütün, parçalarının toplamından başka bir şeydir" derken ne demek istediğini tam olarak örneklendirir. Bu resimde kısmen çizilmiş üçten fazla daire var. Birlikte, oldukları gibi konumlandırıldıklarında bu daireler beyaz bir üçgen oluşturur.

Araştırmalarından, üç adam sekiz algısal organizasyon yasası yarattı - insanların bir grubun bileşenlerini bir bütün olarak görme biçimleri. İnsanların tıklama sonrası açılış sayfanızda önemli bilgileri bulma şekliyle diğerlerinden daha fazla ilgisi var.

benzerlik yasaları

Benzerlik yasası, benzer şeylerin birlikte gruplanmış gibi göründüğünü belirtir. Aşağıdaki resimde ne görüyorsunuz?

"36 daire" veya "6 sıra daire" veya "6 sütun daire" dediyseniz azınlıktasınız. Çoğu insan üç sıra siyah daire ve üç sıra beyaz daire görür. Diğer sıralar da benzer şekilde renklendirilip şekillendiğinden, bütünün içinde kendi grubunun bir parçası olarak görülür.

Aynı zamanda, benzer şeyleri birlikte gruplandırma eğilimi nedeniyle, gruba benzemeyen şeyleri de fark ederiz. Gestalt psikologları bu farklılıkları “anomaliler” olarak adlandırdı.

Yukarıdaki resimde birbirine benzeyen tüm yeşil elmaları bir arada topluyoruz ve kırmızı olan bir anormallik olarak göze çarpıyor. Bu anomalinin boyutu, rengi veya şekli farklı olsa da grubun geri kalanından farklı olduğu için dikkatimizi çekiyor.

Öğeleri algısal olarak gruplandırma süreci, Münih'in Doğrudan Pazarlama Derneği'nden deneycilerin araştırma deneklerinin gözünde neyi fark ettiklerini açıklayabilir.

Görsel hiyerarşi nedir?

Tuts+'dan Brandon Jones, insanların “eşit fırsat görenler” olmadığını söylüyor. Sadece gruplar arasındaki farklılıkları fark etme eğilimine sahip değiliz, aynı zamanda bu farklılıklardan önem hakkında çıkarımlar yapma eğilimindeyiz. Örneğin, bu resimdeki daireleri sıralayın:

Onlar hakkında hiçbir şey bilmeden, muhtemelen onları şu şekilde sıraladınız:

Bunun nedeni, en büyük dairenin en çok dikkati çekmesidir, ardından ikinci en büyük daire vb. Şimdi benzer bir prensibi sayfadaki kelimelere uygulayalım.

Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir.

Bu alıntıda, gözleriniz büyük olasılıkla anomaliye çekildi. Biçimlendirilmemiş cümleleri birlikte grupladınız ve kalın harfler göze çarpıyordu. Boyut farklılıklarını ortaya koyduğunuzda, dikkat başka yerlere çekilir.

Bu en önemli cümledir.
Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir. Bu en önemli cümledir.

Bu sefer, paragraftaki kalın kelimeleri fark etmeden önce, muhtemelen daha da büyük, kalın yazılmış kelimeleri gördünüz. Sözcükleri daha da öne çıkarmak için renk ve konumlarıyla değiştirmeye devam edebiliriz, ancak siz asıl meseleyi anladınız. "Farklı" dikkat çeker ve dikkat, tıklama sonrası açılış sayfanızdaki en önemli bilgilere ödenmesini istediğiniz şeydir.

Tasarımdaki farklılıklarla, stratejik olarak ziyaretçilerinizin gözlerini dönüşümleri artırmanın merkezinde yer alan pazarlama mesajlarına (örneğin değer teklifiniz, ürününüzün faydaları ve harekete geçirici mesaj) çekebilirsiniz. Bu dikkat çekici stratejiler “görsel hiyerarşiyi” oluşturur.

Bu hiyerarşi içinde, en önemli bilgi, ziyaretçilerinizin gözlerinin sayfada ilk olarak nereye baktığı ve ardından ikinci en önemli bilgi, gözlerinin bir sonraki nereye geldiğidir vb. Farkına varmadan bu öğeleri zihinsel olarak önemliden gereksize doğru sıralarlar.

Web üzerinde ve dışında okuma stilleri

Şimdi Münih'teki Doğrudan Pazarlama Derneği'nin deneklerin sadece 11 saniyede bir satış mektubunu çöpe atmayı veya okumayı seçtikleri deneyini tekrar gözden geçirelim. Tasarım farklılıkları nedeniyle çok çabuk karar verebildiler.

İlk olarak, gözleri sayfadaki en önemli bilgi olarak algıladıkları şeye atladı: başlıklar ve fotoğraflar. Ardından başlıklar, madde işaretli listeler ve kısa paragraflar dikkat çekti. Uzun, biçimlendirilmemiş kopya, eğer varsa, en son sindirildi.

O zamandan beri, çok sayıda çalışma bulguları güçlendirdi, özellikle de “F-Shaped Pattern”i doğuran Nielsen Norman Group araştırması. Grup, binlerce web sayfasında 232 kişinin bakışlarını takip ettikten sonra şunları buldu:

• İlk kullanıcılar sayfanın üst kısmını okuyarak “F” şeklinin üst yatay çubuğunu oluşturur.
• Ardından, insanlar sayfanın aşağısına doğru ilerler ve “F” harfinin alt yatay çubuğunu oluşturmak için alt başlıkları okur.
• Son olarak, kullanıcılar sol tarafı tarayarak "F"nin dikey gövdesini oluşturur.

Şuna benziyordu:

Yine de "F-şekilli" ismi biraz yanıltıcıdır. Araştırmacıların açıkladığı gibi, internet kullanıcılarının okuma kalıpları her zaman çok düzgün değil:

Açıkçası, kullanıcıların tarama modelleri her zaman tam olarak üç bölümden oluşmaz. Bazen kullanıcılar içeriğin üçüncü bir bölümünü okuyarak kalıbın F'den çok E'ye benzemesini sağlar. Diğer zamanlarda ise yalnızca bir kez okuyarak kalıbın ters L gibi görünmesini sağlar (en üstteki çapraz çubukla) . Bununla birlikte, genellikle, üst ve alt çubuk arasındaki mesafe değişse de, okuma kalıpları kabaca bir F'ye benzer.

Daha az metin ağırlıklı sayfalar için "F", "L", "E" veya hatta "Z-şekilli" bir kalıp olup olmadığına bakılmaksızın, sonuçlar aynıdır: İngilizce konuşan insanlar soldan sağa okur ve içerikteki farklılıkları tararken yukarıdan aşağıya. Başlıklar, alt başlıklar, resimler, kalın harflerle yazılmış kelimeler, başlıklar, listeler - bunlar standart biçimlendirilmemiş metinden farklı öğelerdir.

Aşağıdaki sahte sayfalara bakın:

Gerçek kelimeler içermezler, ancak muhtemelen sağ olanı soldan daha iyi zihinsel olarak organize edebilirsiniz. Sağdaki, F-biçimli okuma stilini barındırırken, soldaki, içeriğini hiçbir şekilde görsel bir hiyerarşi içinde düzenlemez.

Sol sayfadakiler gibi metin bloklarının nadiren okunduğunu araştırmalardan zaten biliyoruz. Peki sizinkinin olduğundan nasıl emin oluyorsunuz?

Farklılıkları göz önünde bulunduran tasarım

CXL'den Peep Laja, görsel bir hiyerarşi oluşturmaya başlamadan önce bir hedefe ihtiyacınız olduğunu söylüyor:

Web sitenizdeki öğeleri iş hedefinize göre sıralamalısınız. Belirli bir hedefiniz yoksa, neye öncelik vereceğinizi bilemezsiniz.

Aşağıdakileri göstermek için bir Williams Sonoma ana sayfasının ekran görüntüsünü kullanır:

En büyük dikkat çeken şey, büyük et parçası (onu istememe neden oluyor), ardından başlık (ne olduğunu söyle) ve harekete geçirici mesaj düğmesi (alın!). Dördüncü yer, başlığın altındaki bir metin paragrafına gider, beşinci ücretsiz gönderim afişidir ve en üstteki gezinme sonuncudur. Bu görsel hiyerarşi iyi yapılmış.

Ancak, tıklama sonrası açılış sayfanızda gezinme menüsü olmamalıdır. Böylece dikkat biraz farklı çekilecektir. Basitçe Ölçülen'den bir tıklama sonrası açılış sayfasına bir göz atalım:

Gözlerin ilk nereye takıldı? Sonraki? Son? Tahmin etmemiz gerekirse, derdik ki…

1. Başlık: "Sosyal Pazarlama Kararları Nasıl Daha Hızlı Alınır?"
2. Alt başlık: "Zamandan tasarruf etmeyi ve bir profesyonel gibi görünmeyi öğrenin."
3. Kalın yazılmış metin: “Bu kılavuzda nasıl yapılacağını öğreneceksiniz…”
4. Kalınlaştırılmış metnin altındaki madde işaretli kopya.
5. Harekete geçirici mesaj: "Gönder."

Bu, bilgileri ziyaretçilerle en alakalı sırayla ilettiği için harika bir görsel hiyerarşi örneğidir. İlk olarak, başlık ve alt başlık, teklifin USP'sini fayda odaklı bir şekilde iletir. Potansiyel müşteriler, bu sayfadaki teklifle sosyal kararları daha hızlı almayı öğreneceklerini hemen anlarlar.

Bundan sonra, tipik F-deseninde sayfanın sol tarafını tarayan ziyaretçiler, onları madde işaretli listeye yönlendiren ve teklifi talep ederek tam olarak ne elde edileceğini ayrıntılandıran kalın yazılmış metni fark ederler.

Son olarak, potansiyel müşteriler biraz daha aşağıyı tarar, ardından sayfa boyunca, burada dikkat çekmek için sayfadaki diğer öğelerden farklı renklendirilmiş harekete geçirici mesaj düğmesini görürler. Tekliflerini nasıl talep edeceklerini bilmelerini sağlar.

Bu üç öğe sabitlendikten sonra gövde kopyası tam olarak okunabilir, ancak olmayabilir - bu nedenle en önemli bilgilerinizi öne çıkarmanız önemlidir. Bu sırayla, görsel hiyerarşiniz en azından:

1. Bir başlıkla dikkat çekin ve ziyaretçilere sayfanızın geri kalanını neden okumaları gerektiğini bildirin.
2. Kalın harflerle, madde işaretli metinlerle ve küçük paragraflarla teklifinizin avantajlarını kısaca detaylandırın.
3. Bir harekete geçirici mesajla teklifi nasıl talep edeceklerini onlara gösterin.

Peki bunu tasarım öğeleriyle tam olarak nasıl yapıyorsunuz? “Farklı”nın dikkat çektiğini biliyorsunuz, bu da önemi ifade ediyor ama görsel bir hiyerarşi oluştururken hangi tasarım öğelerini kullanmalısınız?

Görsel hiyerarşiyi etkileyen özellikler

Serbest tasarımcı ve yazar Steven Bradley'e göre, sayfanızda görsel hiyerarşi oluşturmak için beş özellik değiştirilebilir:

• Boyut - Beklediğiniz gibi daha büyük elemanlar daha fazla ağırlık taşır
• Renk — Nedeni tam olarak anlaşılamadı, ancak bazı renkler diğerlerinden daha ağır olarak algılanıyor. Kırmızı en ağır, sarı ise en hafif gibi görünüyor.
• Yoğunluk — Belirli bir alana daha fazla öğe yerleştirmek, o alana daha fazla ağırlık verir
• Değer — Daha koyu bir nesne, daha hafif bir nesneden daha fazla ağırlığa sahip olacaktır.
• Beyaz boşluk — Pozitif boşluk, negatif boşluktan veya beyaz boşluktan daha ağırdır

Bu öğeleri tıklama sonrası açılış sayfanızda kullanma dereceniz, ziyaretçilerinizin gözlerinin nereye geldiğini etkiler. Görsel hiyerarşinizi oluşturmak için bunları nasıl kullanacağınız aşağıda açıklanmıştır:

• Boyut: Başlığınız sayfanızdaki en büyük metin olmalıdır. Eğer varsa, alt başlık ikinci en büyük olmalıdır. Sayfanız uzunsa, içeriği ayırmak için kullandığınız alt başlıklar bundan daha küçük olmalı ve en küçüğü biçimlendirilmemiş gövde kopyası olmalıdır.

• Renk: Bu öğe, harekete geçirici mesajınız için çok önemlidir. Renk düzeni, ziyaretçinizi düğmenize yönlendirmede büyük rol oynar. Buradaki anahtar kontrasttır. Basitçe Ölçülen tıklama sonrası açılış sayfasında, turuncu rengin öncelikle mavi ve beyaz bir sayfada yalnızca bir kez göründüğüne dikkat edin. Bu, CTA düğmesinin ziyaretçi için fazlasıyla fark edilir olmasını sağlar.

• Yoğunluk: Williams-Sonoma sayfasına tekrar bakın. Başlık ve harekete geçirici mesaj, öne çıkan görselin üzerine yerleştirilmiştir. Tasarımcılar, tüm bu öğeleri bu kadar küçük bir alana sığdırarak, yukarıdaki menü veya afişten daha fazla dikkat çekti.

• Değer: Kalın sözcükler, biçimlendirilmemiş sözcüklerden daha fazla dikkat çeker. Teklifinizin avantajlarını tanıtan başlığınız, alt başlığınız ve gövde metniniz, sayfanızdaki metnin geri kalanından daha değerli olmalıdır.

• Beyaz boşluk: Münih'teki Doğrudan Pazarlama Derneği'nin çalışmasının sonuçlarını hatırlayın - en büyük dikkat çekenlerden biri küçük paragraflardır. Metninizi maksimum üç cümleden oluşan bölümlere ayırmak, onu yalnızca daha fazla dikkat çekici kılmakla kalmaz, aynı zamanda okunmasını ve akılda kalmasını da kolaylaştırır.

En önemli bilgilerinizi okuyun

Görsel hiyerarşi, ziyaretçilerin tıklama sonrası açılış sayfanızdaki bilgilere öncelik vermesine yardımcı olur. Aşağıdakilerden birini oluşturarak ziyaretçilerinizin dönüşüm yapmasını sağlayın:

• USP'nizi başlıkta vurgular
• Teklifinizin faydalarını gövde kopyasında iletir
• Potansiyel müşterilerin CTA düğmenizle teklifinizi nasıl talep edeceklerini bilmelerini sağlar

Görsel hiyerarşinizi hızlı ve kolay bir şekilde tasarlamaya başlayın, bugün bir Instapage Enterprise demosuna kaydolun.