“Eylem Çağrısı” Düğmeleri Yönergeleri, En İyi Uygulamalar ve Örnekler

Web sitelerinde harekete geçirme düğmeleri genellikle ihmal edilir. Tasarımcılar bazen çekici olmanın ve genel tasarıma uygun olmanın ötesinde, iyi bir harekete geçirme çağrısının ne yaptığını tam olarak anlamıyorlar. Ancak harekete geçirme düğmeleri, onları neyin etkili kıldığına dair bir anlayış olmadan tasarlanamayacak kadar önemlidir. Ne de olsa, harekete geçirici mesajın ana noktası ziyaretçilerin yap bir şey.

En azından renk, ölçek, dil ve diğer faktörlerin harekete geçirme ifadesinin dönüşüm oranını nasıl etkilediğine dair temel bir anlayış kazanmak önemlidir. Buradaki kavramlar karmaşık değildir, ancak belirli bir tasarımda mümkün olan en etkili harekete geçirme düğmelerini oluşturmak için biraz önceden düşünülmüş ve planlanmışlardır. Bu noktaların her biri hakkında daha fazla bilgi ve daha fazlası için okumaya devam edin.

"Harekete Geçirme Çağrısı" Düğmelerinin Amacı

Harekete geçirme düğmeleri çeşitli işlevler sunabilir. Hepsinden sonra, “eylem çağrısı” gerçekten biraz belirsiz. Tek anlamı, asıl amacın sitenize bir ziyaretçi getirmektir. bir şey yap. Bir şeyin, alışveriş sepetine bir ürün eklemesi, bir şey indirmesi, bilgi isteme veya başka bir şey hakkında olabileceği anlamına gelir..

Harekete geçirme düğmelerinin bu kadar çeşitli amaçları olduğu için, düğmenin ne elde etmeyi hedeflediğine çok dikkat etmek gerekir. Site türü, hedef pazar ve istenen eylemin tümü, bir harekete geçirme ifadesinin en iyi nasıl tasarlanmasında rol oynayabilir..

"Harekete Geçirme" Düğmeleri Türleri

Harekete geçirme düğmeleri için birkaç farklı çağrı türü vardır. Her tür, ziyaretçilerin belirli bir işlemi gerçekleştirmesini hedeflerken, bu işlem önemli ölçüde değişebilir. Aşağıda, gerçekleştirmenizi istedikleri eyleme bağlı olarak en sık kullanılan harekete geçirme düğmeleri vardır..

1. Sepete Ekle Düğmeler

E-ticaret siteleri genellikle bir dizi harekete geçirme düğmesi kullanır, ancak en çok kullanılanlar “Sepete ekle” buton. Bu düğmeler genellikle tek tek ürün sayfalarında görünür. Amaçları, müşterileri bir ürün almaya teşvik etmektir. Alışveriş sepetine eklenen düğmelerdeki genel tasarım öğeleri basit ifadeler içerir (örneğin “Sepete ekle” veya “Sepete ekle” veya “Şimdi satın al“) ve simgelerin kullanımı (genellikle bir çanta veya alışveriş sepeti).

2. İndirme Düğmeleri

İndirme düğmeleri, bir ziyaretçiyi bir öğeyi ele geçirmesi için teşvik etmeye çalıştıkları sepet düğmelerine eklemeye benzer. İndirme düğmeleri söz konusu olduğunda, birçok tasarımcı diğer düğme türlerinden (sürüm bilgisi veya indirme boyutu gibi) daha fazla bilgi içermeyi tercih eder..

3. Deneme Düğmeleri

Bazı siteler, ziyaretçilerini genellikle ücretsiz deneme şeklinde tekliflerini denemeye teşvik eder. Bu, siteye bağlı olarak ücretsiz indirme veya ücretsiz bir hesap olabilir. Bazı siteler “Az daha çoktur” Felsefe ve dili düğmelerinde minimum tutmaya devam ederken, diğerleri denemenin içeriği hakkında daha fazla bilgi vermeyi sever.

