CTA Tasarımı: Sayfada Tek Ana Eylem

CTA tasarımı, düğme rengi seçmek değil; sayfanın tek birincil eylemini, ikincil çıkışını ve tekrarlayan çağrı kirliliğini göreve göre yönetmektir. Bu rehber bakış alanındaki rekabeti nasıl keseceğinizi, vazgeçmeyi nasıl tasarlayacağınızı ve hangi tekrarın hatırlatma hangisinin gürültü olduğunu adım adım anlatır.

Bir sayfada “teklif al”, “hemen ara”, “katalogu indir” ve yapışkan bir sohbet düğmesi aynı anda parlıyorsa kullanıcı bir iş seçmez; hangisinin asıl iş olduğunu çözmeye çalışır. CTA tasarımı bu yüzden düğmenin turuncu mu yeşil mi olacağı tartışmasına indirgenmemelidir. Asıl karar, o ekranın tek birincil eylemini seçmek, ikincil çıkışı görünür ama sessiz tutmak ve aynı çağrıyı her kaydırmada tekrar ederek kirlilik üretmemektir.

KepezWeb olarak kurumsal sitelerde ve vitrin sayfalarında aynı tabloyu sık görürüz: her bölüm “daha fazla dönüşüm” diye kendi dolu düğmesini ister. Ortaya çıkan şey net bir sonraki adım değil, görev kargaşasıdır. Bu rehber rengi bir kenara bırakıp eylemi, çıkışı ve tekrarı göreve göre nasıl yöneteceğinizi somut örneklerle anlatır.

CTA tasarımı neden renk tartışmasından ibaret değil

Renk, kontrast ve fark edilirlik işe yarar. Yine de renk, eylemin kendisini tanımlamaz. Aynı parlak stilden üç tane varsa hiçbiri birincil değildir; hepsi gürültüye dönüşür. Ziyaretçi “hangisi asıl iş?” diye bakınır. Bu bakınma, tıklamamaktan daha pahalıdır: dikkat dağılır, sayfa tarama işine döner.

CTA bir cümledir: ziyaretçi ne yapacak, ardından ne olacak. Düğme yalnızca o cümlenin basılabilir halidir. Palet tartışması, cümle henüz yazılmadan başlarsa sayfa süslenir ama karar netleşmez. Satış telefon ister, pazarlama form ister, destek sohbet ister. Üç talep de meşrudur; üçünü de birincil yapmak ise hiçbiri için çalışmaz.

Yanlış soru “hangi renk daha çok tıklanır?”dır. Doğru soru “bu sayfanın işi bittiğinde kullanıcı hangi tek adımı atmış olmalı?”dır.

Bir iletişim sayfasında birincil eylem formu göndermek olabilir. Bir hizmet sayfasında keşif talebi. Bir ürün kartında sepete ekleme. Bu görevler aynı marka paletini paylaşır; aynı görsel ağırlığı paylaşmaz. Ölçü, konum ve boşluk rengi taşır. Düğmenin sayfadaki yerini ölçü ve konumla kurmak, renk kodunu seçmekten önce gelir; bu katman görsel hiyerarşi kararlarıyla bağlanır.

Birincil eylem: bakış alanında tek hedef

Tek ana eylem kuralı, sitede yalnızca bir düğme kalsın demek değildir. Kural şudur: aynı bakış alanında, aynı görev için rekabet eden iki birincil stil olmasın. Kahramanda dolu bir “teklif alın” varken hemen yanında aynı boyutta dolu bir “hemen arayın” varsa sayfa iki patronlu bir ofis gibidir. İkisi de bağırır; ikisi de zayıf kalır.

Önce sayfanın iş hedefini bir cümleyle yazın. “Bu sayfa, X kişisinin Y kanıtını görüp Z adımını atması içindir.” Z’ye uymayan her çağrı ikincil stile, metin bağlantıya veya başka bir ekrana iner. Cümleyi yazamıyorsanız düğme de yazılamaz; önce vaadi ve kanıtı sıraya koyarsınız.

Birincil metin nasıl yazılır

• Fiil ve nesne kullanın: “Teklif isteyin”, “Sepete ekleyin”, “Randevu alın”.
• “Detaylı bilgi”, “tıklayın”, “buraya” gibi boş etiketleri birincil yapmayın.
• Her düğmeye “hemen” ve “şimdi” eklemek aciliyeti değil, gürültüyü artırır.
• Metni kısa tutun; vaadi düğmenin üstündeki cümlede tamamlayın.
• Aynı fiili hem menüde hem düğmede hem bantta tekrarlamayın; biri yetsin.

