UX/UI Tasarım İlkeleri: Kullanıcı Odaklı Web Siteleri

25 Ekim 2025 15 dakika okuma UX/UI Design

Başarılı bir web sitesinin sırrı sadece görsel çekicilikte değil, kullanıcı deneyiminde yatar. Bu rehberde, dünya standartlarında UX/UI tasarımı için bilmeniz gereken her şeyi öğreneceksiniz.

UX ve UI Arasındaki Fark Nedir?

UX (User Experience)

Kullanıcı Deneyimi - Kullanıcının bir ürün veya hizmetle etkileşimi sırasında yaşadığı genel deneyim.

  • Kullanılabilirlik
  • Erişilebilirlik
  • Kullanıcı akışları
  • Bilgi mimarisi
  • Kullanıcı araştırması

UI (User Interface)

Kullanıcı Arayüzü - Kullanıcının gördüğü ve etkileşimde bulunduğu görsel ve interaktif elementler.

  • Görsel tasarım
  • Tipografi
  • Renk paleti
  • Buton ve form tasarımı
  • Animasyonlar

Önemli Not: UX ve UI birbirini tamamlar. Harika bir UI kötü UX'i kurtaramaz, aynı şekilde mükemmel UX da zayıf UI ile zarar görür. Her ikisi de eşit derecede önemlidir!

10 Temel UX Tasarım İlkesi

1. Hicks Kanunu: Seçenekleri Basit Tutun

Kullanıcılara ne kadar çok seçenek sunarsanız, karar vermeleri o kadar uzun sürer. Bilişsel yükü azaltın - her sayfada maksimum 5-7 ana eylem sunun.

Örnek: Netflix'in ana menüsü sadece 5 kategori sunar: Ana Sayfa, TV Dizileri, Filmler, Yeni ve Popüler, Listem.

2. Fitts Kanunu: Hedef Büyüklüğü ve Mesafe

Bir hedefe ulaşmak için gereken süre, hedefin uzaklığı ve büyüklüğü ile ilgilidir. Önemli butonları büyük yapın ve sık kullanılan elementleri kolay erişilebilir konumlara yerleştirin.

İpucu: Mobilde tıklanabilir elementler minimum 44x44px olmalıdır (Apple HIG standardı).

3. Miller's Law: 7±2 Kuralı

İnsan beyni kısa süreli hafızasında ortalama 7 (±2) öğeyi tutabilir. Bilgiyi küçük parçalara bölün - menülerde, formlarda ve listelerde bu kuralı uygulayın.

Uygulama: Telefon numaralarını gruplandırarak yazıyoruz: 0555 123 45 67

4. Jakob's Law: Tutarlılık ve Tanıdıklık

Kullanıcılar zamanlarının çoğunu diğer sitelerde geçiriyor. Sıfırdan yeni bir UX icat etmeyin - sektör standartlarına uyun.

Örnek: Logo sol üstte, alışveriş sepeti sağ üstte, arama çubuğu header'da - bu standartları değiştirmeyin.

5. Tesler's Law: Karmaşıklık Yönetimi

Her sistemde belli bir karmaşıklık vardır ve bu karmaşıklığı ya ürün ya da kullanıcı yönetir. Karmaşıklığı ürününüze yükleyin, kullanıcıya değil.

Örnek: Google'ın minimalist arama sayfası - arka planda karmaşık algoritmalar çalışırken kullanıcı sadece bir arama kutusu görür.

UX Tasarım Süreci

5 Aşamalı UX Süreci

1

Araştırma

Kullanıcı görüşmeleri, anketler, rakip analizi

2

Analiz

User personas, journey maps, pain points

3

Tasarım

Wireframes, prototipler, mockup'lar

4

Test

Usability testing, A/B testleri, heatmaps

5

İterasyon

Geri bildirimlere göre iyileştirme

User Persona Oluşturma

User persona, hedef kitlenizin temsili karakterleridir. İyi bir persona oluşturmak, tasarım kararlarınızı kullanıcı odaklı hale getirir.

Ahmet - E-Ticaret Yöneticisi

Yaş: 32 | Lokasyon: İstanbul | Deneyim: 5 yıl

Hedefler: Web sitesi dönüşüm oranını artırmak, kullanıcı deneyimini iyileştirmek

Pain Points: Karmaşık analitik araçlar, yavaş yükleme süreleri, mobil uyumsuzluk

Motivasyonlar: Başarı metrikleri, görsel raporlar, hızlı sonuçlar

Heatmap ve Kullanıcı Davranış Analizi

Heatmap analizi, kullanıcıların sitenizde nerelere tıkladığını, nereye baktığını ve nasıl scroll yaptığını görselleştirir. Bu veri, tasarım kararlarınızı destekler.

Heatmap Insights

Bilişsel Yük ve Sadelik İlkesi

