Daha İyi CTA Düğmeleri için 5 Tasarım Tekniği
Çoğu web sitesini ziyaret ettiğimizde, genellikle bir hedefimiz var. Bu hedefe ulaşmak için genellikle bir dizi adım atmamız gerekecek ve ilk adım, bir CTA (harekete geçirici mesaj) düğmesine tıklanarak başlayacak. Bir hizmete kaydolduğunuz veya bir uygulamayı indirdiğiniz en son zamanı düşünün. İşlem, büyük olasılıkla bir harekete geçirici mesajla etkileşim içerisindedir.
CTA düğmeleri, kullanıcıları hedef dönüşümünüze yönlendirmek için web sitenizde kullandığınız düğmelerdir. Bir CTA'nın tüm amacı, site ziyaretçilerinizi istenen bir harekete yönlendirmektir. Bazı yaygın CTA örnekleri şunları içerir:
- “Deneme başlat”
- “Uygulamayı / kitabı / rehberi indir”
- “Güncellemeler için kayıt ol”
- “Bir danışma alın”
Bugün, açılış sayfanızdan en fazla tıklamayı almanıza yardımcı olacak en iyi gerçek dünya örnekleriyle birlikte CTA düğmelerini tasarlamak için en iyi 5 uygulamayı tartışacağız.
1. Görme Strik Düğmesi
Düğme renginiz önemlidir. Aslında, bu makaleden yalnızca bir parça tavsiyede bulunacak olursanız, bu şöyle olmalıdır: “CTA düğme renginizi düşünün”. Renk kullanarak, bazı düğmeler daha görsel bir önem vererek diğerlerinden daha fazla dikkat çekebilirsiniz.
Zıt Renkleri Kullan
Karşıt renkler CTA düğmeleri için en iyi şekilde çalışır, zıt renkler kullanarak göze çarpan çarpıcı düğmeler oluşturmak mümkündür. Genel tasarımla uyumlu hale gelirken, web sayfasının renk düzeninden zıt bir renk seçmelisiniz. Aşağıdaki Firefox örneğini ele alalım. Firefox sayfasındaki CTA düğmesinin yeşil rengi sayfadan atlıyor ve hemen kullanıcı dikkatini çekiyor.
Firefox CTA düğmesi parlak yeşil ve koyu mavi bir arka plan üzerinde iyi duruyor
Başka bir dikkat çekici CTA düğmesi, Hipmunk ana sayfasında bulunabilir. Parlak turuncu düğme, kullanıcı dikkatini çeker ve bir sonraki olası eylemi tanımlar.
Olumsuz boşluk
Bir CTA için sadece renk değil, aynı zamanda etrafındaki alan miktarı da önemlidir. Beyaz boşluk (veya negatif alan), temel solunum odası oluşturur ve CTA düğmelerinizi, kullanıcı arayüzünüzdeki diğer öğelerden ayırır. Eski Dropbox ana sayfası, birincil CTA pop'unu yapmak için negatif alan kullanmanın iyi bir örneğiydi. Mavi “Ücretsiz kayıt ol” CTA, arka planın açık mavilerine karşı durur.
2. Eylem Odaklı Metin
Ziyaretçilerinizi doğru eylemi gerçekleştirmeye zorlayacak harekete geçirici mesaj düğmenizin metni yazmak kolay bir iş değildir. Neyse ki, bunu yapmanıza yardımcı olabilecek birkaç şey var:
Bir Fiil İle Başlayın
CTA düğmeleriniz için “Daha fazla bilgi için gir” gibi belirsiz ve sıkıcı kelimelerden kaçınmalı ve bunları “Ücretsiz denemenizi başlatın” veya “Şimdi indirim kazanma” gibi daha harekete dayalı sözcüklerle değiştirmelisiniz. Evernote en yaygın ama yine de CTA düğmeleri için eylem odaklı metinler çalışıyor.
“Start”, “Get” veya “Join” gibi bir fiille başlayın.
Treehouse ana sayfasında daha ilginç bir örnek bulunabilir. Treehouse'un web sitesindeki CTA sadece “Ücretsiz Deneme Başlat” demez; “Ücretsiz Denemenizi Hak Kazanın” diyor. İfadedeki fark göze çarpmıyor gibi görünebilir, ancak “Ücretsiz Denemenizi Hak Kazanın” çok daha kişisel bir şeydir.
Düğmeler için Metin Anlamak için Kısa ve Kolay Kullan
Ziyaretçinin CTA'yı tıklarsa tam olarak ne alacağını belirtin. İdeal olarak, düğme metnini iki ila beş kelime arasında tutmak istersiniz.
Değer Önerisi Ekle
Muhtemelen, birçok düğmenin kopyalarında “özgür” gibi sözcüklere sahip olduğunu fark ettiniz ve bu bir tesadüf değil, düğme kopyalarındaki bu kelimeleri kullanarak teklifinizin değer önerisini vurgular. Bu nedenle, CTA'nızı yazarken, bir (veya tümü) 3 ikna edici kelimeyi entegre etmenin bir yolunu bulmaya çalışın:
- Ücretsiz
- Bonus
- Anında
Size bir örnek vereyim: Kullanıcıların bir şey için kaydolmaya başlamadan önce sahip oldukları büyük bir korku, hizmetten hoşlanmayacakları takdirde aboneliklerini iptal etmenin bir acı olacağıdır. Netflix, “Bir ay boyunca ücretsiz katıl” CTA'nın hemen yanındaki “Herhangi bir zamanda iptal et” sözünü kullanarak korkuyu dindirir.
Aciliyet Duygusu Yaratın
CTA düğmelerinizde aciliyet hissi yaratmak etkileyici bazı tıklama oranlarını sağlayabilir. Örneğin, “Kaydolma ve Sadece Bugün% 25 İndirim Al” gibi düğme metinlerini kullanabilirsiniz. Birilerinin karar vermek zorunda kaldığı süreyi sınırlamak, insanların tekliflerini olabildiğince talep etmek istemelerini sağlar.
Faydalı Metin
Bazen düğme metninizde fazladan bir bilgi satırı eklemeyi düşünebilirsiniz. Bu uygulama ücretsiz deneme butonları ile yaygındır. Örneğin, ücretsiz deneme sürümü “Ücretsiz Deneme Sürümünü Başlat” metniyle CTA düğmesinin altında daha küçük metinde “30 günlük deneme, kredi kartı yok” şeklinde olabilir. Bu ekstra metin karar verme sürecini kolaylaştırmalıdır.
3. Kaydırma Olmadan Görünür Olun
Harekete geçirici mesaj düğmelerinizin yerleştirilmesi, renk ve mesaj kadar önemlidir. Bir CTA düğmesi, web sayfasının akışından organik olarak izlenen, kolay bulunabilen bir noktaya yerleştirilmelidir. Kullanıcıların asla kaçırmaması için, CTA düğmenizin ekranın üst kısmında kalmaya çalışmalısınız. İdeal olarak, CTA düğmenizin bir kullanıcının sayfaya ulaştıklarında gördüğü ilk şeyler arasında olması gerekir. Ek bilgiler, erişilebilir kalmasına rağmen dikkat dağınık olmadığı katlamanın altında kalmalıdır.
Yuvarlak Köşeleri ile 4. Büyük Düğme
Tasarımın satın alma durumunu nasıl ilettiğini düşünün. Kullanıcılar öğeyi düğme olarak nasıl anlıyor? Öğeyi bir düğme gibi göstermek için şekil ve boyut kullanın.
Yeterince Büyük Yap
CTA, mesafeyi görecek kadar geniş olmalı, ancak sayfadaki ana içeriğin dikkatini çekecek kadar büyük olmamalıdır.
Yuvarlak Köşeli Kullanıcı Düğmeleri
Düğme şekli büyük bir rol oynayabilir. Bu bir Kanıtlanmış gerçek yuvarlak köşeler gözlerde daha kolaydır. ContentVerve'in testinde, yuvarlatılmış yeşil bir düğme mavi bir dikdörtgenden daha iyi sonuç verdi.
5. Seçimler Olduğunda Daha Az Daha Fazladır
Müşterilerinizin harekete geçmesini istiyorsanız, tüm engelleri ortadan kaldırarak onlara yardımcı olmanız gerektiğini unutmayın. Kullanıcılara çok fazla seçenek verildiğinde, kafaları karışmaya eğilimlidirler. Yani, potansiyel müşterilere sadece bir seçenek sunmak daha iyidir.
Birden çok düğme seçeneği eklemek istiyorsanız, kullanıcıları hunilere belirli bir yola yönlendirmeye yardımcı olmak için başkalarına göre bir seçime ağırlık verin. İyi bir örnek Evernote'tur: Evernote'un ana sayfasının alt kısmına ulaşır ulaşmaz, tercih edilen bir seçimin “Ücretsiz kayıt ol” olduğu, kullanıcıların planları karşılaştırması için CTA'nın çok ikincil olduğu oldukça açıktır.
Sonuç
Etkili CTA tasarımına ulaşmak için, sadece düğmenin kendisinden daha fazlasını düşünmelisiniz. Arka plan rengi, etrafındaki resimler, çevreleyen metin ve diğer birçok unsur hakkında düşünmek de önemlidir. Basecamp ekibi bu öğelerin önemini anlıyor ve açılış sayfaları için mükemmel bir düzen tasarladı. CTA butonu altında kullandıkları mikrobilgisayar bile olsa (“Bu hafta 4.714 işletme imzalanmış!”) Potansiyel müşterilerin güvenini artırıyor.
Bu makalede bahsi geçen ipuçlarının, web siteniz için daha iyi bir harekete geçirme düğmesi oluşturmanıza yardımcı olacağını umuyorum. Son an testin önemi - sitenizde bir CTA oluşturmaya karar verirseniz, kitleniz için çalışıp çalışmadığını test etmeyi unutmayın.