4. Daha Fazla Düğme Öğrenin

Daha fazla bilgi edinin düğmeleri genellikle bir teaser bilgi bloğunun sonunda kullanılır (genellikle ana sayfada). Bu düğmeler genellikle basittir, ancak ziyaretçilerin dikkatini çekmek için genellikle.

5. Kaydol Düğmeleri

Kayıt düğmeleri en yaygın olarak iki farklı sürümde görünür. İlk tip genellikle doğrudan bir kayıt formu ile ilişkilidir. İkinci tip genellikle benzer bir şekilde kullanılır. “Sepete ekle” düğmeler, kullanıcıların gerçekten bir kayıt formuna ulaşmadan önce bir hizmet veya hesap satın alma veya kaydolma yolu olarak.

Diğer harekete geçirme butonları da vardır, fakat bunlar en yaygın olanlarıdır. Yukarıda belirtilenler için geçerli olan kurallar muhtemelen tasarladığınız diğer herhangi bir harekete geçirme düğmesi için de geçerli olacaktır..

Negatif Boşluğu Etkili Kullanma

Harekete geçirme düğmelerini çevredeki içerikten ayırt etmesini ve site ziyaretçilerinizin dikkatini çekmesini istiyorsunuz. Bu amaçla, bu düğmelerin çevresindeki negatif boşluklardan yararlanmanız gerekir. İçeriğiniz ve harekete geçirme ifadeniz arasında boşluk bırakın. Bu, daha fazla bilgi almak gibi, başkalarına ekleyeceğiniz gibi, düğmelere ekleme gibi bazı düğmelerde daha az önemli (ve daha az yaygın) olmasına rağmen, daha fazla alanla daha iyi çalışır..

Düğmelerin etrafındaki negatif boşluk miktarını, düğmelerin kendisiyle boyutlandırmak önemlidir. Bu oranla ilgili. Düğmenizin, etrafındaki alanın ve etrafındaki içeriğin, boyut eşitsizlikleri olsa bile, hepsinin bir araya geldiği gibi görünmesini istiyorsunuz. Doğru görünmelerini sağlamak için işleri biraz dolaştırmanız gerekebilir.

Bazı kurallar:

Düğmenizin etrafında yeterince boşluk olduğundan emin olun, böylece dağınık hissetmez
Ne kadar yer ekleneceğini belirlerken, üçte bir kural veya Altın Oran gibi ilkeleri göz önünde bulundurun
Negatif alan, diğer içeriğinizden sıyrılmak için harekete geçirme düğmenizin odasını verir ve ayırır

Boyut ve renk

Eylem düğmelerine ne kadar büyük olduğun çok önemli. Çok büyük bir düğme etrafındaki herşeyi zorlayacak. Çok küçük bir düğme bir sayfadaki diğer tüm içeriğin karıştırılmasında kaybolur. Düğmenizin, tasarımın ezici olmadan göze çarpacak kadar büyük olmasını istiyorsunuz..

Renk, düğmelerinizin boyutunu dengelemeye yardımcı olmak için harika efektler için kullanılabilir. Daha büyük düğmeler için tasarımınızın içinde daha az belirgin olan bir renk seçin (ancak yine de arka planla dikkat çeker). Daha küçük bir düğme için, düğmenin gerçekten açılmasını sağlamak için daha parlak, kontrast renk seçmek isteyebilirsiniz. Her iki durumda da, kullandığınız rengin düğmeyi sitenin genel tasarımıyla çakışmadan ayırdığından emin olun.

Bazı kurallar:

Harekete geçirme düğmeleriniz ideal olarak belirli bir sayfadaki en büyük düğmeler olmalıdır
Küçük düğmelerin daha belirgin olmasını sağlamak için kontrast renkler kullanın
Büyük boy düğmeleri daha iyi sığdırmak için daha az belirgin renkler kullanın
Eylem düğmelerine basarsanız, tasarımınıza ezici olmadan dikkat etmeniz gerekir

