UI UX nedir? UI ve UX arasındaki fark

Kısaca

UI ile UX iç içe iki iştir. UI, kullanıcının gördüğü yüzeydir. UX, o yüzeyin arkasındaki her şeyle birlikte kullanıcının yaşadığıdır.

İki terimin tek tek tanımını sözlükte yazdım: UI (kullanıcı arayüzü) nedir ve UX (kullanıcı deneyimi) nedir. Bu sayfada ikisinin ilişkisini ve farkını anlatıyorum. İş ilanlarında sık gördüğünüz "UI/UX tasarımcısı" unvanını da açıklıyorum.

NN/g'den Sarah Gibbons'ın 2021 tarihli kısa videosunun özeti iki terimi "çok yakından ilişkili" diye anlatır. Aynı özet, ikisinin sık karıştırıldığını da söyler. Bu karışıklık bence çoğu zaman tek bir yanlış varsayımdan doğar: güzel görünen ekranın iyi çalıştığını sanmak.

UI ve UX tek cümlede

UI: Ürünün nasıl göründüğü ve insanların onunla nasıl etkileştiği. Bu, NN/g'den Kate Kaplan'ın 2024 tarihli yazısındaki tanıma çok yakın.

UX: Son kullanıcının şirketle, onun hizmetleri ve ürünleriyle etkileşiminin bütün yönleri. Bu tanımı 1998'de Don Norman ve Jakob Nielsen yazdı.

NN/g'deki biyografisine göre Norman, Apple'da "User Experience Office" adlı üç kişilik ekibin UX mimarıydı. Biyografi, "User Experience" ifadesinin ilk kez orada bir iş unvanında kullanıldığını yazar.

Norman ve Nielsen farkı bir film yorumları sitesiyle anlatır. Film bulma arayüzü hatasız olabilir. Ama veritabanında yalnızca büyük stüdyoların filmleri varsa, küçük bağımsız bir film arayan kullanıcı için deneyim kötüdür. Ekran soruyu doğru sordu, ürün cevabı veremedi.

Aynı yazıda bir ayrım daha var. Kullanılabilirlik, arayüzün bir kalite özelliğidir: sistemin kolay öğrenilip öğrenilmediği, verimli ve hoş kullanılıp kullanılmadığı. Kullanıcı deneyimi bundan da geniştir. Kullanılabilirliği de ayrı bir sözlük sayfasında anlattım.

UI ve UX farkı: beş başlıkta

Farkı en hızlı bir tabloda görürsünüz. Satırlar iki işi aynı başlıklar altında yan yana koyuyor. Mobilde tablo alt alta kartlara dönüşür.

Tablodaki ayrım kesin bir duvar değildir. NN/g'nin 2026 tarihli UX disiplinleri sözlüğü, UI tasarımını etkileşim tasarımı ile görsel tasarımın birleşimi olarak tanımlar. Butonun basılınca ne yapacağı da bu yüzden bir UI kararıdır.

Aynı sözlüğe göre UX tasarımı, ürün ve hizmetleri kullanılabilir, işe yarar ve amacına uygun olacak şekilde tasarlamaktır. UX tasarımcısı etkileşim tasarımı, bilgi mimarisi, prototip ve bir miktar araştırma yapabilir. Kapsamı kuruma göre değişir.

Sağ sütundaki çıktıların çoğu sözlükte ayrı terim olarak var. Bilgi mimarisi içeriğin nasıl düzenlendiğini, wireframe ise ekranın kaba iskeletini anlatır. Bu çıktıların hiçbiri renk içermez, ama hepsi son ekranın nasıl çalışacağını belirler.

Türkçe bir örnek: para gönderme ekranı

Bir bankanın mobil uygulamasında para gönderme ekranını düşünün. UI tarafındaki sorular somuttur. IBAN alanı kaç karakter gösteriyor, tutar alanında klavye rakamlı mı açılıyor, "Gönder" butonu başparmağın uzandığı yerde mi?

UX tarafındaki sorular ekranın dışına taşar. Kullanıcı alıcıyı kayıtlı listeden mi seçiyor, her seferinde IBAN mı yazıyor? Mesai dışında gönderilen paranın ne zaman ulaşacağı söyleniyor mu? İşlem bitince dekont nereye gidiyor, alıcıya bir bildirim gidiyor mu?

İki tarafın soruları da aynı ekranda cevaplanır. Fark, sorunun nereden geldiğidir. UI soruları ekrana bakınca, UX soruları kullanıcının o gün ne yapmaya çalıştığına bakınca ortaya çıkar.

Bu örnekte bir hata da iki tarafa birden dokunur. Kullanıcı yanlış tutar yazdığında ekran bunu gönderilmeden önce yakalamalıdır. Nielsen'in beşinci ilkesi buna hata önleme der. Hatanın nasıl gösterileceği UI kararıdır, hiç yaşanmaması için akışın nasıl kurulacağı UX kararıdır.

