Düğme Tasarımı: Takip etmeniz gereken altı kural
Web sitenize düğmeler eklemek mutlaktır. Sadece kullanıcıların sitenizle etkileşime girmelerine yardımcı olmakla kalmaz, aynı zamanda orada daha fazla zaman geçirmeye teşvik eder. Bazı durumlarda, düğme çok fazla oynamıyor gibi görünüyor, ancak düğme için iyi bir yer bulmak aslında satışları artırabilir ve kullanıcı deneyimini daha keyifli hale getirebilir. Amelia’daki bir ekip tarafından oluşturulan bir makalede (WordPress için en iyi rezervasyon eklentisi) bu konu hakkında daha fazla bilgi edinin. Bir düğme tasarlamanın temelleri
Çoğu tasarım çalışması gibi, ne tür bir düğme yapmak istediğinize bakılmaksızın itaat edilmesi gereken bir dizi kural vardır. Tüm kişiselleştirilmiş düğmeler bu temel kurallara uymalı ve yaptığınız düğmeler sayfadaki amaca göre düzenlenmelidir.Her şeyin üstünde, düğme kullanıcının dikkatini ona yönlendirmelidir. Bu nedenle, düğmeye genellikle harekete geçme davet ifadesi eşlik eder – kullanıcıları tıklamaya teşvik edin. Ancak CTA tek başına kullanıcıları çekmek için güvenilemez ve geleneksel tasarım kuralları düğmenizi diğerlerinden öne çıkarmaz, bu yüzden yaratıcı olmalısınız. Bu, düğmeyi anlamanıza ve düğmenizin başarısını sağlayacak altı farklı kuralın bir listesini oluşturmanıza yardımcı olacak kısa bir kılavuzdur. Düğme türleri çeşitli tiplerde gelir çünkü farklı amaçlar için kullanılabilirler. Web sitesi arayüzünde herhangi bir yere yerleştirilebilir ve en iyi etkiyi elde etmek için siteniz için en uygun düğme türünü seçmelisiniz. Kendi düğmenizi oluşturmak için aşağıdaki türlerden birini seçin:
Metin Bu muhtemelen en yaygın düğme türüdür. Aksanlar verilen basit bir metin bloğuna benziyorlar. Düğme tasarımında, metin düğmesi çok etkili değildir, çünkü vurgulamak yeterli değildir, ancak istenen efektte kullanılabilir. Hayalet Hayalet, çizgili bir düğme olarak da adlandırılır ve tasarlanması biraz daha zordur. Ana eylem için tasarlanan metin düğmesine kıyasla genellikle daha az önemli eylemler için kullanılırlar. Hayalet türü için düğme tasarım işlemi metin düğmesi türünden biraz daha karmaşıktır. Kabarık Ortaya çıkan düğme, içerilen düğme olarak da bilinir ve 3D efekti olan dikdörtgen bir şekle sahip olarak tanıyabilirsiniz. 3D etkisi altındaki damla gölgeli kullanılarak elde edilir. Bu, daha çok gerçek bir düğme gibi görünmesini sağlar, bu nedenle ona basması daha sezgiseldir. Değiştirmek
Anahtar düğmesi türü, tek bir düğmede çeşitli eylemleri gruplamak veya çeşitli ayarları görüntülemek için kullanılır. Önceki durumda, kullanıcılar düğmeyi tıklatır ve bir seferde yalnızca bir seçenek seçer. Bir seçenek her seçildiğinde, ikinci seçenek eklenemez. Diğer seçenekleri tıklarsanız, birincisi otomatik olarak seçilmez. Son durumda, Anahtar düğmesi birisinin farklı ayarları etkinleştirmesine veya devre dışı bırakmasına izin verir. Batmadan yüzmek Yüzen eylem düğmesi genellikle FAB olarak bilinir. Arayüzdeki genel eylem için kullanılırlar. Genellikle, içeriğin üstünde çok görünür yerleştirilirler. Çoğu durumda, dairesel bir formu vardır, ancak bu zorunlu değildir. Düğmenin tasarımında, doğru tipin seçimi çok önemlidir, çünkü arayüzün cep telefonlarında, PC’lerde, tabletlerde ve benzeri kullanıldığını belirleyecektir. Örneğin, metin düğmesini kullanmak, hücresel kullanıcılar için yükseltilen düğmeyi kullanmak kadar kolay değildir, ancak PC’de iyi olacaktır. Her bir düğme türü için argüman çok fazla, bu yüzden doğru seçimi yapmak için zaman ayırın. Renk ve kontrasikoloji renk, düğmenin tasarımında büyük bir rol oynar. Her renk, birini şu ya da bu şekilde etkileme gücüne sahiptir. Web sitenizi hedeflerine göre ayırt etmeniz gerekir. Renk ve estetik ilkelerin psikolojisini hatırlamalısınız.
Aşağıdaki düzenlemeyi önerdik: Ana eylemler – düz renk, yüksek kontrast
İkincil eylem – şeffaf renk, yoğun anahat
Üçüncül eylemler – altı çizili metin
Her rengin kendi gücü vardır. Oradaki en büyük marka logosunu görün ve rollerini anlayacaksınız. Kırmızı genellikle tutku, açlık veya enerji ile ilişkilidir. Sarı veya diğer loş renkler, bilgilendirici sayfalara yol açan düğmeler için çok uygundur. Olumlu eylem gösteren düğmeler için uygun yeşil veya mavi (örneğin, katkıda bulunur).
Altı Altın Kural 1. Geleneksel Kalın
Şekil konusunda çok çılgın olma. Düğme yine de bir düğme gibi görünmelidir. Değilse, web sitenizi ziyaret edenler kafası karışabilir ve oraya yerleştirdiğiniz garip şekilli öğelerden kaçınabilir. Formasyon açısından geleneksel kalmaya çalışın. Düğme tasarımında, temel ilkeleri göz önünde bulundurmanız gerekir. Örneğin, web siteniz bir kare öğe içeriyorsa, düğmenizle aynı deseni seçin. Web siteniz daha fazla yuvarlak taraftaysa, düğmenizin dikdörtgenini yuvarlayın veya Daire düğmesini kullanın. Seçtiğiniz şekle bakılmaksızın, kullanıcının gözlerini göründüğünden ve çektiğinden emin olun. Şeklini seçtikten sonra, arayüz boyunca tutun, çünkü değilse estetik bir etki elde edemezsiniz. Buna ek olarak, kullanıcılar düğmenin şekline alışacak ve arayüzü kullandıklarında daha fazla tarayacaktır.
2. Onları görmesini sağlayın
Diğer öğelerden öne çıkmazsanız bir düğme yapmanın bir anlamı yoktur. Herhangi bir şekilde belirgin olmayan düğme kullanıcı tarafından tamamen göz ardı edilecektir. Ziyaretçiler tarafından kolayca görülen bir konumda görünür bir yere yerleştirmeye çalışın. Kendinizi bir ziyaretçi pozisyonuna yerleştirin: İlk girdiğinizde hangi web sitesi alanı gözlemliyorsunuz? Düğmenizin olmasını istediğiniz bir yer. Geleneksel yerleştirme, düğme tasarımının en önemli yönlerinden biridir, bu nedenle görmezden gelmeyin.Düğmenin varlığını da vurgulamak için beyaz boşluklar ve kontrast renkleri kullanın. 3. Onları etiketleyin
Etiketlemeden bir düğme yapamazsınız. Değilse, tüm kopya içeriğinizde açıklamış olsanız bile, insanlar onunla ne yapacağını bilmeyecektir. Tasarladığınız düğmeye net bir etiket ekleyin, kullanıcıya tıkladıklarında ne beklendiğini söyleyecektir. Düğme için kullanmanız gereken minimum yazı tipi boyutu 16px’dir. Bundan daha az olan herhangi bir şey yeterli değildir. Düğme şeklini de tasarlarken düşünün. Ayrıca, düğmenin iyi görünmesi için etiketin etrafında yeterli boş alan bırakın. Onların büyüklüğü Yukarıda belirtildiği gibi, 16 pikselden az olan etiketler ekleyemezsiniz. Sayfada düğmelerin ne kadar büyük olduğuna dair bir resim verecektir. Öncelikleri ayarlamak için boyutu kullanabilirsiniz. Düğme tasarımında, en büyüğü en büyük ilgiye ve tıklaması en kolay olana sahiptir. Daha küçük bir düğme daha az önemli eylemlerle ilişkilidir. Bu işlemde size yardımcı olabilecek bir araç olarak MIT Touch Lab’ı kullanın. Tavsiye ettikleri boyut 10mm x 10mm’dir, ancak arayüzünüzde bulunan alana göre oynayabilirsiniz.
5. Çok fazla kullanmayın Cazip olsa da, siteye çok fazla düğme eklememelisiniz. Birçok hücresel uygulama ve web sitesi arayüzü bir sayfada bir düzine düğme içerir. Bu, kullanıcıların üzerine tıklatmaz. Tersine, arayüz çok kalabalık olduğu için kullanıcıları bir anda sürebilirler. Sayfa başına bir düğme, savaşmanız gereken amaçtır. Belki iki, gerçekten gerekirse. 6. Geri bildirim ekleyin
