İnsanları Tıklattıran Düğmeler İçin 9 Önemli CTA Tasarım İpuçları

Harekete geçirici mesajınız (CTA), pazarlama stratejinizin doruk noktasıdır. Bir satın alma, kaydolma veya indirme istiyor olsanız da. Bu noktaya kadar her şey potansiyel müşterileri açılış sayfanıza çekmekti. Ve bazen, anlaşmayı imzalamak için sadece birkaç kelimen olur.

Bu nedenle CTA butonunuz sitenizin en önemli tasarım öğesidir. Çünkü pasif ziyaretçileri aktif kullanıcılara dönüştürebilir.

Harekete geçirici mesaj düğmeleri basit görünüyor. Ama onları karıştırmak kolaydır. Ya da tamamen özlenmek. Bu 9 CTA tasarım ipucu, bu dönüşümü elde etmenizi sağlayacaktır. Ayrıca, birçok yararlı örnek:

1. Düğmenizin tıklanabilir görünmesini sağlayın
2. Kopyanızla açıklayıcı olun
3. Boyut ve boşluk düzgün
4. Birinci şahıs kullanarak bağlanın
5. Aciliyet yaratın ve güçlü fiiller kullanın
6. Bir alt başlık deneyin
7. A/B testi varyasyonları
8. Mobil versiyona dikkat

CTA düğmenizin tıklanabilir görünmesini sağlayın

Bir düğmenin 'tıklanabilir' görünmesini sağlamak aptalca geliyor. Ancak sitelerin ne sıklıkla yanlış yaptığına inanamazsınız. Ve çoğunlukla düğmenin anahattı ve rengiyle ilgilidir.

Dönüşüm oranı eğilimleri gelir ve gider. Arka plan rengine dönüşen ince bir kenarlık ve metin içeren şeffaf “hayalet düğme” gibi. Havalı görünseler de, daha az dikkat çekme eğilimindedirler. Etkili bir CTA'nın yapması gerekenin tam tersi.

Bu tasarımın genellikle çalıştığı tek zaman ikincil bir düğmedir:

Kaynak: UX Hareketi

Açıkça tıklanabilir olmayan CTA düğmelerinin başka bir örneği. Elbette, bu tasarım ajansının açılış sayfası harika görünüyor. Ancak bu vaka çalışmasını kaydırdığınız için affedilirsiniz:

Peki, insanları nasıl tıklatırsınız? Daha yüksek dönüşüm oranları için, düğmeniz büyük, kalın olmalı ve seçtiğiniz renk şemasıyla çalışmalıdır.

Netflix, dikkatinizi çekmek için imza kırmızısını kullanır. Neredeyse bir dur işareti gibi:

Zıt bir renge sahip olmak için de işe yarayabilir, bu yüzden öne çıkıyor. BigCommerce e-ticaret platformunun burada yaptığı gibi:

Bu, kutudaki metin için de geçerlidir. Doğru okuyabilmek için zıt olduğundan emin olun.

Degradeler aynı marka renk şeması içinde de çalışabilir. Her şeye modern, daha genç bir his veriyorlar:

Kaynak: Pazartesi

Buradaki tavsiyem, CTA tasarımınızı açık tutmaya çalışmak olacaktır. Alışılmışın dışında bir şey yapmak iyi bir fikir gibi gelebilir ama insanlar alışkanlık yaratıklarıdır. Ve kaç kişinin bu noktayı kaçıracağına şaşıracaksınız.

Kopyanızla açıklayıcı olun

En basit dönüşüm oranı optimizasyonu (CRO) taktiklerinden biri harika metin yazarlığıdır. Ama sadece büyük metin parçalarıyla değil. Mikrokopi de aynı derecede önemlidir ve daha küçük ayrıntıları kapsar.

Bunu genellikle iletişim formlarında ve sosyal medya durum güncelleme çubuklarında görürsünüz. Facebook'un ünlü "Aklında ne var?" veya LinkedIn'in “Bir gönderiye başlayın”.

Mikrokopi yardımcı olabilir:

• Kullanıcılara ne yapacaklarını söyleyin
• Önerilerde bulunun
• Endişeleri gidermek
• Bağlam sağlayın

CTA düğmesi kopyanız başka bir örnektir. Ve insanlara tam olarak ne alacaklarını/tıkladıklarında ne olacağını söylemelidir.

Bu eskiden IMPACT'ın CTA düğmesiydi. "Ücretsiz indirin". Çok yaratıcı değil, ha?

Kaynak: ETKİ

Ancak daha açıklayıcı hale getirerek dönüşümleri %78,5 artırdılar. “Bana nasıl daha fazla müşteri çekeceğimi göster” açıkça daha çok ilgi gördü:

