UI/UX İyi Uygulamaları
Netlik, zekalığa üstün gelir
Kullanıcı arayüzü öğrenmeye gelmez, işini halletmeye gelir. Yaratıcı ama anlaşılmaz etkileşim, fonksiyonu öldürür.
Buton etiketleri eylem + nesne içersin ('Rapor indir' > 'Devam'). İkonlar tek başına muğlak; metin etiketle eşle. Jargon yerine gündelik dil kullan.
'Tamam' yerine 'Silmeyi onayla', 'İptal' yerine 'Vazgeç' dönüşüm niyetini netleştirir.
Aşamalı ortaya çıkarma (progressive disclosure) kullan
Her şeyi aynı anda göstermek bilişsel yük yaratır. Kullanıcının o an gerekmeyen seçenekleri gizlemek dikkati korur.
Gelişmiş ayarları 'Daha fazla' altında gizle. Çok adımlı formlarda her adım tek amaca odaklansın. Power-user özelliklerini klavye kısayolu veya menü altına al.
Linear: temel görev oluşturma alanı küçük; genişletilebilir metin alanı açılınca priority/assignee/label alanları ortaya çıkar.
Boş durum (empty state) ekranları ihmal etme
Boş bir sayfa yeni kullanıcıya 'ne yapacağım?' hissi verir. İyi tasarlanmış empty state hem öğretir hem ilk eylemi tetikler.
İllüstrasyon + kısa açıklama + birincil eylem butonu. 'Henüz veri yok' yerine 'İlk projenizi oluşturun' gibi çağrı kullan. Örnek veriyi tek tıkla yükleme seçeneği ver.
Notion: yeni workspace'te 'Şablonlardan başla' ve 'Boş sayfa' seçenekleri ile ilk değere hızla götürür.
Yükleniyor durumları için skeleton veya ilerleme göster
Beklerken ekranın 'donduğunu' sanan kullanıcı refresh atar veya terk eder. Belirsizlik asıl süreden daha rahatsız edicidir.
100ms'den uzun işlemler için skeleton/spinner. 1 saniyeden uzun işlemler için yüzdelik ilerleme. Optimistic UI: kullanıcı eylemini anında göster, sunucu sonucu geldiğinde doğrula/düzelt.
GitHub: PR merge butonuna tıklandığında düğme 'Merging...' olur, yeşilden sonsuz animasyon; 15 saniye sonunda 'Merged' ile değişir.
Hata mesajları yol gösteren olsun, suçlayan değil
'Geçersiz girdi' kullanıcıya ne yapacağını söylemez. İyi hata mesajı nedeni belirtir, nasıl düzeltileceğini önerir.
İnline doğrulama; hatalı alana odaklan. Mesajda 'ne yanlış' + 'nasıl düzeltilir' olsun. Genel 'Bir şeyler ters gitti' yerine, bağlama göre metin yaz. 4xx hataları sessizce logla, 5xx hataları alarm üret.
Yanlış: 'Şifre geçersiz.' Doğru: 'Şifre en az 8 karakter ve bir rakam içermelidir.'
100ms içinde görsel geri bildirim ver
100ms altı bir etkileşim 'anlık' algılanır, üzeri 'gecikmeli'. Tıklamanın alındığını göstermezsen kullanıcı tekrar tıklar.
Tüm tıklanabilirlerde :active stili + hover. Form submit'te butonu disable + spinner. Debounce/throttle ile ağır işlemleri tetiklemeden önce ara verme.
Arama kutusu: kullanıcı yazarken 300ms debounce; karakter başına istek atma.
Mobile-first tasarla, küçük ekranı sonra gelmiyor
Global trafiğin %60'ı mobilden. Masaüstünde başlayan tasarımlar mobilde sıkışır ve gerçek hedef kitleyi ıskalar.
Önce 360px genişlikte prototipini yap. Touch target'lar ≥44×44px. Safe area için dikkat (iPhone notch, home indicator). Responsive tipografi: clamp() ile.
Navbar'daki 40px'lik hamburger butonu 44px'e çıkar ve aroundPadding 12px ile tapmayı kolaylaştır.
Görsel hiyerarşi kur — her şey eşit önemli olamaz
Ekranda 5 CTA, 3 renk, 4 font ağırlığı olunca göz nereye bakacağını bilemez. Hiyerarşisiz arayüz gürültüdür.
Her ekranda TEK birincil eylem; ikincil/üçüncül görsel olarak zayıflasın. Ölçek: başlık ≥ alt başlık ≥ gövde ≥ meta. Whitespace hiyerarşinin yarısıdır.
Modal'da 'Evet, sil' kırmızı dolu buton; 'Vazgeç' ghost buton. İki tane dolu buton koyma.
Seçenek sayısını azalt (Hick yasası)
Karar süresi seçenek sayısıyla logaritmik artar. 20 menü öğesi, 3 gruplanmış kümeden çok daha yavaş kullanılır.
Menüleri kategori altlarına grupla. 'İleri' düzey alanları geriye it. Onboarding'de 'hemen değer' vermeyen her alanı kaldır. A/B test et.
VS Code command palette: tek arama kutusu + fuzzy search ile yüzlerce komut, menüde gezmeden erişilir.
Geri dönüş (undo) ve onay (confirm) arasında denge kur
Her eylemde onay sorarsan sürtünme artar; hiç sormazsan kaza silmeleri olur. Doğru tercih işin geri alınabilirliğine bağlı.
Tersinir eylemlerde (arşivle, taşı) undo bildirimi göster (Gmail tarzı 5 saniye). Geri alınamaz eylemlerde (kalıcı sil, ödeme) açık onay + geri sayım veya kelime yazma iste.
GitHub: repo silme için repo adını yazma zorunluluğu; yanlışlıkla 'sil' diyemezsin.
Klavye kullanıcılarını unutma — power-user için kısayol
Yoğun kullananlar klavyeye geçer. Kısayolu olmayan ürün 'oyuncak' olarak algılanır; rekabette premium segment kaybedilir.
Global arama: Cmd/Ctrl+K. Kaydet: Cmd/Ctrl+S. Yardım: ? tuşu. Kısayolları görsel olarak buton tooltip'inde göster. Çakışmaları tarayıcı varsayılanlarıyla test et.
Linear: G+I ile Inbox, G+A ile Active issues, C ile new issue — tüm uygulamada klavye öncelikli.
Karanlık modu destekle, bir sistem kuralı olarak
Kullanıcıların %80+ i karanlık modu tercih ediyor. Sistem ayarıyla uyumsuz ürün 'gözü yoran' olarak damgalanır.
prefers-color-scheme media query ile otomatik başla. Tercihi localStorage'a yaz, kullanıcı manuel değiştirebilsin. Kontrast oranı koruyacak şekilde renk tokenlarını çift tanımla.
CSS custom properties: --color-text, --color-bg ana kümeler; [data-theme="dark"] altında değerler farklı.