uiuxtasarım
UI/UX ve dijital ürün tasarımı

Kullanıcı nerede takılıyorsa, tasarım oradan başlar.

Mobil uygulama, SaaS ürünü ve yönetim paneli tasarlıyoruz. Kararları kullanıcı araştırması ve testle doğruluyor, tasarımı geliştiricinize tüm durumları, bileşenleri ve token'larıyla eksiksiz devrediyoruz.

  • Araştırma
  • Test
  • Mobil
  • SaaS
  • Panel
  • Design system
#01Sorun

Ürünler çoğu zaman kötü çizildiği için değil, yanlış soruya cevap verdiği için zorlanır.

Güzel ekranlar, iyi bir ürünün yalnız görünen kısmıdır. Fark; neyin neden yapıldığında, nasıl devredildiğinde ve ürün büyürken tutarlılığın korunup korunmadığında ortaya çıkar.

#01

Varsayımla yapılan özellik

Toplantıda herkesin emin olduğu özellik, kullanıcıların ihtiyaç duymadığı bir şeye dönüşebilir. Asıl sorun kimsenin sormadığı yerde durur.

#02

Eksik devredilen tasarım

Yalnız mutlu yolu çizen dosyada boş liste, hata ve yükleniyor ekranları yoktur; geliştirici bunları kendisi uydurur.

#03

Tutarsız büyüyen ürün

Her ekip kendi köşesine ekleme yaptıkça aynı düğmenin on sürümü, aynı nesnenin üç farklı adı ortaya çıkar.

#02 · Yöntem

Ekran çizmeden önce akışı çiziyoruz.

Kullanıcı uygulamayı hangi anda, hangi işi yapmak için açıyor; nerede karar veriyor, nerede bırakıyor? Akışı çizip terk noktalarını işaretlemeden tasarlanan ekran, yanlış yeri güzelleştirir.

#04Süreç

Önce kanıt, sonra piksel.

Süreç rehberini oku
  1. #01

    Keşif

    Hedefler, kullanıcı rolleri, mevcut veri ve teknik kısıtlar. Çıktı: kapsam, yöntem ve takvim.

  2. #02

    Araştırma

    Kullanıcı görüşmeleri, mevcut veri ve destek talepleri. Çıktı: kanıtlı bulgular.

  3. #03

    Akış ve prototip

    Kullanıcı akışları, tel kafes ve tıklanabilir prototip. Önce akış, sonra ekran.

  4. #04

    Test ve arayüz

    Prototip kullanıcılarla denenir, ardından arayüz ve bileşen kütüphanesi.

  5. #05

    Devir ve kontrol

    Tüm durumlarıyla geliştirici devri, sprint desteği ve yayın öncesi tasarım kontrolü.

#05Devir paketi

Geliştiriciniz tahmin etmek zorunda kalmaz.

Tasarım, ancak doğru uygulandığında işe yarar. Her projede aynı devir paketini teslim ederiz: akışlar, tüm ekran durumları, bileşenler, DTCG formatında token'lar, erişilebilirlik ve metin notları; yayından önce de uygulanan ekranları tasarımla karşılaştırırız.

Devir paketini ayrıntılı gör
Katmanlar · Devir paketiher projede
Yapı
  • Akış haritasıAna görevler, karar noktaları, hata ve uç durumlar
  • PrototipKritik akışların tıklanabilir hâli; test edildiği sürüm işaretli
Arayüz
  • Ekranlar ve durumlarHer ekranın boş, yükleniyor, hata, yetki yok ve uzun içerik durumları
  • Bileşen kütüphanesiVaryantlar ve durumlarıyla; kodda kullanılan adlarla eşleşmiş
  • Tasarım token'larıRenk, yazı, boşluk, köşe; W3C DTCG formatında .json
Davranış
  • Erişilebilirlik notlarıOdak sırası, ekran okuyucu etiketleri, dokunma hedefleri, kontrast
  • Metin anahtarlarıArayüz metinleri, değişkenli ekler ve uzunluk sınırları
Teslim
  • Yayın öncesi kontrolUygulanan ekranların tasarımla karşılaştırılması ve düzeltme listesi
#06 · UX ön kontrolü

Görüşmeden önce ürününüzün zayıf noktalarını görün.

İlk kullanım, görev akışları, formlar, erişilebilirlik, tutarlılık ve ölçüm: altı alanda 24 soruyu cevaplayın; en zayıf alanlarınız için somut ilk adımlar ekranınızda. Puan değil öncelik listesi.

