UI/UX Arayüz Tasarımı

Tasarım neden sonradan pahalıya geliyor

Bir uygulamanın veya sitenin ekranları kodlandıktan sonra yönünü değiştirmek, işi baştan yapmak demek. Bu yüzden tasarımı kodlamadan önce netleştiriyoruz. Kullanıcının hangi ekranda neyi aradığını, nerede durduğunu ve nerede vazgeçtiğini görmek tasarımın temelini oluşturuyor.

Keşif ve akış

İşe mevcut ekranları veya benzer uygulamaları inceleyerek başlıyoruz. Ardından kullanıcının hedefine giden adımları çiziyoruz. Örneğin bir formun kaç adım olacağı, hangi bilginin zorunlu olduğu, hata mesajının nerede çıkacağı bu aşamada belirleniyor. Akış kâğıt üzerinde doğruysa ekran tasarımı da hızlı ilerliyor.

İçerik envanteri de bu aşamada çıkıyor: hangi metin nereden geliyor, hangi sayfa hangi bilgiyi taşıyor, hangi içerik henüz yok? Eksik içerik sonradan tamamlanacaksa tasarımda boş kutu bırakmak yerine gerçekçi uzunlukta bir metinle çalışıyoruz; çünkü kutu, gerçek metnin düzeni nasıl zorlayacağını göstermiyor.

Ekran tasarımı

Renk, yazı tipi, boşluk ve köşe yuvarlaklığı gibi kararlar tek bir tasarım sisteminde toplanıyor. Böylece her ekran aynı dili konuşuyor ve yeni ekran eklemek kolaylaşıyor. Tasarımı gerçek içerikle yapıyoruz; "buraya metin gelecek" yazan kutularla değil, sizin gerçek başlık ve cümlelerinizle çalışıyoruz. Uzun metinlerin ve uzun ürün adlarının düzeni bozmadığını görüyoruz.

Tasarımda süs yerine hiyerarşiye önem veriyoruz. Bir ekranda kullanıcının ilk görmesi gereken şey neyse en belirgin o oluyor, ikincil bilgiler geri planda kalıyor. Bu basit kural, uzun sayfaların okunur kalmasını sağlıyor.

Metin uzunluğu da tasarımın parçası. Başlıkların kaç satıra düşeceğini, buton yazılarının sığacağını ve Türkçe karakterlerin seçilen yazı tipinde doğru göründüğünü kontrol ediyoruz. Bu ayrıntılar sonradan fark edildiğinde bütün ekranları yeniden elden geçirmek gerekebiliyor.

Tasarımda kontrol edilenler

• Mobilde dokunma hedeflerinin yeterli büyüklükte olması.
• Metin ve arka plan arasında yeterli kontrast.
• Klavye ile tüm ekranların kullanılabilmesi.
• Form hatalarının anlaşılır dille gösterilmesi.
• Yükleme ve boş durum ekranlarının tasarlanması.
• Ekran genişliğine göre bozulmayan yerleşim.

Kullanılabilirlik testi

Tasarımı birkaç gerçek kullanıcıyla deniyoruz. Kişiye görev veriyoruz: "şu ürünü sepete ekle" veya "teklif formunu doldur" gibi. Nerede durakladığını, neyi yanlış anladığını not ediyoruz. Beş kişiyle yapılan basit bir test bile tasarımdaki en can sıkıcı sorunları ortaya çıkarıyor. Bu bulguları uygulamadan önce düzeltiyoruz.

Geliştiriciye teslim

Tasarımı geliştirici ekibe düzenli dosyalar, ölçü ve boşluk değerleri ve bileşen listesiyle teslim ediyoruz. Renk ve yazı tipi değişkenleri kodda tek yerden yönetilecek şekilde tanımlanıyor. Böylece ileride marka rengi değiştiğinde yüz ekranı elle düzeltmek gerekmiyor. Tasarım dosyaları da size ait olur.