Sadece “Buraya tıklayın” yazmak cazip geliyor. Ancak kullanıcıların ilgisini çekecek ve istenen eyleme ilham verecek pek çok alternatif var.

Peki, ne yazmalısın? İlk olarak, dönüşüm amacını tanımlamanız gerekir. Kullanıcıların dönüşüm hunisinde nerede oldukları ve nereden geldikleri (trafik kaynağı) ile uyumlu hale getirmek istiyorsunuz.

Kaynak: KlientBoost

O zaman, sağladığınız şeyin değerini vurgulamanız gerekir. Ve itirazları ele alın.

Kaynak: Pazarlama Örnekleri

Bu çok eşsiz bir süreç. Ve bu sizin nişinize ve markanızın sesine bağlı olacaktır. Ancak hangi ifadeyi seçerseniz seçin, düğme metnini kısa ve öz tutmayı unutmayın.

Düzgün boyutlandırın ve boşluk kullanın

CTA düğmesi tasarımı da renkten çok daha fazlasıdır. Düğme boyutu, tıklama oranını gerçekten etkileyebilecek başka bir küçük ayrıntıdır. Ve beyaz boşluk, metnin kendisi kadar önemlidir.

Bunların çoğu web tasarımınıza bağlı olacaktır. Negatif (beyaz) boşluk, bir sayfadaki belirli öğelere dikkat çeker. Dağınık bir ana sayfa istemezsiniz. Ziyaretçinin izlemesi için bariz bir yol olması gerekir.

Airbnb, doğru yapılan negatif alanın en iyi örneklerinden biridir. Ve daha belirgin hale getirmek için zıt bir renk:

Buffer'ın ana sayfasında biraz daha fazlası var ama yine de CTA düğmesini ana kopyaya yakın tutuyorlar. Ayrıca, hayalet düğmeleri etkili bir şekilde kullanma örneği. Bu, daha sonra ne yapacağınızı çok net bir şekilde ortaya koyuyor:

Düğmeniz ne kadar büyükse, o kadar dikkat çekicidir. Ve dikkat çekmek için öne çıkması gerekiyor. Ancak sayfayı kaplayacak ve kullanıcı deneyimini bozacak kadar değil.

Migrene yatkınsanız, şimdi başka yere bakın. İşte nasıl yapılmayacağının bir örneği:

Kaynak: Justinmind

Buradaki pek çok öğe bir düğme gibi görünüyor. Bu sitenin ziyaretçilerin neye tıklamasını istediğini bildiğinden bile emin değilim.

Buna karşılık, Spotify'ın açılış sayfasında ilk gördüğünüz şey nedir?

Devasa "Go Premium" düğmesi, değil mi? Net bir kullanıcı yolu bu şekilde tasarlanır.

Son olarak, iyi örnekler için CTA tasarımları hakkında fark ettiğiniz başka bir şey var mı? Bir kez daha bakarsanız, hemen hemen hepsinde ortak olan bir şey göreceksiniz.

Bilim adamları, insanların “keskin noktaların aksine yumuşak eğrileri olan şekilleri” sevdiğini buldu. Göze daha hoş geliyorlar ve bizi daha huzurlu hissettiriyorlar. Bu nedenle, en etkili harekete geçirici mesaj düğmeleri, köşeleri yuvarlatılmış dikdörtgenlerdir.

Kaynak: CleverTap

Bir nedenden dolayı en popüler formattır. Ama farklı seçenekler deneyin. Kitleniz başka bir şeyi tercih edebilir.

Birinci şahıs kullanarak bağlanın

Daha iyi CTA tasarımı bir ince ayar uzakta olabilir. Bazen tek bir kelime.

Metin yazarlığında bize “siz” kelimesini kullanmamız öğretilir. Çünkü okuyucuya doğrudan kendisiyle konuşuluyormuş gibi hissettiriyor. Yani bunun düğme kopyanız için de geçerli olacağını düşünüyorsunuz, değil mi? Garip bir şekilde, pek değil.

Unbounce, açılış sayfasındaki kopyayı "30 günlük ücretsiz denemenizi başlatın " dan "30 günlük ücretsiz denememi başlatın" olarak değiştirmenin tıklama oranlarını %90 oranında artırdığını keşfetti.

Peki, bu neden? Eh, birisi bir ürüne bağlı hissettiğinde, dönüşme olasılığı daha yüksektir. Onlar hakkında hiçbir şey bilmek zorunda kalmadan bu kişisel dokunuşu verir.

Pazarlama psikolojisi, satın alma kararlarının çoğunlukla duygulara dayalı olduğunu göstermektedir. Bu nedenle, web sitenizin ziyaretçisinin kendi seçimi gibi hissetmesini istiyorsunuz.

