UX ve UI Arasındaki Fark: Hangisine İhtiyacınız Var?

"UX/UI" çoğu zaman tek kelime gibi yazılır. İş ilanlarında, tekliflerde ve ekip tanımlarında iki kavram birbirinin yerine kullanılır. Bu karışıklık masum değildir: şirket "arayüzümüz eski görünüyor" diye yola çıkıp asıl sorunun yanlış kurgulanmış bir akış olduğunu ürün yayına girdikten sonra fark edebilir. Bu yazı iki kavramı standart tanımlarla ayırıyor, her iki tarafın neyi teslim ettiğini gösteriyor ve hangi durumda hangisine ağırlık vermeniz gerektiğini tartışıyor.

UX nedir: standart ve uygulama tanımı

Kullanıcı deneyiminin uluslararası kabul gören tanımı ISO 9241-210:2019 standardındadır. Standart, kullanıcı deneyimini kısaca kullanıcının bir sistemin, ürünün ya da hizmetin kullanımından ve beklenen kullanımından doğan algıları ve tepkileri olarak tanımlar 1. Tanımın notları iki önemli ayrıntı ekler:

• Algı ve tepkiler; duyguları, inançları, tercihleri, konforu, davranışları ve başarıları kapsar ve bunlar kullanımdan önce, kullanım sırasında ve kullanımdan sonra ortaya çıkar 1.
• Deneyim; marka imajının, sunumun, işlevselliğin, sistem performansının, etkileşim davranışının ve yardımcı teknoloji desteğinin bir sonucudur. Kullanıcının önceki deneyimleri, becerileri ve kullanım bağlamı da deneyimi etkiler 1.

Bu tanımın pratik anlamı şudur: deneyim yalnız ekranda oluşmaz. Uygulamayı indirmeden önce okunan mağaza açıklaması, şifre sıfırlama e-postası, yavaş yüklenen bir rapor ve destek hattındaki konuşma da deneyimin parçasıdır.

Nielsen Norman Group'un (NN/g) tanımı aynı fikri daha sade söyler: kullanıcı deneyimi, son kullanıcının şirketle, hizmetleriyle ve ürünleriyle etkileşiminin tüm yönlerini kapsar 2. NN/g aynı yazıda, kullanıcı deneyimini arayüzle karıştırmamak gerektiğini bir örnekle anlatır: film aramak için kusursuz bir arayüz tasarlasanız bile, kullanıcının aradığı film veritabanında yoksa deneyim kötü olur 2.

UI nedir ve kullanılabilirlikle ilişkisi

Kullanıcı arayüzü; ekranlar, düzen, tipografi, renk, ikonlar, bileşenler, durumlar ve mikro etkileşimlerden oluşan, kullanıcının doğrudan gördüğü ve dokunduğu katmandır. UI kötü olduğunda deneyim de zarar görür, ama UI iyi olduğunda deneyimin iyi olacağı kesin değildir.

Burada üçüncü bir kavram devreye girer: kullanılabilirlik. ISO 9241-210, kullanılabilirliği belirli kullanıcıların belirli hedeflere belirli bir kullanım bağlamında etkililik, verimlilik ve memnuniyetle ulaşabilme derecesi olarak tanımlar 1. NN/g ise kullanılabilirliği arayüzün ne kadar kolay kullanıldığını değerlendiren bir kalite niteliği olarak ele alır ve beş bileşene ayırır: öğrenilebilirlik, verimlilik, hatırlanabilirlik, hatalar ve memnuniyet 3. Aynı yazıya göre bir tasarımın faydalı olması için hem doğru işlevleri sunması (fayda) hem de bu işlevlerin kolay kullanılması (kullanılabilirlik) gerekir 3.

Kısacası UI, kullanılabilirliğin en çok göründüğü yerdir; UX ise kullanılabilirliği de içine alan daha geniş bir çerçevedir 2.

UX ve UI karşılaştırması

UI çıktısı yalnız "güzel ekranlar" değildir. Geliştiriciye devredilen bir arayüz tasarımında her bileşenin varsayılan, üzerine gelinmiş, odaklanmış, devre dışı ve hata durumları; boş liste, yükleniyor ve bağlantı yok ekranları; uzun Türkçe metinlerin (örneğin "Değişiklikleri kaydetmeden çıkmak istediğinize emin misiniz?") satıra sığmadığı durumlar da tanımlı olmalıdır. Bu durumlar eksikse geliştirici boşlukları kendi tahminiyle doldurur ve ürün ekranda tasarımdan farklı görünür.

Tablodaki ayrım kesin bir duvar değildir. Bir düğmenin metni hem UI hem UX kararıdır; bir hata durumunun nasıl görüneceği de öyle. Ayrımın faydası, sorunu doğru katmanda aramanızı sağlamasıdır.

Rollere göre kim ne teslim eder

Sektörde unvanlar şirketten şirkete değişir. Daha sabit bir referans için Birleşik Krallık hükümetinin dijital meslek yetkinlik çerçevesine bakmak faydalıdır; çerçeve tasarım işlerini birbirinden ayrılmış rollerle tanımlar:

• Etkileşim tasarımcısı: Kullanıcıların hizmetle en iyi nasıl etkileşime gireceğini hem genel akış düzeyinde hem tek tek tasarım öğeleri düzeyinde çözer 4.
• Grafik tasarımcı: Etkileşim ve hizmet tasarımının altında yatan görsel öğeleri üretir; düzen, boşluk, renk, yazı ve ikonografiyle içeriğin okunaklı olmasını ve kullanıcıların etkileşimleri görüp anlamasını sağlar 5.
• Kullanıcı araştırmacısı: Hizmeti kullanan insanları derinlemesine anlamak için araştırma planlar ve yürütür; bulgular içerik ve etkileşim tasarımını besler 6.
• Hizmet tasarımcısı: Bir hizmetin uçtan uca yolculuğunu, dijital ve dijital olmayan kanallar dahil tasarlar 7.

