Web Sitesi Kullanıcı Arayüzü Düğmesi Tasarımı Sanatı: 10 Trendler ve İpuçları
Büyük düğme tasarımı, çoğu web sitesi kullanıcısının asla düşünmediği bir şeydir ... çünkü iyi çalıştığında neredeyse görünmezdir. En iyi düğmeler tıklamak veya dokunmak kolaydır, belirgin bir işleve sahiptir ve kullanıcıların düşünmeden tasarımla etkileşime girmesine yardımcı olur.
Oldukça basit bir formül, ancak daha sonra düşünülen bir şey olarak bırakırsanız tasarlamak zor olabilir.
Bugün, düğme tasarımındaki eğilimlere ve insanların tekrar tekrar tıkladıkları bir kullanıcı arayüzü düğmesini tasarlamanıza yardımcı olacak birkaç ipucuna bakıyoruz. İlham almak için bu ipuçlarını, trendleri ve fikirleri kullanarak düğme tasarımınıza destek verin.
Tasarım Kaynaklarını Keşfedin
1. Basit Tutun
Her şey tasarım teorisindeki bu klasik ifadeye geri dönüyor: Basit Tut, Aptal (ya da eğer tercih edersen, Aptal).
Web sitesi düğmesi tasarımı farklı değil. Düğme tasarımının aşırı karmaşık olması gerekmez. Açık ve işlevsel olmalıdır. Bazen diğer tasarım trendleri bunun önüne geçebilir ve bu da web sitenizdeki dönüşümleri etkileyebilir.
Bu nedenle, düğme tasarımı söz konusu olduğunda, böyle düşünün - ve fazla düşünmeyin. Düğme, düğme gibi görünmelidir. Bu kadar basit.
2. Bol Kontrast Sağlayın
Neredeyse tanımlanabilir bir düğmeye sahip olmak, görmenin kolay olduğundan emin olmaktır.
Görüntülerin üstündeki hayalet düğmesi stillerinin hızlı bir şekilde eğilimli ve soluk olmasının nedeni, düğmelerin kolayca ayırt edilebilecek kadar kontrastının olmamasıdır. Kullanıcılar bunları hemen bulamadı.
Kontrastı düşük düğmeleri gizlemeyin. Ekrandaki diğer öğelerden ayrı durmaları için onları öne çıkarın ve bol miktarda renk ve alan kontrastı ile bağırın. Nefes alabilmeleri için düğmelerin etrafında bol miktarda dolgu bırakın.
Bu, düğmelerin kullanıcıların tıklanabilir öğeler olarak bulmasını ve tanımlamasını kolaylaştırır ve yanlış öğeyi yanlışlıkla almadan fiziksel olarak tıklamayı kolaylaştırır.
3. Renk kullanın
Hiç kaç düğmenin kırmızı veya turuncu olduğunu fark ettiniz mi? Çünkü parlak renkler bu öğelere dikkat çeker ve eylemi teşvik eder.
Rengi kullanmak da oldukça modaya uygun bir tasarım tekniğidir. Parlak renklerden basit degradelere sahip düğmelere kadar renk, insanların tasarımla etkileşime girmesine yardımcı olmanın daha kolay yollarından biri olabilir.
4. Beklenti Yaratan Mikroskopi Yaz
Bu hatayı yapma: Üzerinde “Buraya Tıkla” kelimelerinin yer aldığı bir düğme. (Bu ne kadar spam?)
Bir düğme tasarımındaki mikrokopi, bir tıklama ile ne olacağı konusunda net bir beklenti yaratmalıdır. Kullanıcılara bundan sonra ne alacaklarını söyleyin. Bu, veri girmek için "Gönder" veya "Daha fazla bilgi edinin" bağlantısını tıklamak veya bir video izlemek kadar basit olabilir. Eylemin ne olduğuna bakılmaksızın, mikroskoptaki kullanıcılara anlatın.
Bu bilgiler, kullanıcılarla güven oluşturulmasına ve kullanıcıların istenen bulduğu işlem / etkileşimlerle dönüşümlerin artırılmasına yardımcı olabilir.
5. Hafif Animasyon ile etkileşime geçin
Web sitelerinin iki düğmeyi yan yana kullandığı düğme tasarımında bir eğilim var. Biri dolu, biri hayalet tarzı. Her ikisinde de tıklanabilir iki seçeneği vurgulayan bir fareyle üzerine gelme animasyonu bulunur.
Animasyon, düğmelere dikkat çekmeye yardımcı olabilir ve hatta tıklamaları teşvik edebilir. Düğmelere fareyle üzerine gelme animasyonu eklemek yaygın olarak kabul edilen bir kullanıcı kalıbı haline gelir ve kullanıcılara etkileşime girmeleri için basit bir ipucu sağlar.
Sadece denize girme. Dönen, dönen, yanıp sönen düğmeler yardımcı olmaktan daha can sıkıcıdır.
6. dokunmak için yeterince büyük olun
Düğmeler, en az 10 milimetre çapında ve tıklanabilir (tıklanabilir) bir alan içermelidir ve daha büyük olan her zaman tamamdır. Bu tavsiye, MIT Touch Lab tarafından, dokunmatik cihazlarla ilişkili olarak parmak pedi boyutlarına bakan bir çalışmadan geliyor.
Bunu perspektife koyalım. Fiziksel bir bilgisayar klavyesindeki tipik tuş 15 milimetre x 15 milimetredir. Bu iyi bir hedef. (Düğmenizin küçük ekranlarda kaybolmaması için farklı ekran boyutlarını hesaba katmayı unutmayın.)
Daha küçük düğmeler kullanmanız gerekiyorsa, buna geniş bir tıklama yarıçapı eklemeyi düşünün. Bu şekilde, kullanıcı düğmelerin kendisini özlüyorsa, etrafında istenen eylemin gerçekleşmesi için yeterli alan vardır. (Web sitenizin ziyaretçileri size teşekkür edecektir.)
7. Tanıdık Bir Stil Kullanın
Herkesin bildiği birkaç genel düğme stili vardır. Bunlardan birini kullanın.
- İçinde kare kenarlar ve metin bulunan dikdörtgen dolgulu düğme
- İçinde yuvarlak kenarlar ve metin bulunan dikdörtgen doldurulmuş bir düğme
- Görünür alt gölgeli dikdörtgen dolu düğme (yukarıda)
- Dikdörtgen bir hayalet düğmesi
- Destek, yardım veya sohbeti göstermek için çoğunlukla sağ alt köşede kullanılan basit daire düğmeleri
8. Beklenen Bir Yere Yerleştirme
Sadece düğmelerin görünmesi ve beklenen şekilde çalışması değil, aynı zamanda kullanıcıların onları arayacağı bir yerde bulunması gerekir.
- Ana sayfalar için bu, ana başlığın veya metin bloğunun altına düğme yerleşimini içerir. Düğmeler genellikle metinle veya ekranın ortasında sola yaslanır.
- Formlar için girişlerden sonra düğmeler görünür. Bazı tek giriş formları, aynı satırdaki düğmeyi girişin sağına hizalar.
- Genel CTA düğmeleri, referans verdikleri içeriğin hemen altında görünür.
- Video veya oyun oynama veya başlatma düğmeleri genellikle önizleme ekranının merkezindedir.
- Alışveriş sepeti veya e-ticaret düğmeleri genellikle sağ üst köşede bulunur.
9. geribildirim unutma
Düğme etkileşime yanıt veriyor mu? Düğme arayüzü tasarımında bariz bir geri besleme döngüsü bulunduğundan emin olun.
Düğmenin işini yaptığını görsel veya öğretici bir ipucu sağlayın. Bazı düğmeler diğerlerinden daha fazla çalışma gerektirir. Örneğin, başka bir sayfaya veya web sitesine bağlanan düğmeler, yeni sayfa yüklenirse düğmenin çalıştığı hakkında geri bildirim sağlar. Form gönderme düğmesi, bilgilerin düzgün bir şekilde gönderilmesi durumunda ekranda “teşekkür ederim” mesajı verebilir.
10. Düğmeleri Bilerek Kullanın
Çok fazla düğme kaos yaratıyor.
Anlamlı oldukları yerlerde düğmeleri kullanın. Her yerde düğmelerle tasarımı aşırı yüklemeyin. Kullanıcılar, nereye ve neye tıklayacakları konusunda net bir fikre sahip olmayacaklardır.
Düğmeleri web sitesi hedefleriyle kullanmak için kaydedin. Ziyaretçileri genel tasarımınızda en önemli unsurlara yönlendirmelidirler.
Sonuç
Web sitesi düğmesi, harekete geçirici mesajınızı sonuca dönüştüren bir öğedir. Bu tasarımı düşünmek için zaman ayırın, renkten fonksiyona ve mikrokopiye. Arayüzünüzde en işlevsel sürüme sahip olduğunuzdan emin olmak için düğme tasarımlarını test edin.
Çalışan bir düğmeniz varsa, trendlerin tuzağına düşmeyin ve tasarımı değiştirin. Düğmeler söz konusu olduğunda, işlev en öncelikli olmalıdır.
