Düğme Tasarım Kılavuzu: Dönüştüren Düğmeler Nasıl Tasarlanır

Neden bir düğme tasarım kılavuzu yazmalısınız? Düğmeler bu kadar önemli mi? Kullanıcı arayüzünün bu kadar küçük bir parçasına neden bu kadar çok enerji harcıyorsunuz?

Web tasarımında butonlar çok yaygın ve basit gibi görünse de önemleri hafife alınmamalıdır. Çok önemli görevleri yerine getiren hayati site unsurlarıdır.

Özellikle ana harekete geçirici mesajlar olarak ve e-ticaret sitelerinde, düğmeler kelimenin tam anlamıyla alt satırı etkiler. Bununla birlikte, sosyal paylaşım düğmeleri, e-posta kaydı ve form gönderme düğmeleri de bir web sitesinin başarısının merkezinde yer alır.

Bu nedenle, bu makalede, genellikle ihmal edilen bu tasarım öğesi ve WordPress web siteleri için yüksek dönüşüm sağlayan düğmelerin nasıl oluşturulacağı hakkında ayrıntılı olarak konuşmak istiyorum. Odak noktası CTA'lar (harekete geçirici mesajlar) olacak olsa da, düğme tasarımı söz konusu olduğunda birçok genel tavsiyeden de bahsedeceğiz.

Bu konu düğmeye bastı mı? O zaman okumaya devam et.

Başlamadan Önce, A/B Testi Üzerine Kısa Bir Söz

Daha aşağıda, düğmeleri oluşturmak ve kullanmak için bazı açık yönergeleri gözden geçireceğiz. Bu ilkeler, sitenizdeki herhangi bir düğmenin tasarımı, konumu ve diğer önemli özellikleri üzerinde düşünmenize yardımcı olacaktır.

Ancak, aynı zamanda bunun yalnızca dönüşüm oranınızı iyileştirmenin temelini oluşturduğunu da unutmamak önemlidir. Tasarım ilkeleri, neyin işe yarayacağı konusunda bilinçli bir tahminde bulunmanıza, ancak ziyaretçileri abonelere, alıcılara dönüştürmenin anahtarının ne tür bir düğmenin elinde olduğunu gerçekten bilmenize veya testte yatıyor. A/B testleri çalıştırmak, siteniz için gerçekten neyin işe yaradığını, ziyaretçilerin hangi düğme renklerine, kopyaya, konuma ve diğer işaretçilere en iyi yanıt verdiğini anlamanıza olanak tanır.

Çünkü her şey önemli. En küçük değişiklik bile, hem olumlu hem de olumsuz olmak üzere, dönüşüm oranları üzerinde şaşırtıcı derecede büyük bir etkiye sahip olabilir. Neden bahsettiğimi anlamak için bu örnekleri gözden geçirin.

Bu nedenle, düğme tasarım kılavuzumuz en iyi uygulamaları anlamanıza yardımcı olurken, sitenizin başarısı için kazanan kombinasyonu bulmak için en iyi şekilde sağlıklı denemelerle desteklenir.

Kullanıcıların Aslında Tıkladığı Düğmeler Nasıl Tasarlanır?

Bu uyarıdan sonra, şimdi daha iyi harekete geçirici mesajlar ve daha yüksek dönüşüm oranları için iyi performans gösteren düğmelerin nasıl yapıldığına dönüyoruz. Eğlence!

Bunları Markanıza veya Sitenize Uyacak Şekilde Tasarlayın

İşlevsel tasarıma geçmeden önce, düğmelerin görüneceği bağlamı düşünmek önemlidir. Sitenizi karıştırıyorsa, mükemmel düğmeyi oluşturmanın bir anlamı yoktur.

Bu nedenle, aşağıdaki yönergeler önemli olmakla birlikte, sonuçlarının göründüğü bağlamla iyi bir şekilde bütünleşmesi de önemlidir. Bu, düğmelerinizin sitenizin renk paletine, stiline ve genel tasarım yönergelerine uyduğu anlamına gelir.

Harekete geçmek için düğmelerin öne çıkmasını isteseniz de amaç, onları olumlu bir şekilde öne çıkarmaktır. Bu, genel tasarımla uyumlu ve onu yok etmeyen anlamına gelir.