“Benim” yazmak, kullanıcının yapmak üzere olduğu eylemi görselleştirmesine yardımcı olur. Onlara kontrol verir ve (umarız) onları karar vermeye yönlendirir.

Ayrıca, anında değer kazanacaklarını gösterebilir. Crazy Egg'in ana sayfasında olduğu gibi:

Kaynak: Çılgın Yumurta

1-800 Contacts, dünyanın en büyük kontakt lens mağazasıdır. Ama aynı şeyi yapıyorlar. CTA düğmelerinin yalnızca bir kişiye yönelik olduğundan emin olurlar:

Kaynak: 1-800 Kişi

Pek çok şirket bu tekniği kullanmaz. Bu, gördüğünüzde göze çarpıyor demektir. Öyleyse neden denemiyorsun?

Aciliyet duygusu yaratın ve güçlü fiiller kullanın

Kopyanızın bir aciliyet duygusu yaratması ve kullanıcıların dikkatini çekmesi gerekir. Bu, özellikle e-ticaret işletmeleri için iyi çalışır. “Şimdi” ve “bugün” gibi kelimeler kullanmak, harekete geçmeye yardımcı olabilir. Çünkü teklifin sonsuza kadar sürmeyeceğini öne sürüyorlar.

"Şimdi satın al" bir klasiktir. Ancak CTA tasarımımızla bundan daha iyisini yapabiliriz.

Kaynak: GoSquared

Aşağıdaki gibi ifadeleri deneyebilirsiniz:

• “Bugün kendinizi şımartın”
• “İndirimin kilidini hemen aç”
• “Tek seferlik ücretsiz indirme”

Ayrıca teklifinizi çekici kılmak ve merak uyandırmak istiyorsunuz. Öyleyse, güçlü bir fiille başlayın. Bir çaba olacak gibi görünen bir şey değil. Bu insanları ertelemenin kolay bir yolu.

İşte ne demek istediğime dair birkaç örnek:

Sol taraf, kullanıcılarınızın tıklamaktan bir şeyler alacağına benziyor. Sağ taraf, zamandan veya paradan vazgeçmeleri gerekecek gibi görünüyor.

Siz de gerçekten yaratıcı olabilirsiniz. Huemor'un ana sayfasının bu versiyonu gibi:

Kaynak: FastCapital360

Veya Humboldt County'nin ona mistik bir dokunuş katan eski açılış sayfası:

Kaynak: ConEmprendimiento

Ekibinizle beyin fırtınası yapın. Ne kadar gülünç olursa olsun. Ne bulacağınıza ve sonunda kullanacağınıza şaşıracaksınız. Ama hangi kelimeyi seçersen seç, karşı tarafta verdiğin sözü yerine getirmeyi unutma.

Harekete geçirici mesaj düğmenizin yanında bir alt başlık deneyin

Bazen insanların biraz dürtmeye ihtiyacı vardır. Ve CTA düğmenizin altındaki biraz metin hile yapabilir. Sıradan bir "alt başlık" değil. Ama bunu anlatmanın en kolay yolu.

Düğme metnini başlık olarak düşünürsek, göreceğiniz en popüler alt başlık “Kredi kartı bilgisi gerekmez” olacaktır. Ama seninki her şeyi söyleyebilir. Ve onunla biraz yaratıcı olmak eğlenceli.

Çoğu zaman, potansiyel müşteri güvenini vermek için kullanılırlar. Ve insanların sahip olabileceği ana acı noktalarını ele alabilirler:

Kaynak: CoSchedule

CoSchedule, kullanıcıların bunun yalnızca ücretsiz bir deneme olduğunu düşünebileceğini anlıyor. Yani neden olmasın? Sonsuza kadar ücretsiz” açıklamasını yapıyor.

Bunları bazı sosyal kanıtlar eklemek için de kullanabilirsiniz:

Kaynak: Basecamp

Bu size anında güvenilirlik sağlar çünkü kullanıcılar, başkalarının size zaten güvendiğini açıkça görebilir. İnsanların bu kadar çok abonenin olması gerektiğini düşündüğü için FOMO'ya da ilham verebilir.

Hizmetinizle birlikte gelen özel bir teklifiniz veya ekstra değeriniz varsa, bunu vurgulamak için alt başlığınızı kullanın:

Kaynak: Moz

Mikrokopi, marka sesinizin parlaması için bir şanstır. Tek bir cümle bile olsa. Bu nedenle, uygunsa biraz arsız olmaktan korkmayın:

Kaynak: KlientBoost

Ayrıca, insanlar tıkladıktan sonra tam olarak ne olacağı konusunda da net olabilirsiniz. Anlat onlara:

