Hero Image En İyi Uygulamaları: Dikkate alınması gereken 6 şey
Yayınlanan: 2021-02-09Kahraman resmi, web sitesindeki ana başlıktır ve genellikle ekranın üst kısmında, ön ve ortada belirgin bir şekilde yerleştirilir.
Kahraman resmi, kitlenizin web sitenizin evrenine girerken göreceği ilk resimdir. Bu nedenle, kahraman imajınızı bulma ve seçme görevi hafife alınacak bir görev değildir.
Bu yazıda, bir kahraman resmi seçerken göz önünde bulundurmanız gereken en önemli hususlardan ve en iyi uygulamalardan birkaçını vurguladım.
1. İlgili görselleri kullanın
Her zamankinden daha fazla çevrimiçi zaman geçirirken, dikkat süremiz hızla azalıyor. Danimarka Teknik Üniversitesi'nden yapılan bir araştırma, kolektif dikkat süremizin daraldığı sonucuna varıyor (sciencedaily.com). Tüm sektörlerde ortalama olarak bir sayfada geçirilen ortalama süre 62 saniye iken, ziyaretçilerin %50'sinden fazlası bir sayfada (time.com) aktif olarak 15 saniyeden az zaman harcıyor.
Kahraman imajınız, değer önerinizi – iletmeye çalıştığınız şeyi – güçlendirmelidir. Kendinize şu soruları sorun:
- Hangi duyguları tetiklemeye çalışıyorsun?
- Resminiz USP / ESP'nize nasıl bağlanır?
- Görüntü, web sitesinin içeriğini bağlamsallaştırıyor mu?
Bir kahraman görüntüsünün bunu nasıl yapabileceğini göstermek için aşağıda birkaç örnek topladık.
HubSpot: Kahraman arka planı olarak bir illüstrasyon kullanan HubSpot, hem büyüme yönünü hem de hem KOBİ'lere hem de kurumsal şirketlere hitap ettiklerini göstermektedir.
Save the Children: Kurtarmaya çalıştıkları birçok çocuktan birini örneklendirmek için kahramanlık geçmişinde bir çocuğun resmini kullanmak ve böylece (umarız) izleyiciyle duygusal bir bağ kurmak.
Riverford Organik Çiftçileri: Organik sebzelerin otantik bir ürünle ilgili resminden nasıl yararlanılacağına dair güzel bir örnek. Görüntü, ürünler ve USP ile yakından ilgilidir.
2. Kontrast anahtardır
Tasarım öğeleri, en önemli öğenin öne çıkması için birbirinden ayrılmalıdır. Bu nedenle, iyi bir görsel seçmenin ötesinde, bu görselin istediğiniz yazı tipi rengine, harekete geçirici mesaja ve marka renk şemasına göre nasıl çalışabileceğini de düşünmelisiniz.
Basit bir kaplama kullanmak genellikle büyük bir fark yaratabilir ve metninizin öne çıkmasını sağlayabilir. Ayrıca, bir düzenleme aracıyla doygunluğu, sıcaklığı ve kontrastı optimize etmek, görüntünüzü canlandırabilir.
3. Doğru formatı kullanın
Düşük kaliteli görseller kullanmayın. Pikselleştirilmiş veya bulanık resimler ilk izlenimi mahvedebilir. Ancak, kahraman görseli kritik bir CX öğesi olduğundan, resmin mümkün olduğu kadar çabuk oluşturulmasını sağlamalısınız.
Genişliği 1500 ile 2500 piksel arasında olan resimler kullanın ve dosya boyutunu küçültmek ve böylece yükleme hızını artırmak için resminizi sıkıştırın.
PNG biçimi genellikle ağır bir dosya boyutu ürettiğinden ve bu biçimi yalnızca keskin çizgileriniz ve açıkça ayrılmış düz renk ve metin alanlarınız varsa kullanmanızı öneririz.
Birkaç çevrimiçi araç, resminizi sıkıştırmanıza yardımcı olabilir:
- Tinyjpg.com: En fazla 20 resim, her biri en fazla 5 MB.
- Compressor.io: jpg, png, gif, svg, webp'yi destekler. Maksimum 10 MB
- Imagify.io: 2MB dosya boyutu yükleme sınırı
- Shortpixel.com: 50 dosyaya kadar ve maksimum 10MB.
4. Duygusal bir bağlantı oluşturun
Frontiers'da yayınlanan yakın tarihli bir araştırma, duygusal görüntülerin insanları duygusal kelimelerden daha fazla etkilediğini buldu. Bu nedenle, yüksek düzeyde duygusallığa sahip bir görüntü seçerek, izleyicide duygusal bir tepki tetikleyebilirsiniz.
Bir duygunun yüz ifadesini gözlemlediğimizde, genellikle onu taklit ederiz. Trends in Cognitive Sciences dergisinde yayınlanan bir makaleye göre, bulaşıcı olan sadece gülümsemelerimiz veya sırıtmalarımız değil, tüm yüz ifadelerimizdir.
Aslında, beyin görüntüleri metinden 60.000 kat daha hızlı işler ve beyne iletilen bilgilerin yüzde 90'ı görseldir (t-sciences.com). Biz görsel yaratıklarız ve duygusal yüzler ve çağrıştırıcı görüntüler dahil olmak üzere duygusal uyaranlardan yararlanarak yalnızca olumlu duyguları ve çağrışımları tetiklemekle kalmaz, aynı zamanda hedef kitlenizin istediğiniz mesajı daha hızlı ve daha doğru bir şekilde çözmesine yardımcı olabiliriz.
5. Özgün ve gerçekçi olun
Tüketiciler uyaranlara, reklamlara ve gürültüye boğulmuş durumda. Marka özgünlüğü, gürültüyü kırmaya ve öne çıkmanıza yardımcı olabilir. Gerçek mesajlar ve gerçekçi görüntüler, insanlarda daha güçlü yankı uyandırır ve hedef kitlenizle daha güçlü bir bağ kurmanıza yardımcı olur.
Daha fazla şirket, ürünlerini pazarlamak için “gerçek insanları” kullanıyor. Dove, 2004 yılında tüm kadınların kişileştirdiği doğal fiziksel farklılıkları kutlayan 'Gerçek Güzellik Kampanyası'nı başlattı. Marka, sayısız ödül kazanmanın ötesinde, hedef kitlesiyle güçlü bir duygusal bağ oluşturarak satışlarında önemli bir artış sağladı.
Dove ve daha sonra Target gibi markalar, geçtiğimiz yıl reklamlarında 'gerçek insanları' başarıyla kullandılar ve bunun iyi bir nedeni var: Özgün olmanın karşılığını alıyor.
Bu, tüm fotoğrafları kendiniz çekmeniz veya düşük çözünürlüklü görüntü ve videolar kullanmanız gerektiği anlamına gelmez. Ancak gerçek kişilerin, yerlerin ve deneyimlerin fotoğraflarını kullanmalı ve sahnelenmiş gibi görünen görüntüler kullanmak yerine gerçek bir hikayeyi aktarmalısınız.
6. Test Edin ve Optimize Edin
(Yeni) bir kahraman resmi seçmek, son aşama olarak değil, optimizasyon sürecinizin başlangıcı olarak kabul edilmelidir. Daha önce belirtildiği gibi, kahraman imajı belki de web sitesindeki en önemli tasarım öğelerinden biridir ve genel performansınız üzerinde önemli bir etkisi olabilir.
Kahraman görüntünüzün amaçlandığı gibi performans gösterdiğinden emin olmak için, onu yayınlamadan önce uygun performans izlemeyi uygulamalısınız. Bu amaçla, alternatif varyantları test etmek ve orijinal varyantınızı yeni görüntünüze karşı test etmek için bir A/B test aracı kullanmayı düşünün.
Crazyegg tarafından uygulanan bir testte kazanan sürüm, küresel alışveriş yapanların satışlarını %29,7 oranında artırdı. Geçmişte görüntü varyasyonlarını test etmek için aşağıdaki araçları kullandım:
- Google optimizasyonu (Ücretsiz)
- en iyi şekilde
- Çılgın Yumurta
Unutma, başarısızlık başarıya giden ilk adımdır ve denememek, denemek ve başarısız olmaktan daha kötüdür. İlk seferinde doğru anlamayabilirsiniz - ancak test edin, yeni varyasyonları deneyin ve optimize etmeye devam edin - ve buna göre ödüllendirileceksiniz.