Tasarım Sistemleri

2017'de bir CTA düğmesinin anatomisi: Ses ve Ton, Stil ve Bileşen en iyi uygulamaları.

Burada bir Tasarım Sisteminin tek bir arayüz elemanı kullanarak nasıl çalıştığını açıklayacağım: kullanıcıyı web sayfanızın ana eylemine yönlendirmekten sorumlu olan CTA düğmesi.

Bu makale, etkili bir harekete geçirici çağrı çağrısı tasarlama ve ekiplerin bu arayüz öğesini birlikte çalışmayı nasıl başarılı bir hale getirebileceği konusunda bazı yönergeler sunmayı amaçlamaktadır.

Ses tonu

Neden bu butona basmalıyım?

a. Bir eylem fiili ile başlayıp birinci şahsa yazınız

CTA düğmeniz “Başlat”, “Al” veya “İndir” gibi bir işlem fiiliyle başlamalıdır. Eylem odaklı.

Michael Aagaard'ın (Unbounce’ın Kıdemli Dönüşüm Optimize Edici’si) yaptığı testte, CTA düğmesi kopyasının ikinci kişiden ilk kişiye değiştirilmesinin tıklama oranlarında% 90 artışla sonuçlandığını tespit etti.

b. beklenti

Çoğu web kullanıcısı, web’de sundukları şeyleri gerçek değerleriyle almakta tereddüt eder. Tecrübe ile, güvenlerini istediklerini elde etmek için sadece kredi kartı numaralarını vermek zorunda olduklarını bulmak için ücretsiz servis vaat eden linklerle yakmaktaydı.

Tıklama dönüşümünü artırmak ve güven oluşturmak için, kullanıcının şüpheciliğini tahmin edin ve onlara sunduğunuz işlemi yaparak onlara ne kazanacaklarını söyleyin. Bir harekete geçirme düğmesi tasarlarken, kullanıcıların sahip olabileceği tüm olası soruları düşünün ve onlara zamanında cevap verdiğinizden emin olun.

c. Aciliyet duygusu

Eylemin cesur, kendine güvenen ve komut veren kelimelerle ifade edilmesi, kullanıcının algılarını, harekete geçmeleri için daha fazla beklememeleri gerektiği ve harekete geçmeyi beklemelerinin bir ceza ya da kaçırılmış fırsat.

d. Kolaylık duygusu

Genellikle, kullanıcının eylemde bulunma konusundaki tereddütü, bir eylemin zor, maliyetli veya zaman alıcı olacağını düşünmekten kaynaklanır. Bu endişelere dikkat ederek, CTA butonunuz daha fazla dönüşüme yol açabilir.

e. Kelimeleri tetikle

Kelimelerin tetiklenmesi, kullanıcının tıklanmasına neden olan kelimeler ve kelime öbekleridir. Göz atmaya devam etmek için kullanıcıya motivasyon sağlamak için gerekli unsurları içerirler. Yapmalarını istediğiniz işlemi yapmaları için onlara iyi bir neden verin. Kullanıcı “planlar” veya “fiyatlandırma” arıyorsa ve CTA düğmeniz “planlar” veya “fiyatlandırma” diyorsa, tıklayacaklardır. Dolayısıyla bu durumda, “planlar” ve “fiyatlandırma” tetikleyici kelimeler olacaktır.

Arama anahtar kelimeleri gibi tetik kelimeleri düşünün!

Jared Spool'un makalede iyi ipuçları var: Doğru Tetikleme Kelimeler.

stil

Nereye tıklamalıyım?

a. şekil

Bilmeniz gereken ilk şey CTA düğmesinin şeklinin ne olduğudur. En popüler iki düğme şekli yuvarlatılmış ve kare kenarlardır ve sizin için en uygun şekil büyük ölçüde sınamaya bağlıdır. Bu faktörü göz ardı etmeyin. Düğme şekli dönüşüm oranlarını etkileyebilir ve etkiler.

b. Boyut

Web sayfalarında, bir elemanın etrafındaki elemanlara göre boyutu önemini gösterir: eleman ne kadar büyükse, o kadar önemlidir. Bazı site eylemlerinin ne kadar hayati olduğuna karar verin ve BTA düğmesini buna göre boyutlandırın.

c. Beyaz boşluk

Bir CTA düğmesinin etrafında boşluk (veya ölü alan) kullanılması, onu birçok öğenin bulunduğu alanlarda ön plana çıkarmanın etkili bir yoludur.

d. Yerleştirme

Bir CTA düğmesinin yerleştirilmesi ziyaretçilerin dikkatini çekmek için kritik öneme sahiptir. Bir web sayfasının üst kısmı gibi belirgin yerlere yerleştirmek, kullanıcıların CTA düğmesini görmesi ve harekete geçmesi nedeniyle daha fazla açılış sayfası dönüşümüne yol açabilir.

