UX ve UI Farkı Nedir? Kullanıcı Deneyimi ve Arayüz Tasarımı

UX (user experience, kullanıcı deneyimi), bir kişinin şirketinizle, ürününüzle ve hizmetinizle kurduğu etkileşimin tamamıdır: aradığını bulabiliyor mu, işini zahmetsiz bitirebiliyor mu, sonunda memnun kalıyor mu. UI (user interface, kullanıcı arayüzü) ise bu etkileşimin ekrandaki katmanıdır: düğmeler, renkler, yazı tipleri, ikonlar ve yerleşim. En kısa hâliyle UX "doğru akışı mı kurduk ve işliyor mu?", UI "bu akış ekranda nasıl görünüyor ve nasıl kullanılıyor?" sorusuna cevap verir.

İkisi birbirinin yerine geçmez. Güzel bir arayüz kötü kurgulanmış bir süreci kurtaramaz; iyi kurgulanmış bir süreç de okunmayan, dağınık bir arayüzde kaybolur.

UX nedir, neleri kapsar?

Nielsen Norman Group'un tanımıyla kullanıcı deneyimi, son kullanıcının şirketle, hizmetleriyle ve ürünleriyle etkileşiminin tüm yönlerini kapsar. Bu yüzden UX yalnız ekranla sınırlı değildir; teslimat süresi, iade süreci ve müşteri hizmetleri de deneyimin parçasıdır.

Web projesinde UX çalışması genellikle şu işlerden oluşur:

• Araştırma: Kullanıcı kim, siteye neden geliyor, nerede takılıyor? Analitik verisi, müşteri görüşmeleri ve destek talepleri burada kullanılır.
• Bilgi mimarisi: Menü yapısı, sayfa hiyerarşisi ve içeriklerin nasıl gruplanacağı.
• Kullanıcı akışları: "Teklif isteme", "üye olmadan satın alma" gibi görevlerin adım adım rotası.
• Tel çerçeve (wireframe) ve prototip: Renksiz, kaba ekran taslakları ve tıklanabilir modeller.
• Kullanılabilirlik testi: Gerçek kullanıcılara görev verip nerede zorlandıklarını izlemek.

UI nedir, neleri kapsar?

UI, akışı ekrana taşıyan görsel ve etkileşimli katmandır. Kapsamına şunlar girer: görsel hiyerarşi (ilk neyin görüleceği), tipografi, renk ve kontrast, ikonlar, boşluk düzeni, form alanları ve düğmeler. İyi bir UI aynı zamanda her bileşenin farklı durumlarını da tasarlar: fare üzerine gelince, tıklanınca, yüklenirken, hata verdiğinde ve boş kaldığında ne görünecek?

Büyüyen projelerde UI, bir tasarım sistemine dönüşür. Düğme, kart, form ve bildirim gibi bileşenler bir kez tanımlanır, tüm sayfalarda aynı biçimde kullanılır. Bu, hem tutarlılığı hem de geliştirme hızını artırır.

UX ve UI arasındaki fark nedir?

Farkı somutlaştırmak için şu karşılaştırmaya bakabilirsiniz:

• Sorduğu soru: UX "kullanıcı hedefine ulaşabiliyor mu?", UI "ekran bu hedefe nasıl yardım ediyor?"
• Çıktısı: UX için araştırma notları, site haritası, akış şemaları, tel çerçeveler; UI için renkli ekran tasarımları, bileşen kütüphanesi, stil rehberi.
• Ölçümü: UX için görev tamamlama oranı, dönüşüm, destek talebi sayısı; UI için okunabilirlik, tutarlılık ve etkileşim hataları.
• Zamanı: UX projenin başında ağırlıklıdır; UI, akışlar netleştikten sonra yoğunlaşır. İkisi de yayından sonra ölçümle devam eder.

Nielsen Norman Group bu farkı bir film sitesi örneğiyle anlatır: film aramak için kusursuz bir arayüz tasarlasanız bile veritabanında kullanıcının aradığı film yoksa deneyim kötüdür. Kullanılabilirlik, yani arayüzün kolay öğrenilmesi ve rahat kullanılması, UI'ın bir kalite niteliğidir; kullanıcı deneyimi bundan daha geniştir.

Bir web projesinde UX ve UI hangi sırayla yapılır?

