Kısa cevap: UI/UX tasarım ilkeleri; tutarlılık, geri bildirim, görsel hiyerarşi, hata önleme, erişilebilirlik ve rahat dokunma alanı gibi, bir arayüzün kolay anlaşılıp az hatayla kullanılmasına yardım eden ve bağlama göre uygulanan temel kurallardır.
Ben Selçuk Aker; 19 yılı aşkın süredir grafik tasarım ve dijital arayüz tasarımı yapıyorum. Grafik tasarım eğitiminden gelen biri olarak şunu sık gördüm: bir ekran çok iyi görünüp yine de kullanılamaz olabilir. Arayüz ilkeleri bu açığı kapatmak için vardır. Bu rehberde temel ilkeleri, kaynağını ve bir ekranda nasıl denetleneceğini anlatıyorum. Sayısal değerler için Apple, Google ve W3C'nin resmî kılavuzlarına bağlantı verdim; bu kılavuzlar güncellenebildiği için uygulamadan önce kaynağı kontrol etmenizi öneririm.
İlke kural değildir: önce bağlam ve görev
Tasarım ilkeleri, yıllar içinde tekrar tekrar gözlenen kullanıcı davranışlarından çıkarılmış genellemelerdir. Bir ilkeyi körü körüne uygulamak, bağlamı göz ardı etmek demektir. Bir fabrikada eldivenle kullanılan tablet arayüzüyle bir müzik uygulaması aynı yoğunlukta tasarlanmaz.
Her ilkeyi uygulamadan önce şu üç soru sorulmalıdır:
- Bu ekranda kullanıcının birincil görevi nedir?
- Kullanıcı ekranı hangi koşulda kullanıyor: acele, tek el, gürültülü ortam, uzun süreli çalışma?
- Bu ilkeyi uygulamak görevi kolaylaştırıyor mu, yoksa yalnızca daha düzenli mi gösteriyor?
Nielsen'in 10 kullanılabilirlik sezgiseli
Jakob Nielsen'in 1990'larda yaygınlaştırdığı on kullanılabilirlik sezgiseli, arayüz değerlendirmesinde hâlâ en çok başvurulan çerçevelerden biridir. Asıl metni Nielsen Norman Group sayfasında okuyabilirsiniz; aşağıda kendi ifademle özetliyorum:
| # | İlkenin özü | Ekranda nasıl görünür? |
|---|---|---|
| 1 | Sistemin ne yaptığını göstermek | Yükleme göstergesi, kaydedildi bildirimi |
| 2 | Kullanıcının dilini konuşmak | Teknik terim yerine tanıdık sözcük |
| 3 | Kontrolü kullanıcıya bırakmak | Geri al, iptal, kolay çıkış |
| 4 | Tutarlı olmak ve alışılmış kalıplara uymak | Aynı eylem her yerde aynı adda ve görünüşte |
| 5 | Hatayı oluşmadan önlemek | Geçersiz tarihi baştan seçtirmemek |
| 6 | Hatırlatmak yerine göstermek | Son aramalar, görünür seçenekler |
| 7 | Deneyimliye kısa yol sunmak | Kısayol, kayıtlı tercih |
| 8 | Sade ve odaklı olmak | Görevle ilgisiz öğeleri azaltmak |
| 9 | Hatayı anlaşılır anlatıp çözüm sunmak | "Kart numarası eksik" gibi açık mesaj |
| 10 | Gerektiğinde yardım sunmak | Bağlama yerleştirilmiş kısa açıklama |
Bu on madde bir kontrol listesi olarak işe yarar; ancak hangisinin önce düzeltileceği, sorunun kullanıcı görevine etkisine göre belirlenmelidir.
Görsel hiyerarşi ve okuma sırası
Bir ekranda her şey aynı önemdeyse hiçbir şey önemli değildir. Görsel hiyerarşi, kullanıcının gözünün önce en önemli bilgiye, sonra eyleme gitmesini sağlar. Bunun araçları boyut, ağırlık, renk, boşluk ve konumdur.
- Her ekranda tek bir birincil eylem olsun; ikincil eylemler görsel olarak geri planda dursun.
- Başlık, alt başlık ve gövde metni arasında belirgin bir ölçek farkı olsun.
- Boşluk, ilişkili öğeleri birleştirip ilişkisizleri ayırmanın en ucuz yoludur.
- Sol üstten başlayan okuma alışkanlığı Türkçe gibi soldan sağa dillerde geçerlidir; sağdan sola dillerde yerleşim aynalanmalıdır.
Tipografi bu hiyerarşinin temelidir; ayrıntısı için tipografi nedir yazısına, grafik tasarımın genel ilkeleri için grafik tasarım elemanları ve ilkeleri rehberine bakabilirsiniz.
Tutarlılık ve tasarım sistemi
Tutarlılık, kullanıcının bir kez öğrendiğini başka ekranda yeniden öğrenmek zorunda kalmamasıdır. İki türü vardır: ürünün kendi içinde tutarlılık (aynı buton her yerde aynı davranır) ve platform alışkanlıklarıyla tutarlılık (iOS'ta geri hareketi, Android'de sistem geri tuşu beklenen biçimde çalışır).
Tutarlılığı ekran sayısı arttıkça elle korumak zorlaşır. Bu noktada tasarım sistemi devreye girer: renk, tipografi, aralık ve bileşenlerin tek kaynaktan yönetildiği, kullanım kurallarının yazıldığı bir yapı. Konuyu tasarım sistemi nedir ve design system tesliminde neler olmalı yazılarında ele aldım. Bileşen kütüphanesi gereken projeler için design system hizmeti sayfası var.
Geri bildirim ve sistem durumu
Kullanıcı bir butona dokunduğunda bir şey olmalı ve bu görünmelidir. Geri bildirim eksikse kişi aynı butona tekrar basar, bu da çift sipariş ya da çift ödeme gibi sorunlara yol açabilir.
Her etkileşimli öğe ve her veri isteği için şu durumlar tasarlanmalıdır:
- Varsayılan, basılı, odaklanmış ve devre dışı buton durumları.
- Yükleme: İşlem uzun sürüyorsa ilerleme ya da iskelet görünüm.
- Başarı: Ne olduğunu ve sırada ne olduğunu söyleyen kısa onay.
- Hata: Ne olduğunu ve nasıl düzeltileceğini anlatan mesaj.
- Boş durum: Henüz veri yokken ekranın ne gösterdiği ve kullanıcıyı nereye yönlendirdiği.
Bu durumların arayüze nasıl yansıdığını API entegrasyonunda yükleme ve hata durumları yazısında örneklerle anlattım.
Hata önleme ve geri alma
Hata mesajını iyi yazmak önemlidir; ama hatanın hiç oluşmaması kullanıcı için daha da iyidir. Hata önleme, kullanıcının yanlış yapmasını zorlaştıran tasarım kararlarıdır:
- Geçerli olmayan seçenekleri baştan sunmamak (geçmiş tarih, stokta olmayan beden).
- Biçim gerektiren alanlarda örnek ve otomatik biçimlendirme kullanmak.
- Geri dönüşü olmayan işlemlerde (silme, gönderme, ödeme) açık bir onay adımı koymak.
- Mümkünse onay yerine geri alma sunmak: "Mesaj silindi. Geri al."
Hata mesajı yazarken üç soruya cevap verilmelidir: ne oldu, neden oldu ve kullanıcı şimdi ne yapmalı? "Hata kodu 402" kullanıcıya bir şey söylemez; "Kartınızın son kullanma tarihi geçmiş görünüyor. Başka bir kartla deneyebilirsiniz." ise sorunu ve çözümü birlikte verir. Mesaj, hatanın oluştuğu alanın hemen yanında gösterilmeli ve kullanıcının girdiği bilgiler silinmemelidir.
Tanıma, hatırlama ve Gestalt
İnsan, bir şeyi hatırlamaktan çok görüp tanımakta iyidir. Bu yüzden ikonların yanında metin etiketi kullanmak, menüleri gizlemek yerine görünür bırakmak ve son seçimleri hatırlamak kullanıcının zihinsel yükünü azaltır. Yalnız ikonla anlatılan bir eylem, herkes için aynı anlamı taşımayabilir.
Gestalt ilkeleri ise insanın görsel öğeleri nasıl grupladığını açıklar. Arayüzde en çok işe yarayanlar şunlardır:
- Yakınlık: Birbirine yakın öğeler birlikte algılanır. Form etiketi kendi alanına, bir sonraki alandan daha yakın olmalıdır.
- Benzerlik: Aynı görünen öğelerin aynı işlevi olduğu varsayılır. Tıklanmayan bir metni link rengine boyamak bu yüzden kafa karıştırır.
- Ortak alan: Bir kart ya da kutunun içindeki öğeler bir grup olarak okunur.
Fitts ve Hick yasaları
Fitts yasası, bir hedefe ulaşma süresinin hedefin uzaklığı arttıkça uzadığını, büyüklüğü arttıkça kısaldığını söyler. Arayüzdeki karşılığı basittir: sık kullanılan ve önemli eylemler büyük ve erişilebilir yerde olmalı; tehlikeli eylemler ise sık kullanılan butonların hemen yanına konmamalıdır. Mobilde başparmağın rahat ulaştığı alan bu yüzden önemlidir.
Hick yasası (Hick-Hyman yasası olarak da anılır), seçenek sayısı arttıkça karar süresinin uzadığını anlatır. Bu, her menünün kısaltılması gerektiği anlamına gelmez; seçenekleri anlamlı gruplara ayırmak, varsayılan bir seçim sunmak ve ilk adımda yalnız gerekli seçenekleri göstermek daha doğru bir uygulamadır.
Dokunma hedefi boyutu
Parmak, fare imleci kadar hassas değildir. Küçük dokunma alanları yanlış dokunmalara ve özellikle motor becerisi kısıtlı kullanıcılar için ciddi zorluklara yol açar. Platform kılavuzlarının önerileri şöyledir:
| Kaynak | Önerilen en küçük dokunma alanı |
|---|---|
| Apple Human Interface Guidelines | 44 × 44 pt |
| Material Design ve Android erişilebilirlik kılavuzu | 48 × 48 dp |
| WCAG 2.2, 2.5.8 Hedef Boyutu (En Az) | 24 × 24 CSS piksel (istisnalarıyla, AA düzeyi) |
Görsel olarak küçük bir ikon, çevresindeki dokunulabilir alan büyütülerek bu ölçülere uygun hale getirilebilir. Yan yana duran hedefler arasında yeterli boşluk bırakmak da aynı derecede önemlidir.
Tek el kullanımı ve erişim bölgesi
Telefon tek elle tutulduğunda başparmağın rahat ulaştığı alan ekranın alt ve orta bölümüdür; üst köşelere ulaşmak için elin kaydırılması gerekir. Ekranlar büyüdükçe bu fark daha belirgin hale gelir. Bu nedenle sık kullanılan eylemlerin ekranın alt kısmına, örneğin alt sekme çubuğuna ya da ekrana sabitlenmiş bir birincil butona yerleştirilmesi yaygın bir çözümdür.
Bu bir kural değil, bir eğilimdir. Kullanıcı uygulamayı masada iki elle de kullanabilir; tablet ise bambaşka bir tutuş biçimi gerektirir. Önemli olan, en sık ve en önemli eylemin en zahmetli noktaya bırakılmamasıdır. Silme gibi geri dönüşü zor eylemler ise kolay ulaşılan ama yanlışlıkla dokunulmayacak bir konumda, açık bir etiketle sunulmalıdır.
Platform kılavuzları ve ilkeler nasıl birlikte kullanılır?
Genel ilkeler "ne" sorusunu cevaplar: geri bildirim ver, tutarlı ol, hatayı önle. Platform kılavuzları ise "nasıl" sorusuna, o platformun alışkanlıkları içinde cevap verir. Apple'ın Human Interface Guidelines dokümanı iOS'ta gezinme, sistem bileşenleri ve tipografinin nasıl kullanılacağını; Google'ın Material Design 3 dokümanı Android ve web tarafında bileşenlerin davranışını, renk sistemini ve yerleşim kurallarını anlatır.
Bir tasarımcı için doğru yaklaşım, genel ilkeyi platform kılavuzunun önerdiği kalıpla uygulamaktır. Örneğin "kullanıcıya kontrol ver" ilkesi iOS'ta kenardan kaydırarak geri dönme, Android'de sistem geri hareketi ile karşılanır. Kılavuzların dışına çıkmak mümkündür; ama bunun bilinçli bir kararla ve test edilerek yapılması gerekir.
Erişilebilirlik: WCAG ve kontrast
Erişilebilirlik, ürünün görme, işitme, motor ya da bilişsel farklılıkları olan kişiler tarafından da kullanılabilmesidir. Temel referans W3C'nin WCAG 2.2 yönergeleridir. Tasarım aşamasında kontrol edilmesi gereken başlıca noktalar:
- Metin kontrastı: AA düzeyinde normal boyuttaki metin için en az 4.5:1, büyük metin için en az 3:1 kontrast oranı istenir (kontrast açıklaması).
- Metin dışı kontrast: Form alanı kenarlığı ve anlam taşıyan ikonlar gibi öğeler için en az 3:1.
- Yalnız renge güvenmemek: Hata durumunu yalnız kırmızı renkle değil, ikon ve metinle de belirtmek.
- Odak görünürlüğü: Klavyeyle gezinen kişi hangi öğede olduğunu görebilmeli.
- Alternatif metin: Anlam taşıyan görsellerin ekran okuyucuya açıklaması.
- Hareketi azaltma: Sistem ayarında hareket azaltma seçilmişse büyük animasyonların sadeleştirilmesi.
- Yazı boyutu büyütme: Kullanıcı yazıyı büyüttüğünde düzenin bozulmaması.
Web tarafındaki kontroller için web standartları ve erişilebilirlik yazısına bakabilirsiniz.
Mikro metin ve UX writing
Buton etiketleri, hata mesajları, boş durum açıklamaları ve izin istekleri arayüzün parçasıdır. "Tamam" yerine "Siparişi onayla" yazmak, kullanıcının neyi onayladığını açıkça söyler. Gerçek içerik olmadan tasarlanan ekranlar, Türkçe metin uzunluğu eklendiğinde bozulabilir; bu yüzden tasarıma gerçek ya da gerçeğe yakın içerikle başlamak önemlidir. Ayrıntılar için UX writing ve lorem ipsum yerine gerçek içerikle test yazılarına göz atabilirsiniz.
İlkeleri bir ekranda denetlemek: kontrol listesi
Bir ekranı tamamlandı saymadan önce şu soruları sorun:
- Ekranın birincil görevi ve tek birincil eylemi belli mi?
- Başlık, gövde ve eylem arasında açık bir hiyerarşi var mı?
- Aynı eylem diğer ekranlarla aynı adda ve görünüşte mi?
- Yükleme, boş, hata ve başarı durumları tasarlandı mı?
- Geri dönüşü olmayan işlemler için onay ya da geri alma var mı?
- İkonlar metinle destekleniyor mu?
- Metin kontrastı 4.5:1, büyük metin ve kontroller 3:1 eşiğini karşılıyor mu?
- Dokunma alanları platform önerilerine uygun mu?
- Yazı büyütüldüğünde ve uzun Türkçe metinle düzen bozulmuyor mu?
- Hata mesajları sorunu ve çözümü söylüyor mu?
Bu ilkelerin süreç içindeki yerini kullanıcı deneyimi tasarımı nedir rehberinde, mobil özelinde uygulanışını mobil uygulama tasarımı nedir rehberinde, ilkeleri işte kullanma becerisini de UI/UX tasarımcı becerileri sayfasında anlattım. Arayüzün temellerine dair daha geniş bir giriş için kullanıcı arayüzü (UI) tasarımı yazısına ve UI/UX tasarım ana sayfasına bakabilirsiniz.
UI/UX tasarım ilkeleri hakkında sık sorulan sorular
UI tasarım ilkeleri ile grafik tasarım ilkeleri aynı mı?
Ortak bir temele sahiptirler: hiyerarşi, denge, kontrast, hizalama ve tipografi her iki alanda da geçerlidir. Arayüzde bunlara etkileşim eklenir; geri bildirim, durumlar, hata önleme, dokunma alanı ve erişilebilirlik gibi ilkeler basılı bir işte karşılığı olmayan kararlardır.
Nielsen'in 10 ilkesi hâlâ geçerli mi?
Bu ilkeler belirli bir teknolojiye değil, insanların sistemlerle etkileşimindeki genel eğilimlere dayandığı için mobil uygulamalarda ve yeni arayüz türlerinde de yaygın olarak kullanılıyor. Yine de bir değerlendirme yöntemi olarak sezgisel inceleme, gerçek kullanıcılarla yapılan testin yerini tutmaz.
Minimal tasarım her zaman daha kullanışlı mıdır?
Hayır. Gereksiz öğeleri azaltmak çoğu zaman yardımcı olur; ama etiketleri kaldırmak, eylemleri gizlemek ya da kontrastı düşürmek kullanılabilirliği azaltabilir. Sadelik, görevle ilgisiz öğelerin çıkarılması demektir; gerekli bilginin gizlenmesi değildir.
Erişilebilirlik yasal bir zorunluluk mu?
Bu, ürünün türüne, hizmet verdiği ülkeye ve sektöre göre değişir. Örneğin Avrupa Birliği'nde Avrupa Erişilebilirlik Yasası Haziran 2025'ten itibaren belirli ürün ve hizmetlere uygulanmaya başladı. Bu genel bir bilgidir, hukuki tavsiye değildir; kendi durumunuz için bir hukuk uzmanına danışmalısınız. Yasal yükümlülük olmasa da erişilebilir tasarım daha fazla kişinin ürünü kullanabilmesini sağlar.
Dokunma alanı ne kadar büyük olmalı?
Apple Human Interface Guidelines en az 44 × 44 pt, Android ve Material Design en az 48 × 48 dp öneriyor. WCAG 2.2'deki AA düzeyi ölçüt ise istisnalarıyla birlikte en az 24 × 24 CSS piksel tanımlıyor. Mobil uygulamada platform kılavuzlarındaki değerler esas alınmalıdır.
Tasarım sistemi olmadan tutarlılık sağlanır mı?
Küçük bir projede, ortak stiller ve birkaç temel bileşenle tutarlılık sağlanabilir. Ekran sayısı ve ekipteki kişi sayısı arttıkça kuralları yazılı ve tek kaynaktan yönetmek gerekir; bu noktada tasarım sistemi bir lüks olmaktan çıkar.
İlkelere uygun bir ekran yine de başarısız olabilir mi?
Evet. İlkeler yaygın sorunları önler ama ürünün doğru problemi çözdüğünü göstermez. Kullanıcının ihtiyacı yanlış anlaşılmışsa ilkelere tamamen uygun bir ekran da kullanılmayabilir. Bu yüzden ilkeler, kullanıcı araştırması ve testle birlikte uygulanmalıdır.