CTA Design – Büyük Fark Yaratan Küçük Bir Detay

Yayınlanan: 2023-01-19

CTA Design – Büyük Fark Yaratan Küçük Bir Detay

Harika bir fikir beyin fırtınası yapıyorsun. Bunun için mükemmel bir tasarıma sahipsiniz. Ve reklamınız doğru müşterilerin dikkatini çekmeyi başarıyor. Ama görüyorlar ve reklama tıklamadan geçiyorlar. Bunu ister miydin? Belli ki değil! Ancak müşterinizin reklamı görmezden gelmesine ne sebep oldu? Renk paleti miydi yoksa kopya mı? Aklınıza pek çok sebep gelebilir. Ancak CTA tasarımını incelediniz mi? Muhtemelen değil. Bu belki de inceleyeceğiniz son şey ama ideal olarak ilk olması gereken şey!

Evet, mükemmel bir reklamın yalnızca kötü tasarlanmış veya zayıf bir CTA yüzünden boşa gitmesini istemezsiniz. Aslında CTA amacı yerine getirmiyorsa buna “mükemmel reklam” bile diyemezsiniz.

Ama bir CTA'da ne var değil mi? Basit bir "burayı tıklayın" veya "daha fazla bilgi edinin" çoğu zaman gördüğünüz şeydir. Seni duyuyoruz. Ancak ister inanın ister inanmayın, CTA düğmesinin konumundan seçtiğiniz renklere, kullandığınız kopyaya ve içindeki yazı tipi stiline kadar her şey, izleyici üzerindeki etkisini doğrudan veya dolaylı olarak etkileyebilir. Çok mu merak ettiniz? O zaman hazırlan. Bugün CTA tasarımı hakkında konuşacağız.

  • CTA tasarımı – öyleyse neden önemli?
    • 1. CTA, reklamınızın amacını netleştirir
    • 2. Müşterilerin karar vermesine yardımcı olun
    • 3. Dönüşümleri iyileştirmeye yardımcı olun
  • CTA tasarımı: tıklamaya değer hale getirmek için ipuçları
    • 1. Kopyanızda küçük bir değişiklik uzun bir yol kat ediyor
    • 2. CTA'nızın bir düğme gibi görünmesini sağlayın
    • 3. CTA'nız için doğru rengi seçin
    • 4. CTA tasarımının opaklığına dikkat edin
    • 5. Negatif alanı avantajınıza kullanın
    • 6. Çok fazla CTA eklemeyin
    • 7. Ancak birden çok yön olduğunda tutarlılığı koruyun
  • Kimp ile tıklamaya değer CTA tasarımları oluşturun

CTA tasarımı – öyleyse neden önemli?

Harekete geçirici mesaj veya CTA, reklamınızın en önemli noktası olmalıdır. CTA'ların çoğu pazarlama grafiğinde en kritik bileşenler haline gelmesinin nedenlerinden bazılarına bakalım.

1. CTA, reklamınızın amacını netleştirir

Bir CTA tanımlamak için, reklamınızın amacının ne olduğunu bilmeniz gerekir. Örneğin, çeşitli platformlardaki tüm kampanyalarınız için müşterilerin web sitenizin ana sayfasını ziyaret etmesini beklemiyorsunuz. Bu reklamlardan bazıları için müşterilerin uygulamanızı indirmesini istiyorsunuz. Bazıları, gelecekteki potansiyel müşteri yetiştirme çabaları için iletişim bilgilerini toplayabilmeniz için onları bir müşteri adayı yakalama sayfasına götürmelidir. Diğerlerinin ise, ürünü sepete eklemelerine ve mümkün olan en kısa sürede satın alma yapmalarına yardımcı olmak için müşterileri bir satış sayfasına veya bir ürün sayfasına götürmesi gerekebilir.

