İki kavramı ayırmanın en yararlı yolu, bir ekranın güzel olup olmadığından önce kullanıcının orada ne yapmak istediğini sormaktır. Bir form çok düzenli görünebilir ama yanlış girilen telefonu nasıl düzelteceğinizi söylemiyorsa görev yarım kalır. Tasarım kararlarını aynı kullanıcı görevi etrafında topladığınızda UX ve UI arasındaki ilişki somutlaşır.
UX ve UI Ne Demek?
UX, İngilizce User Experience ifadesinin kısaltmasıdır; Türkçesi kullanıcı deneyimidir. Ürünün ihtiyacı karşılaması, anlaşılması, kullanılması ve kullanım sonrasında bıraktığı izlenim bu kapsamdadır. Nielsen Norman Group'un UX tanımı, deneyimin şirketin hizmetleri ve ürünleriyle kurulan ilişkinin tamamına uzandığını açıklar. Bu yüzden UX yalnızca web sayfasındaki tıklamalardan oluşmaz.
UI, User Interface, yani kullanıcı arayüzüdür. Dijital bir üründe menüler, giriş alanları, yazılar, ikonlar ve bunların farklı durumları arayüzü oluşturur. Düğmenin normal, odaklanmış, yükleniyor ve hata durumlarını tasarlamak da UI işidir. Renk kadar geri bildirimin anlaşılır olmasıyla ilgilenir.
Tüm sütunlar için tabloyu yana kaydırın. Klavyeyle tabloya odaklanıp ok tuşlarını kullanabilirsiniz.
| Karar | UX Açısından | UI Açısından |
|---|---|---|
| Randevu saati seçimi | Kullanıcı hangi bilgiden sonra karar verebilir? | Uygun, dolu ve seçili saatler nasıl ayırt edilir? |
| Bilgi girişi | Hangi bilgiler gerçekten gerekli, hata nasıl düzeltilecek? | Etiket, yardım metni ve hata mesajı nerede görünecek? |
| İşlem sonrası | Kullanıcı randevuyu değiştirebilir veya iptal edebilir mi? | Onay ve sonraki işlemler hangi bileşenlerle sunulacak? |
| Çalışma çıktısı | Araştırma bulgusu, görev akışı, test gözlemi | Ekran düzeni, bileşen durumları, görsel kurallar |
Tablodaki ayrım bir ekip için değişmez görev dağılımı değildir. Küçük bir ekipte aynı kişi iki alanda da çalışabilir; büyük bir üründe araştırma, etkileşim tasarımı ve arayüz tasarımı farklı uzmanlara ayrılabilir. Ortak sorumluluk, kullanıcının işi anlayarak tamamlayabilmesidir.
Bir Randevu Akışında UX ve UI Nasıl Birlikte Çalışır?
Aşağıdaki örnek, ilişkiyi açıklamak için hazırlanmış varsayımsal bir tasarım çalışmasıdır; müşteri projesi veya yapılmış bir testin sonucu değildir. Görev şu olsun: “Önümüzdeki hafta size uygun bir saat için randevu alın.”
1. Ekrandan Önce Kararı Tanımlayın
Kullanıcının karar verebilmek için hangi bilgilere ihtiyaç duyduğunu araştırın: hizmetin süresi, yeri, ücreti veya uygun saatler. Henüz görüşme yapılmadıysa “kullanıcılar önce fiyat görmek istiyor” bir bulgu değil, sınanacak varsayımdır. Mevcut destek talepleri ve görüşmeler başlangıç sağlayabilir; kişisel verileri çalışma dosyalarına gereksiz yere taşımayın.
2. Akışı ve Ekran Durumlarını Birlikte Çizin
İlk taslakta hizmet seçimi, uygun saat, gerekli bilgiler ve onay arasındaki geçişleri gösterin. Wireframe, yani tel kafes, içerik ve kontrollerin yerleşimini sade biçimde düşünmenizi sağlar. Tıklanabilir prototip ise ekranlar arasındaki davranışı denemenize yardım eder. İkisinin ayrımı yalnızca birinin gri, diğerinin renkli olması değildir.
UI çalışırken “seçili saat” rengini belirlemekle yetinmeyin. Saati metinle de gösterin; seçim klavyeyle yapılabilsin ve onay ekranı hangi günün seçildiğini açıkça söylesin. Uygun saat kalmadığında boş ekran yerine başka gün seçme yolu sunun. Hata ve boş durumlar, normal akış kadar tasarımın parçasıdır.
3. Çözümü Görevle Sınayın
Hedef kullanıcıya yakın bir katılımcıdan randevu görevini tamamlamasını isteyin. “Sağdaki turuncu düğmeye basın” diye yönlendirmeyin; nerede durduğunu, hangi ifadeyi yanlış anladığını ve yardım gerekip gerekmediğini gözlemleyin. Kullanılabilirlik testi, beğeni oylamasından farklı olarak kişinin bir işi nasıl yaptığını incelemeye dayanır.
Örnekte katılımcı seçtiği saati onaylayamıyorsa önce bunun nedenini ayırın: sonraki adım belirsiz mi, düğme görünmüyor mu, sistem mi yanıt vermiyor? İlk sorun akış ve metinle, ikincisi arayüzle, üçüncüsü geliştirme ekibiyle birlikte çözülebilir. Her sorunu renk değiştirerek gidermeye çalışmak asıl nedeni örter.
UI/UX Tasarımcısı Ne İş Yapar?
Bir UX tasarımcısı problemi netleştirir, kullanıcı araştırmasını planlar, içerik ve görev akışlarını düzenler, taslak çözümleri sınar. UI tasarımcısı bu akışların ekranlarda nasıl okunacağını ve kullanılacağını şekillendirir: tipografi, boşluk, bileşenler ve durumlar arasında tutarlılık kurar. İş tanımında ikisi birlikte yazıyorsa araştırmadan görsel teslimata uzanan daha geniş bir sorumluluk beklenebilir; kapsamı işverenle netleştirmek gerekir.
Grafik tasarım bilgisi görsel hiyerarşi için değerli bir temel sağlar. Arayüz işinde buna etkileşim, erişilebilirlik ve farklı ekran koşulları eklenir. Örneğin bir başlık için font ailesi ve kalınlığını ayırabilmek, ekran boyunca tutarlı metin stilleri oluşturmanıza yardım eder. Seçimin işe yarayıp yaramadığına ise gerçek içerik ve kullanım koşullarıyla bakılır.
Teslim dosyasında yalnızca ideal ekranlar bulunmamalı. Uzun bir ad, boş sonuç listesi, hatalı giriş, yüklenme ve küçük ekran durumları da açıklanmalı. Geliştiriciyle uygulanan ekranı karşılaştırmak, prototipte görünen davranışın ürüne aktarılıp aktarılmadığını ortaya çıkarır.
Hangi Araçla Başlamak Gerekir?
Kâğıt üzerinde akış çizmek, metin belgesinde araştırma sorusu hazırlamak veya tabloya gözlem yazmak da tasarım çalışmasıdır. Ekran ve tıklanabilir akış için Figma kullanılabilir; Figma'da ilk prototipi kurma adımları bağlantıların nasıl çalıştığını gösterir. Aracın kendi prototipleme belgesi de etkileşim ve geçişlerin kapsamını açıklar.
Araç seçimini hangi çıktıya ihtiyacınız olduğuna göre yapın. Ekip yorumları, paylaşım yetkisi, dosya devri ve ücretli özellik gereksinimi kararın parçasıdır. Bir programı öğrenmek araştırmanın yerine geçmez; prototip de canlı ürünün hızını, veri doğrulamasını veya yardımcı teknoloji desteğini tek başına kanıtlamaz.
İyi Bir Tasarımı Nasıl Değerlendirirsiniz?
Görsel beğeniyi bir kenara bırakıp somut bir görev seçin. Kullanıcı ne yapacağını anlayabiliyor mu, işlemin sonucunu görebiliyor mu, hata yaptığında geri dönebiliyor mu? Kullanılabilirlik ilkeleri, bu tür sorunları sistemli biçimde gözden geçirmek için bir başlangıçtır; kullanıcı testinin yerine geçen bir başarı belgesi değildir.
- Görev: Randevu tamamlandı mı, yanlış tarih seçildi mi, yardım gerekti mi?
- Geri bildirim: İşlem sürerken ve tamamlandığında kullanıcı ne olduğunu anlayabiliyor mu?
- Erişim: Fare olmadan kontroller çalışıyor mu; yazı büyüdüğünde alanlar kullanılabiliyor mu?
- Farklı ekran: Aynı görev telefonda da tamamlanabiliyor mu? Responsive tasarım, yalnızca öğeleri küçültmekten daha geniş bir düzen problemidir.
Görev süresi veya tamamlanma oranı ölçerseniz katılımcı sayısını, görevi ve test koşullarını kaydedin. Birkaç gözlemden bütün müşteriler için dönüşüm artışı yüzdesi çıkarılmaz. Önce görülen engeli düzeltin, sonra aynı görevi yeniden deneyin.
UI/UX Öğrenmeye Nasıl Başlanır?
Küçük bir görevi baştan sona çalışın: örneğin bir etkinlik için kayıt formu. Araştırma sorusunu yazın, bir akış çizin, ekran durumlarını tasarlayın ve erişebildiğiniz uygun katılımcılarla sınayın. Deneme projesi olduğunu belirtin; görüşmediğiniz kişiler için araştırma sonuçları veya persona alıntıları üretmeyin.
Portfolyoda bitmiş ekranın yanında problemi, sizin rolünüzü, aldığınız kararları ve testten sonra neyi değiştirdiğinizi gösterin. UX portfolyosu hazırlama yaklaşımı da süreci görünür kılmanın değerini vurgular. Kodlama bilgisi geliştiriciyle çalışmayı kolaylaştırır; her tasarım pozisyonunun aynı yazılım sorumluluğunu taşıdığı varsayılamaz.
Başlangıç için iyi bir hedef, “bir uygulamanın bütün ekranlarını çizdim” demek yerine tek bir görevin neden daha anlaşılır hale geldiğini açıklayabilmektir. Araç becerisinin yanında tasarım kararınızı savunabileceğiniz dayanak da böyle oluşur.
