Kusursuz Bağlantılar ve CTA'lar Nasıl Tasarlanır

Hiç web sitenizin istatistiklerine bakıp “İnsanlar neden benim istediğim yere gitmiyorlar?” diye merak ettiniz mi?

Neden ürün sayfalarınızı ziyaret etmiyorlar? Neden hiç alışveriş yapmıyorlar?

Bu gönderide, ziyaretçilerin web sitenizde nasıl ilerlediğini kontrol etmenize yardımcı olabilecek bazı uzman ipuçlarını paylaşacağım.

Sorunu Tanımlayın

Öncelikle sorunun ne olabileceğini belirlememiz gerekiyor. Google Analytics gibi faydalı araçlar size siteniz hakkında birçok istatistiksel bilgi verebilir, ancak Crazy Egg, Heatmap.com ve Inspectlet gibi daha görsel araçların, sitenizdeki sorunların tam olarak nerede olduğunu belirlemenize gerçekten yardımcı olabileceğini buldum. site yalan.

Bir ısı haritası gibi görsel bir referans çerçevesine sahip olmak, kitlenizin dikkatini neyin çektiğini size anında gösterebilir. Sayfa ziyaretçilerinizin ne kadar aşağıyı aradığını size söyleyebilen bir kaydırma haritası ile birleştirildiğinde özellikle yararlıdır! Bazen sorunların düzeltilmesi hızlı ve kolay olabilir, ancak bazen o kadar net değildir. Umarız bu ipuçları sitenizi geliştirmenize ve hedeflerinizden daha fazlasını elde etmenize yardımcı olur.

Çözümler

netlik

Kulağa ne kadar saçma gelse de, bazen sorun, müşterilerin bir bakışta neyin bir bağlantı olup neyin olmadığını bilmemesi kadar basit olabilir. Bu kendinize ve başkalarına açık görünse de, herkesin farklı çalıştığını ve web sitenizi sizin onu nasıl gördüğünüzden farklı görebileceğini unutmamalıyız.

Örneğin, sitenizdeki tanıtım görselleri, ziyaretçilerinizin tam olarak nereye tıklamaları gerektiğini belirlemeyi zorlaştırabilir. Bu, downloads.cnet ve filehippo.com gibi web sitelerinde çok yaygın bir sorundur:

Download.cnet.com bunun için filehippo kadar kötü. Önce indirme bağlantısını veya sayfanın üst kısmındaki büyük parlak turuncu ve mavi başlığı gördünüz mü? Bu durumda, sizi sadece şirketin web sitesine götürecektir, ancak bir başkası sizi herhangi bir yere götürebilir.

Bunu nasıl düzeltebilirler? Basitçe daha net hale getirmek bu sorunu anında çözecektir. Bağlantılarını insanları yanıltmaya çalışan reklamlardan ayırmaları gerekiyor. Bir yol, başlığın etrafına büyük bir bariz kenarlık ve ardından indirme bağlantısı eklemek, hatta başlığı ve indirme bağlantısını daha fazla vurgulamak için tam bir arka plan rengi ve aralığı eklemek olabilir. İndirme bağlantısını gösteren bir ok kadar basit bir şey bile harikalar yaratabilir! Bağlantılarını diğerlerinden hızlı bir şekilde öne çıkaracak ve böylece "kaçırılan tıklamaları" azaltacak her şey.

stil

Başka bir sorun, bağlantılarınızın ve CTA'larınızın nasıl şekillendirildiği olabilir. Şimdi, stil söz konusu olduğunda doğru ya da yanlış yoktur. Her şey tasarımınızda ve web sitenizde neyin işe yaradığına ve neyin en iyi göründüğüne ve ayrıca hedef kitleniz için neyin en iyi olduğuna bağlıdır.

Bunu söyledikten sonra, son birkaç yılda uçsuz bucaksız “beyaz boşluk” okyanuslarında büyük, parlak düğmelerde büyük bir artış olduğunu fark etmiş olabilirsiniz. Bu eğilimin çok iyi bir nedeni var. Araştırmalar ve istatistikler, ziyaretçilerin bu tür bağlantılarla etkileşim kurma olasılığının, belki de diğer varyantlardan daha fazla olduğunu gösteriyor:

