UI/UX

Button Tasarımı ve Kullanımı

Button Tasarımı ve Kullanımı

Button (düğme de dersek bir sıkıntı olmaz aslında, hatta bundan sonra düğme olarak anılacaktır.) etkileşim ve arayüz tasarımının en sıradan öğesidir. Bakıldığında “amaaan düğme en nihayetinde” gibi bir algı oluştursa da kullanıcı etkileşiminin en önemli bileşenidir. Bu yazımızda düğmelerden bahsedeceğim.

Düğme Çeşitleri

Grafik arayüzler ilk ortaya çıktıklarından bugüne düğmeler bir çok farklı tarzda karşımıza çıktı. Tüm bu tarzların en büyük amacı, bu görünen şeyin tıklanabilir olduğu ve kullanıcının bu düğmeye tıklayarak etkileşime girebileceğini farkettirmek. Aslında tarz ne olursa olsun bir düğmenin doğadaki en büyük amacı kendine tıklattırmak.


3 Boyutlu Düğmeler

Grafik arayüzlerin ilk günlerinden beri varlığını sürdüren bir düğme türü. Özellikle Windows 95 ve 98 arayüzlerinden hatırlayacağınız düğmedir. Bu düğmenin tasarımı çok basit bir algı yönetimine dayanıyordu. Arkaplandan ayırmak için kenarları çiz, bir tarafı koyu diğer tarafı açık renk ve degrade geçişli yap! Böylece ben buradayım diyen ve 3 boyutlu görünen bir düğmen olsun.


Skemorfik Düğme

Skemorfik tasarım dediğimiz şey gerçek hayatta olan nesnelerin dijital tasarımlarda da benzer şekilde kullanılması. iBooks kitaplığının gerçekten de bir ahşap kitaplıkmış gibi görünecek şekilde tasarlanması bunun en iyi örneğidir. Zaten Jobs’a göre dijital tasarımlarda gerçek hayattakilere benzer nesneler kullanılırsa en acemi insan bile iç güdüsel olarak o makineyi kullanabilecektir. Bu tarz düğmeler, gerçekten de varolan o cihazdaki düğmeler gibi tasarlanır.



Flat Düğme

Arayüz tasarımını tamamen değiştiren şey aslında bu düz düğme tasarımıdır. 3. boyuttan, skemorfizmden sıyrılıp kendi varlığını oluşturmuştur. Düz tasarım anlayışıyla artık fiziksel ortam yani gerçek hayatın görünümünü taklit etmeye, ona benzemeye çalışmayıp kendi dijital varlığını ortaya koymuştur. Sonuç olarak, geleneksel olarak tıklanabilirliği / taranabilirliği kullanıcılara iletmek için kullanılan ağır görsel ipuçlarını bir kenara atmıştır. Düz tasarım anlayışı artık neredeyse her yerde karşımıza çıkar. Hatta ve hatta yine skemorfik bir anlayışla fiziksel düğmeler de düz tasarıma benzemeye başlamış durumda bile diyebiliriz. Tüm dünya bir düz tasarım anlayışına doğru adım adım ilerliyor.


E her şeyin düz olduğu bir dünyada, düğmeler nasıl farkedilecek? Bu sorunun cevabı çok kısa; renk! Düz tasarımda renk özellikle önemlidir, çünkü düz düğmeler kullandığınızda, bu renkler kullanıcının bunları tanımasına yardımcı olan ana tanımlayıcılardan biri olacaktır.

Neredeyse Düz Tasarım ve Süzülen (Floating) Etkileşim Düğmeleri

Aslında bir yönüyle düz tasarımdır. Hatta düğme özğnde düz bir tasarıma sahip olsa da bazı görsel ayırıcılarla arayüze derinlik/katman eklemek amaçlanır. Gölgelendirme, katmanlı işlev ve ışık hareketleri kullanılarak yapılır büyük çoğunlukla. Google’nin en son tasarım dili olan Materyal Tasarım’la ortaya çıktığını söyleyebiliriz. Fakat süzülen düğmeler kesinlikle materyal tasarımın bir hediyesi bize. Ana veya öne çıkarılan etkileşim için tüm grafik arayüzden bağımsız ve en önde duran bu düğmeler, siz tüm arayüzle etkileşime girseniz dahi (kaydırma, büyütme/küçültme gibi) o olduğu yerde kalır. Google Haritalar, süzülen etkileşim düğmesi için harikulade bir örnektir.



Hayalet Düğme

