Faz 11: UX Temelleri — Zorunlu Sayfalar ve Global Bileşenler

Neden Önemli?

Kullanıcı deneyimi (UX), web sitenizin ticari başarısını doğrudan belirler. Forrester Research'e göre iyi UX tasarımı, dönüşüm oranlarını %400'e kadar artırabilir. Her 1 dolarlık UX yatırımı, ortalama 100 dolarlık getiri sağlar.

Kullanıcıların %88'i kötü bir deneyimden sonra siteye geri dönmez. İlk izlenim her şeydir — yavaş yüklenen sayfalar, kafa karıştırıcı navigasyon, eksik hata sayfaları ve tutarsız form davranışları kullanıcıları rakiplerinize yönlendirir.

404 hata sayfası, arama fonksiyonu, breadcrumb navigasyonu ve loading state'ler gibi "sıkıcı" görünen bileşenler aslında kullanıcı yolculuğunun kritik temas noktalarıdır. Bu noktaların ihmal edilmesi, sitenin profesyonel algısını yok eder.

Kontrol Listesi

• 404 hata sayfası: Kullanıcı dostu, markayla uyumlu, ana sayfaya yönlendiren, popüler sayfaları gösteren ve site içi arama sunan özel 404 sayfası. "Sayfa bulunamadı" mesajı yetmez — kullanıcıyı kaybetmeyin.
• 500 hata sayfası: Sunucu hatası durumunda kullanıcıya bilgi veren, teknik detay göstermeyen, destek iletişim bilgisi sunan ve otomatik yeniden deneme önerisinde bulunan özel sayfa.
• Loading states ve skeleton'lar: Her asenkron veri yüklemesinde loading skeleton, shimmer efekti veya spinner gösterimi. Boş ekran asla gösterilmemeli — kullanıcı "sayfa çalışıyor" sinyali almalı.
• Breadcrumb navigasyonu: Tüm alt sayfalarda konum gösteren breadcrumb. SEO için JSON-LD BreadcrumbList şeması. Mobilde kısaltılmış gösterim (son 2-3 seviye).
• Site içi arama: Arama kutusu, otomatik tamamlama (autocomplete), arama önerileri, sonuçsuz durum yönetimi, arama analitiği (ne arıyorlar?) ve filtreleme seçenekleri.
• Responsive breakpoint'ler: Mobile-first yaklaşım, 5 breakpoint (sm, md, lg, xl, 2xl), her breakpoint için layout plan, touch target boyutu (minimum 44x44px), thumb zone optimizasyonu.
• Form validation: Inline validation (anlık geri bildirim), Türkçe hata mesajları, erişilebilir hata gösterimi (aria-invalid, aria-describedby), submit engelleme ve başarı geri bildirimi.
• Toast notifications: Başarı, hata, uyarı ve bilgi toast'ları. Otomatik kapanma süresi (5-8 saniye), manuel kapatma butonu, erişilebilirlik (aria-live). Birden fazla toast yönetimi (stack).
• Empty states: Veri yokken gösterilen anlamlı mesajlar — "Henüz blog yazınız yok" + aksiyon butonu ("İlk yazınızı oluşturun"). Boş tablo, boş liste ve boş dashboard için ayrı tasarımlar.
• Scroll behavior: Smooth scroll, back-to-top butonu (uzun sayfalarda), infinite scroll veya pagination tercihi, scroll position korunması (navigasyon sonrası).
• Dark mode uyumluluğu: Tüm bileşenlerin light ve dark mode'da doğru görünümü — gölgeler, kenarlıklar, hover state'ler ve disabled state'lerin her iki temada test edilmesi.

Teknik Gereksinimler

404 sayfası (Next.js):

// app/not-found.tsx export default function NotFound() { return ( <div className="flex flex-col items-center justify-center min-h-[60vh] text-center"> <h1 className="text-6xl font-bold text-primary">404</h1> <p className="mt-4 text-xl text-muted-foreground"> Aradığınız sayfa bulunamadı </p> <div className="mt-8 flex gap-4"> <a href="/" className="btn-primary">Ana Sayfaya Dön</a> <a href="/iletisim" className="btn-secondary">Destek Alın</a> </div> </div> ) }

Loading skeleton pattern:

// components/skeleton-card.tsx function SkeletonCard() { return ( <div className="rounded-lg border p-4 space-y-3"> <div className="h-4 w-3/4 bg-muted animate-pulse rounded" /> <div className="h-3 w-full bg-muted animate-pulse rounded" /> <div className="h-3 w-5/6 bg-muted animate-pulse rounded" /> <div className="flex gap-2 mt-4"> <div className="h-8 w-20 bg-muted animate-pulse rounded" /> <div className="h-8 w-20 bg-muted animate-pulse rounded" /> </div> </div> ) }

Form validation (Türkçe hata mesajları):

const validationMessages = { required: 'Bu alan zorunludur', email: 'Geçerli bir e-posta adresi girin', minLength: (min: number) => `En az ${min} karakter girilmelidir`, maxLength: (max: number) => `En fazla ${max} karakter girilebilir`, pattern: 'Geçerli bir değer girin', phone: 'Geçerli bir telefon numarası girin (05XX XXX XX XX)', };

Sık Yapılan Hatalar

1. Varsayılan 404 sayfası kullanmak: Next.js'in varsayılan hata sayfası profesyonel bir izlenim bırakmaz. Özel, markayla uyumlu hata sayfaları tasarlayın.
2. Loading state'i atlayıp boş sayfa göstermek: Veri yüklenirken beyaz ekran görmek, kullanıcıya "sayfa bozuldu" izlenimi verir. Her asenkron işlemde skeleton veya spinner gösterin.
3. Form hatalarını sadece submit'te göstermek: Kullanıcı 10 alanı doldurduktan sonra "3. alan hatalı" demek kötü UX'tir. Inline validation ile anlık geri bildirim verin.
4. Mobilde touch target'ı küçük bırakmak: 32px butonlar masaüstünde çalışır ama mobilde tıklanamaz. Minimum 44x44px touch target zorunludur (WCAG 2.5.8).
5. Toast'ları ekranın altına yerleştirmek: Mobilde klavye açıkken alt toast görünmez. Ekranın üstünde veya sağ üstte konumlandırın.

Profesyonel İpuçları

• 404 sayfanıza Google Analytics event'i ekleyin — hangi URL'lere geliniyor, nereden yönlendiriliyorlar? Bu veri, kırık link ve yönlendirme eksiklerini tespit etmenizi sağlar.
• Skeleton loading'i gerçek veri yapısına uygun tasarlayın — genel bir shimmer yerine, kart, tablo satırı ve form alanlarının iskeletlerini gösterin. Bu, "perceived performance"ı artırır.
• Arama analitiğini düzenli inceleyin — kullanıcılar ne arıyor ama bulamıyor? Bu, içerik stratejiniz ve navigasyon yapınız için altın değerinde bir veri kaynağıdır.
• Form completion rate'i ölçün — formun hangi alanında kullanıcılar terk ediyor? Bu veriye göre form akışını optimize edin, gereksiz alanları kaldırın.
• Responsive tasarımı gerçek cihazlarda test edin — Chrome DevTools simülasyonu yetersizdir. BrowserStack veya gerçek cihazlarla test edin.