Pratikte iş şu sırayla ilerler:

1. Hedef ve kullanıcı: Sitenin iş hedefi (teklif, satış, başvuru) ve ana kullanıcı grupları yazılır.
2. Site haritası ve akışlar: Sayfalar ve en önemli üç beş görevin akışı çıkarılır.
3. Tel çerçeveler: Önce mobil, sonra masaüstü için kaba ekranlar hazırlanır, içerik yerleşimi onaylanır.
4. UI tasarımı: Kurumsal kimlik ekrana uyarlanır, bileşenler ve durumlar tasarlanır.
5. Prototip testi: Birkaç gerçek kullanıcıyla görev testi yapılır, takılma noktaları düzeltilir.
6. Geliştirme ve kontrol: Kodlanan sayfa tasarımla karşılaştırılır, erişilebilirlik ve hız kontrol edilir.
7. Ölçüm: Yayından sonra analitik ve ısı haritasıyla akışlar izlenir, iyileştirme sürer.

Sık gördüğümüz hata, 3. adımı atlayıp doğrudan renkli tasarıma geçmektir. Bu durumda menü ve içerik tartışmaları renk ve görsel tartışmalarına karışır, revizyon sayısı artar.

İyi bir arayüzü nasıl değerlendirirsiniz?

Jakob Nielsen'in 1994'te son hâlini verdiği 10 kullanılabilirlik ilkesi, bugün de hızlı bir değerlendirme listesi olarak kullanılıyor. Kurumsal siteler için en sık işe yarayanlar şunlardır:

• Sistem durumunun görünürlüğü: Form gönderildi mi, sepete eklendi mi? Kullanıcı her zaman ne olduğunu görmeli.
• Tutarlılık ve standartlar: Aynı işlev her sayfada aynı görünmeli ve aynı yerde durmalı.
• Hata önleme ve hatadan kurtulma: Hata mesajı sorunu sade dille anlatmalı ve çözüm önermeli.
• Hatırlamak yerine tanıma: Kullanıcıdan önceki adımda gördüğü bilgiyi aklında tutması beklenmemeli.
• Estetik ve sade tasarım: Her ek öğe, önemli bilgiyle dikkat için yarışır.

Bunlara iki teknik kontrol ekleyin: erişilebilirlik ve farklı ekran boyutları. WCAG 2.2, normal metin için en az 4.5:1 kontrast oranını ve dokunma hedefleri için en az 24 x 24 CSS piksel boyutunu (ya da yeterli boşluğu) öngörür. Ayrıntıları web erişilebilirliği yazımızda, ekran uyumunu responsive web tasarım yazımızda bulabilirsiniz.

UX/UI tasarımcısı ne iş yapar?

Büyük ekiplerde UX araştırmacısı, UX tasarımcısı, UI tasarımcısı ve UX yazarı ayrı rollerdir. Küçük ve orta ölçekli projelerde ise çoğu zaman tek bir "UX/UI tasarımcısı" araştırmadan son ekrana kadar işi yürütür. Bu kişinin günlük işi; kullanıcı görüşmeleri ve veri incelemesi, akış ve tel çerçeve çizimi, arayüz tasarımı, prototip hazırlama ve geliştirici ekiple birlikte uygulamayı kontrol etmektir.

Bir ajans ya da serbest tasarımcıyla çalışacaksanız "tel çerçeve aşaması var mı, kullanıcı testi yapılıyor mu, tasarım sistemi teslim ediliyor mu?" sorularını sorun. Cevap yalnız "size üç tasarım alternatifi sunuyoruz" ise süreç büyük olasılıkla yalnız UI'dan ibarettir.

Kısaca

• UX, kullanıcının hedefine ulaşıp ulaşamadığıyla ilgilenir; UI, bunun ekrandaki görünümü ve etkileşimidir.
• UX'in çıktıları site haritası, akış ve tel çerçeve; UI'ın çıktıları ekran tasarımı ve bileşen kütüphanesidir.
• Doğru sıra: hedef, akış, tel çerçeve, UI, test, geliştirme, ölçüm.
• Nielsen'in 10 ilkesi ve WCAG 2.2 kontrolleri hızlı bir kalite testidir.

Sitenizin kullanıcı akışlarını ve arayüzünü birlikte ele almak isterseniz web tasarım hizmetimizi inceleyebilirsiniz.