Site icon UI Cosmos

UI ve UX Nedir?

ux design

Giriş

UI ve UX design kavramları dijital dünyada özellikle son 10 yılın en çok önem verilen kavramlarından biri. Bu yazıda UI ve UX Design kavramlarının ne olduğu ile ilgili detaylı bilgiler aktaracağım.

UX Design Nedir?

UX design (kullanıcı deneyimi tasarımı), ekiplerin kullanıcılara anlamlı ve alakalı deneyimler sağlayan ürünler oluşturmak için kullandığı süreç tasarımıdır. Bu, markalaşma, tasarım, kullanılabilirlik ve işlevsellik de dahil olmak üzere ürünü edinme ve entegre etme sürecinin tamamının tasarımını içerir.

“Kullanıcı deneyimi (ux)” ifadesi ilk olarak 1986 yılında Don Norman ve Stephen Draper tarafından yazılan “Kullanıcı Merkezli Sistem Tasarımı-İnsan/Bilgisayar Etkileşiminde Yeni Perspektifler (User Centred System Design-New Perspectives on Human/Computer Interaction)” kitabında “kullanıcının deneyimi” olarak kullanılmıştır.

Konseptin en kapsayıcı tanımını ISO (Uluslararası Standardizasyon Örgütü) 2010 yılında şu şekilde yapmıştır:

“Kullanıcı deneyimi, tüm kullanıcıların duygularını, inançlarını, tercihlerini, algılarını, fiziksel ve psikolojik tepkilerini, kullanımdan önce, kullanım sırasında ve sonrasında meydana gelen davranışlarını ve becerilerini içerir.”

UX design, insanların ilişki içinde olduğu anları, bu anların yarattığı fikir ve duyguları göz önünde bulundurmayı ve bu deneyimlerden yola çıkarak insan merkezli tasarımlar gerçekleştirmeyi amaçlar.

Kullanılabilirliğin ölçülmesine yönelik çalışmalarla kullanıcı deneyimine giden sürece ulaşılmıştır. Bir ürün veya hizmetin kullanılabilir hale gelmeden önce kullanıcısına iyi bir deneyim yaşatması düşünülemez.

Kullanılabilirlik Nedir?

Kullanılabilirlik, kullanıcı arayüzlerinin kullanımının ne kadar kolay olduğunu değerlendiren bir kalite özelliğidir. Bu terim aynı zamanda tasarım sürecinde kullanım kolaylığını geliştirmeye yönelik yöntemlere de atıfta bulunur. “Belirli bir kullanım bağlamında etkinlik, verimlilik ve memnuniyetle belirtilen hedeflere ulaşmak için belirli kullanıcılar tarafından bir ürünün ne ölçüde kullanılabileceğidir.”

Kullanıcı Deneyimi Tasarımı” genellikle “Kullanıcı Arayüzü Tasarımı” ve “Kullanılabilirlik” gibi terimlerle birbirinin yerine kullanılır. Bununla birlikte, kullanılabilirlik ve kullanıcı arayüzü (UI) tasarımı, UX tasarımının önemli boyutlarından olsalar da, UX tasarımının alt kümeleridir. UX design, çok çeşitli başka alanları da kapsar. Bir UX tasarımcısı, marka, tasarım, kullanılabilirlik ve işlevsellik dahil olmak üzere bir ürünü edinme ve entegre etme sürecinin tamamıyla ilgilenir.

UX Designer Ne İş Yapar?

Buradaki blog yazımda UI ve UX Designer ne iş yapar sorusunun cevabının olduğu UX rollerini tasarım odaklı düşünme aşamalarını baz alarak açıklamaya çalıştım.

UX Design Süreçleri

Kullanıcı deneyimi tasarımcısı ve danışman Jesse James Garrett’a göre, “UX design”ın 5 unsuru şunlardır:

Kullanıcı deneyimi tasarımı süreçleri

Strateji Oluşturma

