UI/UX Tasarım ve Arayüz Tasarımı

UX, kullanıcının bir işi baştan sona nasıl yaptığıyla ilgilenir: hangi adımlardan geçtiği, nerede takıldığı, hangi bilgiye ne zaman ihtiyaç duyduğu. UI ise bu adımların ekranda nasıl göründüğüyle: butonların, formların, tabloların ve yazıların tasarımıyla.

İkisi ayrı düşünüldüğünde sorun çıkar. Güzel ama kullanılması zor bir arayüz de, mantıklı ama okunması zor bir arayüz de kullanıcıyı yorar. Bu yüzden kullanıcı deneyimi tasarımı ile arayüz tasarımını aynı ekipte, aynı süreçte yürütüyoruz.

Tasarıma ekran çizerek değil, kullanıcıları ve yapmaya çalıştıkları işleri anlayarak başlıyoruz. Mevcut bir ürün varsa kullanım verilerine ve destek taleplerine bakıyor, ekiple ve gerçek kullanıcılarla konuşuyoruz.

Bu çalışmanın çıktısı kullanıcı akışları: Bir kullanıcının bir hedefe ulaşmak için geçtiği tüm adımlar, karar noktaları ve hata durumlarıyla birlikte çiziliyor. Ekranlar bu akışların üzerine tasarlanıyor.

Kullanıcının aradığını nerede bulacağı, ekranın nasıl görüneceğinden önce çözülmesi gereken bir soru. Menü yapısı, sayfa hiyerarşisi ve isimlendirme bilgi mimarisi aşamasında netleşiyor. İyi bir bilgi mimarisinde kullanıcı nerede olduğunu ve bir sonraki adımda nereye gideceğini düşünmeden bilir.

Tek tek ekran çizmek yerine bir tasarım sistemi kuruyoruz: renk, tipografi ve boşluk değerleri (token'lar) ve bu değerlerle tasarlanmış bileşenler. Her bileşenin tüm durumları tanımlanıyor: normal, üzerine gelinmiş, seçili, devre dışı, hatalı, yükleniyor.

Tasarım sistemi hem tutarlılığı hem de hızı sağlıyor. Yeni bir ekran eklemek yeni bir tasarım projesi olmuyor ve geliştirici ekip tasarımı tahmin etmek zorunda kalmıyor.

Geliştirmeye başlamadan önce tıklanabilir bir prototip hazırlıyor ve gerçek kullanıcılara görev bazlı testlerle deniyoruz. Beş ile sekiz kullanıcıyla yapılan bir test turu, akıştaki büyük sorunların çoğunu ortaya çıkarıyor.

Bir hatayı prototipte düzeltmek, kodlandıktan sonra düzeltmekten çok daha ucuz. Test bu yüzden sürecin isteğe bağlı bir adımı değil, tasarımın parçası.

Arayüzün renk körlüğü olan, ekran okuyucu kullanan ya da fare yerine klavyeyle gezinen kişiler tarafından da kullanılabilmesi gerekiyor. Kontrast oranlarını, klavye gezinimini, odak sırasını ve ekran okuyucu davranışını tasarım aşamasında kontrol ediyoruz.

Arayüz denetimlerinde en sık karşılaştığımız sorunlar, tasarımın yalnızca ideal durum için yapılmasından kaynaklanıyor. Gerçek kullanımda ise ekranlar boş, dolu, hatalı ya da yükleniyor hâllerde görülüyor.

• Boş durumların ve hata mesajlarının tasarlanmaması
• Aynı işi yapan butonların farklı ekranlarda farklı görünmesi
• Uzun metinlerin, büyük sayıların ve farklı dillerin hesaba katılmaması
• Mobil ekranın masaüstü tasarımının küçültülmüş hâli olması
• Düşük kontrast yüzünden metinlerin okunamaması
• Kullanıcıyı bir sonraki adım konusunda yönlendirmeyen ekranlar

Bir tasarımın değeri, ekranlara ne kadar sadık uygulandığıyla ölçülür. Bu yüzden teslimatı geliştirici ekibin ihtiyacına göre hazırlıyoruz: token dosyaları, her bileşenin tüm durumları, ölçüler, geçiş süreleri ve davranış notları tek bir yerde.

Geliştirme sürecinde tasarım ekibi devrede kalıyor; ortaya çıkan soruları cevaplıyor ve uygulanan ekranları tasarımla karşılaştırıyor. Geliştirmeyi de biz yapıyorsak tasarım ve kod aynı ekipte buluştuğu için bu adım çok daha kısa sürüyor.

İyi bir kullanıcı deneyimi kendini doğrudan iş sonuçlarında gösterir: Bir formu tamamlayan ziyaretçi sayısı artar, destek ekibine gelen “bunu nasıl yapıyorum?” soruları azalır, yeni kullanıcı ürünü öğrenmek için daha az zaman harcar. Yönetim panellerinde ise her gün tekrarlanan bir işin birkaç saniye kısalması, haftanın sonunda ekibe saatler kazandırır.

Bu yüzden tasarıma başlamadan önce hangi göstergenin iyileşmesini istediğimizi birlikte belirliyoruz. Kullanılabilirlik testlerinde ve yayından sonra aynı göstergeyi ölçerek tasarımın gerçekten işe yarayıp yaramadığını görüyoruz.

Bir UI UX tasarım projesi genellikle şu aşamalardan geçiyor; ürünün büyüklüğüne göre bazı aşamalar kısalıyor ya da birleşiyor:

• Keşif: hedefler, kullanıcılar, mevcut ürün ve rakipler
• Araştırma: kullanıcı görüşmeleri, kullanım verileri, arayüz denetimi
• Akışlar ve bilgi mimarisi
• Tel çerçeveler: ekranların yapısının renk ve stil olmadan çizilmesi
• Arayüz tasarımı ve tasarım sistemi
• Prototip, kullanılabilirlik testi ve iyileştirme
• Geliştiriciye devir ve uygulama kontrolü

Aynı ürünün mobil ve web arayüzü birebir aynı olmamalı. Telefonda ekran küçük, kullanıcı çoğu zaman tek elle ve hareket hâlinde; dokunma alanlarının büyük, önemli eylemlerin başparmak hizasında ve metinlerin kısa olması gerekiyor. Masaüstünde ise geniş tablolar, yan yana paneller ve klavye kısayolları verimliliği artırıyor.

Tasarım sistemi bu iki dünyayı ortak bir dille birleştiriyor: renkler, tipografi ve bileşenler aynı kalırken her platform kendi kullanım alışkanlığına göre düzenleniyor. Böylece kullanıcı cihaz değiştirdiğinde ürünü yeniden öğrenmek zorunda kalmıyor.

Her proje sıfırdan tasarım gerektirmiyor. Yayında olan bir ürünü iyileştirirken işe arayüz denetimiyle başlıyoruz: kullanılabilirlik sorunları, görsel tutarsızlıklar, erişilebilirlik açıkları ve kullanıcıların en çok takıldığı akışlar çıkarılıyor.

Ardından ürünü durdurmadan, kademeli bir yenileme planıyla ilerliyoruz. Önce en çok kullanılan ve en çok sorun çıkaran ekranlar ele alınıyor; tasarım sistemi bu süreçte yavaş yavaş kuruluyor ve her yeni ekran aynı kurallarla tasarlanıyor.