Butonlar, bir web sitesi veya mobil uygulama kullanırken aksiyon alma, seçim yapma gibi kararları verebilmek için kullanılan bir kullanıcı arayüzü (user interface) bileşenidir. Peki buton tasarımı nasıl yapılır?
Diyalog kutularında, modal pencerelerde, formlarda, kartlarda ve araç çubuklarında sıkça kullanılır.
Buton bileşenini aşağıdaki alt başlıklar halinde inceleyeceğim.
- Buton Hiyerarşisi
- Buton Stilleri
- Buton Durumları
- Buton Renklendirme
Buton Tasarımı: Hiyerarşi
Butonların hiyerarşisine göre nasıl iletişim kurduklarına göz atalım.
CTA Butonu
Call to action (yazıda bundan sonra CTA olarak bahsedeceğim) butonları genellikle ziyaretçilerinden en önem verilen, birincil hedef olan, işletmenin/kuruluşun şiddetle önerdiği durumlarda kullanılan butondur. Kayıt olma, satın alma, ücretsiz deneme gibi aksiyonların yapılması istenildiği durumlarda kullanılan, satışların, üyeliklerin artması için oldukça önemli bir butondur. Özellikle açılış sayfalarında (landing page) hayati bir önem taşır.
Birincil Eylem (Primary Action) Butonu
Eylem çağrısı (CTA) butonu ile birincil butonlar aynı gibi görünse de , aslında aynı değillerdir. CTA butonları ile arayüzün yapmasını istediği şey yapıldıktan sonra birincil butonlarla da bu yolculuk devam eder. “Başla”, “devam et”, “tamamla” gibi eylemlerde birincil buton kullanılır.
Birincil (primary) butonlar hiyerarşide en üstte yer alır. Buton stillerinde hiyerarşi düzenini yazının devamında anlatacağım.
İkincil (Secondary) Eylem Butonu:
İkincil (secondary) butonlar, kullanıcıya birincil butonlar için verilen alternatiftir. Örneğin birincil eylem olan “devam et” butonuna alternatif olarak ikincil eylem “geri dön” butonudur. Birincil butondan daha az dikkat çekici bir ikincil buton stili hazırlamak gerekir.
Genellikle “çerçeve butonları” ve “hayalet butonları” ikincil buton olarak kullanmayı tercih ediyorum.
Üçüncül (Tertiary) Eylem Butonu
Birincil işlem olmamaları koşuluyla çeşitli eylemlerde bulunulması için kullanılır. Örneğin “yeni ekle”, “düzenle”, “sil” gibi aksiyonlar üçüncül butonlarla alınır. Daha küçük ve daha az belirgin stillerle üçüncül buton oluşturulur.
Buton Tasarımı: Stiller
Düz (solid) Buton
Düz dolgulu buton , tek bir rengin bir nesnenin tamamına eşit şekilde uygulanan butondur. Birincil butonlarda kullanılır. Hiyerarşinin en üstündedir. Hiyerarşide en üstte olmasının sebebi içi doldurulmuş bir buton olmasıdır.
Gradyan (Gradient) Buton
Gradyan dolgulu butonlar, başlanılan bir rengin yavaşça kaybolması ve başka bir renge dönüşmesiyle yapılan butonlardır. İki veya daha fazla rengin birbirine geçişmesidir. CTA butonlarında ve birincil butonlarda kullanılır.
Çerçeve Butonları ve Hayalet Butonlar
Çerçeve butonu olarak kastedilen “outlined” butonlar. Yani içi doldurulmamış butonlar. Açık arka plan üzerine koyu çerçeve ve etiket yazısı (label text) ile olan butonlardır.
Hayalet buton (ghost button), aynı şekilde içi doldurulmamış fakat koyu arka plan üzerine açık renk çerçeve ve etiket yazısı (label text) ile yapılan butonlardır.
Bu butonlar ikincil eylem butonları için tercih edilen buton stilleridir.
Link Butonu
Metin bağlantıları çok basit bir buton türüdür. Bir şeyin bağlantı olduğunu göstermenin birkaç farklı yolu vardır. Bu, bir renk veya alt çizgi veya hatta sadece metnin kendisi olabilir. Üçüncül eylem butonlarında sık sık kullanılır.
Simge Butonu
Etiket yazısının yanında bir simge (icon) olan butonlardır. Hem etiket yazısı hem simge etkileşimi arttırır.
Yüzen (Floating Action) Buton
Google Material Design ile özdeşleşen FAB (floating action button) bir ikon butonu gibi görünür ancak aslında birincil eylem işlevini görür. Mobil tasarımlarda sıkça görürüz. Bir ekrandaki birincil veya en yaygın eylemi gerçekleştirir. Tüm ekran içeriğinin önünde, genellikle ortasında bir simge bulunan dairesel bir şekil olarak görünür.
Buton Tasarımı: Durumlar
UI tasarımda tutarlılık için belirli durumlarda butonların nasıl görüneceği ve hissettireceği ve doğru geribildirim verebilmesi için buton durumlarının (button states) tasarım sistemi oluşturulurken önceden belirlenmesi, daha iyi bir tasarım süreci ve kullanıcı deneyimi sunacaktır.
Etkin Durum (Active States)
Bir butonun etkileşimli olduğunu belirtir. Tıklanabilir veya dokunulabilir butondur. Muhtemelen ilk tasarlanacak buton durumu etkin (active) durumdur. Bir web sitesine girdiğinizde henüz hiçbir etkileşime girmediğiniz butonun halidir.
Odaklanma Durumu (Focus States)
UI tasarımda çok önemli bir durumdur. Odaklanma durumu olmadan klavye veya diğer yönlendirmeli aygıtlar aracılığıyla gezinmek neredeyse imkansızdır. UI tasarımda odaklanma durumu gözden kaçırılırsa da iyi bir şey var ki o da, web tarayıcıların hali hazırda odaklanma durumunu varsayılan olarak sunmasıdır. Siyah veya mavi bir çerçeve ile.
Ekran okuyucular ve klavye gezintisi görme engelli veya sınırlı hareket kabiliyeti olan kullanıcılar için odak durumlarına dayandığından, erişilebilirlik için tasarım yaparken odaklanmış durumlar çok önemlidir. Odak durumları tüm etkileşimli bileşenler için geçerlidir. Diğer görsel ipuçlarıyla belirtilmedikleri için yüksek vurgu almaları gerekir.
Fareyle Üzerine Gelme Durumu (Hover State)
Kullanıcıların genellikle bir fare kullandığı web uygulamaları için, üzerine gelinmiş durumdur. Kullanıcı etkileşimli bir öğenin üzerine bir imleci yerleştirdiğinde karşı tarafla iletişim kurar. Kullanıcılara bu butonun tıklanabilir olduğunu belirtmeye çalışır. Kullanıcıları, animasyonuyla o butona tıklamaya teşvik eder.
Hover state, web arayüzlerde kullanılır. Mobil ve tabletlerde fareyle üzerine gelme durumu olmadığı için kullanılmaz.
Basılmış Durum ( Pressed State)
Basılmış durum (pressed state), kullanıcının imleci veya parmağının buton üzerinde basılı tuttuğu durumdur. Kullanıcının tıklama, dokunma veya basma durumlarını bildirir. Genellikle daha koyu renkler veya iç gölgelerle gösterilir.
Sol taraf – etkin durum / sağ taraf – basılmış durum
Pasif Durum ( Disabled State)
Butonun devre dışı olma durumudur. Butonun etkileşimli olmadığına vurgu yapar. Pasif durumda olan bir butonun etkin bir butona dönüşmesi için kullanıcının yapması gereken eylemler olabilir. Eksik durumlar tamamlanmadan kullanıcının ilerlemek istemesini ve olası hataları engeller.
Buton Renklendirme
Buton arka planının renkleri ve buton etiketlerinin yazı renkleri arasında uygun bir kontrast olmalıdır. Okunabilirlik ve erişilebilirlik ilkeleri açısından uygun kontrastı belirten standartlar kullanarak, etkin bir buton oluşturabilirsiniz.
Tasarımda renklerin dili vardır. Bu ortak düşünülen dil coğrafyadan coğrafyaya, kültürden kültüre değişir. Bir ürün veya proje tasarlanırken hedef kitlesine uygun renk dili seçilmelidir.
Örneğin, UI tasarımda hemen hemen tüm tasarımcıların ortak kullandığı geribildirim renklerini ele alalım.
“Yeşil” olumlu, başarılı ve beklenen eylemleri,
“Sarı” uyarıları,
“Kırmızı” hataları, gerçekleşemeyen eylemleri,
“Mavi” bilgi amaçlı eylemleri
Temsil etmektedir. Ürünün ya da markanın renklerine uygun olması hariç tutularak, “kırmızı” bir “ilerle” butonu kullanılmamalıdır.
