UI/UX ve özel arayüz tasarımı

Hangi sorunu çözüyoruz?

Yazılım çalışıyor ama kullanıcılar şikâyet ediyor. Destek hattı her gün aynı soruları alıyor, yeni çalışana sistemi öğretmek günler sürüyor, bazı özellikler hiç kullanılmıyor.

Çoğu durumda sorun kodda değil, ekranlardadır. Ekranlar geliştiricinin veritabanı yapısına göre şekillenmiş, işi yapan kişiye ise hiç sorulmamıştır.

Arayüz tasarımı yalnızca güzel görünmekle ilgili değildir. Bir formun doğru sırayla sorulması, bir hatanın anlaşılır bir dille gösterilmesi ve en sık yapılan işin en az tıklamayla yapılabilmesidir.

UI ile UX arasındaki fark

UX (kullanıcı deneyimi), kullanıcının işini hangi adımlarla ve ne kadar kolay yaptığıyla ilgilidir: akış, bilgi mimarisi, hata durumları. UI (kullanıcı arayüzü) ise bu akışın ekranda nasıl göründüğüdür: tipografi, renk, boşluk, bileşenler.

Sırası önemlidir. Önce akışı doğru kurar, sonra görsel dili uygularız; aksi hâlde güzel ama kullanışsız ekranlar ortaya çıkar.

Bu yüzden ilk toplantılarda renk veya logo konuşmayız. Kullanıcının hangi işi, hangi sırayla, hangi bilgilere bakarak yaptığını anlamadan çizilen her ekran, sonradan yeniden çizilmek zorunda kalır.

Ne yapıyoruz?

Kullanıcı araştırması

Uygulamayı kullanacak kişilerle görüşür, işlerini nasıl yaptıklarını yerinde izleriz. Mevcut bir sistem varsa kullanım verisi, destek talepleri ve şikâyetler incelenir.

Bilgi mimarisi ve wireframe

Menü yapısı, ekranlar arası akış ve her ekranın içeriği gri tonlu iskeletler (wireframe) üzerinde kurulur. Bu aşamada renk ve görsel konuşulmaz; yalnızca doğru bilginin doğru yerde olup olmadığına bakılır.

Tıklanabilir prototip ve kullanılabilirlik testi

Kritik akışlar tıklanabilir prototip olarak hazırlanır ve birkaç gerçek kullanıcıya görev verilerek test edilir. Kullanıcının nerede durakladığı, neyi yanlış anladığı not edilir ve tasarım düzeltilir.

Arayüz tasarımı

Kurumsal kimliğinizle uyumlu, okunaklı ve erişilebilir ekranlar. Yoğun veri içeren yönetim panelleri ile ilk kez gelen kullanıcıya hitap eden ekranlar farklı ilkelerle tasarlanır.

Tasarım sistemi

Renk, tipografi, boşluk, ikon ve bileşen kuralları tek bir kaynakta toplanır. Yeni bir ekran eklendiğinde tasarımcı ve geliştirici aynı parçaları kullanır, ürün tutarlı kalır.

Geliştirmeye devir

Ölçüler, durumlar (boş, yükleniyor, hata, başarılı), etkileşim notları ve dışa aktarılmış görsellerle eksiksiz teslim. Tasarımı web veya mobil geliştirme ekibimiz de, sizin ekibiniz de uygulayabilir.

Nasıl çalışıyoruz?

1. Hedef ve ölçüt: Tasarımın neyi iyileştireceğini ölçülebilir biçimde koyarız: bir işlemin tamamlanma süresi, hata oranı, destek talebi sayısı veya terk oranı.
2. Araştırma: Kullanıcı görüşmeleri, mevcut ekranların incelenmesi ve rakip ürünlerin akış analizi.
3. Akış ve wireframe: Ana senaryolar uçtan uca çizilir, sizinle birlikte gözden geçirilir.
4. Prototip ve test: En kritik akışlar gerçek kullanıcılarla test edilir; bulgulara göre düzeltilir.
5. Görsel tasarım: Onaylı akışların üzerine kurumsal kimlik, tipografi ve bileşenler uygulanır.
6. Tasarım sistemi ve devir: Bileşen kütüphanesi ve kullanım kuralları teslim edilir, geliştirme sırasında sorulara cevap veririz.

Tasarımın işe yarayıp yaramadığını nasıl ölçüyoruz?

"Daha modern görünüyor" bir başarı ölçütü değildir. Tasarıma başlamadan önce birkaç ölçüt seçer, yeni tasarımı eski hâliyle bu ölçütlerle karşılaştırırız.

Arayüzlerde en sık gördüğümüz hatalar