Boş etiket tehlikelidir çünkü basınca ne olacağı belirsizdir. “Devam” bir sihirbazın sonraki adımıysa anlam taşır; hizmet sayfasının kahramanında “devam” ise kaçış kelimesidir. Kullanıcı, sonucu cümleden okuyabilmelidir.

Sayfa örnekleriyle tek hedef

Kurumsal hizmet sayfasında birincil “Teklif alın” olabilir. “Referansları inceleyin” aynı boyutta ikinci dolu düğme değil, metin bağlantısı veya çerçeveli stildir. Referans kanıttır; kanıtın işi ikna etmek, düğmenin işi adımı toplamaktır. İkisini aynı sesle konuşturmak, kanıtı da satışa çevirir ve inandırıcılığı düşürür.

Kampanya açılışında birincil form gönderimi veya satın almadır. “Bizi arayın” aynı ağırlıkta durursa form yarıda kalır. Telefon, henüz yazmak istemeyen kişi için ikincil çıkış olarak kalmalıdır. Formun yanında parlayan ikinci düğme, “karar vermeden çık” davetiyesidir.

Blog yazısında çoğu zaman birincil eylem yoktur. Zorlama bir “hemen satın al” okuma görevini böler. İlgili hizmete sakin bir geçiş, yazının işini bitirdikten sonra yeter. Rehber sayfası bir satış vitrini değildir; okuyan kişi henüz kanıt toplamaktadır.

KepezWeb işlerinde bu adımı sayfa sözleşmesi gibi ele alırız: vaat, kanıt, tek adım. Sözleşme net değilse düğme rengi tartışmak vakit kaybıdır. Sözleşme netse birincil düğme neredeyse kendiliğinden yerini bulur.

İkincil çıkış: vazgeçmeyi de tasarlayın

Tek ana eylem, çıkışı yok etmek anlamına gelmez. Ziyaretçi henüz hazır değilse, yanlış sayfaya düşmüşse veya yalnızca bakıyorsa bir ikinci yol ister. Bu yol yoksa ya zorla tıklar ya da sekmeyi kapatır. İkincil çıkış, birincili korumanın parçasıdır; rakibi değil.

İkincil çıkış katalog, “nasıl çalışır”, e-posta, “alışverişe devam et”, “vazgeç” veya sakin bir iletişim satırı olabilir. Görevi durdurur, cezalandırmaz. İnsan “şimdi değil” diyebiliyorsa “belki sonra” kapısı açık kalır. Bu kapıyı gizleyen arayüz, kısa vadede tıklama kaptığını sanır; uzun vadede güven kaybeder.

İkincil birincile nasıl yenik durur

• Metin bağlantısı veya çerçeveli düğme kullanın.
• Puntoyu ve dolguyu küçültün; rengin doygunluğunu düşürün.
• Birincilin altına, sağına veya formun iptal konumuna yerleştirin.
• İki dolu ve parlak düğmeyi yan yana koymayın; o anda iki birincil vardır.
• İkincilin metnini de net yazın: “Vazgeç”, “Alışverişe dönün”, “Önce örnekleri görün”.

Vazgeçme de bir eylemdir. Pencerede yalnız “gönder” varsa klavye ve fare kullanan kişi tuzağa düşer. “Kapat” veya “vazgeç” görünür, yazılı ve birincilden ayrı durmalıdır. Yalnızca köşedeki çarpı ikonu, çıkış değil engeldir; özellikle mobil parmakta küçük bir hedefe dönüşür.

İkincil çıkışı “daha zayıf bir satış” sanmak da yanlıştır. Bazen çıkış, doğru göreve götürür. Fiyatı henüz karşılaştırmayan kişiye form doldurtmak yerine “fiyatlandırma yaklaşımını okuyun” demek, formu kirletmez; formu hak eden kişiye saklar.

Tekrarlayan CTA kirliliği nereden gelir

Kirlilik, aynı çağrının her bölümde, her kartta ve her kaydırmada birincil stille yeniden basılmasıdır. Hatırlatma sanılır; aslında hiyerarşiyi sıfırlar. Kullanıcı her ekran diliminde aynı bağırmayı duyunca hiçbirini duymaz. Tekrar, bağlam değiştiğinde ilerleme; bağlam aynıyken gürültüdür.

Sık kaynaklar şunlardır:

1. Hero, hizmet kartları, vaka özeti ve alt bantta aynı “teklif al” dolu düğmesi.
2. Yapışkan çubuk, yüzen sohbet, açılır pencere ve kahraman düğmesinin aynı anda yarışması.
3. Liste kartında hem “incele” hem “hemen al” birincil stili.
4. Metin içinde her alt başlıktan sonra düğme bloğu.
5. Mobilde alt bar, yüzen ikon ve form düğmesinin üst üste binmesi.

