Tasarım Sistemlerinde Buton
Butonlar, kullanıcıların sistemle etkileşime girmesi için harekete geçirme düğmeleridir. Bu nedenle butonlar etkileşim tasarımının önemli bir unsurudur. Kullanıcı ile sistem arasındaki iletişimde birincil bir role sahiptirler.
Butonlar kötü tasarlanmış uygulama üzerinde kullanıcı deneyimini bozabilir. Bu nedenle butonları tasarlarken en iyi UX adımlarını takip etmek önemlidir. Olumsuz bir deneyim yaşayana kadar her gün kaç butonu dokunduğumuzu veya tıkladığımızı genellikle fark etmeyiz. Dokunulamayacak ya da tıklamayacak kadar küçük sinir bozucu bir buton kullanıcı deneyimini mahvedebilir.
En iyi deneyimi tasarlamak için buton kurallarını şöyle sıralayabiliriz;
Butonların buton gibi görünmesini sağlayın
Arayüz tasarımı ile etkileşim söz konusu olduğunda, kullanıcıların anında neyin tıklanabilir olduğunu ve neyin olmadığını bilmeleri gerekir. Bir tasarımdaki her öğenin anlamını çözmek için kullanıcının çaba göstermesi gerekir. Kullanıcılar arayüz tasarımının anlamını çözmesi için ne kadar çok zamana ihtiyaç duyarsa, tasarım bir o kadar az kullanılabilir hale gelir.
Kullanıcılar UI nesnesinin anlamını netleştirmek için önceki bilgi birikimi ve görsel göstergeleri kullanırlar. Bu sebeple, öğenin bir buton gibi görünmesini sağlamak amacıyla uygun görsel göstergeler (boyut, şekil, renk, gölge vb.) kullanımı son derece önemlidir. Görsel göstergeler temel bir bilgi değerine sahiptir.
Göstergelerin zayıf olması, mobil kullanıcılar için daha da önemli bir sorundur. Tek bir öğenin etkileşimli olup olmadığını anlama girişiminde, masaüstü kullanıcıları fare imlecini öğe üstünde hareket ettirebilir ve imlecin durumunu değiştirip değiştirmediğini kontrol edebilir. Mobil kullanıcıların ise böyle bir fırsatı yoktur. Bir öğenin etkileşimli olup olmadığını anlamak için kullanıcıların ona dokunması gerekir.
Butonlarınız için tanıdık tasarımlar kullanın
Çoğu kullanıcının aşina olduğu birkaç buton örneği;
Bu örnekler arasında kullanıcılar için en net olanı “Gölgeli Buton” tasarımıdır. Kullanıcılar bir nesnenin boyutluluğunu gördüğünde bunun basılabilecek bir şey olduğunu anında anlayabilirler.
Boşluğu unutmayın
Önemli olan sadece butonun görsel özellikleri değildir. Butonun yanındaki boşluk miktarı, kullanıcıların bunun etkileşimli bir öğe olup olmadığını anlamalarını kolaylaştırır. Aşağıda belirtilen örnekte kullanıcılar hayalet butonu bir bilgi kutusuyla karıştırabilir.
Butonları kullanıcıların bulmayı bekledikleri yerlere yerleştirin
Butonlar, kullanıcıların kolayca bulabilecekleri ya da görmeyi bekleyebilecekleri yerlere yerleştirilmelidir. Kullanıcıların dakikalarca buton aramasına izin vermeyin.
Mümkün olduğunca alışılmış düzenleri ve standart kullanıcı arayüzü modellerini kullanın
Butonların alışılmış yerleşimi keşfedilebilirliğini artırır. Standart bir düzen ile kullanıcılar her bir öğenin amacını kolayca anlayabilir. Standart bir düzen, temiz görsel tasarımı ve geniş beyaz alanla birleştirmek düzeni daha anlaşılır hale getirir. Kullanıcılar sayfaya ilk kez gittiklerinde uygun bir butonu bulmak kolay olmalıdır.
Butonları eylemleriyle isimlendirin
Yanıltıcı isimlere sahip butonlar, kullanıcılar için çok büyük bir hayal kırıklığı olabilir. Her bir butonun ne yaptığını net bir biçimde açıklayan buton isimleri yazın. İdeal olarak, butonun ismi eylemini açıkça tanımlamalıdır.
Kullanıcılar, bir butona tıkladıklarında ne olduğunu açıkça anlamalıdır. Basit bir örnek vermek gerekirse; yanlışlıkla bir silme butonuna bastığınızı ve aşağıda belirtilen hata mesajını gördüğünü hayal edin.
Bu iletişim kutusunda ‘Tamam’ ve ‘İptal’in neyi temsil ettiği net bir şekilde belli değildir. Çoğu kullanıcı kendilerine “İptal’i tıkladığımda ne olur?” diye tedirginlik yaşayabilir.
‘Tamam’ kelimesini kullanmak yerine ‘Kaldır’ kelimesini kullanmak daha iyidir. Bu, butonun kullanıcı için ne yaptığını netleştirecektir. Ayrıca, ‘Sil’ potansiyel olarak tehlikeli bir işlemse, bu gerçeği belirtmek için kırmızı rengi kullanabilirsiniz.
Butonlarınızı doğru şekilde boyutlandırın
Buton boyutu, ekrandaki öğenin önceliğini yansıtmalıdır. Büyük buton, daha önemli eylem anlamına gelir.
Butonlara öncelik verin
Her zaman birincil işlem butonunu daha belirgin hale getirmeye çalışın. Boyutunu artırın (bir butonu büyüterek kullanıcılar için daha önemli görünmesini sağlarsınız) ve kullanıcının dikkatini çekmek için kontrast bir renk kullanın.
Mobil kullanıcılar için butonları parmak dostu yapın
Çoğu mobil uygulamada butonlar çok küçüktür. Bu genellikle kullanıcıların yanlış tıklama yapmasına neden olur.
MIT Touch Lab çalışması, parmak pedlerinin ortalamalarının 10–14 mm arasında ve parmak uçlarının 8–10 mm olduğunu buldu. Bu, 10 mm x 10 mm’yi iyi bir minimum dokunma hedefi boyutu yapar.
Sıralamaya dikkat edin
Butonların sırası, kullanıcı ve sistem arasındaki iletişim kurmayı yansıtmalıdır. Kendinize, kullanıcıların bu ekranda nasıl bir sıra beklediklerini sorun ve buna göre tasarım yapın.
Örneğin, sayfalandırmada ‘Önceki / Sonraki’ butonları nasıl sıralanır? Sizi ileri doğru hareket ettiren bir butonun sağda ve sizi geri hareket ettiren bir butonun solda olması mantıklıdır.
Çok fazla buton kullanmaktan kaçının
Bu, pek çok uygulama ve internet sitesi için yaygın bir sorundur. Çok fazla seçenek sunulduğunda, kullanıcılarınız hiçbir şey yapmaz . Uygulamanızda ya da internet sitenizde sayfalar tasarlarken, kullanıcılarınızın gerçekleştirmesini arzu ettiğiniz en önemli eylemleri düşünün.
Etkileşimle ilgili görsel veya sesli geri bildirim sağlayın
Kullanıcılar butona tıkladıklarında veya dokunduklarında, kullanıcı arayüzünün uygun geri bildirimle yanıt vermesini beklerler. İşlem türüne bağlı şekilde bu, görsel veya sesli geri bildirim olabilir. Kullanıcılar herhangi bir geri bildirim almadığında, sistemin komutlarını almadığını ve eylemi tekrarlayacağını düşünebilirler. Bu tür davranışlar genelde birden fazla gereksiz işleme neden olur.
Uygulamanızda hedef kullanıcılarınızın alışkanlıklarını bilmeli, aşina oldukları kavramları gerekmedikçe değiştirmemeli ve bu şekilde uygulamayı öğrenme sürelerinin mümkün olduğunca kısa olmasını sağlamalısınız. Bu şekilde uygulamaya olan güveni ve kullanımı arttırabilirsiniz. Butonları temel olarak bu prensiplere göre tasarlayabilir ve doğru bir kullanım sağlayabilirsiniz.