Bu nedenle CTA'nız, kampanya, belirli reklam veya pazarlama tasarımı için belirlediğiniz hedeflere bağlı olarak trafiği istenen yöne yönlendirmeye yardımcı olur.

2. Müşterilerin karar vermesine yardımcı olun

Müşteriler ne aradıklarını bilirler, ancak ister inanın ister inanmayın, çoğu tüketici satın alma kararlarını verirken biraz yardım almayı takdir eder. Çoğu reklam, açılış sayfası ve diğer pazarlama tasarımlarında bir veya iki CTA bulunur. E-postalarda, bir dizi ürün kategorisi veya bir alışveriş rehberi e-postası söz konusu olduğunda birden fazla e-postanız olabilir. Her iki durumda da CTA(lar) eklemek, müşterilerin karar verme yorgunluğunun üstesinden gelmelerini ve bir sonraki adıma daha güvenle ilerlemelerini sağlar.

3. Dönüşümleri iyileştirmeye yardımcı olun

Bazen müşteriler, yalnızca bir sonraki adımda nereye gideceklerini bilmedikleri için müşteri adayı huninizdeki bir sonraki adıma geçmezler. Bir CTA eklemek, bunu anlamalarını kolaylaştırır.

Bunu daha iyi anlamak için bir örnek verelim. Aşağıdaki kaydırıcı, Apple web sitesinde görünür.

Kaynak

Tamam, peki ya Louis Armstrong'un Black & Blues'u? Müşteriler bunu neden Apple web sitesinde görüyor? Belki de alttaki Apple TV logosu, bu belgeselin Apple TV'de olduğunu söylüyor. Ama ne olmuş yani? CTA "Şimdi Yayınla" olmasaydı, yukarıdaki yanıtların çoğu yanıtsız kalacaktı. Kafası karışan müşteriler onu kaydırarak geçmiş olabilir. Ancak CTA düğmesi sayesinde ziyaretçiler, bu düğmeyi tıkladıklarında herhangi bir güçlük çekmeden Apple TV'deki akış sayfasına götürüleceklerini bilirler. Bu onları kaydırıcıyı tıklamaya motive eder. Orada, az önce bir dönüşüm gerçekleşti!

Bu, dönüşümü gerçekleştirmenin en basit yolunun açık ve anlaşılır bir CTA eklemek olduğuna bir örnektir.

CTA'ların tasarımda önemli olduğu gerçeğini belirledikten sonra, şimdi CTA tasarım ipuçlarından bahsedelim.

CTA tasarımı: tıklamaya değer hale getirmek için ipuçları

CTA'nız, tasarımınızda belirgin bir şekilde ayırt edilebilir bir ayrıntı olmalıdır. Ancak aynı zamanda müşterilerin dikkatini kendisinden önce gelen temel bilgilerden uzaklaştırmamalıdır. Görselleriniz, metniniz ve CTA birlikte mesajı net bir şekilde sunmalı ve müşterilere neden CTA'yı tıklamaları gerektiğini ve tıkladıklarında ne olacağını anlatmalıdır. Tüm bunların gerçekleşmesi için, CTA'nızın tasarımınız lehine çalışmasını sağlayacak bazı ipuçlarını burada bulabilirsiniz.

1. Kopyanızda küçük bir değişiklik uzun bir yol kat ediyor

Reklam veya web sayfasındaki başlığı okuyan kullanıcıların %90'ının CTA metnini de okuduğunu bilmelisiniz. Yani, evet, kopya önemli.

Aşağıdaki CTA'da basit bir "İndir" CTA'sı yeterli olacaktır. Ancak "ücretsiz" kelimesini eklemek, müşterilere şu anda herhangi bir ödeme yapmadıkları, ancak yine de içeriği indirebilecekleri konusunda güvence verir.

boşluk
Kaynak