Kullanıcı kaydırdıkça bağlam değişir. Çağrı da bağlama uymalıdır. Üstte keşif, kanıttan sonra talep, sorulardan sonra “uzmana sorun” gibi bilinçli bir kayma tekrar değil ilerlemedir. Görev aynı kaldıysa altta sakin bir bant yeter; her ara başlığı birincil düğmeyle mühürlemeyin.

Kart ızgarası kirliliğin sessiz üreticisidir. Altı hizmet kartının her birinde dolu “inceleyin” varsa bakış alanı altı birincile bölünür. Kartın kendisi tıklanabilirdir; ikinci bir düğme çoğu zaman gereksizdir. Düğme ancak kartta iki ayrı iş varsa anlam taşır: örneğin “özeti aç” ve “sepete ekle”. İki iş yoksa bir iş seçin.

Yapışkan çubuk ancak birincil eylem kaydırınca kaybolduğunda ve sayfa uzun bir karar içerdiğinde anlam taşır: uzun form, karşılaştırma, yapılandırıcı. Kısa bir hizmet sayfasında yapışkan çağrı, zaten görünen düğmenin kopyasıdır. Yüzen sohbet de aynı kopya olabilir. Destek kanalı görünür olsun isteniyorsa bunu birincil stilden ayırın; yuvarlak ikon her kaydırmada “asıl iş” iddiası taşımasın.

Ana sayfada kirlilik özellikle büyür çünkü her birim kendi dönüşümünü ister. Hangi bölümün hangi işi gördüğü net değilse düğme yağmuru kaçınılmazdır. Bölüm sırasını hedefe göre dizmek, çağrının da nerede duracağını belirler. Ana sayfa tasarımı tam da bu sırayı iş hedefine bağlar: ilk ekran vaat, sonra kanıt, sonra tek adım.

Sayfa türüne göre görev ve düğme hiyerarşisi

Aynı marka, her şablonda aynı birincil düğmeyi kopyalamamalıdır. Görev değişir; hiyerarşi de değişir. Aşağıdaki özet, rengi değil görevi merkeze alır.

Sayfa türü	Birincil eylem	İkincil çıkış	Kaçınılacak kirlilik
Hizmet / kurumsal	Teklif veya keşif talebi	Referans, SSS, sakin iletişim	Her kartta aynı dolu “teklif al”
Ürün detay	Sepete ekle veya satın al	Favori, soru, karşılaştır	Sepet, hemen al ve ara yan yana
Kategori / liste	Ürünü veya hizmeti açmak	Filtre, sıralama	Her satırda iki birincil düğme
Açılış / kampanya	Form gönderimi veya satın alma	“Nasıl çalışır”, iletişim	Hero, pop-up ve yapışkanın aynı metni
Form adımı	Gönder veya devam	Vazgeç, geri	Gönderle aynı stilde ikinci dolu düğme

E-ticaret ürün detayında fiyat, stok ve varyant zaten karar anını kurar. Sepete ekleme bu hiyerarşinin sonucudur; sayfanın ortasında ayrı bir bağıran ada olması gerekmez. Bilgi sırası bozulursa düğme de yanlış yerde kalır. Ürün detay sayfasındaki bilgi hiyerarşisi bu sırayı netleştirir: önce anlaşılan ürün, sonra eylem.

Liste sayfasında birincil iş çoğu zaman seçmektir, satın almak değil. “Hemen al” her satırda parlıyorsa kullanıcı karşılaştırmadan kopar. Satın alma ürün detayının veya sepetin işidir. Görevi sayfalar arasında bölüştürmek, her sayfaya bütün huniyi sıkıştırmaktan daha temizdir.

Metin, konum, kontrast ve klavye

Birincil eylem seçildikten sonra sıra onu taşımaya gelir. Taşıma işi boya değil, konum, kontrast ve etiket işidir. Bu katmanda yapılan hata, doğru görevi görünmez kılar.

Konum

Birincil eylem, görevin tamamlandığı ana yakın durur: vaadin hemen altında, fiyatın yanında, formun sonunda. Kanıt bitmeden basılan düğme erken kalır; kanıt bittikten sonra kaybolan düğme geç kalır. Mobilde düğme kaydırılınca kayboluyorsa görev de kaybolur. Bu durumda ya içerik kısalır ya da tek bir sakin yapışkan çubuk düşünülür. İki birincili yan yana dizi, dar ekranda özellikle bozulur: biri kırılır, ikisi de küçülür, ikisi de “asıl iş” iddiasını kaybeder.

Navigasyon ile CTA’yı karıştırmayın. Menüdeki “iletişim” bir yol; kahramandaki “teklif alın” bir karardır. Yol her sayfada durabilir. Karar, o sayfanın işine aittir. Menüyü birincil düğme gibi boyamak, tüm siteyi aynı çağrıya çevirir ve hiçbir sayfayı özel kılmaz.