Aynı ekranın iki hali

Farkı görmenin kısa bir yolu, aynı işi yapan iki ekranı yan yana koymaktır. Aşağıdaki örnekte iş aynı: bir hastaneden kardiyoloji randevusu almak. Birinci hal göze daha hoş görünüyor, ikinci hal işi daha iyi yaptırıyor.

Aynı ekranın iki hali

Hal 1: Güzel UI, kötü UX

Sağlığınız, bizim önceliğimiz.

1

Altında yazı olmayan üç ikon.2

T.C. kimlik numaranız3

gg.aa.yyyy

Gönder4

1. Başlık ve süs ekranın üst yarısını kaplıyor. Randevu alanı aşağı itiliyor ve telefonda ilk bakışta görünmüyor.
2. İkonların altında yazı yok. Kullanıcı hangisinin randevu, hangisinin sonuç ekranı olduğunu tahmin etmek zorunda.
3. Alanın adı alanın içinde yazıyor. Yazmaya başlayınca kayboluyor, kullanıcı neyi girdiğini unutabiliyor.
4. "Gönder" neyin gönderileceğini söylemiyor. Hangi gün ve saate randevu alındığı ekranın hiçbir yerinde yok.

Hal 2: Sade UI, iyi UX

Randevu al

Adım 2 / 3

1

Kardiyoloji polikliniği. Değiştir

2

Tarih ve saat

12 Kasım, 10.30 (seçili)12 Kasım, 14.003

Randevuyu onayla: 12 Kasım, 10.304

1. Başlık işin adını söylüyor. "Adım 2 / 3" kullanıcıya nerede olduğunu gösteriyor.
2. Önceki adımda seçilen bölüm üstte duruyor. Yanlışsa tek dokunuşla değişiyor.
3. Alanın adı üstte duruyor ve kaybolmuyor. Seçenekler açıkça yazılı, seçili olan işaretli.
4. Buton tarihi ve saati tekrar ediyor. Kullanıcı basmadan önce son kez kontrol edebiliyor.

Kurgusal bir hastane randevu ekranı, gerçek bir kurumdan alınmadı. Üstteki iki butondan birini seçin: ekran ve yanındaki numaralı notlar birlikte değişir. JavaScript kapalıysa iki hal alt alta görünür.

Birinci haldeki sorunların hiçbiri renkle ilgili değil. İkonların yazısız olması, Nielsen'in altıncı ilkesi olan "hatırlamak yerine tanıma"ya ters düşer. "Gönder" butonu seçimi göstermiyor. Bu da birinci ilkeye, yani sistem durumunun görünür olmasına uymaz. İlkelerin tamamını Nielsen'in 10 ilkesi sayfasında örnekleriyle anlattım.

İkinci hal de çirkin değil. Sadece süsü işin önüne koymuyor. Nielsen'in sekizinci ilkesi buna "estetik ve sade tasarım" der: arayüzde ilgisiz ya da nadiren gereken bilgi olmamalıdır.

Güzel ekran neden testte bile iyi puan alır

Birinci hal kullanıcı testinde bile beğenilebilir. Bunun bir adı var: estetik-kullanılabilirlik etkisi. NN/g'den Kate Moran bunu, insanların çekici ürünleri daha kullanışlı sanma eğilimi diye anlatır.

Etkinin kaynağı 1995'te Hitachi Tasarım Merkezi'nde yapılan bir çalışmadır. Masaaki Kurosu ve Kaori Kashimura, bir ATM arayüzünün 26 farklı halini 252 katılımcıyla test etti. Katılımcıların güzellik puanı, ekranın gerçekten ne kadar kolay olduğundan çok, ne kadar kolay sandıklarıyla örtüştü.

Moran'ın yazısındaki uyarı benim için daha önemli. Çekici tasarım küçük sorunları affettirir, büyük sorunları affettirmez. Testte kullanıcının ne söylediğine değil, ne yaptığına bakmak gerekir.

Bu örneğin göstermediği şey

Demodaki iki hal yalnızca tek bir ekranı karşılaştırıyor. Gerçek deneyim bu ekranın öncesinde ve sonrasında da sürer. Kullanıcı randevuyu aldıktan sonra hatırlatma SMS'i gelmiyorsa, ikinci hal de kötü bir deneyimin parçası olur.

Tersi de doğru. Hastaneye vardığınızda danışma sizi doğru kata yönlendiriyorsa, ekrandaki küçük bir kusur akılda kalmaz. UX'i ölçerken bu yüzden tek ekrana değil, işin başından sonuna kadar olan bütün adımlara bakarım.

Ürün tasarımıyla ilişkisi