Kişiselleştirilmiş CTA'ların basit CTA'lardan %202 daha iyi performans gösterdiği tahmin edilmektedir. Bu nedenle, kopyaya yeterince zaman ayırın. Kulağa en inandırıcı gelen ve bağlamla en alakalı olan en iyi kelimeleri belirleyin.

Kişiselleştirilmiş CTA'lar, müşterilere düğmeyi tıkladıklarında ne olduğunu bildirmenin sorunsuz yollarıdır. Örneğin, aşağıdaki e-postada kostümler, "Yerinizi ayırtın" düğmesini tıklamanın kendilerini rezervasyon sayfasına götürdüğünü anında anlıyor. Bu nedenle, yalnızca gerçekten rezervasyon yaptırmak veya rezervasyon hakkında daha fazla bilgi edinmek istiyorlarsa buna tıklarlar.

boşluk
Kimp tarafından e-posta tasarımı

Bu nedenle, kişiselleştirilmiş bir CTA'nız varsa, dönüşüm hunisinde yalnızca gerçekten ilgilenen potansiyel müşterilerin ilerleyeceğinden emin olabilirsiniz. Bunlar, dönüşüm sağlama olasılığı en yüksek olası satış türleridir. Ve bilmiyorlarsa, yeniden hedeflenecek türde müşteri adayları olduklarını bilirsiniz.

Kimp İpucu: CTA kopyanızın en fazla etkiyi yaratması için basit ve okunaklı bir yazı tipi seçin. Süslü yazı tiplerinden ve dekoratif stillerden uzak durun. Bir harekete geçirme ifadesinin okunması kolay olmalıdır.

Çok fazla yazı tipi kullanmadan doğru yazı tiplerini birleştirmek ezici bir görev gibi mi geliyor? Profesyonel tasarımcıların bununla ilgilenmesine izin verin .

2. CTA'nızın bir düğme gibi görünmesini sağlayın

Harekete geçirici mesaj kopyanın geri kalanına benziyorsa, müşteriler bir sonraki adıma geçmek için oraya tıklayabileceklerini nasıl bilecekler? Bu nedenle, CTA'nızın kopyanın geri kalanından farklı görünmesini sağlayın.

CTA'yı bir düğme gibi göstermek kadar basit bir şey, tıklamaları %45 oranında önemli ölçüde artırabilir. Elbette, tasarımın geri kalanının görsel stiline ve markanızın görsel kimliğine bağlı olarak, her zaman düz bir düğme veya gerektiği gibi bir skeuomorfik (üç boyutlu) kullanabilirsiniz. Ancak bir düğme olarak algılanması kolay olduğu sürece, ziyaretçilerin tıklama şansı daha yüksektir.

3. CTA'nız için doğru rengi seçin

CTA tasarımınızın rengini değiştirmenin CTA'nın görünümünü ve etkinliğini büyük ölçüde değiştirebileceğini biliyor muydunuz? Aslında SAP, turuncu bir CTA düğmesinin dönüşümlerini %32,5 oranında artırdığını fark etti.

Tabii ki, diğer bazı renkler markanız için daha iyi olabilir. A/B testi yaparak bunu anlayabilirsiniz. Bunu yapmanın bir yolu, CTA dışında her şeyi koruyan aynı tasarımın iki farklı versiyonunu oluşturmak olacaktır. Her iki tasarımda da farklı CTA tasarımı renkleri kullanın ve hangisinin daha iyi dönüştüğünü görün. Fikri bir web sayfasında test ediyorsanız, ziyaretçi davranışını anlamak ve tasarımınızda daha fazla ince ayar yapmak için ısı haritalarını ve diğer izleme araçlarını da kullanabilirsiniz.

Rengi seçtikten sonra, CTA'nızın arka planda öne çıkmasını sağlayın. CTA ve arka plan için aynı rengi kullanamazsınız. CTA tasarımının rengi ile arka plan rengi ve genel renk paleti arasında iyi bir kontrast olmalıdır. En iyi kopyaya sahip en iyi görünen CTA tasarımı bile, CTA'nın tanınması kolay değilse hiçbir işe yaramaz.