Kontrast, odak ve etiket

Düğme arka plandan ayrılmalı ve klavyeyle sırayla ulaşılabilir olmalıdır. Odak halkası görünür değilse büyük kırmızı düğme, klavye kullanan kişi için yok hükmündedir. Yalnız ikonlu sohbet balonu da aynı sorunu üretir; erişilebilir ad ve görünür odak olmadan birincil eylem sayılamaz. Klavye dolaşması ve odak halkası için erişilebilir web tasarımı kararları düğme stiline bağlanmalıdır.

Pasif düğme soluk duruyorsa nedenini yanında yazın. “Eksik alan var” demeden kilitli duran gönder, kirlilikten farklı bir tuzağa dönüşür. Kullanıcı basamadığı şeyi birincil sanır; sonra suçu kendinde arar. Etiket, hata ve düğme aynı cümleyi kurmalıdır.

Yayına çıkmadan önce kontrol listesi

Renk paletini kilitlemeden önce bakış alanını görevle tarayın. Aşağıdaki sıra, tartışmayı “hangi turuncu?”dan “bu ekranın işi ne?”ye çeker.

1. Sayfa cümlesini yazın: kim, hangi kanıt, hangi tek adım.
2. Bakış alanındaki dolu düğmeleri sayın; birden fazlaysa birini indirin.
3. İkincil çıkışı adlandırın; yoksa ekleyin, birincille aynı stildeyse zayıflatın.
4. Aynı metnin kaç kez birincil stilde geçtiğini tarayın; tekrarı bant veya bağlantıya çevirin.
5. Yapışkan, yüzen ve açılır katmanları kapatıp sayfanın hâlâ anlaşılıp anlaşılmadığına bakın.
6. Düğme metnini fiil ve nesne diye okuyun; boş etiketleri düzeltin.
7. Klavye ile sekme sırasını, odak halkasını ve vazgeç etiketini deneyin.
8. Mobilde başparmak bölgesinde iki birincilin çakışmadığını kontrol edin.

Bu liste bir boya paleti değildir. Görev netleşmeden renk denemek, kirli bir düzeni daha parlak hale getirir. Parlak kirlilik, sönük kirlilikten daha zararlıdır çünkü “bir şey yaptığımız” duygusunu verir.

Sıkça Sorulan Sorular

Bir sayfada birden fazla CTA olabilir mi?

Olabilir. Olmaması gereken, aynı bakış alanında iki birincil stilin yarışmasıdır. Kartın kendisi, ikincil metin ve alt bant ayrı görevlerse hiyerarşi bozulmaz. Çokluk sorun değildir; eşit bağırma sorundur.

Sohbet ve “hemen ara” birincil eylem midir?

Çoğu hizmet sayfasında değildir. Asıl iş teklif, sepet veya kayıt ise telefon ve sohbet çıkış kapısıdır. Hepsini dolu düğme yapmak iletişim kanallarını çoğaltmaz; kararı böler. Destek görünür olsun isteniyorsa ikincil stilde ve birincili örtmeden dursun.

Yapışkan CTA her sitede gerekir mi?

Gerekmez. Birincil eylem zaten ilk ekranda ve formun sonunda duruyorsa yapışkan kopya kirliliktir. Uzun karar sayfalarında, kaydırınca kaybolan tek eylemi hatırlatmak için düşünülür. Kısa sayfada yapışkan çubuk, kahramanın yankısıdır.

Düğme rengi hiç önemli değil mi?

Önemlidir; ama sıra ikinci plandadır. Kontrast ve fark edilirlik, seçilmiş birincil eylemi taşır. Üç rakip düğmede “doğru rengi” aramak, yanlış soruyu güzelleştirir. Önce tek hedef, sonra o hedefi taşıyacak kontrast.

Formda gönder ve vazgeç nasıl durmalı?

Gönder birincil, vazgeç ikincil ve yazılı olmalıdır. Yalnızca çarpı ikonu veya gönderle aynı dolu stil, ya tuzağa ya da çift birincile yol açar. Vazgeç, cezalandıran bir bağlantı değil; görünür bir çıkış hakkıdır.

Sonuç ve Sonraki Adım

Sayfanızdaki düğmeler aynı iş için yarışıyorsa önce görevi, sonra hiyerarşiyi netleştirmek gerekir. KepezWeb ile web arayüzünde birincil eylemi, ikincil çıkışı ve tekrarlayan çağrıları birlikte sadeleştirebilirsiniz. İhtiyacınızı teklif al sayfasından iletebilirsiniz.