Ürünümü Kontrol Et
#07Örnek rapor

Bir denetim bulgusu böyle yazılır.

Kurgusal bir randevu uygulaması üzerinde hazırladığımız örnek rapordan iki bulgu. Her bulgu önem derecesi, ilgili ilke, kanıt ve öneriyle gelir.

Örnek Raporu İncele
B-01KritikRandevu alma

Saat seçimi bir düğme gibi görünmüyor

İlke
Sistem durumunun görünürlüğü · Tanıma
Kanıt
Saat kutuları düz metin gibi duruyor ve seçili durum yalnız ince bir çerçeve rengiyle gösteriliyor. Kullanıcı seçim yapmadan "Onayla"ya bastığında hata mesajı da gelmiyor.
Öneri
Saat kutularını dokunulabilir görünüme getirin, seçili durumu dolgu ve onay işaretiyle gösterin; seçim yoksa "Onayla"yı pasif bırakıp nedenini yazın.
B-04YüksekKayıt ve giriş

Doğrulama kodu alanı otomatik doldurmayı desteklemiyor

İlke
Hata önleme · WCAG 3.3.8 erişilebilir kimlik doğrulama
Kanıt
SMS kodu dört ayrı kutuya elle giriliyor; yapıştırma çalışmıyor ve kod 60 saniyede geçersiz oluyor.
Öneri
Tek alanlı, sistemin otomatik doldurmasını destekleyen kod girişi kullanın; yapıştırmaya izin verin ve süreyi uzatıp yeniden gönderme seçeneğini görünür kılın.

Örnek veri · kurgusal uygulama

#10Sık sorulanlar

Görüşmeden önce en çok sorulanlar

Hayır. Ürünü tasarlar, geliştirici ekibinize tüm ekran durumları, bileşenler, token'lar ve erişilebilirlik notlarıyla eksiksiz devreder, yayından önce uygulanan ekranları tasarımla karşılaştırırız. Kodlamayı sizin ekibiniz ya da iş ortağınız yapar.

Uzaktan ve moderasyonlu. Katılımcılar çoğunlukla sizin kullanıcılarınız ya da müşteri adaylarınızdır; davet metnini, seçim kriterlerini ve görüşme rehberini biz hazırlarız. Kayıtlar yalnız katılımcının izniyle yapılır.

Evet, ama riskini bilerek. Bütçe ya da zaman kısıtlıysa en azından prototipi birkaç kullanıcıyla test etmenizi öneririz; kod yazılmadan bulunan bir sorun, yayından sonra bulunandan çok daha ucuza düzelir.

Tasarım ve prototip için Figma. Dosyalar ve kütüphaneler sizin hesabınızda tutulur ya da teslimde devredilir. Tasarım token'larını araçtan bağımsız ortak bir formatta (W3C topluluk grubunun DTCG formatı) teslim ederiz.

Müşteri ürünlerini yayımlamıyoruz; çoğu iç araç ya da gizlilik sözleşmesi kapsamında. Bunun yerine nasıl çalıştığımızı gösteren kurgusal bir örnek denetim raporu, süreç rehberi ve devir paketimizin içeriği sitede açık.

Bu stüdyo kullanılan ürünlere odaklanıyor. Kurumsal site, e-ticaret sitesi ve kampanya sayfası için kardeş stüdyomuz websitemx ile çalışabilirsiniz.

Sabit paket fiyatı yayınlamıyoruz. Kısa denetim ve test işleri, kapsamı belli tasarım projeleri ve ekibinize katılan aylık ürün tasarımı desteği gibi modellerle çalışıyoruz; kapsam netleşince yazılı teklif veriyoruz.

Çoğu zaman bir UX denetimi ya da kısa bir kullanılabilirlik testiyle. Hangi akışın en çok sorun çıkardığını gördükten sonra iyileştirmeyi oradan başlatmak, bütçeyi en etkili yere harcamanızı sağlar.

Sonraki adım

Ürününüzü birlikte inceleyelim

Görüşmede ürününüzü, kullanıcılarınızı, takıldıkları yerleri ve ekibinizin yapısını konuşur; yazılı bir kapsam, yöntem ve takvim önerisi çıkarırız. Bağlayıcı değildir.

WhatsAppGörüşme Planla