UI (Kullanıcı Arayüzü) Nedir?
Kısa tanım
UI (user interface, kullanıcı arayüzü), bir dijital ürünün kullanıcının gördüğü ve etkileşime girdiği katmanıdır: ekranlar, yerleşim, butonlar, formlar, menüler, ikonlar, tipografi ve renkler. UI tasarımı, bu öğeleri anlaşılır, tutarlı ve kullanıcının her hareketine net tepki veren bir yapıya dönüştürme işidir; ürünün akışlarını kullanılabilir bir görsel arayüze çevirir.
Diğer adları: kullanıcı arayüzü, UI tasarımı, arayüz tasarımı, user interface
Bir UI tasarımcısı neye karar verir?
Arayüz tasarımı "güzel görünsün" işinden çok, ekrandaki her öğenin ne olduğunu ve ne işe yaradığını ilk bakışta anlatma işidir. Tipik karar alanları şunlardır:
- Görsel hiyerarşi: Gözün önce nereye gideceği; boyut, kontrast, boşluk ve konumla belirlenir.
- Tipografi: Yazı tipi, boyut ölçeği, satır yüksekliği ve satır uzunluğu.
- Renk ve kontrast: Marka renklerinin işlevsel kullanımı (aksiyon, uyarı, hata, başarı) ve okunabilirlik.
- Boşluk ve ızgara: Öğeler arasındaki tutarlı mesafeler, hizalama, sütun yapısı.
- Bileşenler: Buton, form alanı, kart, sekme, modal gibi tekrar eden parçalar.
- Durumlar ve geri bildirim: Bir öğenin üzerine gelindiğinde, odaklandığında, yüklenirken veya hata verdiğinde nasıl göründüğü.
- Hareket: Geçişlerin ve mikro etkileşimlerin, olan biteni anlatacak kadar ama dikkat dağıtmayacak ölçüde kullanılması.
UI ile UX arasındaki çizgi
İki kavram sık sık aynı cümlede geçse de farklı soruları yanıtlar. UX, ödeme sürecinin üç adım mı beş adım mı olacağına ve her adımda ne sorulacağına karar verir; UI ise o adımların ekranda nasıl görüneceğini ve nasıl davranacağını belirler.
| UI tasarımı | UX tasarımı | |
|---|---|---|
| Temel soru | Bu ekran nasıl görünmeli ve nasıl tepki vermeli? | Kullanıcı amacına en az sürtünmeyle nasıl ulaşır? |
| Tipik çıktılar | Mockup, UI kit, bileşen spesifikasyonları | Araştırma bulguları, kullanıcı akışları, wireframe'ler |
| Odak | Görsel dil, bileşenler, etkileşim detayları | İhtiyaçlar, bilgi mimarisi, görev akışları |
Küçük ekiplerde iki rolü aynı kişi üstlenebilir; önemli olan, hangi kararın hangi soruya hizmet ettiğini karıştırmamaktır.
Örnek: tek buton, altı durum
Tasarım dosyalarında genellikle butonun yalnızca varsayılan hâli çizilir. Oysa gerçek bir arayüzde aynı butonun en az şu durumları vardır: varsayılan, üzerine gelme (hover), klavye odağı (focus), basılı (active), devre dışı (disabled) ve yükleniyor. Klavyeyle gezinen kullanıcı için odak durumu, butonun nerede olduğunu gösteren tek ipucudur:
.buton:focus-visible {
outline: 3px solid #1a56db;
outline-offset: 2px;
}Bu durumları bir kez tanımlayıp her yerde aynı bileşeni kullanmak, bir tasarım sisteminin temel işlevlerinden biridir.
İyi arayüzün dayandığı ilkeler
- Tutarlılık: Aynı işlev her ekranda aynı görünür ve aynı yerde durur.
- Belirgin etkileşim: Tıklanabilir olanla olmayan ayırt edilebilir; bağlantılar yalnızca renkle değil, alt çizgi gibi ek bir işaretle de belli olur.
- Geri bildirim: Her eylemin sonucu görünür; form gönderildi mi, hata nerede, işlem sürüyor mu?
- Okunabilirlik: Metin ile arka plan arasında yeterli kontrast. Web erişilebilirliği standardı WCAG, AA düzeyinde normal metin için en az 4.5:1 oran ister.
- Uyum: Bileşenler farklı ekran genişliklerinde bozulmadan çalışır; bu, responsive tasarımın arayüz tarafıdır.
Sık yapılan hatalar
- Odak çerçevesini (
outline) estetik kaygıyla tamamen kaldırmak. - Form alanlarında etiket yerine yalnızca placeholder kullanmak; yazmaya başlayınca alanın ne olduğu kaybolur.
- Metin etiketi olmayan, anlamı tahmin edilmesi gereken ikon butonlar.
- Açık gri üzerine gri metin gibi düşük kontrastlı tercihler.
- Çok fazla yazı boyutu ve renk tonu; ölçek küçük ve sistemli olduğunda arayüz daha sakin okunur.
- Yalnızca "her şey yolunda" senaryosunu tasarlamak; boş liste, hata mesajı ve uzun metin durumlarını unutmak.