Bir CTA düğmesi nasıl görünmelidir? Nereye yerleştirilmelidir? Can sıkıcı CTA’lardan nasıl kaçınılır? Bunlar, metin yazarları ve pazarlamacılardan web ve UX tasarımcılarına kadar herkesi rahatsız eden sorulardan sadece birkaçı. Bugün bunları çözeceğiz.
CTA nedir?
“CTA” kısaltması, Harekete Geçirici Mesaj anlamına gelir. Harekete Geçirici Mesaj, ziyaretçiden bir eylem gerçekleştirmesini isteyen herhangi bir tasarım parçasıdır (genellikle bir düğmedir). Bu durum siteyi keşfetmekten iletişim formu doldurmaya veya sepete ürün eklemeye kadar her şey olabilir.
İyi tasarlandıklarında CTA’lar iki yönlü bir işlev gerçekleştirir – kullanıcının bir web sitesinde gezinmesine yardımcı olur ve dönüşüm akışınızda çok önemli bir öğeyi temsil eder. Nihayetinde rolleri, ziyaretçilerin yapmalarını istediğiniz şeyi yapmasını sağlamaktır. Sağduyulu bir tur rehberi gibi, bir kullanıcıyı dijital ortamınızda nazikçe yönlendirir.
Teknik olarak, ziyaretçiyi pasif bir gözlemciden bir web sitesinin aktif bir kullanıcısına dönüştüren bir kopya içerdiği sürece herhangi bir düğme bir CTA düğmesi olabilir. Fakat CTA’ları bir web sitesindeki diğer düğmelerden ayıran en önemli şeylerden biri, yukarıda belirtilen kopyaya ek olarak, kullanıcıların dikkatini çeken ve onları etkileyen belirli özelliklere (renk, şekil, konum) sahip olmaları gerektiğidir. bir eylem gerçekleştirmek için.
CTA’ların iyi bir kullanıcı deneyimi ve işletmenizin kârlılığı için çok büyük önem taşıdığı açıktır, bu nedenle bu makalede CTA’larınızı oluştururken aklınızda bulundurmanız gereken bazı şeyleri paylaşacağız.
Düğme metniyle başlayalım.
CTA Kopyası Nasıl Yazılır?
CTA’ların etkinliği büyük ölçüde kopyasının kalitesine ve yapısına bağlı olduğundan, bu metnin iyi düşünülmesi gerektiği açıktır. CTA kopyasının iki işlevi yerine getirmesi gerekir: ziyaretçinin ilgisini çekmek ve ziyaretçinin hangi eylemi gerçekleştirmesinin beklendiğini netleştirmek.
Etkileyici değeri elde etmek için, metin doğrudan, net ve hoş olmalı, hatta düpedüz büyüleyici olmalıdır. Yalnızca çok fazla kelime içerebileceğinden, CTA kopyasının mesajı, kullanıcının gerekli eylem planını sezgisel olarak anlamasına izin vermelidir.
Çoğu durumda, ideal CTA kopyası basitçe web sitesinin dönüşüm hedefini belirtir. Amacınız insanların blogunuzu okumasını sağlamaksa, düğme sadece Şimdi Oku veya Daha Fazla Oku yazmalıdır. Web sitesiyle etkileşime girmelerini istiyorsanız, Şimdi Temasa Geçin metnini içeren bir düğme veya hatta sadece Bize Mesaj Gönderin, bu işi gayet iyi yapacaktır.
Yine de sadece kısa, net ve (mümkünse) eğlenceli olmak yeterli değil. Burada dikkate alınması gereken biraz psikoloji var. Aslında, kullanıcıların en çekici bulduğu kopya türünü ve hangi CTA metninin en iyi şekilde dönüştürdüğünü belirlemek için çok sayıda araştırma ve test yapılmıştır.
Uzmanların çoğu, bir aciliyet duygusu yaratmanın, başarılı bir CTA kopyası için gerekli bir koşul olduğu konusunda hemfikirdir. Neyse ki, bu, “Şimdi” veya “Bugün” gibi bir veya iki kelimeyi ekleyerek, belki de “Yalnızca” ile birleştirerek oldukça kolay bir şekilde elde edilebilir.
Şimdi Ücretsiz Kopyanızı Alın veya Kaydolun ve Yalnızca Bugün %50 İndirim Alın! Kullanıcılar, yarın artık mevcut olmayacak bir şeyi kazanmak için özel bir fırsatı kaçırmak istemedikleri için yüksek oranda dönüşüm sağlıyorlar.
Burada dikkat edilmesi gereken bir diğer husus da ziyaretçilerinize nasıl hitap ettiğinizdir. Bazı uzmanlar birinci şahıs zamirlerinin (Hesabımı Oluşturun, Kopyamı Alın) en etkili olduğunu düşünürken, diğerleri ikinci şahıs zamirlerinin kullanımını tercih eder (Kopyanızı Alın, Ücretsiz Denemenizi Talep Edin). İşleri daha da karmaşık hale getirmek için, iki tekniğin eşit sayıda destekçisi ve lehlerine argümanları var gibi görünüyor.
Her iki durumda da, kullanıcıların ürün veya hizmetle daha kişisel olarak ilgilendiklerini hissetmelerini sağladığından, CTA kopyasında ziyaretçilere hitap etmede bir dereceye kadar kişiselleştirmenin gerekli olduğu açıktır. Ve kişisel bağlantı, dönüşümler için çok önemlidir.
CTA Düğmelerinizi Nasıl Tasarlarsınız?
CTA düğmelerinin kesinlikle görsel yönü, kopyanın kendisi kadar önemlidir (hatta daha fazla değilse). Kurallar kulağa basit geliyor – düğmelerin dikkat çekmesi ve kullanıcıları tıklamaya davet etmesi gerekiyor. Fakat bunu başarmak her zaman kolay değildir. Sayfada göze çarpmak için CTA düğmelerinin şekli, boyutu, rengi ve yerleşimi, çevrelerinin geri kalanıyla net bir kontrast içinde olmalıdır.
CTA Düğmelerinin Şekli
Çoğu CTA’nın (ve bu konuda web’deki çoğu düğmenin) dikdörtgen olduğunu muhtemelen fark etmişsinizdir. Elbette, dairesel, kare veya başka, hatta daha az yaygın olan bazı harika CTA örnekleri var, fakat bunların çoğu dikdörtgen. Bu neden?
Dikdörtgen ve kare, ister internette ister günlük hayatımızda en çok karşılaştığımız şekillerdir. Özellikle dikdörtgenler, bir istikrar ve güvence duygusu taşıdıkları için bizi rahat hissettirir.
Öte yandan, insanların eğrilere karşı bir yakınlığı olduğu kanıtlanmıştır. Yuvarlak şekiller, göze keskin ve keskin olanlardan daha hoş gelir. Dairenin bir barış, bütünlük ve uyum duygusu yayan bir şekil olduğundan bahsetmiyorum bile.
Bu iki gerçek göz önüne alındığında, CTA düğmeleri için en verimli şeklin köşeleri yuvarlatılmış bir dikdörtgen olması mantıklıdır. Bu şekil, pazarlamacılar arasında çılgınca popüler hale geldi ve çok sayıda site ve uygulamada bulunabilir.
Tabii ki, bunlar yalnızca deneyimden ve UX’teki iyi araştırılmış bazı en iyi uygulamalardan elde edilen genel yönergelerdir. Her türden alışılmışın dışında şekillerde gelen CTA düğmeleri vardır, fakat bunlar genellikle deneyler, son derece özel estetik vb. ile işaretlenmiş bir tasarım ortamının parçasıdır. Başka bir deyişle – normu temsil etmiyorlar.
CTA Butonları İçin Rengin Önemi
Tüm görsel içeriğin algılanması ve deneyimlenmesinde renklerin rolü onlarca yıldır araştırılmaktadır. Bugün psikologlar, renkleri belirli kalıplara göre yorumlama ve duygusal olarak deneyimleme eğiliminde olduğumuz konusunda hemfikirdir ve bu, pazarlamacıların çok uzun süredir istismar ettiği bir şeydir.
Belirli renkler, belirli mesajlarla ilişkilendirilebilir ve onları bilinçaltı bir düzeyde otomatik olarak iletebilir. Sadece trafik ışıklarını düşünün – renklerin kendisi istenen mesajı iletir. Yeşil – git, kırmızı – dur.
Fakat iş bu iki renge ve CTA’lardaki kullanımlarına gelince durum göründüğü kadar net değil. Bir alarm, dikkat ve uyarı rengi olarak kırmızı rengin insanları uzaklaştıracağını ve daha az tıklamaya yol açacağını düşünürsünüz. Fakat birkaç bağımsız a/b testinde kırmızı, yeşile karşı açık ara galip geldi. Bu yüzden renkler aracılığıyla iletişim söz konusu olduğunda, en iyisi tüm tavsiyeleri biraz tereddütle almak ve eyleme geçirilebilir içgörüler elde etmek için kendi testlerinizi yapmaktır.
Yine de, görsel mesajlarınız için yüksek dönüşüm sağlayan paleti bulduktan sonra bile işinizin henüz bitmediğini unutmayın. Düğmenin rengi, yalnızca görsel ortamıyla sinerji içinde olduğunda en etkili olacaktır. Düğme ile mizanpajın geri kalanı arasındaki ilişki uyumlu ve dengeli olmalı, aynı zamanda kullanıcıların dikkatini çekecek kadar zıt olmalıdır. Tamamlayıcı renk kombinasyonları da göz önünde bulundurulmaya değer – göze hoş geliyorlar ve gerekli kontrastı sağlıyorlar.
CTA düğmelerinin tasarımında renklerin önemi, biri klasik CTA, diğeri ise konu hakkında ek bilgi sağlayan iki düğmenin gerekli olduğu durumlarda daha da netleşir.
Bu durumda, kesinlikle CTA tipi düğme vurgulanmalı ve vurgulanmalıdır, böylece kullanıcılar önce buna odaklanır. Bu durum kırmızı, turuncu veya bunların herhangi bir varyasyonu gibi koyu bir sinyal rengiyle elde edilebilir.
Yukarıdaki örnekte, ziyaretçileri söz konusu hizmet hakkında daha fazla bilgi edinmeye davet eden diğer düğmenin çok daha sakin olduğunu fark edeceksiniz (bu durumda, az önce özetlenmiştir), bu da CTA’nın tüm dikkati çekmesini sağlar.
CTA Butonlarında Animasyon ve Detaylar
CTA tasarımının üçüncü yönü, düğme animasyonudur. Simgeler, ayrı çizimler ve diğer grafik öğelerle birlikte, animasyon başka bir görsel ve iletişimsel değer katmanı getirebilir. Düzgün kullanıldığında, bir UX aracı olarak işlevsel animasyon, düğmeleri daha sezgisel ve doğrudan hale getirebilir ve bu nedenle etkinliklerini büyük ölçüde artırabilir.
CTA’ları tasarlarken, animasyon çoğunlukla fareyle üzerine gelme efektleri için kullanılır. Bu animasyonlar, dikkati mesajdan uzaklaştırmalarını istemediğimiz için çok etkileşimli veya yüksek sesli olmamalıdır. Çok fazla animasyon kullanıcının kafasını karıştırabilir ve olumsuz bir duygusal etki yaratabilir.
Bununla birlikte ustaca canlandırılan düğmeler, CTA tasarımına her zaman büyük bir katkı sağlar, onu zenginleştirir ve odağın net olmasını sağlar.
Animasyonlu üzerine gelme efektlerine ek olarak, tasarımcılar bazen özellikle kullanıcıları Sepete Ekle, İndir, Yükle, Sil ve benzeri işlemlere davet eden düğmeler için ek öğeleri ve simgeleri tercih ederler. Bu durumda, düğmenin metni ile bu ek öğeler arasında ve ayrıca düğmenin öğeleri ile kenarlıkları arasında yeterli boşluk olduğundan emin olunması önemlidir. Her şeyden önce düğmenin okunması kolay olmalı ve karmaşık görünmemelidir.
CTA Butonlarının Konumlandırılması
Bir CTA düğmesinin başarısını belirleyen son unsur, zamanlaması veya daha doğrusu konumlandırmasıdır. Düğmeyi nereye koyacağınıza dair bir “altın kural” olmasa da, bir şey açıktır – ziyaretçiye doğru zamanda sunulmalıdır.
Bunun anlamı, ziyaretçinin sayfada kaldığı süre boyunca düğmeyi hangi noktada görmesi gerektiğini çok dikkatli düşünmeniz gerektiğidir. Ziyaretçi görsel ve metinsel içerik ve bilgileri kullanarak aksiyona iyi bir şekilde hazırlandığında, istenilen hareketi gerçekleştirme şansı gerçeğe dönüşüyor.
Sayfanın tamamı – tasarımı ve içeriği – bu nedenle, ziyaretçiyi nihai hedefe (eylem) yönlendirecek şekilde yapılandırılmalı ve tasarlanmalıdır, bu bir abonelik, bir satın alma veya başka bir şey olabilir.
Bir CTA’yı ekranın üst kısmına (sayfanın yükleme sırasında ilk görünen kısmı) yerleştirmek eskiden bir standarttı, fakat kaydırma artık çok doğal ve otomatik olarak gerçekleştirdiğimiz bir eylem olduğundan, “ekranın üst kısmı içeriği” biraz kaybetti. “prestijinden” Aslında, kullanıcının içeriği keşfetme ve yerleşme şansı bile bulamadan en tepeye bir CTA koymak çoğu zaman ters etki yaratabilir.
Düğmeyi ekranın alt kısmına yerleştirirseniz, ziyaretçinin ona ulaşmak için bir yolu tamamlaması gerektiği anlamına gelir. Sayfa yapınızı doğru planladıysanız, bu yol, ziyaretçiyi yavaşça aşağı çeken ve onu harekete hazır hale getiren görsel ve metinsel ipuçlarıyla dolu olacaktır.
Düğme için mükemmel noktayı bulduğunuzda, odakta kaldığından emin olmalısınız. Bunu yapmak için, çevresinde yeterince negatif alan olduğundan emin olmalısınız. Bu durum ziyaretçinin “gözünü dinlendirmesine” olanak tanır ve düğmenin açıkça görülebilmesini ve mesajının anlaşılmasını sağlar.
Çözüm Yolu
Temiz, anlaşılır, odaklanmış ve ilgi çekici – bunlar, iyi bir CTA düğmesinin dönüştürülmesinin birincil nitelikleridir. Bu niteliklerin çoğunun tasarımdan geldiğini gördük. Mükemmel CTA düğmesini tasarlamak için genel yönergeler ve öneriler açık olsa da, her zaman bireysel bir yaklaşım önerilir. Elbette, kırmızı rengin harika çalıştığı kanıtlanmış olabilir, fakat web sitenizin tonu ve paletiyle çatışıyorsa, onu kullanmamalısınız. Aynısı, düğmenin şekli, boyutu ve konumu ile ilgili yönergeler için de geçerlidir. Görsel markanıza uyan bir düğme tasarlayıp bunun için harika bir yer bulduğunuzda, onu birkaç farklı sürümle test ettiğinizden emin olun. CTA’larınızı bazı güçlü değer odaklı içerik ve harika metinlerle desteklemeyi unutmayın.