Kullanıcı Deneyimi (UX) Nedir? Web Tasarımda UX'in Önemi

"Harika tasarımı var ama ziyaretçiler gidiyor." Bu cümleyi çok duyarız. Neden? Çünkü harika tasarım ≠ harika UX (User Experience).

UX, tasarımın estetik tarafını aşar. UX, ziyaretçilerin sitede nasıl hissettiğini ve ne kadarının amacını başardığını belirler.

Bu rehberde, UX'in ne olduğunu, neden önemli olduğunu ve nasıl iyi UX tasarlanacağını öğreneceksiniz.

UX Nedir? UI'dan Farkı Nedir?

UX (User Experience)

Tanım: Ziyaretçinin site ile etkileşimi sırasında yaşadığı tüm deneyim.

Tasarım, hız, metin, navigasyon, problem çözme, duygu - hepsi UX'in bir parçası.

UX soru: "Ziyaretçi hedefine ulaştı mı? Kolay mıydı? Memnun mu?"

UI (User Interface)

Tanım: Tasarımın görsel ve interaktif elemanları.

Button rengi, font tipi, spacing, layout - UI'ın bir parçası.

UI soru: "Güzel mi görünüyor? Renkler uyumlu mu?"

Arasındaki Fark

Aspekt	UX	UI
Focus	Deneyim, journey	Estetik, görünüm
Scope	Tüm siteyi kapsayan	Elemanlar, bileşenler
Measurement	Conversion, satisfaction	Visual harmony
Profession	UX Designer, Researcher	Graphic Designer

Analoji: UX bir resepsiyonistin müşteri hizmeti, UI ise resepsiyonun dekorasyonu.

UX Tasarımın Temel Prensipleri

1. User-Centered Design

Tasarımı YAPANIN değil, KULLANANın ihtiyaçlarına göre yap.

Adımlar:

1. Ziyaretçileri anla (research)
2. User personas oluştur
3. User journey map'ı çiz
4. Pain points identify et
5. Çözümler tasarla
6. Test et

Assumption'a güvenme. İnsan araştırması yap.

2. Simplicity (Basitlik)

Gereksiz komplikasyon, ziyaretçiyi kaybeder.

Basitlik ilkeleri:

• Her sayfa, TEK amaç
• Navigation basit (3 adıma ulaşılsın)
• Gereksiz eleman yok
• Yazı kısa ve net
• Buton açık

"Less is more."

3. Consistency (Tutarlılık)

Ziyaretçi, sinin kurallarını öğrendikten sonra, kurallar değiştirilmemeli.

Consistency örnekleri:

• Button'lar her zaman aynı renk
• Navigation her sayfada aynı yerde
• Font sizes consistent
• Spacing kuralı constant

Tutarlılık, ziyaretçinin "siteyi nasıl kullanacağını" hızlı öğrenmesini sağlar.

4. Feedback

Ziyaretçi bir action yaptığında, sonucu görmeli.

Feedback örnekleri:

• Button'a tıkladıktan → "Loading..." göster
• Form submitted → "Success!" mesajı
• Error → "Email yanlış, lütfen düzelt"
• Link hover → Renk değişimi
• Mobile menu click → Menu açılması

Feedback yoksa, ziyaretçi "tıklama işe yaradı mı?" merak eder.

5. Accessibility (Erişilebilirlik)

Site tüm insanlar için kullanılabilir olmalı:

• Görme engelli (screen reader)
• İşitme engelli (alt text)
• Motor engelli (keyboard navigation)
• Yaşlı insanlar (büyük font)
• Yavaş internet (optimize edilmiş)

Erişilebilirlik = legality (WCAG) + morality (inclusivity).

UX Problemleri ve Çözümleri

Problem 1: Kötü Navigation

Sorun: Ziyaretçi "bir şey bulmak istediğinde" bulamıyor.

Çözümler:

• Navigation menu basit ve clear
• Search functionality var
• Breadcrumb (sayfanın nerede olduğu belli)
• Footer'da tekrar main links
• Internal linking good

Problem 2: Slow Loading

Sorun: Site yavaş = %50+ ziyaretçi gidiyor.

Çözümler:

• Image compression
• Lazy loading
• Caching
• CDN
• Minimal CSS/JS

Hedef: LCP < 2.5 saniye

Problem 3: Form Friction

Sorun: Form doldurması zor veya uzun.

Çözümler:

• Form alanları minimize et
• Auto-fill support
• Progress indicator
• Clear labels ve placeholders
• Real-time validation
• Mobile-optimized input types (tel, email)

Problem 4: Poor Mobile UX

Sorun: Mobil'de site berbat görünüyor.

Çözümler:

• Mobile-responsive design
• Touch-friendly buttons (48x48px+)
• Readable font (16px+)
• Hamburger menu
• No horizontal scroll

Problem 5: Unclear CTA

Sorun: Ziyaretçi "ne yapması gerektiğini" bilmiyor.

Çözümler:

• Clear, action-oriented button text
• Prominent CTA button'ları (renk, boyut)
• Multiple CTA'lar (hero, scroll, footer)
• Clear value proposition

UX Research Yöntemleri

1. User Interviews

Gerçek ziyaretçilerle konuş. Neler düşünüyorlar?