Kullanıcı deneyimi tasarımının başladığı aşamadır. Bu aşamada deneyim tasarımcısı, paydaş görüşmeleri, rakip incelemeleri, kullanıcı araştırması ve mevcut ürün denetimi yapar. Böylece kullanıcı hedeflerini belirler. Aşağıdakiler, bu aşamada yanıt bulmaya çalıştığı temel sorulardan bazılarıdır.

Firmadan doğrudan tüketiciye (B2C) ürünü oluştururken tasarımcı hedef kitleye şu soruları sorar:

Kullanıcı deneyimi tasarımında “Neden?” sorusuna yanıt aranan aşamadır.

Strateji oluştururken ilk yapılması gereken hedef kitlenin belirlenmesidir. Hedef kitle belirlendikten sonra, bu kitleye ulaşıp beklentileri ve kullanım alışkanlıkları hakkında gözlem yapılır. Bu aşama, kullanıcı analizinin yapıldığı aşamadır.

Kapsam Tanımlamak

Kapsam tanımlamak ürün-hizmet olarak ne yapılacağını veya ne yapılmayacağını tayin eder. Ortaya koymak istenen ürün veya hizmetin özellikleri net olarak belirlenip ve ekipteki herkese uygun görev dağılımı yapılırsa, ürün veya hizmetin tamamlanma süreci daha belirgin olur.

Ekip içinde ürün veya hizmetle ilgili daima yeni özellik fikirleri çıkacaktır, ancak her fikir belirlenen stratejiye uygun olarak elenmelidir. Mümkünse öncelikli olan özellikler belirlenir, zaman içinde yeni deneyimler ortaya çıkar ve ürün-hizmet yeni özelliklerle geliştirilir.

Kapsam tanımlanırken açık ve net ifadeler kullanılmalı, olumlu bir dil kullanılmalıdır. Olumlu bir dil kullanmak, yapılmaması gereken şeye odaklanmak yerine, yapılmaması gereken şeyi önlemek amacıyla ne yapılacağını ortaya koymaktır.

Yapı Oluşturmak

Etkileşim Tasarımı (IxD) ve Bilgi Mimarisi (IA), tasarlanan ürünün yapısını tanımlayan temel bileşenlerdir.

Etkileşim tasarımı aşağıdakileri yaparak insanlar ve ürünler arasında anlamlı ilişkiler yaratmaya çalışır:

Etkileşim tasarımı şu ilkeleri içerir:

Bilgi mimarisi (Information Architecture) , içeriği düzenlemeye, kategorilere ayırmaya ve önceliklendirmeye yardımcı olur. Kullanıcı deneyimi tasarımında yapıyı kurarken bilgi mimarisi yardımcı olacaktır.

İskelet Seviyesi

Arayüz tasarımının, navigasyon tasarımının ve bilgi tasarımının belirli yönlerini tanımlayan bu iskelet yapısı, soyut olarak başlayan yapıyı somuta doğru çeviren süreçtir.

Arayüz tasarımı: Kullanıcı girdisini ve sistem çıktısını kolaylaştırır. Butonlar, input alanları, “checkbox”lar gibi bileşenler girdilere örnektir. Arayüzde kullandığınız bileşenler tutarlı olmalıdır. Kullanıcılar aşina oldukları bu arayüzleri daha kolay kullanırlar.

Navigasyon tasarımı: Site içinde gezinimi kolaylaştırır. Kullanıcıların lüzümsuz tıklamalar yapmasına engel olmak amacıdır. Gezinim tasarımının amacı bilgiyi konumlandırmaktır. Kullanıcıların nerede olduğunu farketmeleri ve gidecekleri yere kolayca ulaşmalarını sağlar.

Bilgi tasarımı: Bilgilerin anlaşılmasını kolaylaştırır. Bilgiler gruplanarak öne çıkarıldığında algılanması daha rahat olacaktır.

Wireframe Oluşturma

Wireframe oluşturma, UI ve UX’in en önemli aşamalarından biridir.

