UI ve UX Nedir?

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:

• Strateji
• Kapsam
• Yapı
• İskelet
• Görselleştirme

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.

• Ürün işletme için ne sağlayacak?
• Müşteriler neden böyle bir ürün kullanıyor?
• Müşteriler en sık nelerden şikayet ediyor?
• Bu ürün, diğer ürünlerden nasıl farklılaştırılmalıdır?

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

• Ürün kullanımı bağlamında sizin için iyi bir deneyim nedir?
• Genelde burada ilk olarak ne yapardın? Neden?
• Bu ürünü ne sıklıkla kullanıyorsunuz? En sık ne için kullanıyorsun?
• Bu üründen önce, sırasında ve sonrasında ne tür şeyler kullanıyorsunuz?

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şimi ve işlevselliği etkili bir şekilde iletir.
• Basit ve karmaşık iş akışlarını ortaya çıkarır.
• Kullanıcıları durum değişiklikleri hakkında bilgilendirir .
• Doğru yapıldığında hataları önler.

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

• Tutarlılık (consistency), insanların bildiklerini kullanmalarına yardımcı olur.
• Görünürlük (visibility) etkileşime davet eder. Örneğin butonların ne işe yaradığı ile ilgili bilgi veren yazılar ve simgeler butonların üzerine yerleştirilmelidir.
• Tahminler doğru olduğunda öğrenmek daha kolaydır. Örneğin bir arama kutusu simgesi “büyüteç” olduğunda o kutuda arama yapabileceğini hemen tahmin eder.
• Geri bildirim öğrenmeyi kolaylaştırır.

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.

• Hiyerarşik Ağaç: Bir dizin sayfası ve bir dizi alt sayfa içeren standart yapıdır.
• Hub & Spoke: Birbirinde bağımsız birçok içeriğin olduğu zamanlar kullanılan yapı.
• İç İçe Liste: Kullanıcının daha ayrıntılı içeriğe gitmesi için doğrusal bir yoldur.
• Bento Box (Dashboard): Ana ekranda ilgili içeriğin bölümlerini görüntüler.
• Filtreli Görünüm: Belirli bir bilgi kümesinden alternatif bir görünüm oluşturur.

İ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” 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.

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.

• İyi bir kullanıcı arayüzü önemlidir çünkü, web siteleri, mobil uygulamalar ile ziyaretçilerin etkileşimini kolaylaştıracağı için, potansiyel ziyaretçiler alıcılara dönüştürülebilir.

• Kullanıcı arayüz tasarımı ile, bilgi görsel olarak sunulmaktadır. Görsel sunum, bilgilerin hafızada yeniden canlandırılmasına olan ihtiyacı azaltır.

• Kullanıcı arayüz tasarımı yalnızca estetiğe odaklanmakla kalmaz, aynı zamanda bir web sitesinin kullanılabilirlik, yanıt verme, verimlilik ve erişilebilirlik özelliklerini ortaya çıkarmaya çalışır.

• Kullanıcı arayüz tasarımı, ziyaretçileri cezbeder ve onları web sitesinde kalmaya ve daha derinlemesine bakmaya ikna eder. İnsanlar genellikle kişisel olarak etkilendikleri ve iyi bir web sitesine çekildikleri için, bu onların bir müşteriye dönüşme ve söz konusu işletmeyi arkadaşlarına veya aile üyelerine tavsiye etme olasılıklarının daha yüksek olacağı anlamına gelir.

• Kullanıcılar, iyi bir kullanıcı arayüz tasarımına sahip bir web sitesinde veya bir uygulamada işlemlerini gerçekleştirirken, arka planda sistemin nasıl çalıştığını görmezler. Bu da yabancı oldukları sistemin görsel karmaşasından uzakta, işlemlerini daha kolay yapmalarına olanak sağlar.

UI Design İlkeleri

• Hedef kitlenin ihtiyaçları belirlenmelidir. Kullanıcı ihtiyaçları araştırılmalıdır. Kullanıcının becerileri, deneyimi ve neye ihtiyaçları olduğu hakkında bilgi edinilmelidir. Hangi arayüzü beğendikleri ve bunları nasıl kullandıkları öğrenilmelidir. Ünlü e-ticaret sitesi Amazon’un kurucusu Jeff Bezos, rakipler yerine müşterilere odaklanılması gerektiğini söylemektedir.

• Sadelik: Tasarım, basit olmalı, görevleri kolaylaştırmalı, kullanıcının kendi dilinde net ve basit bir şekilde iletişim kurmalı. Açık bir görsel hiyerarşi oluşturulmalı. Tasarımda yer alan gereksiz elemanlar tasarımdan çıkarılmalı.

• Tutarlılık: Kullanıcıların tutarlılığa ihtiyacı vardır. Bir şeyi yapmayı öğrendiklerinde, onu tekrar yapabileceklerini bilmeleri gerekir. Dil, düzen ve tasarım, tutarlılık gerektiren arayüz öğelerinden yalnızca birkaçıdır. Tutarlı bir arayüz, kullanıcıların işlerin nasıl yürüyeceğini daha iyi anlamalarını sağlayarak verimliliklerini artırır.

• Görsel hiyerarşi kullanmak: Arayüz, kullanıcının en önemli olana odaklanmasını sağlayacak şekilde tasarlanmalı. Her bir öğenin boyutu, rengi ve yerleşimi birlikte çalışarak arayüzü anlamak için net bir yol oluşturur. Eylemlerin kendisi karmaşık olsa bile açık bir hiyerarşi, karmaşıklığın görünümünü azaltmada büyük çaba sarf edecektir.

• Geribildirim sağlama: Arayüz, eylemleri hem doğru hem de yanlış olduğunda veya yanlış anlaşıldığında her zaman kullanıcı ile konuşmalıdır. Kullanıcılar her zaman eylemler, durum değişiklikleri ve hatalar veya meydana gelen istisnalar hakkında bilgilendirilmeli. Görsel ipuçları veya basit mesajlaşma, kullanıcıya eylemlerinin beklenen sonuca yol açıp açmadığını gösterebilir.

• Affedici olma: Tasarım ne kadar net olursa olsun, insanlar hata yapacaktır. Kullanıcı arayüzü kullanıcı hatasına izin vermeli ve tolerans göstermelidir. Kullanıcıların eylemleri geri almaları ve çeşitli girdilerle bağışlayıcı olmaları için yollar tasarlanmalı. Örneğin, bir kullanıcı yanlış doğum tarihi biçimini girdiği için doldurduğu forma baştan başlamayı istemez. Ayrıca, kullanıcı bir hataya neden olursa, hangi eylemin yanlış olduğunu göstererek öğretebilen ve yapılan hatanın tekrarlanmamasını sağlayacak bir mesaj kullanılmalıdır.

• Anlaşılabilirlik: Arayüz tasarımında tasarımcılar metaforlar ve benzeşimler kullanır. Örneğin arama yapmak için büyüteç ikonu , alışveriş yapmak için alışveriş sepeti ikonu gibi. Kullanılan metaforlar kullanıcıya yabancı gelmemeli, basit olmalıdır.

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.