UI ve UX: İki Kavram, Tek Amaç
UI (User Interface, kullanıcı arayüzü) ve UX (User Experience, kullanıcı deneyimi) sıkça birbirinin yerine kullanılır; oysa farklı ama tamamlayıcı disiplinlerdir. UI, kullanıcının gördüğü ve dokunduğu katmandır: renkler, tipografi, butonlar, boşluklar, ikonlar. UX ise kullanıcının ürünle yaşadığı deneyimin bütünüdür: hedefine kaç adımda ulaştığı, nerede durakladığı, hata yaptığında ne hissettiği, işini bitirip bitiremediği. Güzel bir arayüz kötü bir deneyimi kurtaramaz; harika bir akış da özensiz bir arayüzle güven kaybeder. İkisi birlikte tasarlandığında ortaya "iyi ürün" çıkar.
Bu yazıda, projelerimizde uyguladığımız kullanıcı merkezli tasarım yaklaşımını dört adımda anlatıyoruz: kullanıcıyı tanımak (araştırma ve persona), doğru kararlar için evrensel tasarım prensipleri, varsayımları sınamak (kullanılabilirlik testi) ve ürünü herkese açmak (WCAG erişilebilirlik).
Kullanıcı Merkezli Tasarım: Varsayım Değil, Gözlem
Kullanıcı merkezli tasarımın (user-centered design) özü basittir: tasarım kararları, "bence böyle daha güzel" cümlesiyle değil, gerçek kullanıcıların ihtiyaçları, davranışları ve kısıtlarıyla gerekçelendirilir. Bu yaklaşımın döngüsü dört aşamadan oluşur: anla (kullanıcıyı ve bağlamı araştır), tanımla (asıl çözülecek problemi netleştir), tasarla (çözüm alternatifleri üret ve prototiple), doğrula (gerçek kullanıcıyla test et). Döngü tek seferlik değildir; her testten öğrenilenler tasarıma geri akar.
Ekiplerin en sık düştüğü tuzak, kendilerini kullanıcı sanmalarıdır. Ürünü her gün geliştiren bir ekip için "gayet anlaşılır" olan bir akış, ürünü ilk kez açan kullanıcı için bir labirent olabilir. Bu bilişsel körlüğün tek ilacı, düzenli olarak gerçek kullanıcıyı izlemektir: kısa görüşmeler, destek taleplerinin analizi, oturum kayıtları ve saha gözlemi; hepsi tasarım ekibinin pusulasını gerçeğe çevirir.
Persona: Hedef kitleye yüz kazandırın
Persona, araştırma bulgularından damıtılan kurgusal ama gerçekçi kullanıcı profilidir: adı, rolü, hedefleri, hayal kırıklıkları ve teknoloji alışkanlıkları olan bir karakter. Örneğin bir e-ticaret yönetim paneli için "Depo sorumlusu Murat: günde yüzlerce siparişi telefonundan onaylıyor, eldiven takıyor, ekrana uzun bakacak vakti yok" personası; büyük dokunma hedefleri, yüksek kontrast ve tek dokunuşla onay gibi somut tasarım kararlarına dönüşür.
Personanın değeri, ekip içinde tartışma dilini değiştirmesindedir: "bence bu buton yukarıda olmalı" tartışması, "Murat bu ekranı eldivenle kullanırken hangisi daha güvenli?" sorusuna dönüşür. İki-üç iyi araştırılmış persona, on tane tahmine dayalı personadan daha faydalıdır. Persona bir kez yazılıp rafa kalkan bir belge değil; her tasarım kararında masada oturan sessiz bir paydaştır.
Zamana Dayanıklı Tasarım Prensipleri
Trendler değişir; ancak insan algısının ve davranışının prensipleri değişmez. Her arayüz kararında şu prensipleri süzgeç olarak kullanıyoruz:
- Görsel hiyerarşi: Kullanıcının gözü, sayfada ne önemliyse önce ona gitmelidir. Boyut, renk, kontrast ve boşluk; önem sırasını sessizce anlatan araçlardır. Her şeyi vurgulamak, hiçbir şeyi vurgulamamaktır.
- Tutarlılık: Aynı işi yapan öğeler her ekranda aynı görünmeli ve aynı yerde durmalıdır. Tutarlılık, kullanıcının öğrenme yükünü bir kez ödeyip her ekranda faydalanmasını sağlar.
- Geri bildirim: Her eylemin görünür bir karşılığı olmalıdır: buton basıldığını göstermeli, yükleme bekletiyorsa söylemeli, işlem bittiyse onaylamalıdır. Sessiz arayüz, güvensiz arayüzdür.
- Hata önleme ve affedicilik: İyi tasarım hatayı önce engeller (geçersiz seçeneği pasifleştirmek, formatı örneklemek), engelleyemediğinde açık dille açıklar ve geri alma imkanı sunar. "Geri al" seçeneği, "Emin misiniz?" penceresinden daha iyi bir tasarımdır.
- Bilişsel yük azaltma: Kullanıcıya aynı anda ne kadar az şey düşündürürseniz o kadar iyi. Uzun formları adımlara bölmek, akıllı varsayılanlar sunmak, seçenek sayısını azaltmak; hepsi aynı amaca hizmet eder: hatırlamak yerine tanımak.
- Tanıdık kalıplar: Kullanıcı, arayüzünüze başka ürünlerden edindiği alışkanlıklarla gelir. Sepet ikonu sağ üsttedir, logo ana sayfaya götürür, mavi altı çizili metin bağlantıdır. Özgünlük değerlidir; ama navigasyon gibi kritik kalıplarda sürpriz, yenilik değil engeldir.
Kullanılabilirlik Testi: Varsayımlarınızı Gerçekle Sınayın
Kullanılabilirlik testi, tasarımın gerçek kullanıcılarla buluştuğu andır ve UX sürecinin en öğretici adımıdır. Kurgusu basittir: temsilci bir kullanıcıya gerçekçi görevler verirsiniz ("bu siteden X ürününü bulup sepete ekleyin", "panelden geçen ayın satış raporunu indirin") ve müdahale etmeden izlersiniz. Kullanıcının nerede durakladığı, neyi göremediği ve sesli düşünürken ne söylediği; hiçbir ekip içi tartışmanın veremeyeceği içgörüler sunar.
Az kullanıcıyla, sık test edin
Yaygın yanılgı, kullanılabilirlik testinin büyük bütçe ve kalabalık denek grubu gerektirdiğidir. Pratikte az sayıda kullanıcıyla yapılan bir test turu bile en kritik sorunların büyük kısmını ortaya çıkarır; çünkü ciddi kullanılabilirlik sorunları neredeyse her kullanıcıda tekrar eder. Doğru strateji, tek büyük test yerine küçük ve sık testlerdir: beş kullanıcıyla test edin, bulguları düzeltin, tekrar test edin. Üstelik test için bitmiş ürün gerekmez; tıklanabilir bir Figma prototipi, hatta kağıt eskizler bile akış sorunlarını yakalamak için yeterlidir. En ucuz düzeltme, kod yazılmadan yapılan düzeltmedir.
Neyi ölçmeli?
Testten çıkan izlenimleri somutlaştırmak için üç basit metrik yeterlidir: görev tamamlama oranı (kullanıcı hedefe ulaşabildi mi?), tamamlama süresi ve hata sayısı (ne kadar zorlandı?) ve öznel memnuniyet (deneyimi nasıl değerlendirdi?). Bu metrikleri sürüm sürümüne karşılaştırdığınızda, "tasarım güzel oldu mu?" sorusu yerini "tasarım işe yarıyor mu?" sorusuna bırakır.
Erişilebilirlik: WCAG ile Herkes İçin Tasarım
Erişilebilirlik (accessibility, kısaca a11y), dijital ürünün engeli olan kullanıcılar dahil herkes tarafından kullanılabilmesidir: görme azlığı olan, renk körü, ekran okuyucu kullanan, motor becerileri kısıtlı ya da yalnızca klavyeyle gezinen kullanıcılar. Uluslararası standart olan WCAG (Web Content Accessibility Guidelines), erişilebilir tasarımı dört ilkeyle çerçeveler: içerik algılanabilir, arayüz kullanılabilir, bilgi anlaşılabilir ve teknoloji sağlam (farklı yardımcı teknolojilerle uyumlu) olmalıdır.
Erişilebilirlik çoğu ekipte "sona bırakılan iş" olarak görülür; oysa süreç içine yedirildiğinde maliyeti düşüktür ve herkese fayda sağlar. Rampalar nasıl yalnızca tekerlekli sandalye kullanıcılarına değil bebek arabalı ebeveynlere de hizmet ediyorsa; yüksek kontrast güneş altında telefon kullanan herkese, klavye desteği güçlü kullanıcılara, sade dil ise tüm okuyuculara hizmet eder.
Pratik WCAG kontrol listesi
- Renk kontrastı: Metin ile arka plan arasında yeterli kontrast oranı sağlayın (normal metin için en az 4.5:1 hedefleyin); ücretsiz kontrast araçlarıyla saniyeler içinde ölçülür.
- Renkten bağımsız anlam: Hata, başarı veya durum bilgisini yalnızca renkle anlatmayın; ikon ve metinle destekleyin. Kırmızı-yeşil ayrımı, renk körü kullanıcılar için görünmez olabilir.
- Klavye erişimi: Tüm işlevler yalnızca klavye ile (Tab, Enter, Esc) kullanılabilmeli; odak halkası (focus ring) asla gizlenmemelidir.
- Alternatif metinler: Anlam taşıyan her görsele açıklayıcı alt metni yazın; dekoratif görselleri ekran okuyucudan gizleyin.
- Semantik HTML: Başlık hiyerarşisi (H1-H2-H3), etiketli form alanları ve doğru HTML öğeleri; ekran okuyucunun sayfayı "görmesini" sağlar. Div'den buton olmaz.
- Dokunma hedefleri ve hareket: Dokunma hedeflerini yeterince büyük tutun; otomatik oynayan, yanıp sönen içeriklerden kaçının veya durdurma kontrolü sunun.
- Anlaşılır dil ve hata mesajları: Form hataları alanın yanında, ne yapılacağını söyleyen açık bir dille gösterilmelidir; "Geçersiz giriş" değil, "Telefon numarası 10 haneli olmalıdır".
İyi Tasarım Bir Süreçtir, Bir An Değil
Kullanıcı merkezli tasarım, tek seferde "doğru tasarımı" bulma iddiası taşımaz; yanılma payını sistematik olarak küçültme disiplinidir. Persona ile kime tasarladığınızı bilir, prensiplerle savunulabilir kararlar verir, testlerle varsayımlarınızı gerçekle sınar, erişilebilirlikle kapıyı herkese açarsınız. Bu döngüyü işleten ekipler için tasarım; öznel beğeni tartışmalarından çıkar, ölçülebilir bir ürün geliştirme pratiğine dönüşür. Sonuç, yalnızca "güzel görünen" değil; daha az destek talebi üreten, daha yüksek dönüşüm sağlayan ve kullanıcısının işini gerçekten kolaylaştıran ürünlerdir.
Kullanıcı Odaklı Tasarımı Projenize Taşıyalım
Marmaragen olarak web tasarım projelerimizde bu yazıdaki prensipleri uyguluyoruz: kullanıcı araştırmasıyla başlıyor, wireframe ve prototiple ilerliyor, erişilebilirlik ve Core Web Vitals standartlarıyla teslim ediyoruz. Kullanıcıyı merkeze alan, dönüşüm odaklı bir web sitesi için web tasarım hizmetimizi inceleyin; 48 saat içinde ücretsiz tasarım prototipinizi hazırlayalım.