Skip to main content

UI Tasarımında Yapılan Hatalar: Kullanıcı Arayüzü Tasarımı Yanlışları

UI tasarım hataları, görünüşte küçük görünseler de, web sitesinin başarısını ciddi şekilde etkilemektedir. Pek çok ajans ve freelancer, kullanıcı arayüzü tasarımı yaparken, estetiğe odaklanıp UX (deneyim) ve işlevselliği gözardı etmektedir.

Sonuç: Güzel görünümlü ama kullanılamaz siteler ortaya çıkıyor. Ziyaretçiler gidiyor, dönüşüm oranları düşüyor, yatırım geri dönmüyor.

Bu rehberde, UI tasarımında yapılan yaygın hataları, neden sorun oluşturdukları ve nasıl düzeltileceğini detaylı olarak öğreneceksiniz.

UI Tasarım Nedir? Neden Önemlidir?

UI (User Interface) tasarım, web sitesinin görsel ve interaktif öğeleridir:

  • Button'lar, linkler
  • Form alanları
  • Menüler, navigasyon
  • Renkler, tipografi
  • İkon'lar, görseller
  • Layout, spacing

UI tasarım hataları bu öğelerin kötü tasarlanması demektir.

UI Hataları vs UX Hataları

Hata Tipi UI Hatası UX Hatası
Örnek Button'un rengi kötü Button'un konumu yanlış
Görünüş Estetik sorun Deneyim sorun
Sonuç Profesyonel görünmüyor Ziyaretçi kütüphanesi
Ölçüm Görsel hoşlanma Conversion, bounce rate

İyi UI tasarım + kötü UX = başarısız site

Sık Yapılan UI Tasarım Hataları

Hata 1: Renkler Uyumsuz veya Çok Fazla

Sorun: Site 5+ renk kullanıyor veya renkler birbiriyle uyuşmuyor.

Şu siteler bu hatayı yapar:

  • Her başlık farklı renk
  • Arkaplan renginden button'u göremeyecek kadar yakın
  • Neon renkler (göz stresi)
  • Renk kombinasyonu psikolojik olmayan (kırmızı + yeşil)

Çözüm:

  1. Color Palette Belirle: 2-3 ana renk + 1-2 accent renk

    • Primary (marka rengi)
    • Secondary (desteğe)
    • Accent (CTA, highlight)
    • Neutral (gri tonları)

  2. Kontrast Kontrol: WCAG AA (4.5:1 ratio minimum)

    Tool: contrastchecker.com

  3. Renk Psikolojisi:

    • Mavi = güven, teknoloji
    • Yeşil = büyüme, doğa
    • Kırmızı = aciliyet, dikkat
    • Siyah = lüks, profesyonellik

İyi Örnek: "Sabil Luxury Real Estate, siyah, gümüş, beyaz kullanıyor = premium hissi"

Hata 2: Tipografi Kütüphaneli (Too Many Fonts)

Sorun: Site 3+ farklı font tipi kullanıyor.

Bu yapan siteler:

  • H1: Cormorant
  • H2: Playfair
  • Body: Georgia
  • CTA: Comic Sans (yanlış)

Sonuç: Amatör, disorganize hissettiriyor.

Çözüm:

  1. Maximum 2 font: Bir serif, bir sans-serif

    • Heading: Serif (Cormorant, Playfair, Garamond)
    • Body: Sans-serif (Inter, Montserrat, Roboto)

  2. Font Size Hierarchy:

    • H1: 48px
    • H2: 32px
    • H3: 24px
    • Body: 16px
    • Small: 14px

  3. Line Height (satır aralığı):

    • Body text: 1.5-1.6
    • Heading: 1.2-1.3

Hatası:

/* ❌ Yanlış */
body { font-size: 12px; line-height: 1.0; }

/* ✅ Doğru */
body { font-size: 16px; line-height: 1.6; }

Hata 3: Button Tasarımı Kötü

Sorun 1: Button'u Anlaşılamıyor

  • Text çok sayılı: "Tıkla ve Kaydolmaya Devam Et" (❌)
  • Text muğlak: "Gönder" (❌)
  • Doğru: "Şimdi Başla" (✅)

Sorun 2: Button'un Görünmüyor

  • Arkaplan renginden farkı yok
  • Çok küçük (< 44px)
  • Diğer öğelerle aynı renkle

