UX ve UI Tasarımcı Arasındaki Fark Nedir? Hangi Araçları Kullanırlar?

1- UX ve UI Tasarım Genel Tanımı

Hoşunuza gitse de gitmese de User Experience (Kullanıcı Deneyimi UX) ile User Interface (Kullanıcı Arayüzü UI) tasarımcılığı hep karşılaştırılmak istenmiştir ve aralarındaki fark merak edilmiştir. UX kullanıcı deneyimi tasarımcılığı için ingilice kısaltması yapılmış bir iş tanımı, UI ise kullanıcı arayüzü tasarımcılığı için kullanılan kısaltma. Bu terimlerle ilk kez karşılaşan birisiyseniz bu ikisi arasında farkı küçük bir örnekle açıklamaya çalışayım. Şu an oturduğum sandalyeyi ele alalım. UI tasarımcımız bu sandalyenin dış görünümünü tasarlar. UX tasarımcımız bu sandalyede oturan kişiyi düşünüp daha konforlu olmasını tasarlar; yumuşak minderlerle, kumaş seçimiyle, kolçakları ile daha rahat hale getirir ya da bunu öngörür. Eskiden kullanıcı deneyimi deyince bunlar akla gelirdi ama günümüzde web sitesi, application vb. interaktif tasarımlarda UI / UX terimleri kullanılmaya başlandı.

2- Günümüzdeki UX ve UI Tanımı

UX ve UI tasarımcıların kullandıkları araçlar, sorunlara yaklaşımları birbirinden farklı olsa da birbirleri ile ilişkilidirler.  UX tasarımcılar üzerine çalıştığı ürünle ilgili derinlemesine bir araştırma yapar, varsa rakipleri takip eder ve teknolojilerini analiz eder, sonra ürünün kullanıcı ile ilk etkileşimi olan arayüzünü tasarlar ve bu tasarıma yalnızca estetik açıdan bakmaz aynı zamanda tasarımın ne kadar verimli, basit, anlaşılabilir ve kullanımının kolay olması kaygılarını güder.  Son olarak ürünü test eder ve bu ürünü ilk kez kullanan kullanıcıların da ne hissettiklerini de anlamaya çalışır. Kullanıcı deneyimi tasarımcılığı (UXD), kullanıcı arayüzü tasarımını (UID) da kapsayan çok geniş bir daldır.

Günümüzde ise kullanıcı arayüzü tasarımı yapılabilecek ürünlerin arasında yazılımlar, bilgisayar ve benzeri elektronik malzemeler, arabalar, oyuncaklar ve içerisinde elektronik aksam bulunan neredeyse her bir ürün bir kullanıcı arayüze sahiptir ve birileri bunları bizim için tasarlamıştır. Mimari tasarımlarda olduğu gibi nasıl bir kapının hangi yöne açıldığı bile önemliyse, kullanıcı arayüz tasarımında da tasarlanan her bir eleman amacına uygun ve iyi düşünülmüş olması gerekir.

Madem bunlar farklı şeyler neden iş ilanlarında birlikte veriliyorlar diye sorabilirsiniz tabi. Farkettiğiniz gibi bu iki terim aynı yerden geliyor yani aralarında dağlar kadar fark yok; öyle ki eğer intel, google, apple gibi büyük bir şirketlerde çalışmıyorsanız. Orta ölçekli ve küçük şirketlerde bu iki işi de tek kişinin yapması beklenir çünkü zaten arayüzü yapılacak olan ürün bir kaç tanedir.

“Bunlar tamamen birbirinden farkı şeylerdir, birbirleriyle ile karşılaştırılamaz bile” diye şiddetle karşı çıkan arkadaşlara bir çift söz etmek isterdim ama bu terimlere yüklediğiniz anlama göre iş tanımını da değişeceği için, bunu kişisel algılayan tasarımcı arkadaşlara da saygım sonsuz. Fakat benim kişisel fikrim; bu iki terimin iş ilanlarında birlikte verilmeleri ve insanların kafasını kurcalayacak kadar olan benzerlikleri zaten çok farklı şeyler olmadıklarını kanıtlıyor gibi.

Sade bir açıklama ile bu soruya son noktayı koymak istiyorum.

• UX tasarımı, bir kullanıcının bir markayla ve markanın ürünlerinde, hizmetlerinde, web sitesinde, uygulamalarında vb. sahip olduğu tüm etkileşimle ilgilidir. UX, bir kullanıcının tüm yolculuğuna değinir, bu yolculuktaki sahip olduğu eksiksiz genel deneyimi kapsar.
• Diğer yandan UI tasarımı ise, kullanıcının o yolculukta gerçekten etkileşime gireceği belirli şeylerle ilgilenir. (Google’u örnek alalım, Google bir marka ve pek çok ürünü var. Her bir ürününün farklı farklı amacına uygun arayüzleri de ui tasarımcılar tarafından tasarlanmış. Fakat siz bu uygulamalardan birini kullanırken eleştirinizi direkt olarak googla yaparsınız, işte o eleştiriden anlam çıkartıp gelecekteki bir ürünü tasarlarken sizin duygularınızı işin içine dahil ederek, amaca en hızlı götürecek olan planı yapan ux tasarımcıdır.)

3- Örneklerle UX ve UI Tasarım

Tasarımsal olarak harika görünen ama kullanışlı olmayan pek çok şey sayabiliriz ya da tam tersi tasarımı berbat olan ama çok kullanışlı olan pek çok şey de sayabiliriz. Diğer bir deyişle, UX amaçlarla ilgilenirken, UI görünüm ve işlevsellik ile ilgilenir.

Amerikanın en çok kullanılan websitelerinden birisi olan craiglist.com arayüz bakımından zayıf sayılır ama kullanışlı ve verimli çalışır. Ketçap üreticileri başta dik bir şişe ile pazara girmişti fakat kullanıcıların deneyimleri gelecekteki ketçap şişelerine yön verdi.

Deneyim tasarımı ile ürün tasarımı arasındaki farkı anlamak için o yönde düşünmeye başlamak lazım. Örneğin çoğu arabada, dörtlüleri açan ikaz lambası butonu arabanın gösterge panelinde merkezde ve ulaşılması kolay bir yerde bulunur, bu butonun nereye olacağının ve butona basınca nasıl çalışacağının kararını veren UX tasarımcı, butonun büyüklük, renk vb. görünüm özelliklerinden sorumlu olan ise UI tasarımcıdır. Buradan şu anlamı çıkartabiliriz: siz bu butona basmanız gerektiğinde büyük ihtimalle yüksek bir stres altında olursunuz çünkü yolunda gitmeyen bir şeyler var ki o butonu kullanacaksınız. O yüzden hemencecik görünebilecek, ulaşımı kolay bir yerde olmalıdır. İlginçtir istatistiklere göre bu buton çok az kullanılıyor olmasına ve daha fazla kullanılan başka bir buton ile yeri değiştirilebilmesine rağmen kullanıcı deneyimi buna izin vermiyor. Stress ve tehlike faktörü ağır basıyor; buton daha az kullanılsa da, UX tasarımcı, kullanıcı tarafından kolay ulaşılabilir olmasını öngörüyor.

4- UX Tasarımcıların Kullandıkları Programlar

Deneyimi tasarlamak güç bir iştir. Akış şemaları, prototipler, taslak, tasarım planı, kullanıcı testi ve ekip iş birliğini sağlamak da UX tasarımcının işidir. Bu yüzden UX tasarımcılar hayatlarını ve işlerini kolaylaştıracak araçlara ihtiyaç duyar.