Aynı zamanda, biraz denemekten korkmayın. Bazen zıt renkte bir düğme, aksi takdirde yumuşak bir tasarıma renk katmak için gereken şeydir.

Düğmeleri Düğme Gibi Görünmesini Sağlayın

Tıklanan düğmeleri tasarlamanın ilk adımı, onları gerçekten düğmeler gibi göstermektir. Harekete geçirici mesajlar ve paylaşım seçenekleri, kullanıcılar bunlardan yararlanmaları gerektiğini anlamazlarsa hiçbir işe yaramaz.

Düğme tasarımı söz konusu olduğunda kullanıcıların belirli beklentileri vardır. Bunları hiç yerine getirmezseniz, istenen eylemi yapmakta zorlanacaklar. Bu nedenle, anlamalarına yardımcı olacak görsel ipuçları eklemek önemlidir.

İlk ipucu şekildir. Düğmeler için en yaygın şekil, köşeleri yuvarlatılmış dikdörtgen veya dikdörtgendir. Bilgisayar kullanıcıları bu tasarıma uzun süredir maruz kalıyorlar ve bu nedenle ona çok aşinalar.

Kaynak: Wikipedia Microsoft'un izniyle kullanılmıştır

Tabii ki, kareler, daireler, üçgenler ve hatta özel şekiller dahil olmak üzere başka şekiller de mümkündür. Aslında, örneğin top sürmede olduğu gibi, ilginç ve sıra dışı düğmelerin birçok örneği vardır.

Daha az geleneksel bir şekil kullanmak, site tasarımınızı uyumlu tutmak için mantıklı olabilir. Yine de Apple'ın iOS'unun yuvarlak kareleriyle kanıtladığı gibi, bu çalışmadığı anlamına gelmiyor.

Resim Ienjoyeverytime / Shutterstock.com'dan.

Ne seçerseniz seçin, tutarlı kalmanızı sağlar. Farklı düğmeler için farklı tasarımlar kullanmaktan kaçının. Bu sadece çok daha iyi bir kullanıcı arayüzü sağlamakla kalmaz, aynı zamanda kullanıcıların sitenizin tamamındaki düğmeleri tanımlayabilmesini sağlar.

Bir diğer önemli tasarım ipucu, gölgeler ve vurgulardır. Alt gölgeler, öğelerin tıklanabilir veya tıklanabilir olduğunu göstermek için evrensel bir işaret haline geldi. Aksi takdirde düz tasarım bile bunları işlevsellik için bir sinyal olarak kullanır.

Kaynak: Material.io

Net Etiketler Sağlayın

Buton kullanımı için temel tasarımın yanı sıra şeffaf etiketler de önemlidir. Bir etiket olmadan, kullanıcıların ne yapacaklarını belirlemelerinin bir yolu yoktur.

Etiketlerin mutlaka yazılması gerekmez, simgeler de çalışır (bkz. sosyal paylaşım düğmeleri). Özellikle e-ticaret ile ilgili butonlarda ikisini bir arada kullanmak başka bir olasılık.

Prixel Creative / Shutterstock.com'dan görüntü.

Önemli olan, kullanıcının bir düğmeye tıklama eyleminin ne gibi bir etkisi olacağını anlayabilmesidir. Yapmazlarsa, ilk etapta bunu yapmaktan kaçınabilirler.

Şeffaf etiketler için bazı yönergeler şunlardır:

• Açıklayıcı ve spesifik olun
• Eylem fiillerini kullanın, örneğin Beni Kaydol , Formu Gönder , Hesap Oluştur
• Kullanıcıya doğrudan hitap edin
• Şimdi veya Bugün gibi kelimelerle bir aciliyet duygusu yaratın
• Basit ve net tutun

CTA'lar söz konusu olduğunda etiketler özel bir öneme sahiptir. Sadece birkaç kelimeyi değiştirmek, bir düğme performansı üzerinde büyük bir etkiye sahip olabilir. Örneğin, Unbounce, düğme kopyalarını "30 günlük ücretsiz denemenizi başlatın"dan "Ücretsiz 30 günlük denememi başlat"a değiştirerek tıklama oranında yüzde 90'lık bir artış gördü.

Evet, bir kelimenin gücü böyle olabilir.

Düğmeleri Kullanıcıların Bulabileceği Yerlere Yerleştirin