İskeleti tamamlama seviyesi sonunda sistemi ayakta tutacak temel yapı ortaya çıkar. Sırada bu yapının gösterimi aşaması vardır. Soyuttan somuta doğru gidilen bu yolda görselleştirmeye “wireframe” yaparak başlarsınız. “Wireframe” bir tasarımın iskelet çerçevesini temsil eden görsel bir kılavuzdur. Örneğin bir web sitesi tasarlanıyorsa, bu web sitesinin öğelerini içeren elementleri düzenlemek amacıyla wireframe hazırlarsınız.

Wireframe oluşturma(Kaynak: balsamiq.com)

“Wireframe” nihai tasarım değildir. Görsel tasarım çalışması barındırmaz. Ayrıntılardan ziyade ana yapıyı odak haline getirir. “Wireframe”den sonra görsel tasarıma geçebilirsiniz.

Görselleştirme

Kullanıcı deneyimi tasarımının son aşamasıdır. UI design aşamasında burada geçeriz. Sahip olduğumuz her deneyimi – sadece ürün ve hizmetlerle değil, ama dünyayla ve birbirleriyle— temelde duyularımız aracılığıyla yaşarız. Koku, tat, dokunma, duyma ve görme. Yeni bir araba satın aldığımızda yaşadığımız “yeni araba kokusu” deneyimi, koku duyumuza hitap eden bir deneyimdir. Bu deneyimi ilk defa yaşadıktan sonra, belki bir sonraki satın alacağımız arabada bu deneyimi arayacağız.

Bir oyun konsolunda oyun oynarken oyun içindeki tehlikenin yaklaştığı esnada oyun kumandasından gelen titreşim ile yaşadığımız deneyim dokunma duyumuza hitap eder.

Kullanıcı deneyiminin en gelişmiş olduğu alan, görme duyusuna hitap eden alanlardır. Başlangıçta, görsel tasarımın basit bir estetik meselesi olduğunu düşünülebilir .Herkesin zevki farklıdır ve herkesin görsel olarak çekici bir tasarımın ne olduğu hakkında farklı bir fikri vardır, bu yüzden tasarım kararlarıyla ilgili her tartışmanın kişisel tercihe bağlı olduğu da düşünülebilir. Herkesin farklı bir estetik anlayışı vardır, ama bu tasarım kararlarının ilgili herkese güzel görünen şeylere dayanması gerektiği anlamına gelmez.

Görsel tasarım fikirlerinin sadece estetik açıdan hoş görünen şeyler açısından değerlendirilmesi yerine ne kadar iyi çalıştığına dikkat edilmelidir. Tasarım, kullanıcı deneyimi unsurlarının her biri tarafından tanımlanan hedefleri ne kadar etkili bir şekilde destekliyor buna bakılmalıdır.

Bir web sitesinin veya mobil uygulamanın nasıl görüneceği kararlaştırılırken görsel tasarım ilkeleri ele alınır. Bunlar renk paleti, tipografi, tutarlılık, zıtlık gibi ilkelerdir.

UI Design Nedir?

UI ve UX Design’ı açıklamaya çalışırken ilk önce UX Design’ı anlatmaya çalıştım. Şimdi UI Design nedir onu ele alalım.

Öncelikle kullanıcı ve arayüz terimlerinin anlamlarına bakalım.

Kullanıcı: Bir bilgisayar ve ağ hizmetini kullanan kişiye kullanıcı denir.

Arayüz: Bir bilgisayar sisteminin iki veya daha fazla ayrı bileşeninin bilgi alışverişinde bulunduğu paylaşılan bir sınırdır.

Kullanıcı arayüzü tasarımı, tasarımcıların görünüm ve stile odaklanarak yazılım veya bilgisayarlı cihazlarda arayüzler oluşturmak için kullandıkları süreçtir. Tasarımcılar, kullanıcıların kullanımı kolay ve zevkli bulduğu arayüzler oluşturmayı hedefler. UI tasarımı, grafik kullanıcı arayüzlerini ve diğer formları ifade eder – örneğin, ses kontrollü arayüzler gibi.

