CTA butonu nedir? İyi bir eylem çağrısı nasıl tasarlanır

Kısaca

CTA, İngilizce call to action kısaltmasıdır. Türkçesi eylem çağrısı. Bir ekranda kullanıcının atmasını istediğiniz adımı taşıyan öğedir: “Sepete ekle”, “Teklif iste”, “Hesap oluştur”.

Bir CTA butonunu dört şey belirler: metni, ekrandaki ağırlığı, boyutu ve yeri. Renk de önemli, ama sanılan nedenle değil. Bunu aşağıda “kırmızı buton” efsanesi üzerinden anlatıyorum.

Butonlar eylem içindir. Jakob Nielsen'in kuralı açık: butonları gezinme için kullanmayın, sayfalar arasında geçişte bağlantı kullanın.

Buton metni: fiil ve nesne

Buton metni, basınca ne olacağını söylemelidir. NN/g'den Anna Kaley, komut adlarının ne olacağını anlatan bir fiil ya da fiil öbeğiyle başlamasını önerir. Fiil tek başına belirsizse arkasına bir nesne eklenir: “Sil” yerine “Klasörü sil”.

Türkçede sıra tersine döner, nesne önce gelir. “Sepete ekle”, “Adresi kaydet”, “Teklif iste”. Kural değişmez: eylemi ve eylemin neye yapıldığını yazın.

Kaley metni 2–4 kelimeyle sınırlar. Nielsen de buton etiketlerinin kısa olmasını, 4 kelimeyi geçmemesini ister. Apple'ın örneği aynı yönde: alışveriş sepetine ürün ekleyen buton için “Add to Cart”.

Yerine	Şunu yazın	Neden
Tıklayın	Kataloğu indir	Ne olacağı belli.
Gönder	Teklif iste	Kullanıcının elde edeceği şeyi söylüyor.
Tamam (silme onayı)	Adresi sil	Okumadan basılan “Tamam” veri kaybettirir.
Devam	Ödemeye geç	Sonraki adımın adı var.

Onay pencerelerinde “Tamam” kullanmayın. Kaley'e göre kullanıcı alışkanlıkla okumadan basabilir. Nielsen de 2008'de butonlara “Kaydet” gibi ne yaptığını söyleyen adlar vermeyi önermişti.

GOV.UK tasarım sistemi, buton metninin butonun yaptığı eylemi anlatmasını ister. Örneği “Save and continue”: servis bilgiyi kaydediyorsa bu etiket, kaydetmiyorsa yalnızca “Continue”. Kaley'e göre aynı komut birkaç yerde geçiyorsa her yerde aynı metinle ve benzer konumda durmalı.

Butonda kısa emir kipini kullanırım: “Sepete ekleyin” değil, “Sepete ekle”. Metnin geri kalanında okura siz diye hitap etsem de butonda kısa olan kazanır. Hitap seçimi ayrı bir tartışma. Mikro metinlerin geri kalanı için UX writing rehberine bakabilirsiniz.

Görsel hiyerarşi: birincil ve ikincil buton

Bir ekranda tek bir ana eylem olur ve en belirgin buton odur. GOV.UK bunu açıkça yazar: bir sayfada birden fazla ana buton kullanmaktan kaçının. Gerekçesi şu: birden fazla ana eylem hepsinin etkisini azaltır ve kullanıcının sırada ne yapacağını bilmesini zorlaştırır.

Apple da belirgin buton sayısını görünüm başına bir ya da iki ile sınırlar. Çok sayıda belirgin buton bilişsel yükü artırır, kullanıcı seçmeden önce daha uzun düşünür.

• Siparişi onayla

  Birincil. Ekranın ana eylemi. Dolgulu ve en belirgin buton. Ekranda bir tane olur.

• Sepete dön

  İkincil. Geçerli ama daha az seçilen yol. Çerçeveli, dolgusuz.

• Kupon kodum var

  Üçüncül. Az kullanılan ya da başka sayfaya götüren eylem. Bağlantı olarak durur.

İkincil eylem kaybolmaz, sadece geri çekilir. Nielsen'e göre en sık seçilen buton varsayılan olmalı ve vurgulanmalı. Command Links yazısında ise bağlantıyı yalnızca ikincil komutlara ayırır.

Bir istisna var: tehlikeli eylem birincil olmaz. Apple'a göre insanlar belirgin butonu bazen okumadan seçer. Bu yüzden veri silen bir eylem, en olası seçim olsa bile birincil rol almaz.

CTA laboratuvarı

Aşağıdaki ürün kartında buton üç kontrolden de kalıyor. Metni, hiyerarşiyi ve boyutu değiştirin, kontrol listesi her seçimde güncellenir.

CTA laboratuvarı

Önizleme

Filtre kahve, 250 g

Örnek ürün kartı

Tıklayın Favorilere ekle

Buton yüksekliği: 28 px

• ✗Kaldı: Metin. Metin ne olacağını söylemiyor. “Tıklayın” her buton için doğrudur, yani hiçbirini anlatmaz.
• ✗Kaldı: Hiyerarşi. İki buton aynı ağırlıkta. Kullanıcı hangisinin ana eylem olduğunu kendisi çözmek zorunda.
• ✗Kaldı: Boyut. Yükseklik 28 px. WCAG'nin 24 piksellik alt sınırını geçer ama Apple'ın 44 pt kuralının altında kalır.

Bu örnekteki buton üç kontrolün üçünden de kalıyor. JavaScript açıkken metni, hiyerarşiyi ve boyutu değiştirip düzeltebilirsiniz.

