Peggy Olson Interactive İçin Nasıl Tasarım Yapardı?

Mad Men çağında pazarlamacılar işlerinin nasıl tüketileceğini tam olarak biliyorlardı. Hedef kitle reklamı televizyonda görecek, radyoda duyacak, bir dergide ya da bilboardda görecek ve belki de (salyangoz) posta kutusunda gelecekti. Basılı bir reklam veya bir posta parçası planladıysanız, tasarladığınız gayrimenkulün tam boyutunu biliyordunuz ve reklamınızı bu alana uyacak şekilde optimize ettiniz. Tüketici, bu içeriği tam olarak tasarladığınızda hayal ettiğiniz gibi görecektir.

Peggy Olson bugün bir reklam tasarlıyor olsaydı, o reklamın bağlamını ve hedef kitlesinin reklamla nasıl etkileşime gireceğini düşünmesi gerekirdi. Çalışmasının hayal ettiği gibi görüntüleneceğinin garantisi yoktu, bu nedenle, nasıl görünürse görünsün etkisi olması için düzenini ve tasarımını optimize etmesi gerekiyordu. Harekete geçirici mesajın (CTA) üç inçlik bir ekranda bile net, öz ve anlaşılır olduğundan emin olması gerekiyordu.

Bugün web sayfaları, açılış sayfaları ve e-postalar tasarlamak, Mad Men günlerine göre çok daha karmaşık. Bugün, etkileşimli öğelerin ek boyutuna sahipsiniz ve içeriğin hangi cihazda görüntüleneceğini bilmiyorsunuz. Tam boyutlu bir bilgisayar ekranında mükemmel görünen bir düzen, bir tablette veya akıllı telefonda görüntülendiğinde tam bir karmaşa olabilir. Net olmayan veya yanlış yere yerleştirilmiş bir CTA, etkileşim oranınızı öldürebilir.

Üç temel etkileşimli tasarım en iyi uygulaması

Günümüzde çoğu tüketici bir sivrisineğin dikkat süresine sahiptir. İçeriğinize tıkladıklarında daha ilginç bir şeye tıklayıp tıklamamaya karar vermeden önce onları yakalamak için yaklaşık iki saniyeniz var. Bir e-posta, açılış sayfası veya web sayfası tasarlarken bu üç kavramı anlamanız zorunludur:

1. Düzen etkileşimi nasıl etkiler: Maksimum etkileşim için sayfadaki öğeleri nasıl düzenleyeceğinizi öğrenin
2. İçerik etkileşimi nasıl etkiler: Beni neyin içeriğinizle etkileşime girmeye zorlayacağını bilin
3. Zaman ne kadar önemli: Dikkatimi çekmek için iki saniyen var

Kulağa basit geliyor, değil mi? O kadar basit olsaydı, bunu yazıyor olmazdım! Her gün karşılaştığım ve beni sadece Geri düğmesine basacak kadar sinirlendiren kaç tane içerik parçasıyla karşılaştığımı size anlatamam. Cepleri bol ama tasarım anlayışı olmayan büyük şirketlerden bahsediyorum.

Öyleyse pratik yapalım. Herhangi bir platformda etkileşim için sayfa düzenlerinizi optimize etmenize yardımcı olacak bazı çok basit ipuçları için okumaya devam edin.

Göz bir sayfayı nasıl tarar?

Anlamanız gereken ilk şey, insan gözünün bir içerik parçasını nasıl izlediğidir. Üniversitede reklamcılık okurken, gözün sol üst köşeden başlayarak büyük Z şeklinde bir sayfada izlendiği söylendi. Eminim bu teori, beyaz önlüklü bir adam bir parça kağıda göz hareketlerinin modelini çizmeye çalışırken bazı deneklerin içerik parçalarına baktığı bir çalışma tarafından tasarlandı. Bu, insanların çevrimiçi görüntülenen sayfaları nasıl takip ettiğini görmek için kullanılan, artık yaygın olarak bulunan ısı haritası teknolojisinden çok önceydi. Ve unutmayın, insanlar baskıyı çevrimiçi içerikten biraz farklı tarar.

Bugünlerde fikir birliği, gözün çevrimiçi bir içerik parçasını görüntülerken sol üstten başlayarak büyük F şeklinde izlediği yönündedir. Gözünüz normalde önce F'nin üst çubuğu boyunca yatay olarak, ardından F'nin ikinci çubuğu boyunca ve son olarak F'nin dikey gövdesi boyunca yukarıdan aşağıya doğru izler.

Peki bu ne anlama geliyor? Bu, CTA'nızın o büyük F modelinde bir yerde olması gerektiği veya bir bebeğe bıyık bırakmanız gerektiği anlamına gelir. Ana CTA'nızı ilk iki saniyede izleyicinin dikkatini çekecek bir noktaya yerleştirmek için bilinçli bir tasarım kararı verin.