Kullanıcı arayüzü tasarımı, kullanılabilirliği ve kullanıcı deneyimini en üst düzeye çıkarmaya odaklanarak bilgisayarlar, mobil aygıtlar ve diğer elektronik aygıtlar gibi bilgisayarlı aygıtlar ve yazılımlar için kullanıcı arabirimlerinin tasarımıdır.

Kullanıcı arayüzleri, kullanıcıların tasarımlarla etkileşime girdiği erişim noktalarıdır. Üç format bulunmaktadır.

Grafik kullanıcı arayüzleri (GUI)

Kullanıcılar, dijital kontrol panellerindeki görsel temsillerle etkileşime girer. Bir bilgisayarın masaüstü bir grafik kullanıcı arayüzüdür.

Ses kontrollü arayüzler (VUI)

Kullanıcılar, sesleri aracılığıyla bunlarla etkileşime girer. Akıllı asistanların çoğu – örneğin, iPhone’daki Siri ve Amazon cihazlarındaki Alexa – VUI’lerdir.

Hareket tabanlı arayüzler(Gesture-based interface)

Kullanıcılar, vücut hareketleri yoluyla üç boyutlu tasarım alanlarıyla etkileşime girer. Sanal gerçeklik (VR) oyunlarının arayüzlerini bu gruba dahil edebiliriz.

Kullanıcı arayüzü tasarımı (UI design) özellikle etkileşimli bileşenlerin görsel tasarımına odaklanır. Etkileşimli bileşenler, açılır menüler, tıklanabilir bileşenler, animasyonlar, düğme tasarımı, form alanı tasarımı gibi temel unsurları tasarlar.

Kullanıcı Arayüzü Tasarımı Örneği by Golo on Dribbble

UI Design Unsurları (UI Components)

Arayüz tasarlanırken, arayüz öğeleri seçiminde tutarlı ve öngörülebilir olmaya çalışılmalıdır. Farkında olsalar da olmasalar da, kullanıcılar belirli bir şekilde hareket eden unsurlara aşina olmuşlardır, Bu da herhangi bir web ya da uygulama tasarımını kullanırken kullanıcının verimliliğine ve memnuniyetine yardımcı olacaktır.

Aşağıda sık kullanılan arayüz unsurlarından bahsedeceğim. Büyük bir kısmına yer verilmekle beraber, hepsi bunlarla sınırlı değildir.

Input (girdi) kontrolleri: Onay kutuları(checkbox), radyo butonları(radio button), açılır listeler (dropdown list), liste kutuları (list box), butonlar, “toggle”lar, metin alanları, tarih alanı gibi.

Gezinme (Navigation) Bileşenleri: Ekmek kırıntıları (breadcrumbs), kaydırıcı (slider), arama alanı, sayfalandırma, etiketler, simgeler (icons)

Bilgilendirici Bileşenler: İpuçları (tooltips), simgeler, ilerleme çubuğu (progress bar), bildirimler (notification), mesaj kutuları, modal dialog pencereleri

Containers: Akordiyon menüler.

UI Design Önemi

UI Design, kullanılabilirliği kolaylaştırmak ve kullanıcı deneyimini iyileştirmek amacıyla nesnelerin görünümünü düzenler. Kullanıcı arayüzü, bir kullanıcının onunla etkileşime girmesine izin veren bir cihazın veya uygulamanın özellikleridir. İyi bir kullanıcı arayüzü için, hedef kitlenin işletmenin ürün ve hizmetlerini net bir şekilde görebilmesi gerekir.

UI Design İlkeleri

Hata mesajı

Sonuç

UI ve UX nedir sorusunu cevaplamaya çalıştım. Umarım yardımcı olmuştur. UI ve UX birbirinden ayrı düşünülemez. UI altkümesidir UX şeklinde düşünebiliriz.

Beğendiyseniz lütfen paylaşın:
Exit mobile version