CTA Tasarımı: Renk, Metin ve Yerleşim Kararları

CTA tasarımı (call to action — harekete geçirme butonu), web sayfasında kullanıcıyı belirli bir eyleme yönlendiren buton veya bağlantının görsel ve metinsel biçimidir. Rengi, metni, boyutu ve yerleşimi yanlış olan bir CTA, sayfanın geri kalanı ne kadar iyi olursa olsun dönüşüm oranını düşürür.

CTA tasarımı sezgiyle değil, test verisiyle şekillendirilmeli. Ama genel davranışı yönlendiren kanıta dayalı prensipler var ve bunlarla başlamak doğru noktadan test etmenizi sağlar.

⠀

Renk Seçimi

⠀

CTA butonu, sayfanın geri kalanından belirgin biçimde ayrışmalıdır. "Marka rengiyle uyumlu olsun" doğru kriter değildir — asıl kriter kontrasttır.

Kontrast prensibi:

Beyaz arka planlı bir sayfa için koyu, doygun renkler — kobalt mavi, turuncu, yeşil — iyi çalışır. Açık gri veya pastel butonlar görünmez kalır.

Renk psikolojisi:

• Turuncu ve kırmızı: aciliyet ve enerji — e-ticaret ve promosyon sayfalarında yaygın
• Mavi: güven ve kararlılık — SaaS, finans, danışmanlık sitelerinde etkili
• Yeşil: onay ve harekete geçme — "satın al", "başla" gibi aksiyonlarda iyi performans gösterir

⠀

Renk kararını test etmeden sonuca varmayın. Aynı sayfada iki farklı CTA rengiyle A/B testi yaparak hangi rengin daha fazla tıklama getirdiğini ölçün.

⠀

Metin Seçimi

⠀

⠀

⠀

CTA metni kullanıcıya iki soruyu yanıtlamalı: "Ne alacağım?" ve "Ne yapacağım?"

Zayıf CTA metinleri:

• "Gönder" — ne gönderildiği belli değil
• "Tıklayın" — eylem var, değer yok
• "Daha fazla bilgi" — pasif, belirsiz

⠀

Güçlü CTA metinleri:

• "Ücretsiz Teklif Al" — değer ve eylem birlikte
• "Hemen Başla" — aciliyet ve kolaylık
• "30 Gün Ücretsiz Deneyin" — risk ortadan kalkıyor
• "Sitenizi Analiz Edin" — spesifik, somut eylem

⠀

Birinci şahıs kullanımı tıklama oranını artırabilir: "Benim Teklifimi Al" → "Teklifimi Al" formülü bazı testlerde "Teklifinizi Alın"dan daha iyi performans gösterir.

⠀

Boyut ve Yerleşim

⠀

⠀

⠀

Boyut:

CTA butonu tıklanabilir olmalı — masaüstünde minimum 44×44px, mobilde minimum 48×48px. Çok küçük butonlar hem görünmez kalır hem de dokunma hataları yaratır. Çok büyük butonlar ise sayfanın dengesini bozar.

Yerleşim — above the fold:

Ana dönüşüm hedefi için CTA, kullanıcının scroll yapmadan görebileceği alanda yer almalı. Ziyaretçilerin önemli bir kısmı scroll yapmaz.

Beyaz alan (white space):

CTA'nın etrafındaki boşluk butonun dikkat çekmesini sağlar. Metin veya görsellerle çevrili bir buton "gürültü" içinde kaybolur.

Tekrar:

Uzun sayfalarda CTA en az iki kez görünmeli: bir kez above the fold'da, bir kez de sayfanın altında. İkincisi "Hâlâ ikna olmadıysanız, buyurun" mesajı taşır.

Tek CTA prensibi:

Bir sayfada birden fazla farklı eylem butonu varsa (teklif al, demo iste, bülten kaydı) kullanıcı hangisini seçeceğini bilemez. Bir sayfanın bir birincil CTA'sı olmalı; diğerleri görsel hiyerarşide ikincil konumda tutulmalı.

Blakfy'nin web sitesi projelerinde CTA tasarımı, müşterinin birincil dönüşüm hedefi belirlendikten sonra şekillendirilir ve her zaman A/B testi önerilir.

⠀

⠀

Sık Sorulan Sorular

⠀

CTA butonu kaç tane olmalı?

Ana sayfada bir birincil CTA. Ürün veya hizmet listesi sayfalarında her kart için bir CTA olabilir ama bunlar aynı eylemi (ürünü incele, sepete ekle) yaptırmalı.

CTA'ya ikon eklemek gerekir mi?

İkon metin mesajını destekliyorsa faydalıdır — "Hemen İndir" + indirme ikonu gibi. Ama ikon yalnızca dekoratif amaçlıysa gerekmez; tasarımı karmaşıklaştırabilir.

CTA hover efekti önemli mi?

Evet. Kullanıcı butonu gördüğünde tıklanabilir olduğunu anlamalı. Hover durumunda renk, gölge veya ölçek değişimi "bu bir buton" sinyali verir.