Bu çerçevede "UX" tek bir rol değil, araştırma, akış ve etkileşim tasarımının toplamıdır; "UI" ise büyük ölçüde etkileşim tasarımcısı ile grafik tasarımcının kesiştiği alandır. ISO 9241-210 de insan merkezli tasarımın ilkeleri arasında tasarımın tüm kullanıcı deneyimini ele almasını ve ekibin çok disiplinli beceriler içermesini sayar 1. Kullanıcı araştırmasının nasıl planlandığını UX araştırması nasıl yapılır yazısında ayrıntılı anlattık.

Hangisine ne zaman ihtiyacınız var?

Şirketlerin çoğu her ikisine de ihtiyaç duyar; asıl soru hangisine ağırlık verileceğidir. Aşağıdaki durumlar bir başlangıç noktası olarak kullanılabilir:

1. Yeni bir ürün fikri, henüz ekran yok: Ağırlık UX tarafındadır. Kim için, hangi işi, hangi adımlarla çözeceğinizi netleştirmeden görsel tasarıma geçmek, sonradan değiştirilmesi zor kararları erken dondurur.
2. Ürün çalışıyor ama kullanıcılar belirli adımlarda bırakıyor: Önce nedeni bulun. Bırakma akıştaki bir mantık hatasından mı, yoksa görünmeyen bir düğmeden mi kaynaklanıyor? Bu ayrımı tahminle değil, gözlemle yapın.
3. Akış sağlam, ekranlar dağınık ve tutarsız: Ağırlık UI tarafındadır. Ortak bileşenler, tutarlı aralıklar ve net bir görsel hiyerarşi kazanç sağlar; bu noktada bir design system çalışması da gündeme gelebilir.
4. Yeni bir platforma geçiş (örneğin web panelinden mobil uygulamaya): İkisi birlikte gerekir. Akış mobil kullanım bağlamına göre yeniden düşünülmeli, arayüz de platform kurallarına uyarlanmalıdır.
5. Yeniden marka çalışması sonrası güncelleme: Çoğunlukla UI işidir, ama renk ve tipografi değişikliklerinin okunabilirliği ve kontrastı bozmadığı test edilmelidir.

En yaygın yanılgılar

"UX, wireframe çizmektir." Tel kafes UX sürecinin çıktılarından yalnızca biridir. Öncesinde kullanıcı ihtiyacını anlama, görevi tanımlama ve akışı kurma işleri vardır. Doğrudan tel kafesle başlayan bir süreç, araştırma yerine varsayımlarla ilerliyor olabilir.

"UI, işin süsleme kısmıdır." Arayüz kararları okunabilirliği, hata oranını ve erişilebilirliği doğrudan etkiler. NN/g'nin kullanılabilirlik bileşenleri arasında hatalar ve öğrenilebilirlik de vardır ve bu ikisi büyük ölçüde arayüzde belirlenir 3.

"İyi bir UI tasarımcısı UX'i de halleder." Bazen evet. Ama araştırma ve akış tasarımı ayrı zaman ister. Takvimde bu işlere yer açılmamışsa, beceri ne olursa olsun UX kararları ekran çizerken aceleyle alınır.

"UX, kullanıcı ne isterse onu yapmaktır." Kullanıcı deneyimi tasarımı, iş hedefleri ve teknik kısıtlarla kullanıcı ihtiyacını dengeler. Kullanıcıların söyledikleri değil, gözlenen davranışları ve ulaşmaya çalıştıkları hedefler esas alınır.

"UX bir kez yapılır, biter." ISO 9241-210 insan merkezli tasarımı yinelemeli bir süreç olarak tarif eder ve tasarımın kullanıcı merkezli değerlendirmeyle yönlendirilip iyileştirilmesini ilke olarak sayar 1. Ürün değiştikçe deneyim de yeniden değerlendirilir.

Ürününüzde hangi katmanın eksik olduğunu nasıl ayırt edersiniz?

Bir sorunu doğru katmana yerleştirmenin en hızlı yolu, kullanıcıyı gerçek bir görevde izlemektir. Örneğin bir randevu uygulamasında kullanıcı "Randevu al" düğmesini bulamıyorsa sorun büyük ölçüde arayüzdedir. Düğmeyi bulduğu hâlde önce hizmeti mi, şubeyi mi seçeceğini anlamıyorsa sorun akıştadır. Ürün kullanıcının ihtiyaç duyduğu saat aralığını hiç sunmuyorsa, sorun ne arayüzde ne akıştadır; ürün kapsamındadır.

Pratik bir ipucu: sorunu tarif ederken kullanılan fiile dikkat edin. "Bulamadım", "okuyamadım", "fark etmedim" gibi ifadeler genellikle arayüze; "ne yapmam gerektiğini anlamadım", "neden bunu soruyor", "işimi göremedim" gibi ifadeler genellikle akışa ya da ürün kapsamına işaret eder.

Bu ayrımı yapmak için iki yöntem birbirini tamamlar: uzman gözüyle yapılan bir değerlendirme ve küçük ölçekli bir test. İlki bilinen ilkelere aykırılıkları hızlıca listeler, ikincisi gerçek kullanıcıların nerede zorlandığını gösterir. Nasıl bir rapor çıktığını görmek için örnek UX denetimi sayfasına, testin adımları için kullanılabilirlik testi nasıl yapılır yazısına bakabilirsiniz.

Mevcut ürününüzde sorunun hangi katmanda olduğunu kanıta dayalı biçimde görmek isterseniz UX denetimi hizmetimizin kapsamını inceleyebilirsiniz.