Kazanan Bir “Satın Alma Düğmesi” Tasarlamanın 5 Püf Noktası

Bir tasarımcı veya çevrimiçi bir pazarlamacıysanız veya bir şey satmaya çalıştığınız bir web sitesine sahipseniz, bir noktada uygun bir "satın al düğmesi" tasarlamanız gerekir. Ve sonra, hızlı bir şekilde sadece bir koyarak “Şimdi satın al” Herhangi bir iyi sonuç almayı umarsanız, mavi bir dikdörtgenin üzerindeki metin yeterli değildir.

Neyse ki, uygun bir "satın al düğmesi" tasarlamak, bazı temel bilgileri öğrendiğinizde çok zor değildir. İşte gidiyor.

Her şeyden önce düğmenizdeki metin en önemli şeydir, ancak ele alınması gereken başka özellikler de var. Neden metnin en önemli olduğunu söylüyorum? Bunu düşünün - eğer üzerinde metin yazıyorsa, güzel tasarlanmış bir düğmeye sahip olmanın anlamı nedir? “Cehenneme git!”? Dava kapandı. İyi kopya paraların yapıldığı yerdir..

Bugünün makalesinde, tartışıyoruz 5 önemli özellik uygun bir "satın al düğmesi" nin. Hadi bir bakalım!

1. genel tarzı

Bu listedeki 1 numaralı nokta, sebepsiz değil, çünkü en önemli özellik.

İstiyorsun düğmenizi mor bir ineğe çevirin. Bu, Seth Godin tarafından popüler bir kavramdır. Kısacası, dikkat çekici olmasını istersiniz; dikkate değer bir şey, göz ardı edilemeyecek bir şey demek. Mera ortasında mor bir inek gibi bir şey.

Bazı tasarımcılar bu konuda özellikle iyi değil. Oturduğu web sitesinin renklerine ve tarzına güzel bir şekilde bağlanan bir düğme oluşturmak caziptir. İlk başta çok iyi bir fikir gibi görünüyor, sadece değil.

Sorun, böyle bir düğmenin dikkate değer olmaktan uzak olması. Düğmenizin karışmasını istemiyorsunuz; göze çarpmasını istiyorsun. Bu nedenle, sadece bazı web sitelerinde oturup, bu web sitesiyle uyumlu olması gereken şeyler olarak değil, tamamen ayrı bir unsur olarak yaratılmalıdır..

Size sadece mor bir ineğe benzeyen düğme için harika bir örnek vereyim.

Mozilla Firefox

Firefox'un indirme sayfası böyle görünüyor. Bir şeyi fark etmeni istiyorum. Soldaki düğme, indirme düğmesi o sayfadaki hiçbir şeye benzemiyor. Bu tek yeşil şey. Firefox logosunu sunan tek yer orası. Buradaki en büyük unsurlardan biri. Katın üstünde bulunur.

Bu özelliklerin tümü bu düğmeyi son derece görünür hale getirir. Mor bir inek. Görmüyorsun diyorsan, sadece birini etkilemeye çalışıyorsun..

Kısaca: Olağanüstü bir düğmeye sahip olmayı hedefleyin.

2. Görünüm

İle başlayalım renk.

Olağanüstü olmak istiyorsanız, sayfada başka hiçbir yerde kullanılmamış bir renk kullanın. Tıpkı Firefox'taki çocukların web sitelerinde yaptıkları gibi. Web sitenizin şu anki renk şemasıyla iyi görünen bir renk bulmak için Renk Düzeni Tasarımcısı gibi bir araç kullanabilirsiniz.

Ve “farklı” Burada anahtar kelime. Web siteniz çoğunlukla mavi ise, mavi bir satın alma düğmesi istemezsiniz. Mavinin gölgesini istemiyorsun. Mavimsi görünen hiçbir şey istemezsin. Pembe veya turuncu istiyorsun, vb..

Bir numara daha. Turuncu, kırmızıdan hemen sonra en görünür renk olarak bilinir. Ancak, kırmızı olan tüm olumsuz duyguları arttırmaz (gibi şeyler “durdurmak”, “bak!”, ve “Tehlike”). İnternetteki en popüler turuncu düğme bulunabilir. amazon.com.

Odaklanacak bir sonraki şey düğmenin boyutu. Ne diyebilirim, BÜYÜK olması gerekiyor. Ne kadar büyükse o kadar iyidir. (Yine, Firefox örneği.)

“Daha da büyütebilir miyim?” tasarım aşamasında sorulacak iyi bir soru. Çok yap.

Olmalı basit veya gösterişli? Bir düğme çok gösterişli olamaz. Firefox düğmesine bir kez daha bakın. Gösterişli. Üzerinde turuncu bir tilki var, yine de bir düğmeye benziyor. Ve bu, geçemeyeceğiniz bir sınırdır. Düğmeniz hiç kimseye benzemiyorsa, hiç kimse onu tıklamaz.

Bu yüzden hangisinin daha iyi olduğuna dair basit bir cevap yok - gösterişli veya basit. Sadece kendin bulmak zorundasın. Her zaman testi böl. Biri gösterişli ve diğeri basit iki düğme oluşturun. İkisini de aynı anda kullanın ve hangisinin daha iyi performans gösterdiğini görün. Google Web Sitesi Optimize Edici bu konuda size yardımcı olacaktır.

Sadece basit bir düğmeye hızlı bir örnek.