Bu gerçekten akıl almaz bir şey. Kullanıcılarınız düğmelerinizi bulamazsa, üzerlerine tıklamaları zor olacaktır. Bu nedenle, etkinlikleri için bir başka faktör de konumdur.

Bazı konvansiyonlar var. Örneğin, ana CTA genellikle ekranın üst kısmına düşkün olabilir. Bu mantıklı ve şimdiye kadar kullanıcılar tarafından bekleniyor.

Kaynak: Netflix

Aynı durum, kullanıcıların belirli konumları beklemek üzere eğitildiği diğer düğme türleri için de geçerlidir. Örneğin, önceki ve sonraki düğmeleri genellikle birbirinin solunda ve sağında sıralanır.

Bu, kamu bilincine çok yerleştiğinden, sırayı tersine çevirmek ziyaretçileri hayal kırıklığına uğratabilir ve ayrılmalarına neden olabilir. Ve bu istediğin son şey.

Ancak, sosyal paylaşım butonları gibi daha esnek konumlara sahip butonlar için de onları nereye koyacaklarını düşünmek çok önemlidir. Örneğin, makalelerinizin sonuna sosyal düğmeler yerleştirmenin iyi bir fikir olduğunu düşünebilirsiniz. Bu şekilde, kullanıcılar gönderiyi bitirdikten sonra paylaşabilirler, değil mi?

Ancak, okuyucuların çoğu yazılarınızın sonuna bile ulaşamıyor. Sonuç olarak, düğmeleri okuma deneyiminin herhangi bir noktasında erişilebilecekleri yerlere yerleştirmek daha iyi bir fikirdir. Böyle bir örnek, Monarch kayan kenar çubuğudur:

Şüpheye düştüğünüzde, düğme yerleştirme için iyi bir kural, kendinize kullanıcıların bir sonraki nereye bakacağını sormaktır. Tasarımın kullanıcıyı yolunda yönlendirmesi gerekiyor, bu nedenle düğmeler sitedeki yollarının mantıklı sonucu olabilir.

Boyut ve Aralığa Dikkat Edin

Şimdi özellikle mobil tasarımda önemli olan bir konuya geldik. Sitenizle dokunarak etkileşime giren kişiler, eylemlerinde fare kullananlara göre daha az hassastır. Bu nedenle, sorunsuz veya yanlış tuşa basma tehlikesi olmadan düğmeleri kullanmalarını ve ulaşmalarını sağlamanız gerekir.

Kaynak: Elma

İlk adım, düğmelerinizin yeterince büyük olduğundan emin olmaktır. Ortalama bir insan parmak ucu 8-10 mm genişliğindedir. Sonuç olarak Apple, dokunarak kullanılacak öğelerin en az 44 piksele 44 piksel olmasını önermektedir (retina ekranları için pikseller yerine noktalar kullanın). Diğer üreticilerin önerileri de 10 mm işareti etrafında dönüyor. Tabii ki, masaüstü kullanımına yönelik web tasarımı için boyut biraz küçültülebilir.

Aynı zamanda, düğmeler arasındaki boşlukları da göz önünde bulundurmalısınız. Kullanıcıları hayal kırıklığına uğratmak istemezsiniz çünkü istemedikleri şeyleri yanlışlıkla iterler. Geniş alan, öğelerin fark edilmesini kolaylaştırır, bu da birincil harekete geçirici mesajlar için önemlidir.

Geribildirim sağlamak

Düğmeler veya siteniz bu şekilde tanımlanıp kullanılabilir hale geldiğinde, fiilen harekete geçirildikleri anı düşünmenin zamanı gelmiştir. Düğmelerin birkaç varoluş durumu olabilir:

• Normal - Düğme olarak tanımlanabilir, tıklanma kabiliyetini gösterir
• Odaklanmış - Fareyi üzerine getirdiğinizde değiştirme, kullanıcının eylemin mümkün olduğunu onaylaması
• Basıldı - Kullanıcıyı harekete geçtiği için ödüllendirmek için daha fazla değişiklik yapın ve bir şeyler olduğunu onaylayın
• Meşgul — Arka planda eylem gerçekleştiğinde, düğme bunu yansıtabilir
• Devre Dışı — Şu anda değil, başka eylemlerin mümkün olduğunu gösterir

Kaynak: Material.io

