UX ve UI Tasarım Nedir?

UX ve UI tasarım nedir?

UX (User Experience) Türkçede kullanıcı deneyimi, UI (User Interface) ise kullanıcı arayüzü demektir. UX tasarımı; bir web sitesinin, mobil uygulamanın ya da yazılımın kullanıcının işini ne kadar kolay, hızlı ve hatasız gördürdüğüyle ilgilenir. UI tasarımı ise bu deneyimin ekranda nasıl göründüğünü belirler: renkler, yazı tipleri, düğmeler, ikonlar, boşluklar ve bunların tutarlı bir düzen içinde kullanılması.

Nielsen Norman Group'un tanımıyla kullanıcı deneyimi, son kullanıcının bir şirketle, o şirketin hizmetleri ve ürünleriyle kurduğu etkileşimin tüm yönlerini kapsar. Bu yüzden UX yalnız ekranla sınırlı değildir: bir sipariş formunun kaç adım sürdüğü, hata mesajında ne yazdığı, onay e-postasının ne zaman geldiği de deneyimin parçasıdır. UI ise bu deneyimin görünen yüzüdür.

UX ve UI bir arada nasıl çalışır?

İkisini bir binaya benzetmek işi kolaylaştırır. UX binanın planıdır: odaların yeri, kapıların nereye açıldığı, insanların içeride nasıl dolaştığı. UI ise iç mimaridir: malzeme, renk, ışık ve yön tabelaları. Plan kötüyse en özenli iç mimari bile insanların kaybolmasını engellemez; plan iyi ama iç mimari özensizse bina güven vermez.

UX tasarım süreci adım adım

1. Araştırma: Kullanıcıların kim olduğu, neyi neden yapmaya çalıştıkları ve bugün nerede zorlandıkları öğrenilir. Kullanıcı görüşmeleri, anketler, analitik verileri, ısı haritaları ve müşteri hizmetlerine gelen şikâyetler bu aşamanın kaynaklarıdır.
2. Tanımlama: Bulgular persona (temsili kullanıcı profili) ve kullanıcı yolculuğu haritasına dönüştürülür; çözülecek asıl sorun tek cümleyle yazılır.
3. Bilgi mimarisi: İçeriğin nasıl gruplanacağı, menülerin ve sayfaların hiyerarşisi belirlenir. Kart sıralama testleri, kullanıcıların içeriği zihninde nasıl grupladığını gösterir.
4. Tel kafes: Renksiz, sade çizimlerle her ekranda neyin nerede duracağı kararlaştırılır. Görsel ayrıntı olmadığı için tartışma içeriğe ve akışa odaklanır.
5. Prototip: Ekranlar birbirine bağlanarak tıklanabilir bir taslak hazırlanır; akış, kod yazılmadan önce denenir.
6. Kullanılabilirlik testi: Gerçek kullanıcılara görev verilir ("Bu ürünü sepete ekleyip siparişi tamamlayın" gibi) ve nerede takıldıkları gözlenir.
7. Arayüz tasarımı ve tasarım sistemi: Onaylanan akış görsel tasarıma dönüştürülür; renkler, yazı tipleri ve bileşenler tek bir kütüphanede toplanır ki yeni ekranlar aynı dille üretilsin.
8. Geliştirme ve ölçüm: Tasarım yazılım ekibine devredilir; yayından sonra veriler izlenir ve iyileştirme döngüsü yeniden başlar.

Kullanılabilirlik testi: az kullanıcıyla sık test

Kullanılabilirlik testi pahalı bir laboratuvar çalışması olmak zorunda değildir. Nielsen Norman Group'un yaklaşımına göre beş kullanıcıyla yapılan ilk test, sorunların yaklaşık %85'ini ortaya çıkarır. Bu yüzden bütçeyi tek büyük bir teste harcamak yerine, beşer kullanıcıyla üç küçük tur yapıp her turdan sonra tasarımı düzeltmek önerilir. Test sırasında kullanıcıya yardım edilmez; yalnız görev verilir ve düşündüklerini sesli söylemesi istenir. Ekip izler, not alır ve aynı noktada takılan kullanıcıları sayar.

İyi bir arayüzün temel ilkeleri

Jakob Nielsen'in on kullanılabilirlik ilkesi bu alanda en çok başvurulan listelerden biridir. Günlük tasarım işinde en sık karşılaşılan ilkeler şunlardır:

• Tutarlılık: Aynı işi yapan düğme her ekranda aynı görünür ve aynı yerde durur; kullanıcı her sayfada yeniden öğrenmek zorunda kalmaz.
• Görsel hiyerarşi: Sayfadaki en önemli eylem; boyutu, rengi ve konumuyla ilk bakışta fark edilir.
• Geri bildirim: Her tıklama bir karşılık verir. Form gönderildiğinde, ürün sepete eklendiğinde ya da bir hata oluştuğunda kullanıcı ne olduğunu anlar.
• Okunabilirlik ve kontrast: WCAG 2.2'ye göre normal metinde metin ile arka plan arasındaki kontrast oranı en az 4,5:1, büyük metinde en az 3:1 olmalıdır.
• Hata önleme: Hatayı sonradan açıklamak yerine baştan önlemek: tarih için takvim seçici, telefon alanında rakam klavyesi, zorunlu alanların önceden belirtilmesi.
• Sadelik: Ekrandaki her öğe bir işe yaramalıdır; kullanılmayan seçenekler kararı zorlaştırır.

Kullanıcı deneyimi sorunları nerede görülür?

Kullanıcı deneyimi soyut bir kavram gibi görünse de etkisi rakamlarda izlenir. Aşağıdaki tablo, sık karşılaşılan sorunların hangi verilerde belirdiğini gösterir:

UX ve UI için kullanılan araçlar

Tasarım ve prototip tarafında Figma gibi araçlar, ekibin aynı dosya üzerinde birlikte çalışmasını ve kod yazmadan tıklanabilir prototip hazırlamasını sağlar. Davranış tarafında Google Analytics 4 hangi sayfalarda kayıp yaşandığını, Microsoft Clarity gibi ücretsiz araçlar ise ısı haritaları ve oturum kayıtlarıyla kullanıcıların sayfada nereye tıkladığını ve nerede vazgeçtiğini gösterir. Araç seçimi ikincildir; asıl değer, toplanan verinin düzenli okunup tasarım kararlarına dönüştürülmesindedir.

Ne zaman UX çalışması gerekir?

• Yeni bir ürün ya da site yapılırken: Değişiklik yapmanın en ucuz olduğu andır; bir akışı prototipte düzeltmek, kodlandıktan sonra düzeltmekten çok daha hızlıdır.
• Dönüşüm düşüyorsa: Ziyaretçi geliyor ama form doldurulmuyor ya da sepet tamamlanmıyorsa sorun çoğu zaman akıştadır.
• Destek talepleri aynı konularda yoğunlaşıyorsa: Kullanıcıların sorduğu soru, arayüzün anlatamadığı şeydir.
• Yeniden tasarımdan önce: Mevcut sitede neyin iyi çalıştığını bilmeden yapılan yenileme, işe yarayan şeyleri de silebilir. Bu durumda mevcut sitenin UX denetimiyle başlamak doğru olur.

Sık sorulanlar

UX tasarımcısı ile UI tasarımcısı aynı kişi olabilir mi? Olabilir. Küçük ekiplerde ve orta ölçekli projelerde iki rolü tek bir UX/UI tasarımcısı üstlenebilir; büyük ürünlerde ise araştırma, bilgi mimarisi ve görsel tasarım için ayrı uzmanlar çalışır. Önemli olan iki işin de yapılmasıdır: araştırma yapılmadan doğrudan görsel tasarıma geçmek en sık yapılan hatadır.

Kullanılabilirlik testi için kaç kullanıcı gerekir? Nielsen Norman Group'a göre beş kullanıcıyla yapılan bir test, sorunların büyük bölümünü gösterir. Daha verimli yol, beşer kullanıcıyla birkaç tur test yapıp her turdan sonra tasarımı düzeltmektir.

Erişilebilirlik UX'in parçası mıdır? Evet. Görme, işitme ya da hareket güçlüğü olan kişilerin de siteyi kullanabilmesi iyi deneyimin şartıdır. Yeterli renk kontrastı, klavyeyle gezinme, görsellerde alternatif metin ve anlaşılır form etiketleri WCAG yönergelerinin temel beklentileri arasındadır.

UX çalışmasının işe yarayıp yaramadığı nasıl anlaşılır? Çalışmaya başlamadan önce ölçülecek göstergeler belirlenir: görev başarı oranı, görevin tamamlanma süresi, form ya da sepet terk oranı, dönüşüm oranı ve destek talebi sayısı. Değişiklikten önceki ve sonraki değerler karşılaştırılır; mümkünse A/B testiyle doğrulanır.

Başlarken

Kurumsal sitelerde deneyimin neden belirleyici olduğunu kurumsal web sitesi tasarımında kullanıcı deneyimi yazımızda, sürecin bütününü web sitesi tasarımı yazımızda anlattık. Yeni bir site planlıyorsanız web sitesi yaptırırken nelere dikkat edilmeli rehberimize de bakabilirsiniz. Inside Media olarak araştırmadan prototipe ve arayüz tasarımına kadar bu süreci UX/UI tasarımı ve analizi hizmetimizle yürütüyoruz.