Bilişsel yük, kullanıcının bir görevi tamamlamak için harcaması gereken zihinsel çabadır. Karmaşıklığı azaltmak, dönüşüm oranını artırır.

Bilişsel Yükü Azaltmanın Yolları

Kod Örneği: Progressive Disclosure

<div class="signup-form">
  <!-- Adım 1: Sadece temel bilgiler -->
  <input type="email" placeholder="E-posta adresiniz" required>
  <button onclick="showStep2()">Devam Et</button>
  
  <!-- Adım 2: Detaylar (başlangıçta gizli) -->
  <div id="step2" style="display: none;">
    <input type="text" placeholder="Adınız">
    <input type="password" placeholder="Şifre">
    <button type="submit">Kayıt Ol</button>
  </div>
</div>

💡 Tek seferde tüm formu göstermek yerine, adım adım ilerlemek %35 daha yüksek tamamlanma oranı sağlar.

Erişilebilirlik (Accessibility) - A11y

İyi UX, herkes için iyi UX demektir. Dünyada 1 milyardan fazla engelli insan var - sitenizin erişilebilir olması hem etik hem de yasal bir gerekliliktir.

WCAG 2.1 Temel Prensipleri

Erişilebilir Buton Örneği

<!-- ❌ Kötü: Erişilebilirlik yok -->
<div onclick="submitForm()">Gönder</div>

<!-- ✅ İyi: Tam erişilebilir -->
<button 
  type="submit" 
  aria-label="Formu gönder"
  class="submit-btn"
  tabindex="0">
  <span aria-hidden="true">📤</span>
  Gönder
</button>

Grid Systems ve Layout Tasarımı

Profesyonel web tasarımının temeli, grid sistemleridir. Grid, içeriğinizi düzenli, tutarlı ve dengelenmiş bir şekilde organize eder.

Popüler Grid Sistemleri

CSS Grid Layout Örneği

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar {
  grid-column: span 3; /* 3 kolon genişlik */
}

.main-content {
  grid-column: span 9; /* 9 kolon genişlik */
}

@media (max-width: 768px) {
  .sidebar, .main-content {
    grid-column: span 12; /* Mobilde tam genişlik */
  }
}

UI Tasarım Best Practices

✨ Renk ve Kontrast

YAPILMASI GEREKENLER

  • WCAG AA standardına uygun kontrast oranı (4.5:1)
  • Tutarlı renk paleti (3-5 ana renk)
  • Renk körü kullanıcılar için alternatif göstergeler
  • Call-to-action için dikkat çekici renkler

YAPILMAMASI GEREKENLER

  • Sadece renge dayalı bilgi iletimi
  • Çok fazla farklı renk kullanımı
  • Düşük kontrastlı metin
  • Trend olduğu için neon renkler kullanmak

📝 Tipografi

Tipografi Kuralları

🔘 Buton ve CTA Tasarımı

Mükemmel CTA Butonu Özellikleri

Mobile-First UX/UI

2025'te web trafiğinin %70'inden fazlası mobil cihazlardan geliyor. Mobile-first yaklaşım artık opsiyonel değil, zorunluluk!

Mobil UX Prensipleri

A/B Testing ve Optimizasyon

En iyi UX tasarımcılar bile her zaman doğru tahmin edemez. A/B testing ile varsayımlarınızı test edin, veriye dayalı kararlar alın.

A/B Test Örnekleri

Buton Rengi

Yeşil vs Turuncu CTA butonu - %18 dönüşüm artışı

Başlık Metni

"Kayıt Ol" vs "Ücretsiz Dene" - %27 tıklama artışı

Form Uzunluğu

8 alan vs 4 alan - %34 tamamlama oranı artışı

Sonuç: Kullanıcı Her Zaman Haklıdır

Mükemmel UX/UI tasarımının sırrı, kullanıcıyı merkeze almaktır. Estetik önemlidir ama kullanılabilirlik her zaman öncelikli olmalıdır. Steve Krug'un ünlü sözü: "Don't make me think" (Beni düşündürme) - bu UX tasarımının özüdür.

Hatırlamanız Gereken 5 Altın Kural

  1. Tutarlılık: Tüm sayfalarda aynı tasarım dilini kullanın
  2. Geri Bildirim: Her kullanıcı eylemine anında yanıt verin (loading, success, error states)
  3. Hata Önleme: Kullanıcının hata yapmasını engelleyin, eğer yaparsa düzeltmesini kolaylaştırın
  4. Esneklik: Hem acemi hem de ileri seviye kullanıcılar için çözümler sunun
  5. Minimalizm: Gereksiz her şeyi kaldırın - less is more

Projeniz İçin UX/UI Danışmanlığı

Kullanıcılarınızın bayılacağı, dönüşüm odaklı arayüzler tasarlayalım. UX araştırmasından son tasarıma kadar yanınızdayız.

Ücretsiz UX Audit Alın

Bu Yazıyı Paylaş