UI buton hiyerarşisi, kullanıcının sayfada hangi eylemi önce yapması gerektiğini görsel olarak yönlendirmek için kurulur. Doğru hiyerarşi olmadan kullanıcı neye tıklayacağını bilemez. **Neden Hiyerarşi Gereklidir?** Bir sayfada birden fazla eylem butonu bulunduğunda kullanıcı dikkatini doğru eyleme yönlendirmek gerekir. Hepsi eşit görünürse kullanıcı karar yorgunluğuna girer veya yanlış eylemi seçer. **Primary Buton (Birincil)** En yüksek görsel ağırlığa sahip butondur. Sayfadaki veya bileşendeki en önemli eylemi temsil eder. Özellikler: - Dolu arka plan rengi (marka rengi veya vurgu rengi) - Yüksek kontrast - Kalın veya belirgin etiket - Bir sayfada yalnızca bir tane olmalıdır; aksi takdirde önem algısı zayıflar Örnekler: "Satın Al", "Kayıt Ol", "Devam Et" **Secondary Buton (İkincil)** Primary'i destekleyen ama daha az öncelikli eylemler için kullanılır. Görsel ağırlığı primary'den düşük olmalıdır. Özellikler: - Çerçeve (outline) veya daha düşük doygunluk - Primary ile hiyerarşik fark net hissedilmeli - Aynı sayfada birden fazla secondary buton bulunabilir Örnekler: "Kaydet", "İptal", "Geri Dön" **Tertiary Buton (Üçüncül)** En düşük görsel ağırlıklı butondur. Destekleyici, düşük riskli eylemler için uygundur. Özellikler: - Çoğunlukla bağlantı (link) stilinde, arka plan yok - İnce veya daha küçük yazı - Dikkat çekmez; ancak gerektiğinde erişilebilir Örnekler: "Daha fazla bilgi", "Şifremi unuttum", "Atla" **UI Buton Hiyerarşisi Uygulama Kuralları** 1. Bir modal veya form'da yalnızca bir primary buton kullanın. 2. Primary ve secondary butonu yanyana koyarken primary'i sağa koyun; göz soldan sağa tarayan kullanıcı primary'i son görür ve eylem için hazırdır. 3. Destruct (silme, iptal gibi geri dönülemez) eylemler için kırmızı veya tehlike sinyali veren renk kullanın; bu eylemler her zaman secondary veya tertiary düzeyde görünmeli. 4. Devre dışı butonlarda görünürlük korunmalı; tamamen silinmemeli. Düşük opaklık ile görünür ama erişilemez durumu gösterilir. **Boyut ve Dokunma Alanı** Mobil tasarımda minimum buton dokunma alanı 44×44 piksel olmalıdır (Apple HIG ve Material Design standartları). Daha küçük butonlar kullanıcının yanlış dokunmasına yol açar. UI buton hiyerarşisi kurulurken her butonu yalnızca başka butonlarla değil, sayfanın tüm görsel ağırlıklarıyla birlikte değerlendirin.