2013-14 yıllarında fırtına gibi esen bu düğme hala varlığını sürdürse de eskisi kadar mode değil diyebiliriz. Dikdörtgen ya da kare biçimlidirler. İnce bir çizgiyle sınırları belirlenmiştir ve içinde sadece düz metin bulunur. Hayalet düğme de yeni nesil düz tasarım anlayışıyla ortaya çıkmıştı; ama özellikle moda olması iOS 7’nin yayınlanmasıyla oldu. Apple’ın yeniden tasarlanmış arayüzünde kullandığı düğmelerin çoğu hayalet düğmeydi.


Düğmeler için Bazı İpuçları

Düğmeler ile ilgili tarihsel ve tarz bilgileri de aldığımıza göre geldik şimdi asıl meseleye; düğme tasarlamak. Arayüzlerinizde düğmeleri tıklanabilir yapabilmek için (yani kullanıcının bunun bir düğme olduğunu farketmesi gerekiyor) bazı önemli noktaları atlamamanız gerekiyor.
1- Düğmeler, düğme gibi görünmeli. (Şekil)
2- Kullanıcının etkileşim kolaylığı. (Dolgu ve Boyut)
3- Düğmenin işlevi. (Etiketleme)
4- Kullanıcıyı tetiklemek için renk farkı. (Renk)
5- Düğmeler arasındaki benzerlik. (Tutarlılık)
Bu dört temel unsuru atlamadığınız zaman arayüzünüz için harika bir düğme tasarımı yapabilirsiniz.


Şekil

Düğmelerinizi dörtgen ya da köşeleri yuvarlatılmış dörtgen yapın. Uzunca bir süredir, dijital düğmeler dörtgen formunda yapılıyor, haliyle kullanıcı bir düğme aradığında onun bir dörtgen formunda olacağını düşünür. Arayüzünüzün genel sitiliyle uyumlu bir dörtgen düğme tasarlamanız kullanıcının işini kolaylaştıracaktır. Tabi gidip üçgen, farklı şekillerden de düğme yapabilirsiniz. Yapmamanız için önünüzde bir engel yok; fakat az önce dediğim gibi; kullanıcı dörtgen formunda bir şey arıyor tıklamak için!


Dolgu ve Boyut

Bir düğmenin boyutu kullanıcının farketmesi açısından en önemli etkenlerdendir. Düğmenizin boyutu ne küçük ne de çok büyük olmalıdır. Ayrıca diğer tıklanabilir elementlerle (link, metin kutusu, seçim kutusu, diğer düğmeler) aralarında bir dolgu alanı bırakmalısınız. Bu dolgu alanı dediğimiz şey ingilizce’de padding olarak geçiyor. Düğmenin etrafında bir dolgu alanı var ve o dolgu alanı diğer elementlerin yaklaşmasına izin vermiyor gibi düşünebilirsiniz. E peki hangi boyutta olmalı dediğinizi duyar gibiyim, o konuda da MIT Touch Lab’in yaptığı araştırmayı kılavuz alabilirsiniz kendinize. Bu araştırmada ortalama parmak ucu dokunma alanı 8-14 mm arasında olduğunu söyleniyor. Yani kendinize düğme için 10x10mm’lik minimum limit belirleyebilirsiniz.  


 

Etiketleme

Düğmeler için bulabileceğiniz en net etiketi seçmelisiniz. Kullanıcı “acaba bu düğmeye basınca/tıklayınca/dokununca” ne olacak diye düşünmemeli. Aşağıdaki örnekte gördüğünüz gibi bir uyarı ekranında bulunan düğmedeki gibi bir etiketleme yaparsanız kullanıcıda bir bilinmezlik yaratmanız işten bile değil. Bu uyarı ekranı az önce fotoğraf silmek istediğini “çöp kutusu ikonlu” düğmeye basarak belirten bir kullanıcının karşılaştığı uyarı. Kullanıcının bu uyarıyı gördüğünde muhtemel tepkisi; “OLUR derken?”

Renk

Diğer içeriklerden faklı renkte olan bir düğme hemen kendini belli edecektir. Ama yalnızca renk farkı yaratarak geçiştiremezsiniz bu konuyu. Rengi farklı olduğu için düğmeye dokunan kullanıcı, bu etkileşiminden bir geri bildirim almak ister. Kullanıcının düğmeyle etkileşime girdiğini belli etmek için etkileşim sonrasında boyut, kontrast hatta belki animasyon gibi bir geri bildiriciye ihtiyacınız var.


 

Sonuç!

Düğmeler, bulundukları arayüzde kendilerine dokunulması için varlar. Kullanıcının etkileşimde bulunmasına yardımcı olmanız gerekiyor. Asıl amacınız olan “kullanıcıyı etkileşimin içine çekmek” işlevini total olarak düşünürken düğmelerin önemini atlamayın. Düğmelere gereken önemi gösterin.

Yorumlar

yorum

Author


Avatar