Arayüzde Buton Tasarımı ve Buton Durumları Nasıl Belirlenir?
Buton, kullanıcının arayüzde en çok dokunduğu öğedir; hiyerarşisi, durumları ve etiketi yanlışsa en güzel ekran bile yanlış yöne iter. İyi buton tasarımı birkaç tutarlı kararın sistemli uygulanmasıdır.
Bir bakışta
- Bir ekranda bir birincil eylem olur. Her şey vurgulu olduğunda hiçbir şey vurgulu değildir.
- Durumlar tasarımın yarısıdır. Varsayılan, üzerine gelme, odak, basılı, devre dışı ve yükleniyor halleri baştan çizilmelidir.
- Etiket eylemi söyler. "Gönder" yerine "Siparişi tamamla" gibi ne olacağını anlatan fiil kullanılır.
- Butonun butona benzemesi gerekir. Şekil, renk ve konum ile tıklanabilirlik sinyali verilmelidir.
- Erişilebilirlik sonradan eklenmez. Kontrast, klavye odağı ve yeterli dokunma alanı tasarımın parçasıdır.
Buton hiyerarşisi: hangi eylem öne çıkar?
Buton tasarımının ilk kararı görünüm değil, önem sırasıdır. Bir ekranda kullanıcıdan istenen asıl eylem birincil butondur: dolgulu, yüksek kontrastlı ve tek. Yardımcı eylemler ikincil butonla, çerçeveli ya da hafif dolgulu gösterilir. Önemsiz ya da geri dönüşü kolay eylemler metin butonu olarak kalır.
Örneğin bir ödeme ekranında "Siparişi tamamla" birincil, "Sepete dön" ikincil, "Kupon kodu gir" metin butonudur. Hepsi aynı dolguda olsaydı kullanıcı gözle hiyerarşiyi arardı. Yıkıcı eylemler (silme, iptal) ayrı bir değerlendirme ister: kırmızı gibi uyarıcı bir renk, ama sayfada birincil gibi tek başına parlamadan; çoğu zaman bir onay adımıyla birlikte.
Her buton türünün işi farklıdır
| Birincil | İkincil | Metin butonu | |
|---|---|---|---|
| Görünüm | Dolgulu, yüksek kontrast | Çerçeveli ya da hafif dolgulu | Yalnızca metin, altı çizili olabilir |
| Kullanım yeri | Ekranın ana eylemi | Yardımcı ya da alternatif eylem | Düşük riskli, tekrarlı eylem |
| Ekrandaki sayı | Tek | Birkaç olabilir | Gerektiği kadar |
| Örnek | Siparişi tamamla | Sepete dön | Kupon kodu gir |
Durumlar: bir butonun tüm halleri
Bir butonun tek görünümü yoktur. Kullanıcı etkileştikçe buton cevap verir ve her cevap tasarlanmalıdır. Standart durumlar şunlardır:
- Varsayılan: etkileşim öncesi hali
- Üzerine gelme: imleç üzerindeyken hafif bir değişim, tıklanabilirliği teyit eder
- Odak: klavye ile gelen kullanıcı için net bir çerçeve ya da halka
- Basılı: dokunma ya da tıklama anında geri bildirim
- Devre dışı: şu anda kullanılamayan eylem
- Yükleniyor: eylem başladı, sonuç bekleniyor
Devre dışı durum ayrıca düşünülmelidir. Gri ve soluk bir buton, kullanıcıya neden tıklayamadığını söylemez. Mümkünse butonu aktif bırakıp tıklandığında eksik alanı göstermek ya da yanında neden pasif olduğunu açıklayan kısa bir not koymak daha az kafa karıştırır. Yükleniyor durumunda ise çift tıklamayı önlemek ve işlemin sürdüğünü göstermek için butonun içinde ilerleme göstergesi ve etiketin değişmesi iyi bir uygulamadır.
Durumların tasarımda eksik kalması, geliştirme aşamasında tahmine yol açar. Her bileşen için durum tablosunu tasarım dosyasında yan yana gösterin; geliştirici hangi durumun nasıl görüneceğini sormadan uygulayabilsin. Bu tablo aynı zamanda tasarım incelemelerinde eksik durumu fark etmeyi kolaylaştırır.
Buton, kullanıcıyla birlikte durum değiştirir
- VarsayılanTıklanabilir olduğu belli olur.
- Üzerine gelme / odakEtkileşim başlamadan önce teyit.
- BasılıDokunma hemen geri bildirim.
- Yükleniyorİşlem sürerken çift tıklama engellenir.
- TamamlandıSonuç gösterilir, buton varsayılana döner.
Etiket yazımı
Butonun metni, tasarımın en çok gözden kaçan parçasıdır. Etiket eylemi anlatmalı ve sonucu öngörülebilir kılmalıdır. "Tamam", "Gönder" ya da "Evet" gibi genel etiketler bağlam gerektirir; "Siparişi tamamla", "Taslağı kaydet" ya da "Hesabı sil" tek başına anlaşılır.
Pratik ilkeler:
- Fiille başlayın: eylem ne ise o yazılsın
- Kısa tutun: çoğu zaman birkaç sözcük yeter, ama kısalık anlamdan feragat etmesin
- Çift anlamdan kaçının: "İptal" hem sürecin iptali hem pencerenin kapanması olabilir; hangisi olduğunu belirtin
- Tutarlı olun: aynı eylem ürün genelinde aynı adı taşısın
- Tehlikeli eylemde sonucu yazın: "Sil" yerine "Hesabı kalıcı olarak sil"
UX yazarlığı bu işin ayrı bir yönüdür; ayrıntılar için mikro metin yazımı sayfasına bakabilirsiniz.
Örnek: bir tatil rezervasyonu ekranında "Devam" yerine "Ödemeye geç" yazmak, kullanıcıya sıradaki adımı söyler ve beklenmedik ödeme ekranıyla karşılaşma şaşkınlığını azaltır.
Boyut, boşluk ve dokunma hedefi
Butonun boyutu hem estetik hem işlevsel bir karardır. Etiketin etrafında yeterli iç boşluk bırakılmazsa buton sıkışık görünür ve tıklaması zorlaşır. Mobilde parmak ucu için yeterince geniş bir dokunma alanı gerekir; görünür buton küçük olsa bile etrafındaki dokunulabilir alan genişletilebilir. Komşu butonlar arasına da yanlış dokunmayı önleyecek bir boşluk koyulmalıdır.
Bir tasarım sisteminde butonlar genellikle küçük, orta ve büyük gibi sınırlı boyut kademeleriyle tanımlanır. Her ekran için yeni bir boyut icat etmek yerine bu kademelerden seçmek tutarlılığı korur. Genişlik tarafında, metni taşırmayacak bir esneklik bırakın: Türkçe etiketler İngilizceye göre uzayabilir ve sabit genişlikli butonlar kolayca taşar. Birincil eylem mobilde çoğu zaman ekran genişliğini kaplayan tam genişlikli bir butonla verilir.
Test için pratik bir yöntem: butonu gerçek içerikle, en uzun etiketle ve en küçük ekranda deneyin. Taşma, sıkışma ya da yanlış dokunma varsa boyut kuralını sistem düzeyinde düzeltin; her ekran için tek tek yama yapmayın.
Erişilebilirlik ve klavye kullanımı
Buton erişilebilir değilse bir kısım kullanıcı onu hiç kullanamaz. Kontrast konusunda, buton metninin ve butonun arka planının okunabilir bir oran sağladığından emin olun; ayrıca butonun kendisi sayfa zemininden ayırt edilebilir olmalıdır. Yalnızca renge dayanan ayrım (kırmızı sil, yeşil onayla) renk körü kullanıcılar için yetersizdir; etiket ve ikon destek olmalıdır.
Klavye ile gezinen kullanıcı için odak göstergesi hayati önemdedir. Tarayıcının varsayılan odak halkasını kaldırmak yaygın bir hatadır; kaldırıyorsanız yerine daha görünür bir gösterge koymalısınız. Teknik tarafta tıklanan öğe için gerçek bir buton öğesi kullanmak, ekran okuyucu ve klavye desteğini bedavaya getirir; tıklanabilir bir kutu çizip üzerine işlev eklemek bunu bozar. Tasarımcı bu detayı geliştirici ile konuşmalı ve tasarım notlarına eklemelidir.
Küçük kararlar butonu daha kullanılır yapar
Sık yapılan hatalar
Buton tasarımında tekrar eden hatalar:
- Bir ekranda birden fazla birincil buton koymak
- Yalnızca varsayılan durumu çizip diğer durumları geliştiricinin takdirine bırakmak
- Metin butonunu ve normal metni ayırt edilemeyecek biçimde tasarlamak
- Olumsuz eylemle olumlu eylemi aynı vurguda ve yakın konumda göstermek
- Dil çevirisinde taşan ya da kesilen etiketleri hesaba katmamak
- Yükleniyor durumunu atlamak ve kullanıcının aynı butona tekrar tekrar basmasına yol açmak
Kontrol için basit bir yöntem: ekranı bulanıklaştırıp bakın. Birincil eylem hâlâ seçilebiliyorsa hiyerarşi çalışıyor demektir. Ardından butonu klavye ile gezip her durumu gerçek ortamda deneyin.
Bu beceriyi Mindset programlarında nerede çalışırsınız
UX/UI Bootcamp ve UX / UI Uzmanlığı Sertifika Programı, UI tasarım temelleri, kullanılabilirlik ve erişilebilirlik, geliştirici iş birliği ve Figma ile tasarım sistemi başlıklarını içerir. Buton hiyerarşisi ve durumlarını bir tasarım sisteminin bileşeni olarak kurmak ve geliştiriciye aktarmak bu başlıklarla doğrudan ilişkilidir.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
Bir ekranda kaç birincil buton olmalı?
Genellikle bir tane. Ekranın asıl amacını temsil eden eylem birincil olur ve diğerleri ikincil ya da metin butonuna iner. Birden fazla eşit önemde eylem varsa ekran çok görevli demektir; bu durumda ekranı bölmek ya da eylemleri gruplamak daha doğru bir çözümdür.
Devre dışı buton kullanmalı mıyım?
Dikkatli kullanın. Pasif bir buton kullanıcıya neden tıklanamadığını söylemez. Mümkünse butonu aktif bırakıp hatalı alanı vurgulamak ya da yanında kısa bir açıklama göstermek daha anlaşılırdır. Kalıcı olarak geçersiz eylemleri ise hiç göstermemek tercih edilebilir.
Buton mu bağlantı mı kullanmalıyım?
Bir eylem gerçekleştiriyorsa (gönder, kaydet, sil) buton; başka bir sayfaya götürüyorsa bağlantı kullanılır. Görsel olarak butona benzeyen bir bağlantı olabilir, ama davranışın anlamı seçimi belirler. Doğru öğe seçimi klavye ve ekran okuyucu kullanıcıları için de önemlidir.
İkonlu buton mu, yalnızca metinli buton mu?
Yeni ya da belirsiz eylemlerde metin her zaman daha güvenlidir. İkon, evrensel anlamı olan eylemlerde (arama, kapatma) tek başına kullanılabilir. İkon ve metin birlikte olduğunda anlam pekişir; yalnızca ikon varsa bile erişilebilir bir ad tanımlanmalıdır.
Buton köşe yuvarlaklığı ve renk nasıl seçilir?
Bu estetik karar marka diline ve tasarım sistemine bağlıdır; önemli olan ürün genelinde tutarlı olmasıdır. Renk seçerken marka rengini kontrast ve erişilebilirlik ile birlikte sınayın. Güzel görünen ama okunmayan bir buton hedefine ulaşmaz.