Sorun 3: Hover State Yok Button'a fare geldiğinde, hiçbir şey değişmiyor. Ziyaretçi "bu tıklanabilir mi?" merak ediyor.

Çözüm:

/* Button Tasarım */
button {
    background-color: #FF6B35; /* Accent renk */
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    min-height: 48px;
}

button:hover {
    background-color: #E55A2B; /* Koyu hal */
    transform: translateY(-2px); /* Kaldırma efekti */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

Button Text Rehberi:

  • ✅ "Şimdi Başla"
  • ✅ "Ücretsiz Trial"
  • ✅ "Teklif Al"
  • ✅ "Kaydol"
  • ❌ "OK"
  • ❌ "Submit"
  • ❌ "Gönder"

Hata 4: Form Alanları Tasarımı

Sorun 1: Label Olmayan Form

<!-- ❌ Yanlış -->
<input type="email" placeholder="Email">

<!-- ✅ Doğru -->
<label for="email">Email Adresiniz</label>
<input type="email" id="email" placeholder="ornek@sirket.com">

Sorun 2: Placeholder = Label Placeholder kişi yazdıktan sonra kaybolduğu için, label görevini göremez.

Sorun 3: Form Alanı Çok Küçük Input height < 40px = mobil'de tıklaması zor.

Sorun 4: Inline Label (Form alanının içinde label)

<!-- ❌ Yanlış -->
<input placeholder="İsminiz" />

<!-- ✅ Doğru -->
<label>İsminiz</label>
<input id="name" />

Çözüm:

/* Form Tasarım */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

input, textarea, select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #DDD;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s;
}

input:focus {
    outline: none;
    border-color: #FF6B35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

input::placeholder {
    color: #AAA;
    font-style: italic;
}

Hata 5: Spacing (Boşluk) Uyumsuz

Sorun: Elementler arasında consistency olmayan boşluk.

/* ❌ Yanlış - Boşluklar rast gele */
.element1 { margin-bottom: 15px; }
.element2 { margin-bottom: 8px; }
.element3 { margin-bottom: 32px; }

/* ✅ Doğru - 8px base unit sistem */
/* 8px, 16px, 24px, 32px, 48px, 64px */
.element1 { margin-bottom: 16px; }
.element2 { margin-bottom: 16px; }
.element3 { margin-bottom: 32px; }

8px Grid System:

  • 8px: Minimal spacing
  • 16px: Default spacing
  • 24px: Medium spacing
  • 32px: Large spacing
  • 48px: XL spacing
  • 64px: XXL spacing (section break)

Hata 6: Hover ve Focus State'leri Eksik

Sorun: Link, button, input'lara fare geldiğinde veya fokus edildiğinde hiçbir şey değişmiyor.

Sonuç: Ziyaretçi "bu etkileşimli mi?" şüpheleniyor.

Çözüm:

/* Link Hover */
a {
    color: #0066CC;
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    text-decoration: underline;
    color: #0052A3;
}

a:focus {
    outline: 2px solid #0066CC;
    outline-offset: 2px;
}

/* Input Focus */
input:focus {
    outline: 2px solid #0066CC;
    outline-offset: 2px;
    border-color: #0066CC;
}

Hata 7: İkon Tasarımı Belirsiz

Sorun:

  • İkon'un ne anlama geldiği net değil
  • Style consistency yok (kimi filled, kimi outline)
  • Boyut değişken
  • Renk uyuşmuyor

Çözüm:

  1. İkon Seti Seç: Font Awesome, Feather, Material Icons
  2. Konsisten Stil: Hep outline veya hep filled
  3. Sabit Boyut: 24px, 32px, 48px (multiple of 8)
  4. Tooltip Ekle: İkon'un anlamı netse, tooltip ile açıkla
<button title="İndir" aria-label="İndir">
    <svg><!-- İcon SVG --></svg>
</button>

Hata 8: Mobile Responsive Değil / Touch-Unfriendly

Sorun:

  • Mobil'de button'lar çok küçük (< 44px)
  • Link'ler birbirine çok yakın
  • Menü mobil'de erişilemez
  • Text mobil'de okunmuyor

Çözüm:

/* Touch-friendly */
button, a[role="button"] {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 16px;
}

/* Mobile menu */
@media (max-width: 768px) {
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
    }
    
    .nav.open {
        display: flex;
    }
}

/* Font size mobil */
@media (max-width: 480px) {
    body { font-size: 16px; }
    h1 { font-size: 28px; }
}

