Blog Post

Buton Tasarımı Nasıl Yapılır?

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?

buton durumları
Buton durumları

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.

CTA butonu
CTA Butonu-Harekete geçirmeye çalıştığım için sonuna ünlem işareti koydum. Ancak bu gerekli bir şey değil.

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.

primary buton
Birincil buton

İ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.

secondary buton
İkincil buton (solda), birincil buton (sağda)

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.

tertiary buton
Üçüncül butonlar

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.

solid buton
Düz dolgulu buton (solid button)

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.

gradyan buton
Gradyan buton

Ç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.

ghost buton
Çerçeve buton

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.

hayalet buton
Hayalet buton (ghost button)

Bu butonlar ikincil eylem butonları için tercih edilen buton stilleridir.

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.

link butonu
Link butonu

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.

active button
Etkin (active) durum butonu

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.

focus button
Odaklanma durumu butonu (Focus state button)

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.

disabled buton
Pasif durum (disabled state)

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.

kötü bir buton kontrast örneği
Kötü bir kontrast örneği

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.

buton renklendirme
Durumlarına göre renklendirilen butonlar
Beğendiyseniz lütfen paylaşın:

Bir Cevap Yazın

%d blogcu bunu beğendi: