UI tasarımı, bir uygulamanın kullanıcı arayüzünün görünümünü ve hissini yaratma sürecidir.†
Kullanıcı arayüzü (UI), bir uygulamanın hem görünümünü hem de etkileşimini kapsar.
Kullanıcıların gördüğü renkler, okudukları metin, tıkladıkları düğmeler ve etkileşimde bulundukları animasyonlar, uygulamanın kullanıcı arayüzünün bir parçasıdır ve bu nedenle bir UI tasarımcısının sorumluluğu altındadır.
UI, kullanıcı deneyiminde(UX) önemli bir rol oynar.
Uygulamanın tasarımı sezgisel veya uyumlu değilse, kullanıcı iyi bir deneyime sahip olmayacaktır – ancak UI, UX ile aynı değildir.
UX ile UI’yi karşılaştırırken, UX‘in daha kapsamlı bir terim olduğunu göreceksiniz.
Kullanıcının ihtiyaç ve beklentilerinin karşılandığından emin olmak için bir ürünün tüm yönlerini araştırma, geliştirme, test etme ve iyileştirme sürecidir.
Öte yandan kullanıcı arayüzü daha kozmetiktir ve yalnızca ürünün sunumuna odaklanır.
Ancak bu, UI tasarımcısının işinin kolay olduğu anlamına gelmez.
Sayfada neyi nereye koyacaklarına karar vermeleri gerekir. Örneğin, logo sayfanın üstüne veya altına veya her ikisine birden yerleştirilebilir.
Düğmeler, kullanıcı fareyle üzerine geldiğinde veya animasyonu olmadığında renkleri değiştirebilir.
Daha da ötesi öğelerin hiyerarşisini ve etkileşimini göz önünde bulunduran UI tasarımcısı, her görsel öğenin çekici, ilgi çekici ve sayfadaki diğer öğelerle ve bir bütün olarak markayla uyumlu olmasını sağlamalıdır. Ki bu oldukça zor bir iştir. Sizi vezir de eder piyonlaştıradabilir.
Bir Web Sitesi için Kullanıcı Arayüzü Nasıl Tasarlanır
1. Kullanıcınızın acı noktalarını anlayın
Kullanıcınızın acı noktalarını anlamak, kullanıcı arayüzü tasarım sürecinde (ve kullanıcı deneyimi tasarım sürecinde) önemli bir ilk adımdır.
Bu sadece demografi ile ilgili değil. Kaç yaşındalar, nerede yaşıyorlar… ve çok daha fazlası.
Kullanıcılarınızın neye ihtiyacı olduğunu (neye ihtiyaç duymadıkları), beklentilerinin ne olduğunu ve görevlerini yerine getirirken hangi zorluklarla karşılaştıklarını anlamanız gerekir.
Ancak o zaman, kullanımı olabildiğince basit ve etkili bir kullanıcı arayüzü oluşturabileceksiniz.
Bu süreç veri ve analizden çok empati gerektirir.
Görüşmeler, çevrimiçi anketler ve kullanıcı testi oturumları, web sitenizi kullanacak kişiler hakkında fikir edinmenin yalnızca birkaç yoludur.
Bu bilgiler, kullanıcı arayüzü tasarım sürecinin her aşamasında bilgi sağlayacaktır.
Önerilen yazı: UX Nedir? [Kapsamlı Rehber]
2. Kullanıcı hikayeleri yazın
Görüşmelerinizi, anketlerinizi ve kullanıcı testlerinizi gerçekleştirdikten sonra, kullanıcılarınız hakkında pek çok zengin bilgiye sahip olacaksınız.
Bu bilgileri kullanmanın ve düzenlemenin bir yolu, kullanıcı hikayeleri oluşturmaktır.
Kullanıcı hikayeleri, kullanıcının uygulamayı kullanarak başarmak istediği temel bir hedefi açıklıyor.
Bu hikaye aslında genellikle tek bir cümledir.
“Bir kullanıcı olarak şunu yapmak istiyorum… [bir hedef].”
Yemek sipariş ugulamasında bir kullanıcının başarmak isteyebileceği bazı hedefleri düşünün.
İşte kullanıcı hikayesi formatını kullanan bazı örnekler:
- “Kullanıcı olarak yeni bir hesap oluşturmak istiyorum.”
- “Bir kullanıcı olarak giriş yapmak istiyorum.”
- “Kullanıcı olarak ödeme bilgilerimi eklemek istiyorum.”
- “Kullanıcı olarak adresimi değiştirmek istiyorum.”
- “Bir kullanıcı olarak, teslim alma sıklığımı değiştirmek istiyorum.”
- “Bir kullanıcı olarak teslimatlarımı aldığım günü değiştirmek istiyorum.”
Kullanıcıların yemek servis uygulamasına yönelik tüm hedeflerini belirlemek için beyin fırtınası yapmanız çok daha fazla kullanıcı hikayesi bulmanız gerekiyor.
Bu adım önemli miktarda zaman alsa da, çabanıza değecektir.
Önce kullanıcı hikayelerinin belirlenmesi, kullanıcının ihtiyaçlarının ve davranışlarının uygulamanın tasarımını ve işlevselliğini belirlediğinden emin olmanızı sağlar – tersi değil.
3. Bir arayüz envanteri yapın
Artık kullanıcının ne istediği ve neye ihtiyaç duyduğu konusunda net bir fikriniz olduğuna göre, kullanıcının hedeflerine ulaşması için gerekli olan UI öğelerinin ve özelliklerinin bir arayüz envanterini oluşturabilirsiniz.
Bu envanter tipografiden, görsellere, medya unsurlarına, tablolara, formlara, düğmelere, gezinme sistemine(navigasyon) ve bir arayüzü oluşturan diğer tüm olasılıklara ve sonuçlara ihtiyacınız olacak.
4. Tasarım modellerini belirleyin
Arayüz envanterinizi sonlandırırken, ortak tasarım modellerini tanımlayabilirsiniz.
Tasarım kalıpları, yazılım tasarımında tekrar eden sorunlara genel çözümlerdir.
Bunlar kod değil, farklı durumlara uygulanabilecek bir sorunu çözmek için bir şablon veya tanımdır.
Örneğin, sorunun bir web sitesinde birçok bölüm olması, ancak bir gezinme menüsü için sınırlı alan olması olduğunu varsayalım.
Bu durumda dikey bir açılır menü bir çözüm olabilir.
Bu gibi modellerin belirlenmesi, kullanıcı arayüzü tasarım sürecinde tutarlılığın ve verimliliğin korunmasına yardımcı olacaktır.
5. Bir prototip oluşturun
Prototip, gerçek uygulamanın arayüzünün nasıl görüneceğine ve hissedeceğine dair yüksek kaliteli bir önizleme sunan yarı işlevsel bir düzendir.
Çoğu prototip, uygulamanın tam işlevselliğine sahip olmayacak, ancak uygulamanın nasıl çalışacağını simüle edecek ve müşterilerin, diğer paydaşların arayüzde dolaşmasına olanak tanıyacaktır.
Prototip ile kullanıcı arayüzü tasarımcıları ve diğer paydaşlar, öğelerin nasıl çalışacağını gösterip tartışabilir, fikirlerini test edebilir ve değişiklikler yapabilir.
Bu aşamada, UI tasarımcıları genellikle tasarımlarını uygulamaya başlamak için bir geliştiriciye devreder.
En çok kullanılan UI Araçları/Yazılımları
UI'de dikkat etmeniz gerekenler
Mikrodalga kullanmak, bir uygulamada oturum açmak veya bir e-ticaret sitesinde alışveriş yapmak olsun, her gün kullanıcı arayüzleriyle etkileşime giriyoruz.
Başarılı kullanıcı arayüzü tasarımı, mükemmel bir kullanıcı deneyimi ile kötü bir kullanıcı deneyimi arasındaki farktır.
Kullanıcı arayüzü tasarım ilkelerinin yanı sıra kullanıcı deneyimi(basitlik, gezinilebilirlik, tutarlılık ve kullanıcı odaklılık) ve müşteri yolculuğunu da derinlemesine anlamak ve uygulamak ve doğru araçları kullanmak, ürününüz için en iyi arayüzü oluşturmanıza yardımcı olacaktır.
Kullanıcı arayüzlerini en iyi şekilde tasarlamak için şunları göz önünde bulundurmalısınız:
- Kullanıcılar tasarımları çok hızlı bir şekilde değerlendirir. Kullanılabilirlik(usebility) ve hoş gözükmesine(likeability) önem verir.
- Tasarımınızı önemsemiyorlar, ancak görevlerini kolay ve minimum çabayla halletmekle ilgileniyorlar. Bu nedenle tasarımınız “görünmez” olmalıdır: Kullanıcılar tasarıma odaklanmamalı, görevleri tamamlamaya, örneğin Domino’s’un Zero Click uygulamasında pizza siparişi vermeye odaklanmalıdır. Bu nedenle, sorunsuz deneyimler sunan en iyi, en sezgisel kullanıcı arayüzlerini hassas bir şekilde ayarlamak için kullanıcılarınızın bağlamlarını ve görev akışlarını (örneğin müşteri yolculuk haritalarından bulabileceğiniz) anlayın.
- Kullanıcı arayüzleri ayrıca eğlenceli (veya en azından tatmin edici ve hayal kırıklığı yaratmayacak şekilde) olmalıdır.
- Tasarımınız kullanıcıların ihtiyaçlarını öngördüğünde, daha kişiselleştirilmiş ve sürükleyici deneyimler yaşayabilirler. Onları memnun edin, geri gelmeye devam edecekler.
- Uygun olduğunda, oyunlaştırma unsurları tasarımınızı daha eğlenceli hale getirebilir.
- Kullanıcı arayüzleri marka değerlerini iletmeli ve kullanıcıların güvenini güçlendirmelidir.
- İyi tasarım, duygusal tasarımdır. Kullanıcılar, iyi duyguları her düzeyde kendileriyle konuşan markalarla ilişkilendirir ve zevkli, kusursuz deneyimleri büyüsünü zihinlerinde canlı tutarlar.†
Kullanıcılar için UI Tasarlama
Kullanıcıların tasarımlarla etkileşime girdiği erişim noktaları olan kullanıcı arayüzleri 3’e ayrılır.
1. Grafik kullanıcı arabirimleri (GUIs-Graphical user interfaces)
Kullanıcılar, dijital kontrol panellerindeki görsel temsillerle etkileşime girer. Bir bilgisayarın masaüstü, bir GUI‘dir.
2. Ses kontrollü arayüzler (VUIs-Voice-controlled interfaces)
Kullanıcılar sesleriyle etkileşime girer. Akıllı asistanların çoğu – örneğin, iPhone’daki Siri ve Amazon cihazlarındaki Alexa – VUI‘dir.
3. Hareket tabanlı arayüzler (Gesture-based interfaces)
Kullanıcılar, vücut hareketleri yoluyla 3B tasarım alanlarıyla etkileşime girer: örneğin, sanal gerçeklik (VR) oyunları.
UI ve Kullanıcı Deneyimi (UX) Tasarımı Farkları
Genellikle UX tasarımıyla karıştırılan UI tasarımı, daha çok bir tasarımın yüzeyi ve genel hissi ile ilgilidir.
UI tasarımı, tasarımcının kullanıcı deneyiminin önemli bir bölümünü oluşturduğu bir zanaattır.
UX tasarımı, kullanıcı deneyiminin tüm yelpazesini kapsar.
Bir benzetme yapmak gerekirse, UX tasarımı arabaysa, konsol UI’dir.
Bazen insanlar UI’ye aşırı önem veriyorlar. (Logo’yu ortaya al, küçült, büyüt. Yok yazıyı şöyle yap, imaj önce kararsın sonra soldan zıplayıp takla atıp çıksın…)
Aşağıdaki söz UI’ye gereğinden fazla -her işte olduğu gibi- zaman harcamamanız gerektiğine güçlü bir nasihat.
Arayüzler araya giriyor. Enerjimi bir arayüze odaklamak istemiyorum. İşe odaklanmak istiyorum. “
– Don Norman, “Kullanıcı Deneyimi” teriminin mucidi
UX ve UI tasarımcıları nihai bir ürün oluşturmak için birlikte çalışırken, ikisi arasında büyük farklılıklar vardır.
1. Kullanıcı deneyimi tasarımcıları bir sorunu çözen bir ürün yaratmaya odaklanırken, UI tasarımcıları ürünün tasarım modelleri ve mikro detayları üzerinde çalışır.
2. Kullanıcı deneyimi tasarımcıları, bir ürünün kullanımını en iyi şekilde nasıl kolaylaştıracakları konusunda kapsamlı bir şekilde düşünürken, kullanıcı arayüzü tasarımcıları bir ürünü nasıl keyifli ve kullanımı çekici hale getireceklerini kapsamlı bir şekilde düşünürler.
3. UX tasarımı hem somut hem de soyut ürünler için kullanılabilirken, UI tasarımı dijital arayüzlerle sınırlı olma eğilimindedir.
4. UX, kullanıcılar olarak deneyimlediğimiz şeydir, UI ise bir ürünü kullanırken gördüğümüz şeydir.
5. UX tasarımı, ideal bir tasarım sürecinde genellikle UI tasarımından önce gelir.
İyi bir tasarımcı olmak için, UX ve UI tasarımı arasındaki farkların yanı sıra nasıl etkileşimde bulunduklarını ve birbirlerine nasıl uyum sağladığı üzerinde düşünme ve anlamaya çalışmak önemlidir.