Kullanıcılara butonların kullanımı için görsel geri bildirim sağlayarak etkileşimi daha net ve keyifli hale getirebilirsiniz. Diğer benzer fikirler için mikro etkileşimlerle ilgili makaleye göz atın.

Kontrastı İyi Kullanın

Tüm düğmeler eşit yaratılmamıştır. Bir açılış sayfasında tıklanacak birkaç bağlantı olsa da, gerçekten önemli olan yalnızca bir bağlantı olmalıdır.

Bunu ziyaretçiler için netleştirecek araçlar renk, kontrast ve konumdur. Dikkat çekmek ve kullanıcıların tıklamasını sağlamak için bunları etkili bir şekilde kullanın.

Arayüzün geri kalanından butonları zıtlaştırarak onları daha belirgin hale getirirsiniz. Buna ek olarak, diğer unsurlar arasında kaybolmalarını önler.

Renk söz konusu olduğunda, en iyi seçenek yoktur. Yine, burada çok şey kendi tasarımınıza bağlıdır. İyi bir kural, zıt bir renkle gitmek ve oradan almaktır. Bu konuyla ilgili daha fazla bilgi için renk eşleştirme teknikleri hakkındaki makalemize bakın.

Renge ek olarak boyut, tipografi ve boşluk dahil olmak üzere kontrast sağlamak için farklı yollar kullanabilirsiniz. Düğme rengi ve metin arasındaki kontrast, efekti daha da geliştirebilir ve kopyayı daha okunaklı hale getirebilir. Belirgin bir konumla birleştiğinde, bunlar düğmeleri gerçekten patlatır.

Kaynak: Prezi

Harekete geçirici mesajınızın fark edilebilir olup olmadığını anlamak için eski güzel “şaşı testi”ni kullanın. Tasarımı uygulayın, ekrandan birkaç adım atın, gözlerinizi kısın ve düğmenizin öne çıkıp çıkmadığına bakın. Biliyorum, kulağa pek profesyonel gelmiyor ama işe yarıyor!

#CTA'nızı test ediyor musunuz? Harekete geçirici mesajınızın öne çıkıp çıkmadığını anlamanın en iyi yolu budur. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

— Design Pickle (@designpickle) 25 Temmuz 2015

Kontrast butonlar da aralarındaki düzenin sağlanması açısından önemlidir. İki veya daha fazla seçenek verildiğinde, daha güçlü bir renk, hangisini tercih edeceğinizi veya ziyaretçilere hangisini tavsiye edeceğinizi gösterebilir.

Kaynak: Quicksprout

Özetliyor

Düğmeler, web tasarımının merkezi ancak genellikle ihmal edilen bir unsurudur. Haksız olarak öyle. Özellikle harekete geçirici mesajlar biçiminde, dönüşümler, tıklama oranları ve diğer önemli başarı göstergeleri üzerinde muazzam bir etkiye sahip olabilirler.

Bu nedenle düğme tasarımı ve yerleşimi konusu hafife alınmamalıdır. Etkili düğmeler oluşturmak için özetlemek gerekirse:

• genel tasarımınıza uyduklarından emin olun
• kullanıcıların bunları düğmeler olarak tanımlayabilmelerini sağlayın
• net etiketler sağlayın
• onları kullanıcıların bulabileceği bir yere koyun
• boyuta ve aralığa dikkat edin
• kullanıldıklarında geri bildirim sağlamak
• onları sitenin geri kalanından öne çıkarın

Bu yönergeler, kullanıcılarınızın yardım edemeyecekleri ancak tıklayamayacağı düğmeleri ayarlamanıza yardımcı olacaktır. Ancak, başlangıçta belirtildiği gibi, bu en iyi uygulamalar bir başlangıç ​​noktası olarak ele alınmalıdır. Siteniz için hangi düğmelerin işe yaradığını ve dönüşümleri nasıl iyileştireceğinizi gerçekten anlamak için, düğme tasarımı her zaman kapsamlı A/B testi ile el ele gitmelidir. Neyse ki, bu konuyla ilgili bir makalemiz de var.

Düğme tasarımıyla ilgili deneyiminiz nedir? Yukarıdakilere eklemek için önemli bir şey var mı? Lütfen aşağıdaki yorumlar bölümünde bize bildirin!

BerryCat / Shutterstock.com'dan makale küçük resmi