M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Eylem çağrısı CTA button

bilinen diğer adları CTA · call to action · birincil buton · eylem butonu

Böyle diyorsan: "sayfadaki asıl büyük buton" · "kayıt ol butonu" → bunun adı eylem çağrısı.

Sayfanın kullanıcıdan istediği ASIL eylemin butonu; sayfada bir tane birincil olur.

Eylem çağrısı, kullanıcıdan yapmasını istediğin şeyi taşıyan butondur. Etkisini belirleyen üç şey vardır ve üçü de metinle ilgilidir. Birincisi FİİLDİR: 'Gönder' bir eylemdir, 'Tamam' bir onaydır, 'Devam' hiçbir şey söylemez. İkincisi DEĞERDİR: kullanıcı tıkladığında ne kazanacağını bilmelidir ('Ücretsiz başla' > 'Kaydol'). Üçüncüsü TEKLİKTİR: bir ekranda tek bir birincil eylem olur; iki birincil buton koyduğunda hiyerarşiyi kullanıcıya seçtirmiş olursun ve o da çoğu zaman hiçbirini seçmez. Teknik tarafta ise en sık atlanan şey ayrımdır: bir yere GÖTÜREN şey bağlantıdır (<a>), bir şey YAPAN şey butondur (<button>) — görünüşleri aynı olabilir ama klavye davranışları, sağ tık menüleri ve ekran okuyucu duyuruları farklıdır.

Kapsam: Bu madde birincil eylem butonunu kapsar. Gezinme amaçlı bağlantılar Üst Çubuk ve Alt Bilgi maddelerinde; formun bütününü gönderen buton ise Form Alanı bağlamında ele alınır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
14 gün ücretsiz dene
Kart bilgisi istemiyoruz · tek tıkla iptal
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Hero'ya CTA bloğu kur: tek birincil buton ('Ücretsiz başla' — fiil + değer; 'Gönder' gibi belirsiz değil) + hayalet ikincil ('Detayları gör'); üstünde tek cümlelik vaat, altında mikro-güvence satırı ('Kart bilgisi istemiyoruz · tek tıkla iptal'); buton ilk ekranda (fold üstü) tam görünsün; tıklanınca kilitlenip spinner göstersin (çift submit yok).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

CTA'm huysuz; klasikleri sırayla ele: (1) sayfada 3 dolu birincil buton — göz nereye gideceğini bilmiyor; (2) buton metni 'Gönder/Tamam' — ne olacağı belirsiz (fiil+değer olmalı); (3) mobilde CTA fold altında kalıyor; (4) tıklanınca kilitlenmiyor — çift kayıt; (5) güvence satırı yok, kullanıcı 'kart isteyecekler mi' tereddüdüyle kaçıyor; (6) hayalet buton birincille aynı ağırlıkta boyanmış. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Birincil butondolu, tek

    Sayfanın ASIL istediği eylem; sayfada TEK birincil olur — üç 'birincil' = hiç birincil.

  • 2İkincil (hayalet)çerçeveli

    Alternatif yol ('Detayları gör'); birincilden görsel olarak net ayrışır.

  • 3Vaat başlığıdeğer cümlesi

    CTA boşlukta durmaz; hemen üstünde 'neden tıklayayım' cevabı yaşar.

  • 4Mikro-güvencesürtünme kırıcı

    Butonun dibindeki küçük satır: 'Kart istemiyoruz · tek tıkla iptal' — son tereddütü eritir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ANormalbirincil stil

    Ekranın en belirgin eylemi. Renk, boyut ve konum birlikte çalışır; yalnız renkle öne çıkarmak yetmez.

  • BHover / odak:focus-visible

    Geri bildirim verir. Odak halkası birincil butonun kendi renginden AYIRT edilebilir olmalı; aynı tonla çizilen halka görünmez.

  • CGönderiliyordisabled + spinner

    İstek uçuşta. Buton kilitlenir ve içinde bekleme göstergesi belirir — çift gönderimi engelleyen en basit yol budur.

  • DDevre dışıdisabled + sebep

    Şart sağlanmadı. Neden kapalı olduğu yazılmazsa kullanıcı ne yapacağını bilemez; 'formu tamamla' bile bir cevaptır.

  • EYıkıcıkırmızı + onay

    Geri alınamaz eylem. Renk uyarır ama yeterli değildir; onay ister ve varsayılan odak GÜVENLİ seçenekte durur.

KODDAKİ ADLARI
UXtek-birincil kuralıhiyerarşi
Metinfiil + değer ('Ücretsiz başla')belirsizlik yasak
HTMLtype=submit + disabled kilidiçift gönderim koruması
ERİŞİLEBİLİRLİK & SIK HATA
  • Bir yere götüren şeyi <a>, bir şey yapan şeyi <button> yap. Görünüşleri aynı olabilir ama klavye davranışı, yeni sekmede açma ve ekran okuyucu duyurusu farklıdır.
  • Buton metni tek başına anlamlı olsun (WCAG 2.4.4): sayfada beş tane 'Devam' varsa ekran okuyucu kullanıcısı hangisinin ne yaptığını bilemez.
  • Dokunma hedefi en az 24px olsun (WCAG 2.5.8); birincil eylem küçük çizilirse en çok mobilde kaybedersin.
  • Odak halkasını kaldırma ve butonun kendi renginden ayırt edilebilir yap; birincil buton genelde koyu olduğu için varsayılan halka üstünde kaybolur.
  • disabled bir butonu tek geri bildirim olarak kullanma: neden kapalı olduğunu söyle, yoksa kullanıcı formu tamamladığını sanıp bekler.
SIK KARIŞTIRILANLAR

Anahtardan farkı. Buton bir EYLEM başlatır ve biter; anahtar bir DURUM değiştirir ve o durum kalıcıdır. 'Bildirim gönder' bir eylemdir, 'Bildirimler açık' bir durumdur. Eylemi anahtarla göstermek kullanıcıya geri alınabilir bir şey sunuyormuş gibi görünür — oysa gönderilen bildirim geri alınamaz.

Anahtar sayfasına git →

Vitrinle ilişkisi. Vitrinin işi tek bir eylem çağrısını öne çıkarmaktır; bu yüzden vitrine ikinci bir birincil buton koymak ikisinin de işini bozar. Doğru düzen şudur: bir birincil eylem, yanında istenirse sessiz bir ikincil seçenek ('Nasıl çalışır?'). İki eşit ağırlıkta buton, kullanıcıya karar verdirmek yerine kararı geciktirir.

Vitrin sayfasına git →

KAYNAKLAR
Bu parçayı 12 ayrı stilde gör. Tam sayfa stil örneklerindeki landing bu parçadan da kurulu; stilin parçayı nasıl giydirdiğini yan yana karşılaştırabilirsin — stil parçayı değiştirmez, giydirir.

Tam sayfa örneğini aç →üstteki şeritten stil atlayabilirsin

İLGİLİ PARÇALAR

Anahtar switch / toggleVitrin heroForm alanı form fieldKip pencere modal / dialog

AYNI AİLEDE · İÇERIK VE YERLEŞIM