İş ilanlarında üçüncü bir unvan da görürsünüz: ürün tasarımcısı. NN/g sözlüğüne göre yazılımda ürün tasarımı, bir dijital ürünü baştan sona tasarlamaktır. Ürün tasarımcısı bu işte iş hedeflerini, ürün stratejisini ve kullanıcıyı birlikte düşünür.

Aynı sözlük "ürün tasarımcısı" unvanının çoğu zaman UX tasarımına benzer bir iş için kullanıldığını yazar. Fark, işin tek bir ürüne odaklanmasıdır. Bazı şirketlerde ürün tasarımcısı arayüzden daha çok sorumludur ya da ürün yöneticisiyle daha yakın çalışır.

Ben bu üç kavramı iç içe kutular gibi düşünüyorum. Aşağıdaki çizim bir standart değil, kendi zihnimdeki haritadır.

Kullanıcı deneyimi (UX). Kişinin bir ürünle, hizmetle ya da kurumla kurduğu ilişkinin bütünü.

Ürün tasarımı. Bir dijital ürünün iş hedefi, ürün stratejisi ve kullanıcıyla birlikte baştan sona tasarımı.

Arayüz tasarımı (UI). Ekrandaki bileşenler ve onların davranışı.

Etkileşim tasarımı: neye basılır, sistem ne cevap verir.

Görsel tasarım: çizgi, biçim, renk, ızgara, boşluk.

Ürün tasarımı, ürün yönetimiyle de karıştırılır. Sözlük ikisini ayırır: ürün yönetimi neyin ve neden yapılacağına karar verir. Ürün tasarımı ise bunun kullanıcı için nasıl çalışacağını tasarlar.

Kim neye karar verir

Küçük bir ekipte bu kararlar aynı toplantıda verilir. Yine de hangi kararın kime ait olduğunu bilmek tartışmayı kısaltır. Benim projelerde kullandığım ayrım kabaca şöyle:

• Ürün yöneticisi: Bu çeyrekte hangi sorunu çözüyoruz ve neden bu sorunu seçtik?
• Ürün ya da UX tasarımcısı: Kullanıcı bu işi hangi adımlarla bitirecek, hangi bilgiye hangi anda ihtiyaç duyacak?
• UI tasarımcısı: Bu adımlar ekranda hangi bileşenlerle, hangi düzende ve hangi durumlarla görünecek?
• Geliştirici: Bunu hangi sürede, hangi teknik sınırlar içinde kurabiliriz?

Bir rol eksikse onun sorusu da sorulmaz. Örneğin UI tasarımcısı olmayan ekipte boş ve hata durumları çoğu zaman en son, aceleyle eklenir. UX sorusunu soran kimse yoksa ekran güzel çizilir ama yanlış sırada durur.

Ürün henüz yeniyse bu kararların çoğu bir MVP üzerinde verilir. O aşamada arayüzü cilalamak yerine, temel akışın işleyip işlemediğini görmek daha çok şey kazandırır.

Bir UI/UX tasarımcısı ne yapar

"UI/UX tasarımcısı", iki işi aynı kişinin yaptığı rolün adıdır. Hem kullanıcının işini nasıl bitireceğini çözer, hem de ekranın son halini çizer. Ben bu unvanı en çok küçük ekiplerin ilanlarında görüyorum.

Bu unvanın tek bir tanımı yok. NN/g sözlüğü alandaki unvanların standart olmadığını, aynı unvanın farklı yerlerde farklı şeyler anlatabildiğini yazar. NN/g'nin UX kariyer anketinde katılımcılar UX ile ilgili 134 farklı iş unvanı bildirmiş.

Benim deneyimimde bir UI/UX tasarımcısının haftası kabaca şu işlerden oluşur:

• Problemi anlamak. Ekip ne çözmek istiyor, kullanıcı nerede takılıyor? Bunun için analitiğe bakar, destek taleplerini okur, gerekirse kullanıcıyla konuşur.
• Akışı çizmek. Kullanıcının bir işi bitirmek için geçtiği adımları sıralar. Gereksiz adımı burada atar.
• İskeleti kurmak. Ekranların wireframe'ini ve tıklanabilir prototipini hazırlar. Bu aşamada renk yoktur, düzen ve içerik vardır.
• Arayüzü tasarlamak. Bileşenleri, renkleri ve yazıyı tasarım sistemine göre yerleştirir. Boş, yükleniyor ve hata durumlarını unutmaz.
• Denemek. Prototipi birkaç kullanıcıya verir, nerede durakladıklarına bakar. Bulduğu sorunu bir sonraki turda düzeltir.
• Geliştiriciyle çalışmak. Tasarımın koda doğru geçip geçmediğini kontrol eder. Kenar durumlarını birlikte çözerler.