1. MindManager: Zihin haritalama programı. Bir zihin haritası, bilgiyi görsel olarak organize etmek için kullanılan bir diyagramdır. Beyin fırtınası yapmak, bir plan yapmak veya fikirleri gerçeğe dönüştürmek, gerekli adımlara dönüştürmek için harika bir yoldur. MindManager, Mindjet tarafından geliştirilen zihin haritalama yazılımı uygulamasındır. Dijital zihin haritaları, beyin fırtınası yapmak, projeleri yönetmek ve planlamak, araştırma yapmak, çok miktarda bilgi düzenlemek ve stratejik planlama için “sanal bir beyaz tahta” gibi kullanılabilir. Fiyatı: 129$
2. SmartDraw: Herhangi bir modern web tarayıcısını kullanarak akış şemaları ve diyagramları oluşturmanıza ve düzenlemenize olanak tanıyan bir yazılımdır. Güvenlik duvarının arkasında çalışmanız gerekirse, SmartDraw’ı Windows yazılımı olarak da kullanabilirsiniz. Hızlıca düzenleyebileceğiniz yüzlerce profesyonel şablon içerir. En acemi kullanıcılar bile SmartDraw ile anında üretken olabilirler. Fiyatı: 197$
3. MockPlus: Mükemmel bir tasarım prototipleme uygulaması. Mobil uygulama, masaüstü ve web uygulamaları için prototipleme araçları içerir. Mockplus ile bir tasarım prototipini oluşturmak, Photoshop veya Illustrator gibi genel amaçlı bir grafik düzenleyiciye kıyasla çok daha kolay. Arayüzündeki anlaşılması ve kullanılması kolay sürükle ve bırak mantığı, aracları hemen kullanmaya başlamayı mümkün kılıyor. İlk kez kullananlar bile, eğiticilerin ve eğitim kılavuzlarının üzerinden geçmek zorunda kalmadan ustalaşabilirler. Ucuz bir UX aracı arıyorsanız ve en az zamanda interaktif prototipler oluşturmak istiyorsanız, Mockplus kaçırmamanız gereken ideal bir çözüm. Fiyat: aylık 29$
4. UserTesting: Kullanılabilirlik testi, bir ürünü kullanıcılar üzerinde test ederek değerlendirmek için kullanıcı merkezli, etkileşim tasarımında kullanılan bir tekniktir. Bu kullanıcı deneyimini geliştirmek için çok önemlidir. UserTesting’de, gerçek kişiler web sitelerini, mobil uygulamaları ve prototipleri kullanır verir video yardımı ile düşüncelerini söylemelerine olanak sağlayan çevrimiçi bir kullanılabilirlik test aracıdır. Açılış sayfaları, e-postalar, reklam, prototipler, canlı siteler ve uygulamalar için hizmet verir. Bu program ile deneyimli bir şirket içi araştırma ekibi tarafından tasarlanan size özel testi satın almayı tercih edebilir veya hedeflerinizi gerçekleştirdiğinize yardım etmek için bir proje yöneticisine sahip olabilirsiniz. Fiyat: Video başına 49$

Bunlara benzer piyasada daha yüzlerde uygulama mevcut. Microsoft Visio, Axure RP, AppCooker, Flinto, Sketch, InVision, Optimizely, Trello, Time Doctor, Fotojet gibi programlar UX tasarımcılar için oldukça yardımcı yazılımlardır.

5- UI Tasarımcıların Kullandıkları Programlar

Kullanıcı arayüzü işin görsel kısmı ve projenin kullanıcı ile en çok temas edecek tarafı. O yüzden özenli, temiz bir tasarım ve deneyim tasarımcısından aldığınız ayrıntılı feedback-lerle ilerlemek en güzeli olacaktır. Tasarım yapmak için pek çok araç mevcut ben aklıma gelenleri sıralıyorum şimdi sizin de aklınıza gelen bir program olursa yorumlar kısmına yazabilirsiniz.