Hata 9: Animasyon Çok Fazla veya Performans Sorun Yaratıyor

Sorun:

  • Her şey animate (baş döndürücü)
  • Auto-play video (işlemci yüküyor)
  • Gereksiz transitions
  • Lighthouse performance düşük

Çözüm:

  1. Animation Kullanımında Dikkat:

    • Sadece important interactions animate et
    • 0.3-0.5s duration (çok hızlı değil, çok yavaş değil)
    • Ease-in-out function

  2. Performance Optimization:

    /* ❌ Pahalı - reflow trigger */
transition: all 0.3s;

/* ✅ Verimli - GPU accelerated */
transition: transform 0.3s, opacity 0.3s;

  3. Video Yönetimi:

    <!-- ❌ Auto-play = heavy -->
<video autoplay><source src="video.mp4"></video>

<!-- ✅ User-initiated -->
<button onclick="playVideo()">Oyna</button>

Hata 10: Contrast Problemi (Erişilebilirlik)

Sorun: Yazı rengi arkaplanla yeterli kontrasta sahip değil.

❌ #999 yazı + #CCC arkaplan = Okunmuyor
✅ #333 yazı + #FFF arkaplan = Okunur

WCAG Standartları:

  • Normal text: 4.5:1 ratio minimum
  • Large text (18px+): 3:1 ratio minimum

Kontrol Tool:

  • WebAIM: webaim.org/resources/contrastchecker
  • Contrast Ratio: contrastchecker.com

UI Tasarım Best Practices Checklist

Renk

  • [ ] 2-3 primary renk + 1-2 accent
  • [ ] WCAG AA contrast (4.5:1) min
  • [ ] Renk psikolojisi marka'ya uygun
  • [ ] Color blindness test yapıldı mı?

Tipografi

  • [ ] Max 2 font tipi
  • [ ] Font size hierarchy clear (48, 32, 24, 16, 14)
  • [ ] Line height 1.5-1.6 (body)
  • [ ] Responsive font (mobil'de okunaklı)

Button & Interactive

  • [ ] Button min 44x44px
  • [ ] Hover state clear
  • [ ] Focus state visible
  • [ ] Button text action-oriented
  • [ ] Disabled state obvious

Form

  • [ ] Label visible (placeholder ≠ label)
  • [ ] Input min 40px height
  • [ ] Validation message clear
  • [ ] Error state obvious
  • [ ] Success state obvious

Spacing & Layout

  • [ ] 8px grid system kullanılmış
  • [ ] Whitespace yeterli
  • [ ] Alignment consistent
  • [ ] Padding/margin proportional

Icons & Images

  • [ ] Icons consistent style
  • [ ] Icons sized consistent (24, 32, 48)
  • [ ] Images responsive
  • [ ] Alt text for images
  • [ ] Image file size optimized

Mobile & Responsive

  • [ ] Mobile menu functional
  • [ ] Touch targets 48x48px+
  • [ ] Font size 16px+ mobil'de
  • [ ] No horizontal scroll
  • [ ] Viewport meta tag

Accessibility

  • [ ] Contrast 4.5:1
  • [ ] Keyboard navigation works
  • [ ] Screen reader compatible
  • [ ] ARIA labels where needed
  • [ ] Focus indicators visible

Populer UI Design Tools

  • Figma: Kolaboratif, prototyping
  • Adobe XD: Enterprise, robust
  • Sketch: Mac only, component system
  • Penpot: Open source, Figma alternative

Sonuç: UI Tasarım Hataları Maliyeti

Kötü UI tasarım hataları:

  • Bounce rate %50+ artabilir
  • Conversion %30-50 düşebilir
  • User satisfaction %40 azalabilir
  • Marka kredibilitesi zarar görebilir
  • Accessibility lawsuit riski (ADA)

Örneğin:

  • 10.000 aylık ziyaretçi
  • 2% conversion = 200 lead
  • Kötü UI ile 1% = 100 lead
  • Kayıp: 100 lead × 5.000 TL = 500.000 TL/ay = 6 milyon TL/yıl

UI tasarım "nice-to-have" değil, business-critical'dir.

UI tasarımını doğru yapmak istiyorsanız, bize ulaşabilirsiniz.

merhaba@kreativa.com.tr
LinkedIn
İnstagram
İletişim
Sıkça Sorulan Sorular
Gizlilik Sözleşmesi