Gerçek tasarım felaketleri

Şimdi, Act-On'daki meslektaşlarımdan birinin yaratmama yardım ettiği gerçek bir tasarım felaketine bir göz atalım. Üzülerek söylüyorum ki aşağıdaki örnek internette karşılaştığım gerçek içerikten alınmıştır. İnsanların yaptığı en yaygın hataları ve bunların nasıl düzeltileceğini göstermek için Actomatic adlı hayali bir şirket kullandım.

Örnek 1: CTA'yı görmek için beni kaydırma

Gördüğüm en yaygın kaçırılan fırsat, paylaşmanın veya sayfanın alt kısmına, ekranın alt kısmına gömülmüş paylaşma düğmelerinin bulunmadığı bir içerik parçasıdır. Kat, ekranınızın altındaki hayali çizgidir. (Bu terim, gazetelerin ikiye katlandığı günlerden gelmektedir; "ekranın üst kısmı", daha iyi okuyucu kitlesi ile daha iyi yerleşim anlamına geliyordu.) Ortalama boyutlu bir dizüstü bilgisayar ekranında kat, ekranın üstünden 480 piksel olabilir, ancak bir iPhone üstten 100 pikselde olabilir. Sayfa içeriğinizi düzenlerken bunun farkında olun.

Bir blogdan veya çok sayfalı bir makaleden bahsediyorsak, çoğu insanın bir içeriğin başlığını (eğer iyiyse) ve ilk iki cümlesini okuduktan sonra paylaşmaya hazır olduğunu tahmin etme cüretini gösteririm. kapıdan ilk çıkan olmak. İnsanlar, akranları tarafından beş kez paylaşıldığını gördükleri içeriği değil, yeni içeriği paylaşmayı sever.

İçeriğin üstünde ve altında paylaşım düğmelerinin olmasını veya kaydırdığınızda içeriğin yanında kayan paylaşım düğmelerinin olmasını öneririm.

Çok iyi bilinen bir şirketle çalıştım ve bir makalenin altına olduğu kadar üstüne de paylaş düğmeleri eklediklerinde paylaşım oranının %400'ün üzerine çıktığını fark ettim.

Örnek 2: Ah, gözlerim!

Hiç nereye bakacağınızı bilemediğiniz kadar meşgul olan bir içerik parçasına ulaştınız mı? Belki paylaşılacak bir videosu, doldurulacak bir formu, bir kopyası, orada burada birkaç bağlantısı vardı. Aşağıdaki sayfaya gelseydim nereden başlayacağımı bilemezdim, bu yüzden muhtemelen hiç etkileşimde bulunmazdım. Bu örnek bana bu sayfada neyin en önemli olduğuna dair hiçbir ipucu vermiyor. Dikkatimi çekmek ve beni meşgul etmek için iki saniyen ya da daha az zamanın var ve beni kaybettin.

Birden çok CTA'nız varsa, bu öğelerin mantıksal sırasının ne olduğunu açıkça belirtin. Gerekirse numaralandırılmış belirtme çizgileriyle heceleyin. Bu sayfaya gelseydim şu soruları sorardım:

Düzen, rastgele beyaz boşluk ve garip yazı tipleriyle plansız ve özensiz görünüyor. CTA'lar kesinlikle ekranın altında.

Actomatic'e tavsiye veriyor olsaydım, onlara bu sayfa ile neyi başarmayı umduklarını sorarak başlardım. Buradaki amaç nedir? Buradaki ana hedeflerin insanların bloga kaydolmasını ve kısa bir video izleyip paylaşmasını sağlamak olduğunu varsayıyorum. Eğer durum buysa, bazı değişiklikler yapmamız gerekiyor.

1. Ana CTA'nın ekranın üst kısmında olduğundan emin olun. Hem paylaş düğmeleri hem de Abone Ol düğmesi ekranın alt kısmındadır.
2. Ziyaretçilerin bloga kaydolmasını VE videoyu paylaşmasını istediğinizi açıkça belirtin
3. Şirket hakkında biraz bilgi ekleyin

Tamam, şimdi bir göz atalım:

Yeni ve geliştirilmiş sürüm biraz farklı bir düzene, daha az yazı tipine, şirket ve video hakkında kısa bir tanıtım yazısına ve bloga abone olmak için daha düşük bir engele sahiptir. Alt kısma bağlantılar ve İletişim düğmesi de ekledim. Gözün sayfayı doğal olarak tarama şeklini takip ederek bir okuyucunun ilk iki saniyede göreceği bilgi miktarını en üst düzeye çıkarmak için düzeni nasıl optimize ettiğime dikkat edin. F modeli teorisi, izleyicinin sayfadaki öğeleri alacağı sıranın bu olduğunu söylüyor:

