UI/UX Süreci: Güzel Görünmek ile İşe Yaramak Arasındaki Fark
Arayüz tasarımı estetik bir tercih değil, kullanıcının bir işi tamamlamasını sağlama disiplinidir.
Görsel: Pixabay · Pixabay Lisansı
İki farklı iş
Kullanıcı deneyimi, bir işin nasıl yapılacağını tasarlar: hangi adımlar, hangi sırada, hangi bilgiyle.
Arayüz tasarımı, bu akışın nasıl görüneceğini tasarlar: yerleşim, tipografi, renk, hiyerarşi.
İkisi karıştırıldığında, güzel görünen ama kullanılamayan ekranlar ortaya çıkar.
Adım bir: kim, ne yapmaya çalışıyor?
Kullanıcı tiplerini ve her birinin hedefini yazın. "Ziyaretçi" yeterli bir tanım değildir.
Her kullanıcı tipinin siteye geliş sebebini ve başarı tanımını belirleyin.
Bu adım atlandığında tasarım, kararları sezgiye bırakır ve tartışmalar kişisel zevke döner.
Adım iki: bilgi mimarisi
Hangi içerik nerede duracak? Menü nasıl gruplanacak?
Bu adım görselden önce yapılır. Yanlış kurulmuş bir yapıyı güzel tasarımla kurtarmak mümkün değildir.
Kart sıralama gibi basit yöntemler, kullanıcının zihnindeki gruplamayı ortaya çıkarır.
Adım üç: tel çerçeve
Renk ve görsel olmadan, yalnız yerleşim ve içerik hiyerarşisi çizilir.
Bu aşamada tartışma "mavi mi olsun" değil, "bu düğme burada mı olmalı" sorusudur. Doğru tartışma budur.
Tel çerçeve üzerinden onay almak, görsel tasarımdan sonra yapılacak büyük değişiklikleri önler.
Adım dört: görsel tasarım ve tasarım sistemi
Tek tek ekran çizmek yerine bir sistem kurun: renk paleti, tipografi ölçeği, boşluk düzeni, bileşenler.
Sistem kurulduğunda yeni ekran üretmek hızlanır ve tutarlılık kendiliğinden gelir.
Bileşen kütüphanesi, tasarım ile kod arasındaki en önemli köprüdür.
Adım beş: prototip ve test
Tıklanabilir prototip üzerinde beş kullanıcıyla yapılan test, büyük sorunların çoğunu ortaya çıkarır.
Test için mükemmel tasarım beklemeyin; erken test daha ucuzdur.
Kullanıcıya ne yapacağını söylemeyin, bir görev verin ve izleyin. Tıkandığı yer, tasarım hatasıdır.
Koda geçiş
Tasarımın koda dönüşü tek yönlü bir aktarım değildir. Tasarımcı ve geliştirici birlikte çalışmalıdır.
En sık sorun, görsel olarak doğru ama etkileşimi eksik ekranlardır: bağlanmamış düğmeler, çalışmayan formlar.
Bu yüzden teslim kontrolü görsel karşılaştırmayla bitmemeli; her etkileşim tek tek denenmelidir.
Tasarımdan koda geçişte teslim kontrolü
Görsel benzerlik tek başına yeterli bir kabul ölçütü değildir.
Her ekranda şu üçü kontrol edilmelidir: her düğme bir yere gidiyor mu, her form gerçekten kaydediyor mu, her bağlantı var olan bir sayfaya çıkıyor mu?
Bu kontroller yapılmadığında sorun, mağaza incelemesinde veya müşteride ortaya çıkar; ikisi de pahalıdır.
Boş durum, yükleniyor durumu ve hata durumu da tasarlanmalıdır. Bunlar unutulduğunda kullanıcı kırık bir ekranla karşılaşır.
Tasarım kararlarını belgelemek
Neden böyle yapıldığını yazmayan tasarımlar, altı ay sonra tartışmaya açılır.
Her önemli karar için kısa bir not bırakın: hangi seçenekler değerlendirildi, neden bu seçildi.
Bu notlar, yeni ekip üyelerinin hızla devralmasını sağlar ve aynı tartışmanın tekrar açılmasını önler.
Kullanıcı testi bulgularını da kaydedin; sezgiye dayalı itirazların karşısına veri koymanın tek yolu budur.
Sık sorulanlar
Kaç kullanıcıyla test yapmalıyım?
Beş kullanıcı, önemli kullanılabilirlik sorunlarının büyük bölümünü ortaya çıkarır. Daha fazla kullanıcı aynı sorunları tekrar gösterir; yeni tur, düzeltmeden sonra daha değerlidir.
Tasarım sistemi küçük projeler için de gerekli mi?
Beş sayfalık bir sitede tam bir sistem gereksizdir, ancak renk ve tipografi ölçeğini baştan tanımlamak her ölçekte zaman kazandırır.
Tasarımcı ve geliştirici aynı araçta mı çalışmalı?
Aynı araçta olmaları şart değil ancak tasarım dosyalarının geliştiriciye ölçü, renk ve boşluk bilgisi verecek şekilde paylaşılması gerekir. Bu bilgi olmadan her ekran yeniden yorumlanır.
