Tasarım Kılavuzu Düğmesi: İzleme Düğmesi Nasıl Tasarlanır
Neden bir Düğme Tasarım Kılavuzu yazın?Düğme önemli mi?Neden az sayıda kullanıcı arayüzü için bu kadar çok enerji harcıyorsunuz?Düğme web tasarımında çok yaygın olsa da ve basit görünse de, bunların önemi hafife alınmamalıdır.Çok önemli bir görev yapan hayati bir site öğesidir.Özellikle ana ve E-Niaga sitesinde bir davet olarak, düğme gerçekten karı etkiler.Ancak, sosyal paylaşım düğmelerinin yanı sıra, e -posta kaydı ve teslimat düğmesi web sitesinin başarısı için önemlidir.Bu nedenle, bu makalede, sıklıkla göz ardı edilen tasarım öğeleri ve WordPress web sitesi için nasıl yüksek dönüşüm düğmesi yapılacağı hakkında ayrıntılı olarak tartışmak istersiniz.Odak noktası CTA (harekete geçmeye çağırmak) üzerinde olsa da, düğme tasarımı açısından birçok ortak öneri hakkında konuşacağız.
Konu düğmenize basıyor mu? Sonra okumaya devam edin. Başlamadan önce, aşağıda daha fazla A/B testine bir bakış, düğmeleri oluşturmak ve kullanmak için bazı açık yönergeleri tartışacağız. Bu ilkeler, sitenizdeki herhangi bir düğmenin tasarım, konumlandırma ve diğer önemli özellikleri hakkında düşünmenize yardımcı olacaktır. Bununla birlikte, aynı zamanda bunun sadece dönüşüm seviyenizi artırmak için temel olduğunu hatırlamak önemlidir. Tasarım ilkeleri, neyin başarılı olacağını tahmin etmenize izin verir, ancak ziyaretçileri müşterilere, alıcılara veya diğerlerine testte olmak için hangi tür düğmenin anahtarı tuttuğunu gerçekten bilmek. A/B testini çalıştırmak, siteniz, düğmeniz, kopyalama, konumlar ve hangi işaretleyicilerin ziyaretçiler için en önemli olduğunu bilmenizi sağlar. Çünkü her şey önemlidir. En küçük değişiklik bile dönüşüm seviyesinde çok büyük bir etkiye sahip olabilir – hem pozitif hem de negatif. Neden bahsettiğimi anlamak için bu örneklere gidin. Bu nedenle, düğme tasarım kılavuzumuz en iyi uygulamayı anlamanıza yardımcı olsa da, sitenizin başarısı için üstün bir kombinasyon bulmak için sağlıklı bir deneyle donatılmalıdır. Bu uyarıdan sonra kullanıcı tarafından gerçekten tıklanan bir düğme nasıl tasarlanır, şimdi dönüşüm oranını harekete geçirmek ve artırmak için daha iyi bir davet için iyi bir performans düğmesine geçiyoruz. Zevk almak!
İşlevsel tasarıma girmeden önce markanıza veya sitenize uygun tasarımları, düğmenin görüneceği bağlamı düşünmek önemlidir. Sitenizi bozarsa mükemmel bir düğmeyi yapmanın bir anlamı yoktur. Bu nedenle, aşağıdaki yönergeler önemli olsa da, sonuçların içinde görünen bağlamla iyi entegre edilmesi de önemlidir. Bu, düğmenizin renk paleti, stil ve genel tasarım kılavuzuyla eşleştiği anlamına gelir. Eylemi teşvik etmek için önemli bir düğme istemenize rağmen, amaç olumlu bir şekilde öne çıkmasını sağlamaktır. Bu, tüm tasarıma uyum içinde ve ona zarar vermediği anlamına gelir. Aynı zamanda biraz denemekten korkmayın. Bazen kontrast renkleri olan düğmeye yalnızca vasat tasarıma ihtiyaç duyulur. Tıklanan düğmeyi tasarlamak için ilk adım düğmesi gibi görünmesini sağlayın. Kullanıcılar kullanmaları gerektiğini anlamıyorsa, harekete geçme daveti ve paylaşım seçeneği işe yaramaz. Kullanıcıların düğme tasarımı açısından belirli beklentileri vardır. Eğer hiç yerine getirmezseniz, istenen eylemi yapmakta zorluk çekerler. Bu nedenle, anlamalarına yardımcı olan görsel ipuçlarını dahil etmek önemlidir.
İlk talimat şekildir. Düğmenin en yaygın şekli, yuvarlak bir açılı bir dikdörtgen veya dikdörtgendir. Bilgisayar kullanıcıları bu tasarımı uzun zamandır biliyorlar ve bu nedenle ona çok aşina.
Kaynak: Wikipedia, Microsoft’un izniyle kullanılır
Tabii ki, kutular, daireler, üçgenler ve hatta özel şekiller dahil olmak üzere diğer formlar da mümkündür. Aslında benzersiz ve olağandışı düğmelerin birçok örneği vardır, örneğin Dribbble’da geleneksel şekil eksikliğine girmek, sitenizi korumak için mantıklı olabilir. Ancak, iOS Apple yuvarlak kutusu ile kanıtladığı için, işlev görmediği anlamına gelmez. IENJOYEVERTYTIME / Shutterstock.com’un görüntüsü.
Kaynak: malzeme.io Temel tasarıma ek olarak net bir etiket verin, net bir etiket düğmeleri kullanmak için de önemlidir. Bir etiket olmadan, kullanıcıların ne yaptıklarını belirlemelerinin bir yolu yoktur.
Etiketin yazılması gerekmez, simge de çalışır (Sosyal Paylaşım düğmesine bakın). Her ikisini de aynı anda kullanmak, özellikle e-ticaret ile ilgili düğmelerde başka bir olasılıktır. Prixel Creative / Shutterstock.com tarafından görüntü.
Önemli olan, kullanıcıların eylemlerinin etkisinin düğmeye ne tıkladığını anlayabilmeleridir. Değilse, bunu başından beri yapmaktan kaçınabilirler. Açık etiketler için bazı yönergeler:
Tanımlayıcı ve spesifik olun Eylem fiillerini kullanın, örneğin listem, form gönder, bir hesap oluştur
Kullanıcı adresi, şimdi veya bugün gibi kelimelerle doğrudan bir aciliyet duygusu yaratır
Basit ve net kalır
Etiket CTA açısından çok önemlidir. Birkaç kelimenin değiştirilmesinin düğmenin performansı üzerinde büyük bir etkisi olabilir. Örneğin, dengesizlikler, tıklama ve tıklama oranında yüzde 90 artış, “30 günlük ücretsiz denemenizi başlatma” dan “30 günlük ücretsiz denememi başlatma” a değiştirerek sadece tıklama oranında bir artış görüyor.
Evet, bu tek kelimenin gücü. Kullanıcının bunu bulabileceği düğmeyi gerçekten mantıklı değil. Kullanıcınız düğmenizi bulamıyorsa, tıklamak için bastığınız zor olacaktır. Bu nedenle, etkinlikleri için başka bir faktör konumdur. Birkaç sözleşme var. Örneğin, ana CTA genellikle en iyi paro’da beğenilebilir. Bu mantıklı ve şimdi kullanıcı tarafından bekleniyor.
Kaynak: Netflix
Aynı şey, kullanıcıların belirli yerleri beklemek için eğitildiği diğer düğmeler için de geçerlidir. Örneğin, önceki ve bir sonraki düğme genellikle sol ve sağa birbirine sıralanır.
Bu, kamuoyunda bilinçli olduğu için, emri çevirmek ziyaretçileri hayal kırıklığına uğratabilir ve onları terk edebilir. Ve bu istediğiniz son şey. Bununla birlikte, daha esnek bir konuma sahip düğmeler için, örneğin sosyal paylaşım düğmesi, nereye koyulacağını düşünmek en önemlisidir. Örneğin, makalenizin sonuna bir sosyal düğme yerleştirmenin iyi bir fikir olduğunu düşünebilirsiniz. Bu şekilde, kullanıcılar tamamlandıktan sonra yayınları paylaşabilirler, değil mi? Ancak, çoğu okuyucu yazınızın sonuna bile ulaşmaz. Sonuç olarak, daha iyi bir fikir, düğmeyi okuma deneyiminin her noktasında erişilebilecekleri yere yerleştirmektir. Bir örnek, Monarch yüzen tarafı Bilah’dır: şüphe varsa, düğmelerin yerleştirilmesi için iyi bir pratik kurallar kendinize kullanıcının bir sonraki nerede göreceğini soruyor. Tasarım kullanıcıyı yoluna yönlendirmelidir, böylece düğme tüm sitelerdeki yolları için mantıklı bir sonuç olabilir. Boyut ve alana dikkat edin Şimdi hücresel tasarımda çok önemli bir konuya ulaşıyoruz. Sitenizle bir dokunuşla etkileşime giren kişiler, fareyi kullananlara kıyasla eylemlerinde pek doğru değildir. Bu nedenle, sorunsuz bir şekilde veya yanlış düğmeyi vurma tehlikesi olmadan düğmelere kullanmalarına ve ulaşmalarına izin vermeniz gerekir.
Kaynak: Apple İlk adım, düğmenizin yeterince büyük olduğundan emin olmaktır. Ortalama insan ucu 8-10mm ölçer. Sonuç olarak, Apple en az 44px kez 44px’lik bir dokunuşla kullanılacak öğeler yapmayı önerir (retina ekranı için piksel yerine bir nokta kullanın). Diğer üreticilerden gelen öneriler de 10mm işaretinden değişmektedir. Tabii ki, masaüstü kullanımına yönelik web tasarımı için boyut biraz azaltılabilir. Aynı zamanda, düğmeler arasındaki mesafeyi göz önünde bulundurmanız gerekir. Kullanıcıları hayal kırıklığına uğratmak istemezsiniz, çünkü yanlışlıkla demek istemedikleri şeyleri teşvik ederler. Yeterli alan da unsurları daha kolay tanınır, bu da ana oyunculuk davetiyesi için önemlidir. Düğmeniz veya siteniz tanımlanabildikten ve kullanılabildikten sonra geri bildirim verin, bu gerçekten harekete geçmeye çağrıldıklarında düşünmenin zamanı geldi. Düğmenin birkaç varoluş durumu olabilir: Normal – tıklanma yeteneğini gösteren düğmeler olarak tanımlanabilir
Odak – Fareyi yönlendirirken değiştirin, kullanıcıya eylemin mümkün olduğunu doğrulayarak değiştirin
Basıldı – Harekete geçme ve bir şeylerin olduğunu doğrulamak için kullanıcıyı ödüllendirmek için daha fazla değişiklik
Meşgul – Eylem arka planda gerçekleştiğinde, düğme onu yansıtabilir Devre dışı bırakıldı – diğer eylemlerin mümkün olduğunu gösterir, şu anda değilKaynak: malzeme.io
Kullanıcılara düğmeleri kullanmaları için görsel geri bildirim sağlayarak daha net ve daha eğlenceli bir etkileşim yaratabilirsiniz. Diğer benzer fikirler için, mikro etkileşimle ilgili makalelere bakın. Kontrasttan yararlanın, tüm düğmeler aynı yapılmaz. Yön sayfasında tıklanacak bazı bağlantılar olsa da, gerçekten önemli olan bir şey olmalıdır. Bunu ziyaretçilere açıklığa kavuşturmak için araçlar renk, kontrast ve konumdur. Dikkat çekmek ve kullanıcıları tıklamak için etkili kullanın. Diğer arayüzlerden gelen düğmeleri karşılaştırarak, daha görünür hale getirirsiniz. Buna ek olarak, diğer unsurlar arasında kaybolduklarından kaçınmak. Renklenirken en iyi seçenek yoktur. Yine, birçoğu burada kendi tasarımınıza bağlı. İyi bir pratik kural, zıt renkleri kullanmak ve oradan almaktır. Konu hakkında daha fazla bilgi için, renk eşleştirme teknikleri hakkındaki makalemize bakın. Renge ek olarak, boyut, tipografi ve alan dahil olmak üzere kontrastı tanıtmak için çeşitli yolları kullanabilirsiniz. Düğme renkleri ve metin arasındaki kontrast etkileri daha da artırabilir ve kopyaların okunmasını kolaylaştırabilir. Önemli bir konumda birleştiğinde, bu düğmeyi gerçekten öne çıkarır.
Kaynak: Prezi
Oyunculuk davetinizin görülüp görülmediğini öğrenmek için iyi bir “şaşı” testi kullanın. Tasarımı uygulayın, ekrandan birkaç adım atın, gözlerinizi çalıştırın ve düğmenizin öne çıkıp çıkmadığını görün. Biliyorum, kulağa çok profesyonel değil, başarılı geliyor! #CTA’nızı test etmek için kısır mısınız? Bu, belirgin davranma davetinizin olup olmadığını öğrenmenin en iyi yoludur. http://t.co/uo53xjiopu pic.twitter.com/wznpyterd2 – Tasarım turşusu (@designpickle) 25 Temmuz 2015 kontrast düğmesi de aralarında sipariş vermek için önemlidir. İki veya daha fazla seçenek verildiğinde, daha güçlü bir renk, hangisini tercih ettiğinizi veya ziyaretçileri almayı önerdiğinizi gösterebilir. Kaynak: QuickSprout
Bir düğme sonucuna varmak ana öğedir, ancak genellikle bir web tasarımından göz ardı edilir. Uygunsuz. Özellikle harekete geçme daveti şeklinde, dönüşüm, tıkanma oranları ve diğer önemli başarı belirteçleri üzerinde olağanüstü bir etkiye sahip olabilirler. Bu nedenle, düğmelerin tasarımı ve yerleştirilmesi konusu hafifçe alınmamalıdır. Özet için, etkili bir düğme yapmak için:
Genel tasarımınıza uygun olduklarından emin olun Kullanıcının bunu bir düğme olarak tanımlayabildiğinden emin olun
Net bir etiket verin Kullanıcının onu bulabileceği yer Boyut ve mesafeye dikkat edin
Kullanıldığında geri bildirim sağlayın Onları diğer sitelerden öne çıkarın