• Her şeyi aynı anda göstermek: Nadiren kullanılan seçenekler sık kullanılanların önüne geçer; kullanıcı aradığını bulamaz.
• Kurum içi dil: Ekranlarda kullanıcının değil, şirketin iç jargonunu kullanmak.
• Belirsiz hata mesajları: "Bir hata oluştu" demek; neyin yanlış olduğunu ve nasıl düzeleceğini söylememek.
• Boş ekranların unutulması: Henüz verisi olmayan yeni kullanıcı, ne yapacağını anlatmayan boş bir sayfayla karşılaşır.
• Masaüstünü küçültüp mobile koymak: Mobil kullanım bağlamı farklıdır; aynı akış dokunmatik ekranda yeniden düşünülmelidir.

Erişilebilirlik

Erişilebilir tasarım; görme, işitme veya hareket kısıtı olan kullanıcıların yanı sıra güneş altında telefon kullanan saha çalışanına, yaşlı müşteriye ve klavyeyle hızlı çalışmak isteyen operatöre de yarar.

• Metin ve arka plan arasında WCAG 2.2 AA seviyesinde renk kontrastı.
• Yalnızca renge dayanmayan durum gösterimi; hata bir ikon ve metinle de belirtilir.
• Klavyeyle tam kullanım ve görünür odak göstergesi.
• Ekran okuyucular için anlamlı etiketler ve başlık hiyerarşisi.
• Mobilde parmakla rahat dokunulabilecek büyüklükte hedefler.

Yönetim panellerinde dikkat ettiklerimiz

Kurumsal yazılımlarda ekranların çoğu tablo, form ve filtredir. Bu ekranlar her gün saatlerce kullanıldığı için küçük iyileştirmeler bile büyük zaman kazandırır.

• Sık kullanılan filtrelerin kaydedilebilmesi ve tablonun son ayarıyla açılması.
• Toplu işlem: birden fazla kaydı tek seferde onaylama, atama veya dışa aktarma.
• Uzun formlarda otomatik kaydetme ve yarım kalan işe geri dönebilme.
• Hata mesajlarının neyin yanlış olduğunu ve nasıl düzeltileceğini söylemesi.
• Klavye kısayolları ile fare kullanmadan veri girişi.

Örnek kullanım senaryoları

• Mevcut panelin yenilenmesi: Destek taleplerinde en çok geçen üç ekran yeniden tasarlanır, yeni ve eski ekranlarda aynı görevin süresi karşılaştırılır.
• Yeni ürünün ilk sürümü: Girişimcinin fikri, yatırımcıya ve ilk kullanıcılara gösterilebilecek tıklanabilir bir prototipe dönüşür.
• Mobil başvuru akışı: Uzun bir başvuru formu adımlara bölünür, her adımda yalnızca gerekli bilgi istenir, yarıda bırakma oranı izlenir.
• Tasarım sistemine geçiş: Farklı ekiplerin farklı zamanlarda yaptığı ekranlar ortak bir bileşen kütüphanesinde birleştirilir.
• Saha ekranı: Eldivenle ve güneş altında kullanılan bir tablet ekranı; büyük dokunma alanları, yüksek kontrast ve en sık işlemin tek dokunuşla yapılabilmesi esas alınarak yeniden tasarlanır.

Süreç boyunca sizden beklediklerimiz

• Görüşme ve test için gerçek kullanıcılara ulaşmamızı sağlamanız; birkaç saatlik katılım yeterlidir.
• Kurumsal kimlik kılavuzu, varsa mevcut ekran görüntüleri, kullanım istatistikleri ve destek talebi kayıtları.
• Her aşamanın sonunda tek bir karar vericinin toplu geri bildirimi; farklı kişilerden ayrı ayrı gelen çelişkili yorumlar süreci uzatır.

Teslim paketinde neler var?

• Kaynak Figma dosyaları; sayfalar, akışlar ve bileşenler düzenli adlandırılmış olarak.
• Tıklanabilir prototip bağlantısı ve kullanılabilirlik testi bulguları raporu.
• Tasarım sistemi: renk, tipografi, boşluk ölçüleri, ikon seti ve bileşen kütüphanesi.
• Her bileşenin durumları (varsayılan, üzerine gelme, odak, devre dışı, hata) ve kullanım kuralları.
• Geliştiriciler için dışa aktarılmış görseller ve devir notları.

İlgili çalışmalarımız

Üçgen topluluk platformunu akış, paylaşım ve etkinlik ekranlarıyla birlikte tasarlayıp geliştirdik. Şarjlı Enerji uygulamasında ise harita, şarj takibi ve ödeme adımlarını tek bir akışta topladık.

Fiyatı etkileyen faktörler

• Ekran ve akış sayısı; her akıştaki istisna ve hata durumları.
• Kullanıcı araştırmasının kapsamı ve test edilecek kullanıcı sayısı.
• Tasarım sisteminin ayrıntı seviyesi ve bileşen sayısı.
• Platform sayısı (web, iOS, Android) ve çok dilli yapı.
• Kurumsal kimlik kılavuzunun hazır olup olmadığı.

Sık sorulan sorular