1. şirket logosu
2. Başlıklar
3. Paylaş ve abone ol düğmeleri
4. En alttaki Keşfet bölümü

Etkileşim için bana bir sebep ver

Artık düzeninizi sıraladığınıza göre, içeriğinizle etkileşime geçmem için bana bir neden vermeniz gerekiyor. Bir form doldurmamı veya içeriğinizi paylaşmamı istiyorsanız, bunu yapmam için zorlayıcı bir sebep olmalı. Öyleyse sana sorayım, benim için ne var?

Bu sorunun cevabını bilmiyorsanız, ödevinizi yapmamışsınız demektir.

İnsanların içerikle etkileşime girmesinin ana nedeni, içerikten duygusal veya maddi olarak bir tür tatmin elde etmeleridir. İçeriğiniz iyiyse, meslektaşlarımın önünde bilgili görünmemi sağladığı için paylaşacağım. Yayınladığınız yeni bir parçacığı ilk öğrenen ben olursam egom yükselir, bu yüzden elbette onu ilk benim görmem gerektiği gerçeğini paylaşacağım.

Belki kar amacı gütmeyen bir kuruluşsunuz ve içeriğiniz olağanüstü bir şey yapmış biri hakkında iyi hissettiren bir hikaye. Bu içeriği paylaşacağım çünkü kendimi iyi ve hayırsever hissettiriyor. Bir form doldurursam bana bir iPad kazanma şansı verin ve size kişisel bilgilerimi verme ihtimalim çok daha yüksek olsun.

İşin püf noktası, izleyicilerinizi etkileşime girmeye neyin zorladığını bilmektir. Duygusal ödül mü, maddi ödül mü yoksa her ikisi mi? Kendinizi onların yerine koyun ve hedef kitlenize yönelik bir etkileşim stratejisi oluşturun.

basit tut

Geçenlerde, başarılı bir sosyal pazarlama kampanyasının örnek olay incelemesini sunduğum bir konferansta konuştum. Önünde şu yazılı bir tişört giydim: #KeepItSimple. Anlattıklarımı uygulamaya çalışıyorum.

Son derece karmaşık etkileşimli içerik oluşturan müşterilerle ve bunu inanılmaz derecede basit tutan diğer müşterilerle çalıştım ve neredeyse her seferinde basit olan kazanıyor. Bunu nasıl basit tutacağınız aşağıda açıklanmıştır:

• Çevrimiçi okunması kolay Trebuchet gibi yazı tipi yüzlerini seçin.
• Bir sayfada çok fazla yazı tipi yüzünü ve boyutunu karıştırmayın. Başlıklar için bir boyut, gövde metni için bir boyut.
• Mümkünse tek bir net CTA'da tutun.
• Önemli şeyleri ekranın üst kısmında tutun.
• Giriş engelini olabildiğince düşük tutun (gerçekten ihtiyacınız olan tek şey e-posta adresiyse, birinin ilk doğan çocuğunu sormayın)

Ev ödeviniz

Bir dakika, bu makalenin sonunda ödev olacağını hiç söylememiştin! Sana ödev olacağını söyleseydim buraya kadar okur muydun? HI-hı. Açılış sayfalarınızdan birine eleştirel bir gözle bakmanızı ve iyileştirme için yer olup olmadığını kendinize sormanızı istiyorum.

• Açılış sayfalarınızdan birini bir dizüstü bilgisayarda ve bir mobil cihazda görüntüleyin. CTA'ya ulaşmak için kaydırmak zorunda mısınız? Bir mobil cihazda iyi görüntüleniyor mu?
• Şirketiniz hakkında hiçbir şey bilmeyen bir arkadaşınızdan açılış sayfalarınızdan birini görüntülemesini isteyin ve onu görüntülerken samimi geri bildirimde bulunmalarını isteyin. Onlardan önce neyi fark ettiklerini, şirketinizin ne yaptığını ve sayfada ana CTA'nın ne olduğunu size söylemelerini isteyin.
• Tüm önemli öğelerin F modeli içinde olup olmadığına bakın.
• Sayfalarınızı mümkün olduğu kadar çok tarayıcıda ve mümkün olduğunca çok platformda test edin. Safari, Chrome gibi öğeleri işlemez. Firefox, Internet Explorer (IE) gibi öğeleri işlemez. Ve farklı IE sürümleri, içeriği tamamen farklı şekilde görüntüleyebilir.

Bunu başarmak için reklam düzeni ve tasarımında bir dereceniz olması gerekmez. Ancak mevcut içeriğinize eleştirel bir gözle bakmaya istekli olmalısınız.

Çabaya değer.