UI/UX Tasarımı Nedir?, bir dijital ürünün nasıl hissettirdiği (UX – kullanıcı deneyimi) ve nasıl göründüğü/etkileşime girdiği (UI – kullanıcı arayüzü) bütünüdür. Amaç; ziyaretçinin hedefini en az sürtünmeyle tamamlaması ve marka ile olumlu bir ilişki kurmasıdır. Bir e-ticaret sitesinde bu hedef “ürünü sepete ekleme ve satın alma” iken; bir kurumsal sitede “teklif formu doldurma” olabilir. Kullanıcı deneyimi tasarımı
UX Tasarımı Nedir?
Araştırma, akış, bilgi mimarisi, test ve iterasyonla “doğru problemi doğru şekilde” çözmeyi sağlar. Kullanılabilirliği, erişilebilirliği ve duygusal tatmini optimize eder.UI Tasarımı Nedir?
Renk, tipografi, ikon, buton, kart, form alanı gibi görsel bileşenlerle etkileşimi sezgisel ve tutarlı kılar. Mikro animasyonlar ve durumlar (hover, disabled vb.) netliği artırır. Kullanıcı arayüzü tasarımı
Neden Hayati? (İş Sonuçları Üzerinden)
Dönüşüm oranı artar: Daha kısa ödeme akışı + net CTA butonları = daha az terk.
Müşteri memnuniyeti yükselir: Hızlı bulunabilirlik ve anlaşılır dil.
Maliyet düşer: Azalan destek talebi ve iade oranı.
SEO katkısı: Daha iyi etkileşim metrikleri (INP, bounce, dwell time) arama performansına yardımcı olur.
Marka algısı: Tutarlı kullanıcı arayüzü tasarımı güven verir.
Sakarya’daki KOBİ’ler için pratik sonuç: “Ana kategoriler net, filtreler hızlı ve mobilde tek elle kullanılabilir” bir arayüz çoğu zaman ilave reklam bütçesi kadar etkilidir. Kullanıcı arayüzü tasarımı
Temel Kavramlar – UX’in İskeleti
Persona: Hedef kullanıcıların temsili profilleri (amaçlar, acılar, bağlam).
Kullanıcı yolculuğu (Journey Map): Farkındalık → Değerlendirme → Satın alma → Sadakat adımları ve temas noktaları.
Senaryo & görevler: “Kredi kartı olmadan kapıda ödeme yapmak istiyorum” gibi gerçek görevler.
Bilgi mimarisi: Menü/kategori/etiket yapısı; içeriklerin mantıklı gruplanması.
Akış diyagramı: Kullanıcının bir görevi tamamlarken geçtiği ekran sırası. Kullanıcı arayüzü tasarımı
UI Tasarımının 7 Altın İlkesi
- Hiyerarşi: Başlık, alt başlık, metin; görsel ağırlıkla yönlendirme.
- Kontrast: Renk/ton/ölçek farkı ile odak yaratma.
- Tutarlılık: Bileşenler (buton, form, kart) her yerde aynı davranır.
- Boşluk (Whitespace): Okunabilirlik ve nefes alanı.
- Geri bildirim: Yükleme, başarı, hata durumları net.
- Erişilebilirlik: Kontrast yeterli, klavye ile gezilebilir, alternatif metinler mevcut.
- Mobil öncelik: Dokunma hedefleri ≥ 44px, baş parmak erişimi, sabit CTA.
Teslimatlar (Deliverables) – Ne Üretilir?
Wireframe (Low-fi): İçerik yerleşimi ve akış; gri tonlu, hızlı iterasyon için.
Mockup (Hi-fi): Gerçek renk, tipografi ve görsellerle nihai görünüm.
Prototip: Tıklanabilir demo; akış ve mikro etkileşimleri test etmeye yarar.
Tasarım sistemi: Renk paleti, tipografi ölçeği, grid, ikonografi, bileşen kütüphanesi ve durumları (hover/focus/disabled).
UI Kit/Component Library: Buton, input, dropdown, modal, toast vb. yeniden kullanılabilir bileşenler.
Araştırma ve Doğrulama Yöntemleri
Masa başı araştırma: Rekabet ve örnek akışlar (benchmark).
Kullanıcı görüşmeleri: 5–10 kişiyle kısa derinlemesine görüşme.
Kullanılabilirlik testi: Görev bazlı; başarı oranı, görev süresi, hata sayısı ölçülür.
Anket & 5-Saniye testi: İlk izlenim; sayfa amacı anlaşılmış mı?
Isı haritası & oturum kaydı: Gerçek davranış verisi; tıklama ve kaydırma derinliği.
Metin (Microcopy) ve Dil
Kullanıcı arayüzü tasarımı yalnızca ekran ve butonlardan ibaret değil. Mikro metinler davranışı yönlendirir:
CTA: “Sepete Ekle” yerine “Sepete Ekle ve Devam Et” gibi net beklenti.
Hata mesajı: “Bir hata oluştu” değil; “Kart geçersiz görünüyor. Son kullanma tarihini AA/YY formatında girin.”
Boş durumlar (Empty states): “Henüz favoriniz yok. Beğendiğiniz ürünlerin yanındaki ile ekleyin.”
Görsel Dil ve Bileşen Seçimi
Tipografi ölçeği: H1–H6, gövde, açıklama ve buton metni için sistem.
Renk sistemi: Ana, ikincil, vurgu ve durum renkleri (success/warning/error/info).
İkonografi: Anlamı güçlendiren, metni tamamlayan semboller.
Görsel tutarlılık: Ürün görsellerinde benzer açı/ışık/arka plan; güven algısını pekiştirir.
Durumlar: Hover, pressed, focus, loading; özellikle kullanıcı arayüzü tasarımı için vazgeçilmezdir.
Prototipleme ve Erken Test
Figma/Sketch ile hazırlanan prototipler;
Akış doğrulama: Tek sayfalık ödeme mi, adım adım mı?
Mikro etkileşim: Buton hover/feedback, form doğrulama anı.
Cihaz testleri: iOS/Android, farklı ekran en-boy oranları.
Paydaş hizalama: Geliştirici, pazarlama ve operasyon ekipleri ortak bir kaynak üzerinde konuşur. Kullanıcı arayüzü tasarımı
UI/UX Süreci: Brief’ten Yayına
- Brief & Hedefler
İş hedefi (satın alma, form doldurma, kayıt), başarı metrikleri (CVR, INP, AOV, NPS) ve kısıtlar (zaman/bütçe/teknoloji) netleştirilir. - Araştırma & İçgörü
Persona, rakip/benchmark, mevcut veriler (GA4, ısı haritaları), müşteri hizmetlerinden gelen sorunlar. “Kullanıcı ne yapmaya çalışıyor ve nerede takılıyor?” sorusuna yanıt aranır. - Bilgi Mimarisi & Akışlar
Site haritası, kategori yapısı, checkout akışı. “Bir görevi en az adımda tamamlatma” prensibi. - Wireframe (Low-fi)
İçerik yerleşimi ve önceliklendirme; gri tonlarla hızlı iterasyon. Paydaşların aynı resme bakması sağlanır. - UI Tasarımı (Hi-fi)
Renk, tipografi, ikon, görsel dil ve bileşenler uygulanır. Durumlar (hover/focus/error), boş durumlar, iskelet ekranlar hazırdır. - Prototip & Kullanılabilirlik Testi
Tıklanabilir taslakla görev bazlı test yapılır (5–10 kullanıcı). Görev süresi, başarı oranı, hata noktaları ölçülür. - İyileştirme & Handoff
Figma/Zeplin token’ları, ölçüler, davranışlar, edge-case ekranlar ve erişilebilirlik notları geliştiriciye teslim edilir. - Yayın & Ölçümleme
Canlıda A/B testleri, INP/LCP/CLS takibi, kullanıcı geribildirimleri toplanır; döngü yeniden başlar. Kullanıcı arayüzü tasarımı
Erişilebilirlik (WCAG 2.2) Kontrollisti
Kontrast: Metin/arka plan en az 4.5:1 (≥18pt için 3:1).
Klavye ile kullanım: Tüm akışlar TAB/SHIFT+TAB ile gezilebilir.
Odak göstergesi: Görünür focus halkası (outline) bastırılmaz.
Alternatif metin: Anlam taşıyan görsellerde alt metin; dekoratif olanlarda boş bırak.
Form etiketleri: Her input’un label’ı; placeholder etiketin yerine geçmez.
Hata mesajları: Renk tek sinyal olmasın; açıklayıcı metin + ikon.
ARIA rollerini dikkatli kullan: Ekran okuyucuya gereksiz bilgi yükleme.
Dil özniteliği:
lang="tr"ve çok dilli sayfalarda hreflang.Zamanlayıcılar: Kritik formlarda otomatik zaman aşımı uyarısı ve artırma seçeneği.
Animasyon: Hareket hassasiyeti olanlar için “reduce motion” desteği. Kullanıcı arayüzü tasarımı
Tasarım Sistemi & Design Tokens
Tokens: Renkler (
--color-primary-500), tipografi (--font-size-16), espas (--space-8), radius, gölge, z-index, süre/kolaylaştırma (--ease-out).Bileşen kütüphanesi: Buton, input, select, toast, modal, kart, tablo, breadcrumb, pagination; her birinin durumları (default/hover/active/disabled/loading).
Adlandırma & versiyonlama: Semantik isimler + değişim günlüğü (changelog).
Kapsayıcı grid: 8px veya 4px ölçeği; mobil-öncelikli kırılım (xs/sm/md/lg/xl).
Dokümantasyon: Kullanım örnekleri, kod snippet’leri, “yap/ yapma” görselleri.
Yayılım: Figma kütüphanesi + kod tarafında ortak UI paketi (React/Vue). Tasarım ve geliştirmenin tek doğrusu olur.
Performans ve UI Kararlarının INP Etkisi
Kritik CSS’i inline ver, JS’yi ertele (defer/async).
Font yükleme:
font-display: swap, değişken fontları tek dosyada kullan; gereksiz ağırlık eklemeyin.İkon setleri: Büyük SVG sprite yerine yalnız kullanılan ikonları “treeshake” eden paketlerle çekin.
Görseller: WebP/AVIF, boyut/yoğunluk uyumlu, lazy-load +
srcset.Reflow/CLS: Dinamik alanlara sabit yükseklik; reklam/yer tutucular.
Skeleton ekranlar: Spinner yerine iskelet; algılanan hız artar.
Olay dinleyicileri: Pasif scroll dinleyicileri (
passive: true), throttling/debounce.Ağ istekleri: Gereksiz bloklayıcı istekleri azalt; kritik olmayanları
requestIdleCallbackile yükle.
Ölçümleme: UX’i Sayıya Dökmek
Davranışsal metrikler (GA4/GTM):
view_item,add_to_cart,begin_checkout,purchaseScroll derinliği, arama kullanım oranı, filtre kullanımı
Rage click, dead click, form hata oranı, alan bazlı terk
Deneyim metrikleri:
INP, LCP, CLS (Core Web Vitals)
SUS (System Usability Scale) anketi,
CSAT/NPS ve açık uçlu yorumlar
Ürün metrikleri:
Aktivasyon (ilk kritik eylem), elde tutma, tekrar satın alma, yaşam boyu değer. Kullanıcı arayüzü tasarımı
A/B Test Örnekleri
CTA metni: “Teklif Al” vs “Fiyat ve Demo İste”
Checkout düzeni: tek sayfa vs adım adım
Ürün kartı: teslimat süresi + iade bilgisi eklendiğinde CTR/CR
Arama çubuğu: Sabit (sticky) vs üstte
Mikro kopya: Ücretsiz kargo eşiğini ürün sayfasında göstermek vs sadece sepette göstermek
Sık Yapılan Hatalar ve Çözümleri
Sadece estetiğe odaklanmak: Test etmeyen UI, güzel ama etkisiz kalır → En az 5 kullanıcıyla görev testi.
Aşırı seçenek/karmaşık menü: Hick yasası → En çok satılan 3–5 kategoriye odak.
Kontrast yetersizliği: Erişilebilirlik kontrolü + otomatik kontrast denetimi.
Tutarsız bileşenler: Tasarım sistemi kurun; tek bir buton standardı.
Mobilde baş parmak bölgesi ihmal: CTA’yı alt yapışkan bara alın.
Formlarda belirsiz hata mesajları: Alan bazlı, çözüm önerili geri bildirim. Kullanıcı arayüzü tasarımı
Yayın Öncesi UI/UX Checklist’i
H1 tek, başlık hiyerarşisi doğru
Ana akışlar: kayıt, giriş, şifre sıfırlama, sepet, ödeme test edildi
Klavye erişilebilirliği ve focus halkası görünür
Formlarda label’lar, örnek formatlar, hata mesajları tamam
Alt metinler, ikon isimleri, buton aria-label’ları yerinde
Core Web Vitals raporu yeşil (INP < 200ms hedef)
404/boş durum sayfaları ve geri dönüş yolları hazır
Yasal metinler ve çerez tercih paneli çalışıyor
Piksel/etiketler (GA4, Ads, Meta, TikTok) yayın profiline bağlı
Ölçüm panosu: CVR, AOV, terk oranı, arama/filtre kullanımı
Sonuç
UI/UX tasarımı, “güzel görünen ekranlar”dan fazlasıdır; araştırma, test ve ölçümle desteklenen iş sonucu üreten bir süreçtir. Doğru bilgi mimarisi, erişilebilir kullanıcı arayüzü tasarımı ve performans odaklı uygulama ile dönüşüm, memnuniyet ve marka algısı birlikte yükselir. Kullanıcı deneyimi tasarımı
Uygulama desteği mi lazım? CsWeb olarak brief’ten yayın sonrasına kadar UI/UX, prototip, test, tasarım sistemi ve geliştirme entegrasyonunu uçtan uca yönetiyoruz. Kullanıcı arayüzü tasarımı