ThemeFuse

Gördüğünüz gibi düğmenin herhangi bir turuncu tilki kullanmıyor, ama yine de oldukça görünür. Nitekim, ThemeFuse (parçası olduğum birinci sınıf bir WordPress tema mağazası), kısa kodlar adı verilen bir şeyler sunmaktadır. Diğer şeylerin yanı sıra, bu kısa kodlar hoş görünümlü düğmeler oluşturmayı gerçekten kolaylaştırıyor.

Örneğin, yalnızca tek bir satırla:

[button link = "domain.com"] Harika ürünümü satın almak için buraya tıklayın! [/ button]

Bu sonucu alıyorum:

3. Yazı Tipi

Sans-serif yazı tipi Her çeşit buton için standarttır. Bunun nedeni sans-serif yazı tiplerinin her çevrimiçi kullanım için çok okunabilir olmasıdır. (Kapak tarafında, serif yazı tipleri basılı yayınlar için daha iyidir.)

Düğmenizdeki kopyanın, sayfadaki en önemli metin parçası olduğu kadar okunabilir olmasını istiyorsunuz. Herşey iyi bir fikir değil. Karışık vaka çok daha iyi çalışıyor. Karışık-büyük harfle her kelimenin ilk harfini büyük harf olarak kastediyorum. (Gibi kelimeler hariç “için”, “”, “ve”, vb.)

(Resim kaynağı: Gomediazine)

Kullanabileceğiniz bazı güvenli fontlar şunlardır: Arial, Helvetica, Franklin Gotik, Sayısız veya başka herhangi bir klasik sans-serif fontu, gerçekten.

Şimdi renk ne olacak? Kopya, tabii ki, düğmenin rengine yüksek kontrastlı olmalıdır. Gri gri istemiyorsun. Beyaz üzerine siyah veya turuncu üzerine mavi.

Yine, metnin yüksek okunabilir olması gerekir.

4. Yerleşim

En iyi yerleşim, muhtemelen şaşırtıcı olmayan web sitenizin tasarımına bağlıdır. Ama yine de uymaya değer bazı kurallar var..

İçine yerleştirin mümkün olan en açık yer. Burada yaratıcı olmaya çalışmayın. Yerleşim müşteriye / kullanıcıya açık olmalıdır.

Birisi web sitesini her ziyaret ettiğinde, bazı yerlerde bazı şeyleri görmeyi bekler. Şunlar gibi: üst sol köşedeki logo, üst sağ köşedeki alışveriş sepeti özeti, altbilgideki telif hakkı fıkrası, vb..

Tabii ki, aynı anda en görünür yer olması gerekiyor. Bu iki şey demektir:

1. O kesinlikle yerleştirilmeli kıvrımın üstünde, ve
2. Boşluktan korkma. Whitespace, her iyi web tasarımcısının bir arkadaşıdır. Unutmayın, bir web sitesine ne kadar şey yerleştirebileceğinizin önemi yoktur, ne kadar şey çıkartabilirsiniz.

Yerleştirme stratejinizi düğmeyi kopyalayıp sayfanın en altına yerleştirerek steroidlere ekleyebilirsiniz. Bu şekilde, birileri tüm sayfayı okuduğunda, bunun altında harekete geçebilir..

5. Ekstra elemanlar

Bu kekin üzerine krema. Ekstra elemanlar, düğmenizin görünürlüğünü daha da artırır. Elemanların örnekleri: oklar, alışveriş arabaları, büyüteçler, artı işaretleri veya çeşitli marka öğeleri.

En sevdiğim örnek - Firefox örneği - gerçekten harika bir ekstra element kullanıyor - turuncu tilki (yani logoları).

Temel bir kural, ekstra öğeleri kullanmaktır. düğmenin amacını vurgula. Örneğin, aşağı dönük iki ok bir indirme düğmesi için harikadır. Bir alışveriş sepeti simgesi, bir sepete ekle düğmesiyle (yukarıdaki Amazon örneği) harika çalışır. Büyüteç, bir arama düğmesi ile harika çalışıyor. Ve bunun gibi.

Bazı marka öğelerini de kullanabilirsiniz. Örneğin: beslenmeye abone olun düğmeli standart RSS simgesi, beni takip eden twitter düğmeli bir kuş simgesi, download-firefox düğmeli turuncu bir tilki, buy-my- sayfalar düğmesi.

İşte bazı örnekler:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

"Özgür "'ün Gücü

Bir başka numara, İngilizce dilinde en güçlü kelimenin kullanılmasıdır - BEDAVA. Ne zaman bir şey ücretsiz olarak ilan edilirse, insanlar tahmin edilemez derecede irrasyonel davranmaya başlarlar. Dan Ariely, "Mantıksızlığın Başı" derken ne demek istediğimi öğrenmek için.)

Daha fazla örnek:

Freshbooks

Wufoo

Freeagent.com

Sıradaki ne?

Photoshop veya benzeri bir yazılım konusunda uzmansanız, hemen devam edebilir ve güzel bir düğme oluşturabilirsiniz. Başka bir yol, bu yazının başlarında belirttiğim gibi, ThemeFuse tarafından herhangi bir WordPress temasının şanslı sahibi olmak..

Harika bir satın alma düğmesi tasarlama konusundaki öneriniz nedir?? Bu yayını fikirlerinizle güncellemek isterim.