• Ne elde edecekler (yeni pazarlama fikirleri)
• kaç tane (17+)
• Ve neden umursamalılar (sahip olduklarınızdan daha iyiler)

Bu örnekleri ilham almak için şablon olarak kullanın. Ya da tamamen farklı bir şey yapın. Sadece marka kimliğinize uyduğundan emin olun ve onunla eğlenin.

A/B testini unutmayın

Çoğu CRO aracı, kullanıcı deneyimini (UX) iyileştirmeyi amaçlar. Ve bunu zaten web sayfalarınızın ana bölümleriyle yapıyor olabilirsiniz. Ama bunu küçük elemanlarla da yapmalısın.

Amazon, CTA düğmesi tasarımları konusunda çok seçicidir. Özellikle 3. parti kullanımı ile. Bu nedenle, kendi kurallarınızla herhangi bir kuralı ihlal etmediğinizden emin olun.

Bundan sonra, düğme tasarımınızda yapacağınız küçük değişikliklerin büyük bir etkisi olabilir. Bu nedenle, farklı CTA düğmeleri türlerini karşılaştırın. Ardından aşağıdakilerin A/B testi varyasyonları:

• Düğme rengi
• CTA kopyası
• Yazı tipi
• Sayfa tasarımına yerleştirme
• Açılır pencereler
• İletişim formları

Kaynak: Snov

Daha önce tartıştığım gibi, bazen yalnızca bir kelimeyi değiştirmek, dönüşüm veya tıklama oranını artırabilir. Ancak konuya girmeden önce, ziyaretçilerin sitenizde nasıl gezindiğini anlamanız gerekir.

Şunlar gibi şeyler öğrenmek istersiniz:

1. Hangi unsurlarla etkileşime girmeye çalışıyorlar?
2. Nereden geliyorlar
3. Sitenizin kullanıcı yolculuğu/satın alma hunisi
4. İnsanların orada olma motivasyonu

Kaynak: GIPHY

Bu bilgiyi aldıktan sonra, varsayımlara değil gerçeğe dayalı şeylerle deneyler yapabilirsiniz.

A ve B sürümünü CTA tasarımıyla karşılaştırmak genellikle daha kolaydır. Ancak bunu artırabilir ve çok değişkenli testi deneyebilirsiniz. Daha basit, genellikle ilk başta daha iyidir. Bu şekilde, net bir kazananınız olacak.

Ancak bundan sonra o kazananı başka bir versiyona karşı denemenizi engelleyen hiçbir şey yok. Her zaman test etmeli ve karşılaştırmalısınız. İşe yarayan bir şey bulsan bile. Başarılı markaların yaptığı budur.

Mobil versiyona dikkat

Bitirmek için hızlı bir ipucu. Tasarım öğeleriniz mobil ekranda çok farklı görünecek. Çok daha küçük bir ekran ve daha az pikselle çalışıyorsunuz. Böylece dağınıklık çok daha kolay hale geliyor.

Ele aldığımız her şey mobil sürümünüzde daha yaygın hale geliyor. Kontrast renklerin daha fazla öne çıkması gerekir:

Negatif alan bir öncelik olmalıdır:

Ve alt başlığınız bile farklı bir yere oturabilir. Mobil kullanıcılar altta görecek kadar aşağı kaydırmayabileceğinden:

Bu grafikler için CleverTap'e sesleniyorum

Genel olarak mobil cihazlarda UX'inize daha fazla düşüncenin girmesi gerekiyor. Çünkü mobil, tüm küresel arama trafiğinin yarısından fazlasını oluşturuyor. Masaüstü sürümünüzün çevrilmesini bekleyemezsiniz. Ve biraz çaba, çok daha yüksek bir tıklama oranıyla sonuçlanabilir.

Çözüm

Etkili CTA tasarımı, bu küçük ayrıntıların birçoğundan oluşur. Bunu birçok kez söyledim, ama en küçük ince ayar, gereken her şey olabilir. Çerçevenin rengi veya şekli kadar önemsiz bir şey bile.

A/B testi, bilmenin tek yolu. Üstelik bunu yapmak için pahalı bir CRO aracına bile ihtiyacınız yok. Sadece dönüşümlerinizi izleyin. Bir değişiklik yap. Ve normal sayıdan bir artış veya azalma olup olmadığına bakın.

Harekete geçirici mesajınıza hak ettiği ilgiyi göstermeniz yeterli. Yeni bir müşteri veya kaybedilen bir fırsat arasındaki fark olabilir.

Son zamanlarda herhangi bir orijinal CTA tasarımı gördünüz mü? Dönüşümleri artıran küçük bir değişiklik yaptınız mı? Aşağıdaki yorumlarda bize bildirin.