Google Materyal Tasarımı standartlarına göre tasarlanmış mobil uygulamaları kullanan tasarımcılar zaten birincil düğmenin (FAB - Float Action Button) ekranın sağ alt köşesinde olacağını biliyor. Yerleşim önemli!

e. Zıt renk

CTA düğmeniz için vurgu rengini ayarlayın ve ona yapıştırın. Markanızın birincil veya ikincil rengini kullanmayın.

Michael Aagaard diyor ki:

En iyi tavsiyem, açılış sayfası düğmelerinizi tasarlarken sağduyulu ve zıt renkler kullanmaktır. Eski güzel “şecere testi” her zaman yardımcı olur. Sayfanızı bir araya getirin, birkaç adım geriye gidin, gözlerinizi kısın ve düğmenizin öne çıkıp çıkmadığını görün. Genellikle turuncu veya yeşil bir düğme deneyerek başlarım, çünkü genellikle testlerde iyi performans gösterirler. Daha derin bir psikolojik neden olduğunu düşünmüyorum, ortalama tasarım nedeniyle çoğu açılış sayfasında öne çıkıyorlar gibi görünüyor. Yine her şey bağlamla ilgilidir ve mor bir düğmenin hem yeşil hem de turuncu varyasyonlardan daha iyi performans gösterdiği testler gördüm.

CTA düğmesinin ekranda neredeyse bir anormallik olması gerektiğini hayal edin. Bunu yapmak için, yakınlık, benzerlik, süreklilik ve ortak bölge gibi bazı Gestalt ilkelerinden kaçının. Sadece bir yasa kullanın: odak noktası. Bunu yaptığınızda, CTA düğmeniz kullanıcı görünümünde vurgulanmış olarak kalacaktır.

Bileşen

Arabirim öğelerinizi bileşenlere dönüştürme zamanı!

a. Tasarımcılar ve Geliştiriciler için bir bileşen olun

Tasarımcılar, Sketch, Adobe XD, Figma, vb. Gibi piyasada bulunan doğru araçları kullanarak bileşenlerde düşünen arayüzler oluşturmalıdır. React, Angular, Vue.js, vb. Gibi bileşenlendirme için bazı ön teknoloji kullanın.

b. Tasarımcılar ve Geliştiriciler için eşit ad sözleşmesi

Artık bileşenlerle çalışıyoruz, ekipler aynı dili konuşmalı. Bunu yapmak için, hem Tasarımcılar hem de Geliştiriciler için bileşenler için aynı adlandırma kuralına sahip olmamız gerekir.

Tepki örneği:
Kroki sembolü örneği:
düğme / birincil düğme
düğme / ikincil düğme

c. Ünite Testi için Optimize Edilmiş

KG ekibi için daha verimli çalışmak için her zaman bileşeniniz için bir tanımlayıcı belirtin. Ve bileşenin hangi bağlamda uygulandığını netleştirin.

HTML örneği:

d. Analytics için optimize edildi

Özel veri özellikleri, sayfadaki içerik hakkında ek bilgi yakalamanın hızlı bir yoludur. Bir kullanıcının sitenin içeriğini nasıl yönlendirdiğini daha iyi anlamanıza yardımcı olan aerodinamik bir çözümdür. Özel veri nitelikleri, HTML 5 spec'in bir yapısıdır ve tüm büyük web tarayıcılarında yaygın olarak desteklenir. Geçerli HTML ve HTML uygulaması çok kullanıcı dostu olduğundan, bu bir dönüş için daha çekici olmasını sağlar.

HTML örneği:

Veri niteliklerini uygulamak ve kullanmak için birçok avantaj vardır:

e. A / B Testi için Optimize Edilmiştir

Yukarıda belirtilen Bileşen optimizasyonunun iyi uygulamalarını uygulayın ve Ses ve Ton ile Tarzın tüm ipuçlarını test etmekten keyif alın.

Tepki örneği:
HTML çıktısı:

  Bugün bira!
“Testin amacı bir asansör almak değil, bir öğrenme almaktır” - Dr. Flint McGlaughlin, MECLABS

Optimizasyon devam eden bir süreçtir. İlk test sonuçlarının olumlu ya da olumsuz olması önemli değil.

“Tabii ki ilk vuruşta bir eve koşmak egoda daha kolay. Ancak optimizasyona bir süreç olarak yaklaştığınızda - çitler için bir kereye mahsus olmak için bir fırsat değil - yol boyunca birkaç bazda durmanın genellikle oyunu kazanmak için gereken şey olduğunu göreceksiniz ”- Michael Aagaard, Unbounce

Hatırlamak

Hiçbir şey taşa yazılmaz. Çok test et. Her şey bağlamla ilgili.

Gelen Pazarlama

Bu makalede sunulan her şey, bir Gelen Pazarlama stratejisiyle birleştirilebilir. Aşağıdaki bağlantıdakiler hakkında daha fazla bilgi edinin:

Referanslar