Bu listenin her maddesi büyük şirketlerde ayrı bir uzmanlık olabilir. NN/g sözlüğü de bir kişinin birden fazla alanın işini yapabileceğini açıkça yazar. Küçük ekipte "UI/UX" demek, bu işlerin hepsinin aynı masada bittiği anlamına gelir.

UI tarafı ağır basan ilanlar, UX tarafı ağır basan ilanlar

Aynı unvanla açılan iki ilan çok farklı işler isteyebilir. İlanı okurken bence görev listesine bakmak, başlığa bakmaktan daha çok şey söyler.

Görevlerde "tasarım sistemi", "bileşen", "ikon", "pazarlama görselleri" yazıyorsa ilan daha çok UI tarafına bakıyordur. "Kullanıcı görüşmesi", "akış", "test", "metrik" yazıyorsa UX tarafına bakıyordur. İkisi dengeliyse gerçek bir UI/UX rolüdür.

Ekran tasarımından gelenler için iyi bir haber de var. NN/g'den Rachel Krause'un 2019 videosunun özeti, güçlü ekranlar çizen birinin UX'e iyi bir başlangıçla geldiğini söyler. Aynı özet, genişleyen rolde başarılı olmak için daha fazlasının gerektiğini de ekler. Bence bu eksik çoğu zaman araştırma ve akış düşüncesidir.

Sık yanlışlar

Audit'lerde ve ilk görüşmelerde en sık duyduğum yanlışlar şunlar.

"UX, UI'ın daha havalı adı." Değil. UI ekranın kendisidir, UX ise ekranla birlikte e-postayı, SMS'i, çağrı merkezini ve teslimatı da kapsar. Kaplan'ın yazısı da bunu açıkça ayırır.

"Ekranı yeniden boyarsak sorun çözülür." Kullanıcı ödeme adımında takılıyorsa çoğu zaman sebep akıştadır. 300 milyon dolarlık buton hikayesinde de sorun butonun rengi değil, ödemeden önce çıkan giriş ve kayıt ekranıydı.

"Web sitesi tasarladım, demek ki UX tasarımcısıyım." Kaplan'ın yazısı bu konuda net: web sitesi gibi tek bir ürün tasarlamak, birini her zaman UX tasarımcısı yapmaz. UX, teknolojiden çok insana odaklanan bir iştir.

"Kullanıcılar beğendi, o halde kullanışlı." Estetik-kullanılabilirlik etkisi tam olarak bu yanılgıyı anlatır. Beğeni ile başarı ayrı ölçülür.

"UX en sonda eklenir." Ekranlar çizildikten sonra UX'e bakmak, binayı bitirip temeli sorgulamaya benzer. Akış ve içerik kararları renkten önce verilir. Bu yaklaşımın adı kullanıcı merkezli tasarımdır.

"UI artık önemsiz, yapay zekâ çiziyor." NN/g'nin 2026 raporu daha dengeli bir şey söyler. UI hâlâ önemlidir, ama giderek daha az ayırt edici olacaktır. Rapora göre yapay zekâ tasarım araçları geliştikçe, en azından uzaktan bakınca düzgün görünen bir arayüzü herkes yapabilecek.

"Tasarım sistemi varsa UX tasarımcısına gerek yok." Tasarım sistemi butonun nasıl görüneceğini söyler, butonun hangi ekranda olması gerektiğini söylemez. NN/g'nin 2026 raporu da tasarım sisteminden bileşenleri yan yana dizmekle yetinen birinin şimdiden yapay zekâyla değiştirilebilir olduğunu yazar.

"UX yalnızca mobil uygulamalar için." Kullanıcı deneyimi ekran olan her yerde vardır. Bir belediyenin web sitesindeki başvuru formu da, bir bankanın şube sırası numaratörü de bir deneyim yaratır.

Benim notum

Bana gelen işlerin çoğu "ekranı yenileyelim" diye başlar. İlk soruyu ben sorarım: kullanıcı nerede vazgeçiyor? Cevap çoğu zaman ekranın görünüşünde değil, sırasındadır.

Yine de UI'ı küçümsemiyorum. Okunmayan bir buton yazısı ya da bir hata mesajının yanlış yerde çıkması doğrudan deneyimi bozar. İyi bir akış, kötü çizilmiş bir ekranda da kaybolur.

Bu yüzden iki işi ayrı ekiplere bölmeyi sevmiyorum. Araştırmayı yapan kişi ekranı da çizince, bulgu ile ekran arasında bilgi kaybolmuyor. Benim çalışma şeklim bu.

Ürününüzde bu iki halden hangisinin yaşandığını merak ediyorsanız, en kısa yol bir akışa dışarıdan bakmaktır. UX audit rehberinde bunun nasıl yapıldığını adım adım anlattım.