UX/UI Tasarım
Kullanıcının takıldığı yeri tasarımla çözün
Ekranlar tek tek iyi görünse de kullanıcı aradığını bulamıyor, formu yarıda bırakıyor, aynı işlev iki yerde farklı çalışıyor. Önce insanların ne yapmaya çalıştığını anlıyor, akışı buna göre kuruyoruz. Arayüzü ve bileşen sistemini bu akışın üzerine tasarlayıp geliştirme ekibine teslim ediyoruz.
- Araştırmaya dayalı akış kararları
- Tutarlı arayüz ve bileşen sistemi
- Tıklanabilir prototiple erken test
- Geliştiriciye hazır tasarım teslimi
Birlikte çalıştığımız markalar
UX/UI Tasarım
Hizmet alanlarımız
UI Tasarımı
Ekranları tek görsel dil ve bileşen mantığıyla kuran arayüz tasarımı çalışması.
SaaS & Panel UX/UI
Her gün kullanılan panel ürünlerini rol, akış ve veri düzeni üzerinden kuran tasarım.
UX ile UI aynı iş değil
UX, kullanıcının bir işi bitirmek için izlediği yolun tasarımıdır. Hangi ekran önce gelir, hangi bilgi ne zaman sorulur, hata olduğunda kullanıcı nereye düşer. UI ise o yolun görünen yüzüdür, yani tipografi, renk, boşluk, buton ve durum tasarımı. İkisi tek tek doğru yapılıp birbirine bağlanmadığında ortaya iyi görünen ama kimsenin kullanamadığı bir ürün çıkar.
Bu yüzden çalışmayı iki ayrı teslim gibi değil, tek zincir gibi kuruyoruz. Akış kararı verilmeden ekran çizmiyoruz, ekran çizilmeden renk ve tipografi tartışmasına girmiyoruz.
Tasarım kararını neye dayandırıyoruz
Beğeni tartışması uzar ve kimse haklı çıkamaz. Kararı üç kaynağa dayandırıyoruz: kullanıcıyla yapılan görüşmeler, üründen gelen davranış verisi ve destek ekibine düşen tekrar eden sorular. Hangi adımda insanların vazgeçtiği, hangi alanın sürekli yanlış doldurulduğu görünür olduğunda tasarım toplantısı fikir yarışı olmaktan çıkıyor.
Ölçemediğimiz yerde bunu açıkça söylüyoruz. Veri yoksa varsayımı yazıya döküyor, prototiple sınıyor ve sonucuna göre ilerliyoruz. Böylece hangi kararın kanıta, hangisinin tercihe dayandığı proje boyunca belli kalıyor. Bu ayrım, ilerleyen aylarda “burayı neden böyle yapmıştık” sorusuna cevap verebilmenin de tek yolu.
Tasarım geliştirmeye nasıl geçiyor
Tasarımın değeri uygulandığında ortaya çıkar. Ekranları tek tek değil bileşen olarak kuruyoruz: buton, form alanı, tablo satırı, bildirim, boş durum. Her bileşenin varyantları ve kullanım kuralı yazılı olduğu için yeni bir ekran gerektiğinde iş sıfırdan başlamıyor.
Teslimde ölçüler, aralıklar, yazı tipi ağırlıkları ve etkileşim notları dosyanın içinde duruyor. Geliştirme sizin ekibinizde de olsa bizde de olsa herkes aynı belgeyi okuyor. Yayına çıkan ekranları tasarımla karşılaştırıyor, ayrışan yerleri listeleyip kapatıyoruz.
Tasarım yayına çıkınca da bitmiyor. Kullanıcıların gerçekten nerede takıldığı ancak canlı üründe görülüyor. Bu yüzden ilk haftalarda gelen destek sorularını ve davranış verisini birlikte okuyup tasarımın bir sonraki turunu buna göre planlıyoruz.
Ekranı tartışmak yerine kullandırın
Bir ekran hakkındaki fikirler toplantıda uzar, ekran kullanıldığında ise kendiliğinden netleşir. Araştırmadan çıkan senaryoları tıklanabilir bir prototipe çevirip katılımcılara gerçek görev veriyoruz. Nerede durakladıkları, neyi aradıkları ve hangi adımı atlamaya çalıştıkları böylece varsayım olmaktan çıkıyor.
Karmaşıklığı kullanıcıya devretmeyin
Bir işin arkasındaki karmaşıklık ortadan kalkmaz, birinin üstlenmesi gerekir. Ekranı, kararı ürünün tarafına alacak biçimde kuruyoruz; gereksiz adımları çıkarıyor, zorunlu alanları azaltıyor, kullanıcının hatırlamak zorunda kaldığı bilgiyi ekrana taşıyoruz. Yeni özellik eklendiğinde de akış aynı ölçüyle gözden geçiriliyor.
Nasıl çalışıyoruz?
Keşif ve mevcut durum
Ürünü, hedef kitleyi ve iş hedefini konuşuyoruz. Varsa mevcut arayüzü, analitik verilerini ve destek ekibine düşen soruları inceleyip kullanıcıların nerede takıldığını çıkarıyoruz.
Kullanıcı araştırması
Kapsama göre kullanıcı görüşmesi, anket, saha gözlemi ve rakip incelemesi yapıyoruz. Çıktısı, tasarım kararlarını dayandıracağımız ihtiyaç ve senaryo listesi.
Bilgi mimarisi ve akış
Ekranların sırasını, menü yapısını ve kullanıcının bir işi bitirene kadar izlediği yolu kuruyoruz. Wireframe aşamasında görsel detay yok, yalnız yapı ve öncelik var.
Arayüz tasarımı ve design system
Tipografi, renk, boşluk ve bileşen kararlarını verip ekranları bu sistemle tasarlıyoruz. Her bileşenin dolu, boş, hatalı ve yükleniyor durumu birlikte çiziliyor.
Prototip ve kullanılabilirlik testi
Tıklanabilir prototiple gerçek kullanıcılara görev veriyoruz. Takıldıkları noktaları, iş koda dönüşmeden önce tasarım tarafında düzeltiyoruz.
Teslim ve uygulama desteği
Dosyaları ölçüleri, durumları ve davranış kurallarıyla birlikte teslim ediyoruz. Geliştirme sürerken soruları yanıtlıyor, yayına çıkan ekranları tasarımla karşılaştırıyoruz.
Sıkça sorulan sorular
UX ile UI arasındaki fark ne?
UX, kullanıcının bir işi bitirmek için izlediği yolun tasarımıdır. Hangi ekranın önce geleceği, hangi bilginin ne zaman isteneceği, hata olduğunda ne olacağı UX kararıdır. UI ise o yolun görünen yüzüdür, yani tipografi, renk, boşluk, buton ve durum tasarımı. İkisi ayrı yürütüldüğünde güzel görünen ama kullanılmayan ekranlar çıkıyor.
Araştırma yapmadan doğrudan tasarıma geçebilir miyiz?
Geçebiliriz, ama o zaman kararların varsayıma dayandığını baştan yazıyoruz. Elinizde analitik verisi, destek kayıtları ya da satış ekibinin gözlemleri varsa bunlar da araştırma girdisidir. Hiçbiri yoksa kısa bir görüşme turu öneririz, çünkü yanlış akışı sonradan düzeltmek tasarımdan çok geliştirmeye mal olur.
Mevcut arayüzümüzü sıfırdan mı değiştirmek gerekiyor?
Çoğu işte gerekmiyor. Önce mevcut arayüzü inceleyip sorunun tasarımda mı, akışta mı yoksa içerikte mi olduğunu ayırıyoruz. Bazı ürünlerde birkaç kritik ekranı yeniden kurmak yetiyor, bazılarında ise bileşen sistemi baştan kurulmadan yeni ekran eklemek her seferinde yeni bir tutarsızlık üretiyor.
Tasarımı kendi yazılım ekibimiz geliştirebilir mi?
Evet. Teslim dosyası ölçüleri, aralıkları, renk ve yazı tipi değerlerini, bileşen varyantlarını ve durum davranışlarını içerir. Geliştirme sizde olduğunda da sorularınızı yanıtlıyor, çıkan ekranları tasarımla karşılaştırıp farkları liste halinde paylaşıyoruz.
Design system'e ihtiyacımız var mı?
Tek sayfalık bir iş için gerekmez. Ekran sayısı arttıkça, birden fazla kişi tasarım ya da geliştirme yaptıkça gerekli hale gelir. Ölçüt şu, yeni bir ekran istendiğinde buton ve form alanı yeniden tartışılıyorsa sistem yok demektir.
Kullanılabilirlik testini kimlerle yapıyorsunuz?
Mümkünse ürünün gerçek kullanıcılarıyla, yoksa aynı işi yapan benzer profillerle. Katılımcılara görev veriyoruz ve ekranı yorumlamalarını değil kullanmalarını istiyoruz. Test sonrası çıktı, hangi görevde kimin nerede takıldığını gösteren bir bulgu listesi.
Tasarım dosyalarının sahipliği kimde kalıyor?
Sizde. Çalışma dosyaları, bileşen kütüphanesi ve kaynak varlıklar sizin hesabınıza devredilir. Çalışma bittiğinde tasarımı başka bir ekiple sürdürebilirsiniz.
Bu çalışma ne kadar sürer?
Ekran sayısına, araştırma ihtiyacına ve onay döngüsüne göre değişir. Kapsam netleştikten sonra adımları ve teslim sırasını içeren bir plan paylaşıyoruz. Süreyi en çok uzatan iki şey, kapsamın çalışma sırasında büyümesi ve geri bildirimin dağınık gelmesi.
UX/UI Tasarım için ilk adımı atalım
- 1Formu doldurun ya da bizi arayın
- 2Bir iş günü içinde ön görüşme planlayalım
- 3Size özel yol haritası ve teklif hazırlayalım