Dil

Harekete geçirme düğmeleriniz için kullanmayı seçtiğiniz ifadelerin tam olarak çevrilmesi büyük bir etkiye sahip olabilir. Karşılaştırmak “Şimdi satın al” ile “Sepete ekle“. Biri diğerinden çok daha acil. Ya nasıl “Bedavaya deneyin” ile “Ücretsiz deneme“? Biri diğerinden çok daha keskin ve daha çok öne çıkıyor.

Harekete geçirme düğmelerinde kullandığınız dil, olabildiğince düz ve basit olmalıdır. Bir düğmeye tıklandığında ziyaretçilerin tam olarak ne alacaklarını bir bakışta bilmelerini istersiniz. Sorguladıkları takdirde, bu duraklattıkları anlamına gelir, bu da dönüşüm oranlarının düşmesine neden olabilir.

Yazı tipi boyutlarını da unutma. Eylem çağrınızdaki düğmenin metni, kalın ve kalın olmalı, düğmenin kendisinin boyutuna ve rengine uygun olmalıdır. Yeterli kontrast olduğundan ve metnin okunmasının kolay olduğundan emin olun.

Bazı kurallar:

Basit, doğrudan bir dil kullanın
Ana metin için düğmede kalın, kalın bir font kullanın
Dilin açıkça belirli bir eylemi gerektirdiğinden emin olun.

Aciliyet Yarat

Sitenizdeki ziyaretçilerin, istediğiniz eylemleri olabildiğince az düşünerek gerçekleştirmelerini istiyorsunuz. Ziyaretçilerinizi aldatmak istemezken, durmalarına ve yaptıklarını göz önünde bulundurmalarına daha fazla fırsat verirken, onlara söylemeleri için daha fazla fırsat veriyorsunuz. “yok hayır”.

Düğmelerinizin onlara hemen hareket etmeleri gerektiği izlenimini vermelerini istiyorsunuz. Anı hakkında kararlarını hemen vermelerini teşvik etmek istiyorsun. Bu, her harekete geçirme ifadesi düğmesi için (özellikle yüksek biletli ürünler satın alanlar için) işe yaramazken, düşük maliyetli veya ücretsiz işlemler için, ziyaretçilerin çok az tahminle tıklamaları istenir.

Bazı kurallar:

Ziyaretçilerinizi derhal harekete geçmeye teşvik edin
Ziyaretçilerinize duraklatmak için herhangi bir neden vermeyin
Acil olma önemli olsa da, ziyaretçilerinizi hiçbir şekilde yanıltmayın.

Ekstra Bilgi Verin

Uygun olduğunda, ziyaretçilere düğmeyi tıklarlarsa ne alacakları hakkında ek bilgi vermek için harekete geçirme düğmelerini kullanın. Bu en çok deneme düğmelerinde veya indirme düğmelerinde görülür. Ekstra bilgilerin ortak örnekleri arasında, ücretsiz bir denemenin süreceği bir süre veya bir dosya indirme boyutu bulunur. Sürüm bilgisi de sık görülür.

Ekstra bilgi eklerken, odaklanmak için gerçek eylem çağrısına odaklanmanız gerektiğini unutmayın. Ziyaretçilerin ilgisini çekecek dilin metninin en belirgin olduğundan ve diğer bilgilerin çok daha az görünür olduğundan emin olun.

Bazı kurallar:

Yalnızca kullanıcı deneyimine katkıda bulunduğunda ekstra bilgiler ekleyin
Ekstra bilgiler sadece bazı eylem çağrı butonları için, özellikle de indirme veya deneme butonları için uygundur.
Ana eylem çağrısının hala düğmenizdeki en belirgin metin olduğundan emin olun

öncelik

Birden fazla varsa, sayfanızdaki harekete geçirme düğmelerine öncelik vermek önemlidir. Bu, çeşitli şekillerde yapılabilir, ancak en yaygın olanı renk ve boyut kullanımıdır.