boşluk
Web banner tasarımı Kimp tarafından

Yukarıdaki örnekte kırmızı CTA, koyu renkli arka plandan öne çıkıyor. Dolayısıyla, kullanıcıların CTA'yı fark etmeme riski yoktur.

Kimp İpucu: Renkler ve renk kontrastları ustaca çalışır. Bazen maksimum kontrasta sahip renkler bir araya getirildiğinde çok fazla görsel gerginliğe neden olabilir. Renk şemaları ve zıt renklerin nasıl seçileceği hakkında daha fazla bilgi edinmek için renk çarkı ve renk şemaları hakkındaki blogumuza göz atın.

4. CTA tasarımının opaklığına dikkat edin

CTA tasarımınızın tanınmasının kolay olmamasının bir başka nedeni de, CTA tasarımınızın arka plan deseni ve opaklığı olabilir. Saydam veya yarı saydam bir CTA, kalabalık bir arka planda kaybolabilir. Bu gibi durumlarda, opak bir düğme CTA'yı patlatır. Veya aşağıdaki tasarımda CTA'nın etrafındaki vurgu gibi ince ayrıntılar da ekleyebilirsiniz. Bunun gibi ayrıntılar, CTA'nın görünümünü daha da güzelleştirir ve dikkatleri üzerine çeker.

boşluk
Web banner tasarımı Kimp tarafından

Dijital kampanyalarınız için bu kadar akılda kalıcı banner'lar mı oluşturmak istiyorsunuz? Kimp ekibiyle bugün iletişime geçin.

5. Negatif alanı avantajınıza kullanın

CTA'nızın etrafına negatif boşluk eklemek, dönüşümü yaklaşık %230 oranında artırabilir. Bunun nedeni, negatif alanın etkin kullanımının CTA'nın etrafındaki tüm karmaşayı ortadan kaldırması ve dikkati ona yöneltmesidir.

boşluk
Kimp tarafından açılış sayfası tasarımı

Yukarıdaki açılış sayfasında, CTA'nın altındaki tüm boşluk, CTA'nın kolayca fark edilmesini sağlar. Gözünüze çarpan CTA'lar, tıklanma olasılığı en yüksek olanlardır. Bu nedenle, müşterilerin sayfada bir CTA olduğunu fark etmedikleri için ayrılmamalarını sağlamak için sayfanın etrafına bol miktarda negatif boşluk ekleyin.

6. Çok fazla CTA eklemeyin

İdeal olarak, pazarlama tasarımınız için tek bir yönü açıkça tanımlamanız gerekir. Seçeneklerin hedeflenmesi ve sağlanması erken bir aşamada gelir. Açıkça tanımlanmış olası satış kategorilerine sahip olmanız ve reklamlarınızın doğru bir şekilde hedeflenmesi gerekir. Reklamlarınız ayrıştırıldığında, CTA'nızı tanımlamak daha kolay hale gelir. Size birkaç örnek vereceğiz.

  • Olası potansiyel müşterileri hedefliyorsanız, markanızı tanıtan veya onları web sitenize göz atmaya ikna eden içeriğiniz olabilir. Bu gibi durumlarda, CTA daha fazla bilgi toplamak için büyük olasılıkla onları web sitesine veya sosyal medya sayfanıza götürür.
  • Web sitenize veya sosyal medya sayfanıza ulaştığınız potansiyel müşteriler, ilk ilgi düzeyini göstermiştir. Daha sonra onları doğru stratejilerle ikna etmek gelir. Burada, indirme düğmeli potansiyel müşteri mıknatısları veya abone olma düğmeli potansiyel müşteri yakalama sayfası kullanıyor olabilirsiniz.
  • Mevcut müşteriler için, istek listelerindeki veya göz attıkları ürünlerle ilgili teklifler gönderdiğinizde, CTA'nız onları ürün sayfasına götürür.
  • Ve bu, alışveriş sepetinin terk edilmesini ele alan bir e-posta ise, CTA siparişi vermeye devam etmeleri için müşterileri alışveriş sepetlerine götürür.