Ürün kartı ve ölçüler benim örneğim, gerçek bir mağazadan alınmadı. Bir seçim yapın: önizleme ve kontrol listesi birlikte değişir. Seçenekler arasında ok tuşlarıyla da gezebilirsiniz. Önizlemedeki butonlar basılmaz, yalnızca görünüşü gösterir.

Boyut ve dokunma alanı

Buton, parmakla rahat basılacak kadar büyük olmalı. Apple'ın genel kuralı, bir butonun en az 44 × 44 pt dokunma bölgesi olmasıdır. Web'de WCAG 2.2 AA seviyesinde hedef en az 24 × 24 CSS piksel olmalı.

WCAG bu sınırın altındaki hedeflere aralık istisnasıyla izin verir. Ana eylem için ben bu istisnaya hiç güvenmem. CTA, ekranda en çok basılması istenen öğedir.

Görünen boyut ile basılan alan ayrı şeylerdir. Aralık testini ve alanı CSS ile büyütmeyi dokunma alanı kalıbında anlattım.

Yerleşim: buton nerede durmalı

CTA, kullanıcının karar vermek için okuduğu bilginin hemen ardından gelir. Ürün sayfasında fiyat ve seçeneklerin yanında, formda son alanın altında durur. Formlarda GOV.UK ana butonu formun sol kenarına hizalamayı önerir.

İki ya da daha fazla buton yan yana geliyorsa onları bir grup olarak dizin. GOV.UK bunun için ayrı bir buton grubu bileşeni kullanır. Gruptaki bağlantılar da butonlarla aynı hizaya oturur.

“Tamam” ve “İptal” sırası platforma göre değişir. Nielsen'e göre Windows onayı başa, Apple sona koyar. Önerisi, platform sahibinin kuralına uymaktır. Ona göre standarttan sapmak kullanıcıya zaman kaybettirir.

Mobil ürün sayfasında ana butonu ekranın altına sabitlemeyi sık kullanırım. Kullanıcı aşağı kaydırırken eylem gözden kaybolmaz. Ama bu sabit bant içeriğin üstünü örtmemeli. Ödeme adımlarındaki butonlar için checkout kalıbına bakın.

Renk ve kontrast

Butondaki metin okunmalı, buton da çevresinden ayrılmalı. WCAG 2.2'nin 1.4.3 kriteri normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast ister. Büyük metin, 18 punto ya da 14 punto kalın yazı demektir.

1.4.11 kriteri arayüz bileşenleri için 3:1 ister. Metni olan bir butonun çerçevesi zorunlu değildir. Ama butonu tanımak için kenarı gerekiyorsa o kenar 3:1'i tutturmalı, odak göstergesi de öyle.

Devre dışı butonlar kontrast kuralından muaftır. GOV.UK yine de uyarır: devre dışı butonların kontrastı düşüktür ve bazı kullanıcıların kafasını karıştırır. Ben bunun yerine butonu açık bırakıp eksik alanı hata mesajıyla gösteririm.

İki rengi kendiniz denemek için kontrast hesaplayıcıyı kullanabilirsiniz.

“Kırmızı buton daha çok dönüştürür” efsanesi

Pazarlama yazılarında sık dolaşan bir hikâye var: bir sitede kırmızı buton yeşili belli bir yüzdeyle yenmiş. Hikâyenin ilk yayınlandığı HubSpot adresi bugün başka bir yazıya yönleniyor. Orijinal metni açıp okuyamadığım için o rakamı burada yazmıyorum.

Rakam doğru olsa bile genel bir kural vermez. Tek bir sayfada, o sayfanın renkleriyle yapılmış bir testtir. Başka bir sayfada aynı renk sonucu tersine çevirebilir.

Kaynağı açık bir örnek var. HubSpot'un A/B testi derlemesinde Expoze.io'nun ana sayfası, düşük kontrast yüzünden bazı kullanıcılar için zor okunuyordu. Ekip arka planı yeniden tasarladı. CTA butonu aynı kaldı ama CTA tıklamaları %25 arttı. Ekip bunu sayfaya eklenen kontrasta bağlıyor.

Bu, ekibin kendi yorumu. Yazının yazarı ayrıca aynı testlerin herkese aynı sonucu vermeyebileceğini hatırlatır. Benim çıkardığım ders şu: rengi çevresiyle karşıtlık kurduğu için seçin, kendi sitenizde de A/B testiyle doğrulayın.

Benim notum

Audit'lerde en sık gördüğüm CTA hatası metin değil, kalabalık. Hero alanında “Hemen başla”, “Demo iste” ve “Fiyatları gör” aynı dolgulu butonla yan yana duruyor. Ekip üçünün de önemli olduğunu düşünüyor, kullanıcı ise hiçbirini seçemiyor.

Ben bir ekranı çizmeden önce ana eylemin metnini yazarım. Yazamıyorsam ekranın ne işe yaradığına henüz karar verilmemiştir. Diğer butonlar bu cümleden sonra gelir ve ikincil kalır.

Kendi ürününüzün CTA'larına dışarıdan bir göz isterseniz UX Audit buton metinlerine ve hiyerarşiye de bakar. Açılış sayfası kuruyorsanız landing page kalıbı CTA'nın sayfadaki yerini anlatıyor.

Kontrol listesi

1. Buton metni nesne ve fiil taşıyor, 2–4 kelime.
2. Onay pencerelerinde “Tamam” yerine eylemin adı yazıyor.
3. Ekranda tek birincil buton var, diğerleri ikincil ya da bağlantı.
4. Veri silen eylem birincil butonda değil.
5. Dokunma alanı mobilde en az 44 pt, web'de en az 24 CSS piksel.
6. Metin kontrastı en az 4,5:1, gerekiyorsa buton kenarı en az 3:1.
7. Aynı eylem her ekranda aynı metinle ve benzer yerde duruyor.