Bir sayfadaki en önemli düğmeyi vurgulamak veya daha az önemli olanların daha az belirgin görünmesini sağlamak için renk kullanın. Veya en önemli düğmenin öne çıkmasını sağlamak (daha büyük hale getirerek) ve daha az önem taşıyanları vurgulamak için boyutu kullanın.

Simgeler ve Görüntüler

Harekete geçirme düğmelerine görsel ipuçlarını dahil etmek de dönüşüm oranlarını artırmanıza yardımcı olabilir. Bir alışveriş sepeti bir simge bir “Sepete ekle” Örneğin, düğme veya indirme düğmesindeki bir ok her ikisi için de iyi örneklerdir. Kullanılacak benzersiz simgeleri de düşünün, ancak düğmenin ne için olduğunu açıklığa kavuşturarak simgenin kullanıcı deneyimine kattığından ve herhangi bir karışıklık eklemediğinden emin olun.

Bazı kurallar:

Kullandığınız simgelerin, kafanız karıştırmak yerine, düğmenizin anlamını netleştirmeye yardımcı olduğundan emin olun
Kolayca tanınan simgeler, ziyaretçilerinize anında anlam katabilir
Anlamları hala açık olduğu sürece, daha az kullanılan simgeleri kullanmaktan korkmayın

Örnekler

Burda biraz var eylem butonlarına harika çağrı örnekleri. Hepsi yukarıdaki kurallara tam olarak uymamakla birlikte, mükemmel olarak kabul edilecek kriterleri karşılamaktadır..

Canlı yayın - "Şimdi satın al" (ücretli seçenekler için) ve "kaydol" (ücretsiz seçenekler için) düğmelerini ayırt etmek iyi bir stratejidir.

Windows 7 - Büyük, yeşil renkli "Windows7 Al" düğmesi ziyaretçilerin görmesi için kolaydır.

Dosya Paylaşımı HQ - Buradaki parlak yeşil düğme gerçekten beyaz arka plana karşı öne çıkıyor.

seyir defteri - "İndir" ve "Satın al" düğmeleri için farklı renkler kullanmak onları ayırır ve "Satın al" düğmesine öncelik verir.

TasteBook - Bu düğme bir simgeyi mükemmel şekilde kullanır ve öne çıkmak için daha büyük, kalın metin kullanır.

GoodBarry - Eylem düğmesine başka bir parlak yeşil çağrı.

Lifetree Creative - Aynı yazı tipini vücut kopyasından işlem çağrısı düğmesine devam ettirmek bir uyum hissi yaratır.

Resumator - Kalın yazı tipine sahip parlak kırmızı butona basın, mavi arka plana karşı dikkat çekiyor.

Notepod - Bir harekete geçirme ifadesine ek bilgi eklemenin iyi bir örneği.

Inkd - Büyüklüğü olan düğmelere öncelik vermenin harika bir örneği.

Zarif Temalar - Çevreleyen tasarım öğeleriyle çarpışmadan öne geçmek için renk kullanmanın bir başka mükemmel örneği.

Zendesk - Bir düğmeyi renk kullanarak öne çıkarmanın bir başka harika örneği.

Storenvy - Yuvarlak bir düğme beklenmedik bir durumdur ve özellikle beyaz bir kenarlıkla çevrili olduğunda.

Bara'Mail - Kimi zaman karışan bir düğme genel olarak site tasarımınızda daha iyi sonuç verir, özellikle de eylem daha az acil olduğunda.

Daha fazla kaynak

Eylem Düğmeleri Çağrısı: Örnekler ve En İyi Uygulamalar - Smashing Dergisi'nden
İyi Harekete Geçme Düğmeleri - UX Kabini'nden
Eylem Butonlarına Çağrı: Boyut Önemli mi? - Elastik Olmaktan
Etkili Olan 10 Teknik “Eylem çağrısı” - Boagworld'dan
Etkin Bir Çağrı Düğmesi Oluşturmanın 5 Püf Noktası - SitePoint'ten