Ama neden bu? Neden kullanıcılar olarak, keşfedilecek çok sayıda yol ve bağlantı içeren bir web sitesi yerine, etkileşim kurulacak çok az öğeye sahip sitelere çekiliyoruz?

Çok basit: Bu yalnızca herhangi bir karmaşadan kurtulmakla kalmaz, aynı zamanda stil, neyin tıklanabilir olup neyin olmadığını çok açık ve net hale getirir. CTA'lar ve Kaydol / Giriş yap düğmeleri dikkatimizi çekiyor ve bizi tıklamaya davet ediyor.

Ancak bu, tüm bağlantılarımızın büyük parlak düğmeler olması gerektiği anlamına mı geliyor?

Bir şey değil. Yalnızca "Harekete Geçirici Mesajlarımızı", yani ziyaretçilerimizin etkileşime geçmesini istediğimiz bağlantılarımızı vurgulamak istiyoruz - bir promosyon satış sayfası veya en son haberler gibi onlara ve bize bir şekilde fayda sağlayacağını düşündüğümüz bir şey hikaye.

PayPal örneğine geri dönersek, daha standart veya daha az önemli bağlantılar için düz metin bağlantılarını kullanmakta sorun yok, yeter ki hala bir şeye çok açık bir şekilde bağlantı olsun. Geçmişte bu her zaman altı çizili metinle belirtilirdi ve bugün hala tasarıma uyduğu sürece bunu kullanabiliriz - bazı insanlar altı çizili bağlantıların modern tasarımda çok az yeri olduğunu düşünse de.

Örneğin, PayPal'ın "Daha fazlasını öğrenin" bağlantısının altındaki metne bakın, "PayPal müşterisi değil misiniz? Başlamak. ” Bu son iki kelimeyi basitçe cesaretlendirerek, ziyaretçilerin dikkati çekilir ve etkileşime girmeleri için ustaca teşvik edilirler. “Bu metin farklı” diye düşünüyorlar. "Orada bir şey mi var? Neden bu biraz kalın yazılmış ve geri kalanı değil?” Bu, kullanıcıyı fareyle üzerine gelmeye ve bunun bir bağlantı olduğunu keşfetmeye davet eder!

Bu basit bir fark, ancak kullanıcının dikkatinin her saniyesi için savaşmamız gereken bir dünyada, bir tıklamayla sonuçlanabilecek bir fark ve uygulanması çok kolay olabilir. Web siteniz ve müşteriniz için en iyi neyin işe yaradığını görün.

Ekrandaki Konum

Kullanıcıların bir sitede bağlantı aramak için çok az zamanı vardır ve daha fazla zaman kaybı, daha fazla insanın sitenizden ayrılmasına neden olur. Peki bundan nasıl kaçınabiliriz? Yine, kullanıcıların bağlantıları olabildiğince kolay tanımlayabilmeleri için basitçe yapıyoruz.

Kaydırma haritaları burada çok yardımcı olabilir. Deneyimlerime göre, bir sayfanın neredeyse tüm ziyaretçileri sayfanın en üstünü görecek, ancak insanların %20'sinden daha azı en alta kadar kaydıracak - daha uzun sayfalar için daha da aşağıya. Yine de %80'den fazlası sayfanın ilk %50'sini görecektir.

Ekran boyutları, ekran çözünürlükleri ve cihaz boyutunun yanı sıra bunda büyük rol oynar. Ancak bu, ekranın alt kısmının altındaki herhangi bir şeyin ziyaretçileriniz tarafından görülmeyeceği anlamına gelir. İdeal olarak, değerli CTA'larımızın sayfada üst sıralarda yer aldığından emin olmak istiyoruz. Sorun çözüldü, değil mi?