Soruları açık-uçlu sor ("Sitede ne buldun?" değil "Nasıl bir deneyim yaşadın?")

2. Usability Testing

Ziyaretçileri siteyi kullanırken izle:

• Nerelerde takılıyor?
• Hangi butonları tıklıyor?
• Nerede karar veriyor?
• Nerede gidiyor?

Tools: UserTesting, Validately, Loop11

3. Heatmaps & Session Recordings

• Heatmap: "Ziyaretçi nereye tıklıyor?"
• Recording: "Ziyaretçi siteyi nasıl browse ediyor?"

Tools: Hotjar, Microsoft Clarity

4. Analytics

• Bounce rate: Sayfa çok kötü mi?
• Time on page: Ziyaretçi kalmıyor mu?
• Scroll depth: Sayfanın aşağısını görüyor mu?
• Funnel drop-off: Nerede kayboluyor?

5. Surveys & Feedback

Direkt sor: "Bu site'de ne eksik?" "Nerede takıldın?"

UX Design Process

1. Research

Ziyaretçileri, rakipleri, pazar'ı anla.

Output: User personas, user journey map, pain points

2. Strategy

Çözüm stratejisini belirle.

Output: Information architecture, wireframes

3. Design

High-fidelity mockups yap.

Output: Visual design, prototypes

4. Testing

Tasarımı test et. Ziyaretçiler kullanabilir mi?

Output: Feedback, improvements

5. Implementation

Developer'larla yaşa canlı.

6. Monitoring

Canlı aldıktan sonra, analytics izle.

Output: Optimization opportunities

UX Best Practices

Müşteri Yolculuğu (Customer Journey)

Ziyaretçi sitedeki yolculuğu:

1. Awareness: Sayfaya girdi
2. Consideration: Produktü inceliyor
3. Decision: Satın alma kararı
4. Action: Satın alıyor
5. Retention: Tekrar gel

Her aşamada, UX optimize edilmelidir.

Information Hierarchy

Önemli bilgiler büyük, az önemli küçük.

Kullanıcı "ne en önemli olduğunu" ilk bakışta anlayabilmeli.

Error Prevention

Hata oluşmadan, ziyaretçiyi yönlendir.

Örnek: Eksik form alanı varsa, button'u disable et. Submit sonra hata göstermek değil, önceden prevent et.

Contextual Help

Ziyaretçi bir şeyden emin değilse, o anda yardım sun.

"?" tooltip veya "Why?" linki.

UX Metrics

1. System Usability Scale (SUS)

10 soru sorarak, site'nin usability'sini 0-100 puan'la.

50-60: Poor 70-80: Good 85+: Excellent

2. Task Success Rate

Ziyaretçi, hedefi başardı mı?

Örnek: Ürün satın alma %80 başarı oranı = iyisi

3. Error Rate

Ziyaretçi kaç kere hata yaptı?

Düşük = iyi UX

4. Time on Task

Hedefi başarmak kaç sürdü?

Kısa = iyi UX

5. User Satisfaction

Ziyaretçi memnun mu? (Net Promoter Score, CSAT)

Accessibility (WCAG Compliance)

Web Content Accessibility Guidelines'ın seviyeleri:

• A: Minimum uyumluluk
• AA: Orta uyumluluk (hedef)
• AAA: Yüksek uyumluluk

WCAG kontrol listeleri:

• Text contrast (yazı rengi arka planla yeterli kontrast?)
• Alt text (görsellerin açıklamaları?)
• Keyboard navigation (sadece mouse'ta değil, keyboard'dan da kullanılabilir?)
• Form labels (form alanları açık mı?)
• Heading structure (H1, H2, H3 doğru hiyerarşi?)
• Focus indicator (where am I?)

UX Hataları

Hata 1: Trend'leri Kullan Çünkü Trending

Trend = short-lived. UX = timeless.

Fancy animation'ı ekleme çünkü trending. User'ı confuse edebilir.

Hata 2: Assumption'a Güven

"Ziyaretçiler mutlaka anlar..." söylemesi yanılır.

Test et. Her zaman test et.

Hata 3: Fazla İçerik

"Her şeyi koysam, daha iyi olur" düşüncesi yanlış.

Fazla bilgi = cognitive load = ziyaretçi gidiyor.

Basit tut.

Hata 4: Kötü Metin

Teknik jargon, uzun cümleler, passive voice = ziyaretçi anlamıyor.

Basit, customer-centric metin yaz.

UX Kaynakları

• Nielsen Norman Group: UX research and training
• Interaction Design Foundation: Free courses
• Figma: Design tool + community
• Dribbble/Behance: Design inspiration
• User Research Tools: Hotjar, UserTesting, Validately

Sonuç

İyi UX tasarım:

• Conversion'ları %50+ artırabilir
• Bounce rate'i düşürür
• Brand loyalty yaratır
• Operasyonel masrafları azaltır

Güzel tasarım ≠ iyi UX

İyi UX:

• Research-based
• User-centered
• Tested ve validated
• Accessible
• Simple ve consistent

Başlamadan önce, ziyaretçileri anlayın. Data'yla tasarla. Test et. İterate et.

UX-focused web tasarımda yardımcı olabiliriz. İletişime geçin.