İçeriğe geç
İstanbul Ajans
Araştırma · Prototip

UI/UX tasarım: kullanıcının takıldığı yeri bulmak

Arayüz tasarımı estetikten çok karar mimarisi. Kullanıcı bir sonraki adımı düşünmeden bulabiliyorsa tasarım çalışıyor demektir. Bunu geliştirmeye başlamadan prototipte test ediyoruz.
Ne zaman gerekir

Bu hizmete genelde şu noktada ihtiyaç duyuluyor

Sitede ya da uygulamada insanlar bir yere kadar geliyor ve bırakıyor. Nerede bıraktıkları belli değil. Ekip "şunu değiştirelim" diye tahmin yürütüyor, her değişiklik yeniden geliştirme maliyeti çıkarıyor.

Kimler için uygun

  • Yazılım geliştirmeye başlamadan doğru kurgu isteyen ekipler
  • Kullanıcı kaybettiği yeri bulamayan ürün sahipleri
  • Mevcut arayüzü sadeleştirmek isteyen firmalar
Kapsam

Bu hizmette neler yapıyoruz

  • 01Kullanıcı araştırması ve mevcut akış analizi
  • 02Kullanıcı akışı ve bilgi mimarisi
  • 03Wireframe ve düşük detaylı taslaklar
  • 04Tıklanabilir prototip
  • 05Arayüz tasarımı: web ve mobil
  • 06Tasarım sistemi ve bileşen kütüphanesi
  • 07Kullanılabilirlik testi ve iyileştirme turu
  • 08Erişilebilirlik denetimi
Teslimat

Proje sonunda elinize ne geçiyor

Teklifte neyin dahil olduğu kadar neyin dahil olmadığı da yazılı olur. Proje ortasında ek kalem çıkmaz.

  • Kullanıcı akış şemaları
  • Tıklanabilir prototip (Figma)
  • Geliştirmeye hazır arayüz tasarımları
  • Yeniden kullanılabilir bileşen kütüphanesi
  • Test bulguları ve öncelikli iyileştirme listesi
Nasıl çalışıyoruz

UI/UX işini adım adım

Küçük bir akış için araştırma + prototip 1–2 hafta. Kapsamlı bir ürün için 4–8 hafta. Prototipte bulunan bir sorunu düzeltmek, geliştirildikten sonra düzeltmekten belirgin şekilde ucuz.

  1. 01

    Mevcut akışı ve verileri inceliyoruz

    Analytics'te insanlar nerede düşüyor, ısı haritasında nereye tıklıyor, destek kayıtlarında ne şikayet ediliyor? Tasarıma varsayımla değil, bu verilerle başlıyoruz.

  2. 02

    Kullanıcı akışını çiziyoruz

    Kişi hedefine kaç adımda ulaşıyor, hangi adımda karar vermek zorunda kalıyor? Fazla adım ve gereksiz karar noktaları burada görünür oluyor.

  3. 03

    Düşük detaylı wireframe

    Renk ve görsel olmadan, sadece yapı. Bu aşamada tartışma 'buton mavi mi olsun' değil, 'bu bilgi burada mı olmalı' sorusu üzerinden ilerliyor — asıl değerli tartışma bu.

  4. 04

    Tıklanabilir prototip

    Kod yazılmadan gerçek gibi çalışan bir sürüm. 'Tıklayınca ne oluyor' sorusu geliştirme başlamadan cevaplanıyor.

  5. 05

    Kullanılabilirlik testi

    5 kişiyle yapılan test, sorunların büyük kısmını çıkarıyor. Kişiye görev veriyoruz ve müdahale etmeden izliyoruz; nerede duraksadığı en değerli bulgu oluyor.

  6. 06

    Tasarım sistemi

    Tek tek ekran yerine yeniden kullanılabilir bileşenler teslim ediyoruz. Yeni ekran gerektiğinde sıfırdan tasarım yapılmıyor, sistem birleştiriliyor.

Fiyatlandırma

Maliyeti ne belirliyor