Bu, temel kurallar için dikkate alınması gereken iyi bir şeydir ve özellikle tekli ürünler ve promosyonlar için iyi sonuç verir. Peki ya örneğin bir ürünün arama sonuçlarını karşılaştırırken? Ziyaretçinin dikkatini çekmek için savaşan birçok nesneniz olacak.

Bu, tasarımınızda üç şeyi bir araya getirmeniz gereken yerdir: Netlik, Stil ve Konum. Hatırlanması gereken en önemli şey, ekranda çok fazla bilgi varsa kullanıcının ilgisini hızla kaybedeceğidir. Gösterilecek çok fazla ürününüz varsa, onlara vermeye gücünüzün yeteceği minimum bilgiyi – ideal olarak başlık, fiyat ve “Daha fazla bilgi / şimdi satın alın” CTA'sını vermek istersiniz.

Başka ne ekleyeceğinize karar vermek size kalmış. Ancak iyi tasarım örnekleri için Tesco gibi büyük süpermarket sitelerine bakın:

Basit bir "ekmek" araması yüzlerce farklı ürün verir, ancak Tesco tüm ürünlere bolca nefes aldırdı ve alışveriş sürecini "Miktar mı?" ve Ekle".

Düğmelerin tüm kurallara uyduğunu da fark edebilirsiniz: Açıktırlar, çekici bir şekilde aralıklıdırlar ve tarzlara sahiptirler ve ızgarada, ürünün ve sahip olabileceği herhangi bir açıklamanın altında mantıklı bir şekilde görünürler.

Konu birden fazla CTA sunmaya geldiğinde büyük e-ticaret sitelerinin ne yaptığını görmek için başka örnekler arayın, bulduklarınıza şaşırabilirsiniz!

Özet

Umarım bu blog, web sitenizin başarısını artırmaya gerçekten yardımcı olabilecek basit hileler hakkında size biraz fikir vermiştir. Özetle, bağlantılarınızı ve CTA'larınızı oluştururken hatırlamanız gerekenler:

• netlik Özellikle kafa karışıklığına neden olabilecek başka bağlantılar ve düğmeler olacaksa, CTA'larınızın sayfadaki diğer her şeyden farklı olduğundan emin olun. Gerçeği sahteden anında ayırt edebilmelisiniz.

• Stil. İnsanlar büyük parlak düğmelere, biz de dikkatimizi çeken büyük metin alanlarına çekiliyoruz. Kullanıcının bir bağlantıyı veya düğmeyi tanımlamak için ne kadar az çaba sarf etmesi gerekiyorsa, onları tıklama olasılığı o kadar artar. Bu, daha küçük, daha az önemli bağlantılar için geçerlidir - metindeki veya resimdeki bir bağlantıyı asla kaybetmek istemezsiniz, bu nedenle bağlantılarınızı ve CTA'larınızı nasıl tasarlayacağınız konusunda katı kurallar belirleyin. Tıklanabilirlerinizi tıklanamayanlardan ayırt etmek ve vurgulamak için kalın yazı tiplerini, farklı renkleri veya başka bir şeyi kullanın. Sadece tutarlı bir şekilde kullanıldıklarından emin olun. Benzer şekilde, gerçekten iyi bir nedeniniz olmadıkça hiçbir resminizin bu öğeleri içermediğinden emin olun.

• Konum, Konum, Konum . Bağlantılarınızı ve CTA'larınızı nereye yerleştirdiğiniz önemlidir. Çok değerli ve önemli "Şimdi Satın Al" bağlantınız ekranın üst kısmında biri için görünmüyorsa, kullanıcıların %50'sinden daha azı bu kadar aşağı kaydıracağından, bir müşterinin tıklama olasılığı %50'den daha azdır.

Umarım bu tavsiye yardımcı olur! Her zaman etrafta arama yapmayı ve başkalarının bu sorunu çözmek için neler yaptığını görmeyi ve sizin sitenizin nerede ve nasıl daha da geliştirilebileceğini görmek için sitelerini sizin sitenizle karşılaştırmayı unutmayın.