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
Araştırma
Kullanıcı görüşmeleri, anketler, rakip analizi
Analiz
User personas, journey maps, pain points
Tasarım
Wireframes, prototipler, mockup'lar
Test
Usability testing, A/B testleri, heatmaps
İ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
- Kırmızı Bölgeler (Hot Zones): En çok etkileşim alan alanlar - CTA butonlarınızı buraya yerleştirin
- Sarı Bölgeler (Warm Zones): Orta düzey ilgi - destekleyici içerikler için ideal
- Mavi Bölgeler (Cold Zones): Az ilgi gören alanlar - bu bölgeleri yeniden tasarlayın veya kaldırın
- Scroll Depth: Kullanıcıların %70'i sayfanın ilk fold'unu geçmez - önemli bilgileri yukarıda tutun
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ı
- Font Sayısı: Maksimum 2-3 font ailesi kullanın
- Satır Uzunluğu: 50-75 karakter arası (İngilizce için 45-75, Türkçe için biraz daha uzun kabul edilir)
- Satır Yüksekliği: 1.5-1.8 arası line-height kullanın
- Font Boyutları: Gövde metni minimum 16px, mobilde 18px olmalı
- Hiyerarşi: H1 > H2 > H3 > P şeklinde net bir hiyerarşi oluşturun
🔘 Buton ve CTA Tasarımı
Mükemmel CTA Butonu Özellikleri
- Boyut: Masaüstünde min 48px, mobilde min 44px yükseklik
- Padding: 15-20px dikey, 30-40px yatay padding
- Border Radius: 4-8px arasında (tamamen düz veya çok yuvarlak değil)
- Metin: Eylem odaklı ("İndir", "Başla", "Kayıt Ol") ve kısa
- Renk: Sayfa paletinden ayrışan, dikkat çeken bir renk
- Hover Efekti: Renk değişimi, gölge artışı veya hafif büyüme
- Mikro-animasyon: Tıklamada ripple veya bounce efekti
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
- Thumb Zone: Önemli elementleri ekranın alt kısmına yerleştirin (başparmak erişim bölgesi)
- Gesture Navigation: Swipe, pinch-to-zoom gibi doğal hareketleri destekleyin
- Loading Speed: Mobilde 3 saniyenin üzerindeki yükleme %53 bounce rate'e yol açar
- Touch Targets: Tıklanabilir alanlar arasında minimum 8px boşluk bırakın
- Simplified Navigation: Hamburger menü veya bottom navigation kullanın
- Form Optimization: Otomatik doldurma, klavye tiplerine göre input type seçimi
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
- Tutarlılık: Tüm sayfalarda aynı tasarım dilini kullanın
- Geri Bildirim: Her kullanıcı eylemine anında yanıt verin (loading, success, error states)
- Hata Önleme: Kullanıcının hata yapmasını engelleyin, eğer yaparsa düzeltmesini kolaylaştırın
- Esneklik: Hem acemi hem de ileri seviye kullanıcılar için çözümler sunun
- 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