Hazır fiyat listesi yayınlamıyoruz, çünkü aynı iş iki firmada çok farklı emek demek olabiliyor. Aşağıdakiler teklifin ölçeğini belirleyen gerçek etkenler.

Ekran ve akış sayısı
Tek bir satın alma akışı ile çok modüllü bir panel arasında büyük fark var.
Kullanıcı testi kapsamı
Test yapılacak mı, kaç kişiyle, katılımcıları kim bulacak? Test değerli ama isteğe bağlı bir kalem.
Tasarım sistemi derinliği
Basit bir bileşen seti mi, çok durumlu ve tema destekli tam sistem mi? İkincisi uzun vadede tasarruf ettiriyor ama başlangıç maliyeti yüksek.
Mevcut tasarım varlıkları
Marka kimliği hazırsa hızlı ilerliyor. Yoksa önce temel görsel dili kurmak gerekiyor.

Görüşmede kapsamı çıkarıp kalem kalem yazılmış, sabit fiyatlı bir teklif gönderiyoruz. Neyin dahil olmadığı da teklifte yazılı olur.

Dikkat

UI/UX tarafında en sık gördüğümüz hatalar

Bunlar teoriden değil, devraldığımız projelerden çıkan gerçek örnekler. Kendi işinizde kontrol etmeniz için yazıyoruz.

  • Tasarımı ekip içinde değerlendirip kullanıcıya sormamak

    Ürünü siz her gün kullanıyorsunuz; ilk kez gören biri gibi bakamazsınız. 5 kişilik bir test, aylarca süren iç tartışmadan daha çok şey söylüyor.

  • Formu 'her ihtimale karşı' uzun tutmak

    Her ek alan tamamlanma oranını düşürüyor. Sonradan sorabileceğiniz bilgiyi ilk adımda istemeyin.

  • Erişilebilirliği en sona bırakmak

    Renk kontrastı ve odak durumları sonradan eklenince tasarımın yeniden elden geçmesi gerekiyor. Baştan doğru kurmak maliyetsiz.

Araçlar

Bu işte ne kullanıyoruz

  • Figma — tasarım, prototip ve bileşen kütüphanesi
  • Maze / Hotjar — kullanılabilirlik testi ve ısı haritası
  • Google Analytics 4 — davranış ve düşüş noktaları
  • WCAG 2.2 kontrast ve erişilebilirlik denetimi
Süreç

Her projede izlediğimiz altı aşama

  1. 01

    Keşif ve Strateji

    Markayı, hedef kitleyi, rakipleri ve projenin gerçek ihtiyacını konuşarak başlıyoruz.

  2. 02

    Planlama

    İçerik, özellik listesi, teslim kapsamı ve takvimi yazılı hâle getiriyoruz.

  3. 03

    Tasarım ve Prototip

    Markaya özel arayüzü tasarlıyor, geliştirmeye başlamadan onayınıza sunuyoruz.

  4. 04

    Geliştirme

    Onaylanan tasarımı hızlı, güvenli ve büyüyebilir bir sisteme dönüştürüyoruz.

  5. 05

    Test ve Yayın

    Mobil uyumluluk, hız, SEO, form ve erişilebilirlik testlerini tamamlayıp yayına alıyoruz.

  6. 06

    Destek ve Büyüme

    Yayından sonra bakım, teknik destek, raporlama ve büyüme çalışmaları devam ediyor.

SSS

UI/UX hakkında sorular

Beş sayfalık bir kurumsal site için ayrı bir UX aşaması genelde gerekmiyor; kurgu tasarım sürecinin içinde çözülüyor. Uygulama, panel veya çok adımlı bir satış akışı varsa gerekli — prototipte bulunan bir hatayı düzeltmek, geliştirildikten sonra düzeltmekten çok daha ucuz.

UI/UX için görüşelim.

İlk görüşme ve teklif ücretsiz. Kapsamı birlikte çıkarıp size kalem kalem yazılmış bir teklif gönderiyoruz.