1. Sketch: Hiç şüphesiz, Sketch son yıllarda UI / UX tasarımcıları için en popüler araçlardan biri oldu. Tanıdık olmayanlar için Sketch, UI / UX tasarımcılara yardımcı çok yönlü bir vektör tabanlı tasarım aracıdır. Sketch PhotoShop’un yapamadıklarını onun zaten doğasında varmışcasına kolay tasarlar. Bir UI tasarımcısıysanız, Mac OS çalıştıran bir cihazınız var ve henüz Sketch’i denemediyseniz, kesinlikle büyük bir şey kaçırıyorsunuz. İhtiyacınız olan hemen hemen tüm vektör tabanlı UI tasarım araçları program ile birlikte gelir. Bu yeterli değilse, seçebileceğiniz kapsamlı bir eklenti koleksiyonuyla programın yeteneklerini daha da genişletebilirsiniz.
2. Adobe XD: Adobe XD hem tasarım hem de prototip işlemlerini gerçekleştiren “all-in-one” bir araçtır. Prototipleme yeteneklerini Beta aşamasında ve Adobe’nin CC paketinin bir parçası olarak ilan edildi.  Programın kullanıcı arayüzü, büyük kardeşi Illustrator’dan alınan ayrıntılar ile minimal ve hafif hale getirilmiş. Bu, başlangıçtan beri bana keyifli gelen ve dikkat dağıtımını en aza indirgeyen özelliği. Tekrarlama Izgarası aracı oldukça zaman kazandırıcı. İstediğiniz kadar tasarım öğelerini seçip tekrarlamanızı sağlar. XD’nin, takip eden yıllarda daha fazla popülerlik kazanacağını ve mevcut özelliklerin daha olgun alternatiflerle eşleşeceğini umuyorum. Resmi Adobe forumlarından XD için geliştirmekte oldukları yeni özelliklerle ilgili ilerlemelerini takip edebilirsiniz.
3. Gravity Designer: Yakın zamanda keşfettiğim özellikleriyle, gerçek olamayacak kadar iyi görünen bir vektör tabanlı tasarım aracı. Ancak, bir süredir kullandıktan sonra, nerede durduğunu hissettim ve oldukça etkilendim. Başlamak için tamamen ücretsiz ve herhangi bir modern tarayıcıda veya yerel bir Mac OS, Windows veya Linux uygulaması olarak çalıştırabilirsiniz. Varsayılan UI çalışma alanı düzenlemesi Sketch’den birçok yönden esinlenmiş görünüyor ve macenta renk tonuyla öne çıkıyor. Renk seçimi bir süre sonra biraz dikkat dağıtıcı olabiliyor. Arayüzünün varsayılan rengini özelleştirmek için gelecekte bir seçenek sunacaklarını umuyorum.

Bunlara benzer olarak Affinity Designer, Figma, gibi yenilikçi programları tercih edebilirsiniz ya da daha geleneksel tasarımcıların yaptığı gibi Adobe PhotoShop, Illustrator kullanabilirsiniz.

6- Bonus Application

Milanote, çılgın fikirlerimi kontrol etmeme yardımcı olan esnekliğe ve sezgisel bir arayüze sahip bir uygulama. Kısaca Milanote aslında yaratıcı kişilikler için Evernote tadında bir program.

Ekip içinde yaratıcı projeler düzenlemek için en iyi araçlardan biri. Milanote hakkında sevdiğim şey, bana ve iş arkadaşlarımın günlük projelerde organize olmalarına yardımcı olan proje yönetimi yazılımıdır. Ayrıca web sitelerine bağlantılar kaydedebilir ve notlar vb. oluşturabilirsiniz. Milanote’u kullanarak bazı harika zihin haritaları ve vizyon panoları oluşturabilirsiniz. Milanote ekibi, diğer kullanıcıların projelerini ve yeni özelliklerini nasıl düzenlediklerine dair örneklerle harika bir sürekli iletişim sağlıyorlar. Denemenizi şiddetle tavsiye ederim.

UX ile UI arasındaki farkı olabildiğince basit anlatmaya çalıştım umarım beğenmişsinizdir. Peki müşteriniz size bu soruya sorduğunda nasıl cevap verirsiniz? Yorumlarınızı aşağıya bekliyorum.

Yazıyı beğendiyseniz beğen butonuna basmayı, hatta çok beğendiyseniz sosyal medyada paylaşmayı ve hala youtube kanalıma abone değilseniz gelecek videolardan haberdar olmak için abone olmayı unutmayın. Diğer yazılarım için blogumu ziyaret edebilirsiniz.