UX ve UI Tasarım Arasındaki Fark: Detaylı Pratik Rehber

"UX/UI tasarımcı arıyoruz" ilanları her gün dolaşıyor ama iki disiplin farklı düşünme biçimleri gerektiriyor. UX, kullanıcının ne hissettiğine; UI, neyi gördüğüne bakar. Ortak hedef: kullanıcı işini en az sürtünmeyle bitirsin.

Net tanımlar

UX (User Experience)

Kullanıcının ürünü kullanırken yaşadığı toplam deneyim. Kullanım akışı, bilgi mimarisi, kullanılabilirlik, erişilebilirlik dahil.

UI (User Interface)

Kullanıcının gördüğü ve etkileşime girdiği görsel katman. Renk, tipografi, ikon, buton, animasyon, mikro-etkileşim.

UX araştırmacının cevap aradığı soru: "Kullanıcı bu işi neden yapamadı?". UI tasarımcısının: "Bu butonu daha net nasıl gösteririm?"

UX'in 6 ana bileşeni

1. 01Kullanıcı araştırması — kim, hangi ihtiyaç, hangi cihaz, hangi bağlam.
2. 02Persona ve user journey — tipik kullanıcı yolculukları haritalanır.
3. 03Bilgi mimarisi — içerik nasıl organize edilir (sitemap, kategori sistemi).
4. 04Wireframe + akış — düşük çözünürlüklü iskelet ve sayfa-sayfa geçiş mantığı.
5. 05Kullanılabilirlik testi — 5 kullanıcı 5 göreve verilir, gözlemlenir.
6. 06Erişilebilirlik — WCAG 2.2 AA standartı uyumu.

UI'in 6 ana bileşeni

1. 01Görsel kimlik — renk paleti, tipografi sistemi, ikon dili.
2. 02Tasarım sistemi — yeniden kullanılabilir buton, kart, form bileşenleri.
3. 03Hiyerarşi — başlık ağırlığı, boşluk, vurgu ile dikkat yönetimi.
4. 04Mikro-etkileşim — hover, focus, loading, error state animasyonları.
5. 05Tipografi — okunabilirlik, satır uzunluğu, kontrast.
6. 06Görseller — fotoğraf, illüstrasyon, video kullanımı.

Pratikte örnek: bir checkout sayfası

UX kararı: "Tek sayfa checkout mu, 3 adımlı mı?" — kullanıcı testleriyle karar verilir. UI kararı: "Adres alanları yan yana mı, alt alta mı, hangi font ağırlığında?". Aynı sayfada iki disiplin farklı sorulara cevap arar.

Ekip yapısı: küçük + orta + büyük

Küçük ajans / freelance

Tek kişi her ikisini yapar — "UX/UI tasarımcı".

Orta ajans

1 product designer (her ikisi) + 1 frontend dev.

Büyük şirket / SaaS

Ayrı UX research, UX designer, UI designer, design systems uzmanı.

Süreç akışı

1. 01Brief + ön araştırma (UX)
2. 02Kullanıcı araştırması / persona (UX)
3. 03Sitemap + user flow (UX)
4. 04Wireframe (UX)
5. 05Görsel kimlik / mood board (UI)
6. 06Yüksek çözünürlüklü tasarım (UI)
7. 07Prototip + interaction (UI + UX)
8. 08Kullanılabilirlik testi (UX)
9. 09Revizyon + iteration
10. 10Yazılım teslim

İyi UX/UI çalışmasının ölçütleri

• Yeni kullanıcı 3 saniyede ne yapması gerektiğini anlıyor.
• Form doldurma süresi 60 saniyenin altında.
• Hata yapan kullanıcıya net geri bildirim veriliyor.
• Mobil ve masaüstü deneyim aynı tutarlılıkta.
• Mikro-etkileşimler doğal, abartısız.
• Yükleme durumlarında kullanıcı kaybolmuyor.

Şunu yapmayın: UI'ı UX'in önüne almak

Güzel görünen ama kullanılmayan bir ürün yapmaktansa, sıradan görünen ama herkes tarafından kolayca kullanılan ürün her zaman daha başarılıdır. UX yoksa UI ne kadar şık olursa olsun başarısız olur. Önce kullanım kararları, sonra görsel kararlar.

Sıkça sorulan sorular