Ne aradıklarını ve bundan sonra nereye yönlendirilmeleri gerektiğini bilmek için bir alıcının yolculuğunu daha iyi anlamanız gerekir. Tüm bu durumlarda, tek bir CTA'ya sahip olmak en mantıklı olanıdır.

Müşteri adayı dönüşüm hunisinin erken aşamasındaki bir müşteri adayı için çok fazla seçenek kafa karışıklığına neden olabilir ve kafası karışan müşteri adayları bir karar vermeyebilir.

boşluk
Kaynak
7. Ancak birden çok yön olduğunda tutarlılığı koruyun

Basit bir pazarlama tasarımı için, tek bir CTA karışıklığı önler ve dönüşümü artırır. Ancak, en fazla etkiyi yaratmak için birden fazla CTA'ya ihtiyaç duyduğunuz bazı yerler vardır. Bu, açılış sayfaları ve bazı e-postalar gibi uzun formatlı tasarımlarda geçerlidir.

İçerik uzun sürdüğünde, sık sık ara vermek ve her bölüme bir CTA eklemek, müşterilerin sayfanın sonuna kadar okuyup CTA'yı orada bulmasını ummaktan çok daha iyi olacaktır.

Veya açılış sayfası veya e-posta, müşterilerin satın alacakları bir dizi ürün seçeneği gördüğü bir alışveriş rehberi biçimindeyse, her seçenek için farklı bir CTA en mantıklısı olacaktır.

Birden fazla CTA'nızın olduğu tüm bu durumlarda, aralarında görsel bir tutarlılık oluşturun. Her bir CTA tasarımı diğerinden farklı görünüyorsa, genel tasarımın beceriksiz görünmesine neden olabilir. Saklanacak birkaç şey şunlar olacaktır:

  • CTA düğmesinin şekli ve rengi
  • CTA kopyasında kullanılan yazı tipleri
  • CTA kopyasının düğme içinde hizalanması
  • CTA düğmelerinin yönü

Aşağıdaki açılış sayfası, her bölüm için farklı CTA'lara sahiptir, ancak CTA tasarımlarının tümü tutarlı görünmektedir. Sayfanın daha düzenli görünmesini sağlar. Ve kullanılabilirlik açısından, müşteriler bu CTA'lardan birkaçını gördüklerinde, web sitesinde benzer bir yeşil düğme gördükleri her yerde bunun başka bir adıma tıklanabilir bir bağlantı olduğunu bilirler.

boşluk
Kimp tarafından açılış sayfası tasarımı

Kimp ile tıklamaya değer CTA tasarımları oluşturun

CTA'lar, müşterileri amaçlanan yöne çekerek çoğu pazarlama tasarımının eksiksiz hissettirilmesini sağlar. Bu nedenle, e-postalarınıza, açılış sayfalarınıza, banner reklamlarınıza ve bir CTA'nın alakalı olduğunu düşündüğünüz diğer tüm pazarlama tasarımlarınıza bir tane eklemeyi unutmayın. CTA'lar ayrıca basılı reklamlarda da görünür ve burada çoğunlukla web sitesi adresi veya işletmenin iletişim bilgileri olacaktır. Ancak yine de, müşterilerin istediğiniz eylemi gerçekleştirmesi için tasarımın geri kalanından farklı olmaları gerekir. Tasarımın yapısını bozmadan bir CTA eklemek veya CTA'ların nerede ve nasıl kullanılacağını anlamak kafanızı karıştırıyorsa, işi tasarımcılarınıza bırakın. Bir Kimp aboneliği seçin. Ücretsiz deneme için şimdi kaydolun.