Micro-interactions Tasarımı: Küçük Detaylar, Büyük Farklar

Seviye: Orta
Kategori: UX Design
Son güncelleme: Ocak 2025

---

Giriş

Facebook'ta like butonuna tıkladığında kalp animasyonu. iPhone'da sessize alırken hafif titreşim. Gmail'de email gönderince "Gönderildi" mesajı ve geri alma seçeneği.

Bunların hepsi micro-interaction.

Küçük, fark edilmesi zor detaylar. Ama olmadığında bir şeylerin eksik olduğunu hissedersin. Buton tıkladın ama hiçbir şey olmadı mı? Gerçekten tıklandı mı, bilmiyorsun. Form gönderdin ama feedback yok mu? Tekrar mı denemeliyim?

Micro-interaction'lar bu boşlukları doldurur. Kullanıcıya "evet, seni duydum" der.

Bu yazıda micro-interaction'ların ne olduğunu, nasıl tasarlanacağını ve iyi örneklerini öğreneceksin.

---

Micro-interaction Nedir?

Terim Dan Saffer'ın 2013'teki "Microinteractions" kitabından popülerleşti.

Micro-interaction örnekleri:

• Like/favorite butonu
• Toggle switch
• Pull-to-refresh
• Password strength indicator
• Form validation feedback
• Loading spinner
• Hover state
• Swipe to delete

---

Neden Micro-interaction?

1. Geri bildirim sağlar

Kullanıcı aksiyon aldı, sistem ne yaptı? Micro-interaction cevap verir.

2. Durumu gösterir

Yükleniyor mu, tamamlandı mı, hata mı? Görsel ipucu verir.

3. Yönlendirir

Bir sonraki adımı gösterir, dikkat çeker.

4. Hataları önler

Yanlış yapılmadan önce uyarır (password strength gibi).

5. Karakter katar

Marka kişiliğini yansıtır, deneyimi keyifli kılar.

6. Algılanan hızı artırır

Güzel loading animasyonu, beklemeyi daha az sıkıcı yapar.

---

Micro-interaction'ın Dört Bileşeni

Dan Saffer'ın framework'ü:

1. Trigger (Tetikleyici)

Micro-interaction'ı başlatan şey.

Kullanıcı tetikleyicisi:

• Tıklama/dokunma
• Hover
• Scroll
• Swipe
• Ses komutu
• Gesture

Sistem tetikleyicisi:

• Zaman (alarm)
• Konum (yaklaştığında)
• Data değişimi (yeni mesaj)
• Hata oluşması

2. Rules (Kurallar)

Tetikleyici aktive olunca ne olacak?

• Ne değişecek?
• Sınırlar ne?
• Sıralama nasıl?
• Süre ne kadar?

3. Feedback (Geri Bildirim)

Kullanıcının kuralları anlaması için görsel/işitsel yanıt.

Feedback türleri:

• Görsel (renk, animasyon, ikon değişimi)
• İşitsel (ses efekti)
• Dokunsal (titreşim)

4. Loops & Modes (Döngüler ve Modlar)

Micro-interaction'ın meta-kuralları:

Loops:

• İlk kullanımda farklı mı?
• Tekrarlarda değişiyor mu?
• Süresi doluyor mu?

Modes:

• Farklı durumlarda farklı davranış
• Gece/gündüz modu
• Acemi/uzman modu

---

Yaygın Micro-interaction Türleri

Button Feedback

Buton tıklandığında görsel yanıt.

Beklenen davranışlar:

• Hover: Hafif renk değişimi
• Active/pressed: Bastırılma efekti
• Focus: Outline/glow
• Loading: Spinner veya progress
• Success: Renk değişimi, ikon, checkmark

Toggle/Switch

On/off durumu değiştirme.

İyi toggle özellikleri:

• Mevcut durumu net gösterir
• Geçiş animasyonu akıcı (200-300ms)
• Renk + pozisyon ile durum belirtir
• Tıklama alanı yeterli büyük

Form Validation

Input doğrulama feedback'i.

Zamanlama seçenekleri:

• On submit: Form gönderilince
• On blur: Alandan çıkınca
• Real-time: Yazarken (dikkatli kullan)

Feedback elementleri:

• Border rengi (kırmızı/yeşil)
• İkon (✓ veya ✕)
• Hata mesajı
• Helper text

Loading States

Bekleme süresini gösterme.

Türler:

• Spinner: Belirsiz süre
• Progress bar: Belirli süre
• Skeleton: İçerik önizlemesi
• Percentage: Yüzde gösterimi

Pull-to-Refresh

Aşağı çekince yenileme.

Aşamalar:

1. Pull başlangıç: İkon görünür
2. Pull threshold: "Bırak" mesajı
3. Release: Loading animasyonu
4. Complete: İçerik güncellenir

Swipe Actions

Kaydırarak aksiyon alma.

Örnekler:

• Swipe to delete (mail, todo)
• Swipe to archive
• Swipe to reveal options
• Swipe to navigate (onboarding)

Toast/Snackbar

Geçici bildirim mesajı.

İyi toast özellikleri:

• Otomatik kaybolur (3-5 saniye)
• Manuel kapatılabilir
• Aksiyon içerebilir (Geri al)
• Ekranı engellemez

---

Animasyon Prensipleri

Timing (Zamanlama)

[TABLE] | Süre | Kullanım | |------|----------| | 100-150ms | Hover, active state | | 200-300ms | Toggle, checkbox | | 300-400ms | Modal açılış | | 400-500ms | Sayfa geçişi | | 500ms+ | Dikkatli kullan | [/TABLE]

Easing

Animasyonun hız eğrisi.

Yaygın easing'ler:

• ease-out: Hızlı başla, yavaş bitir (önerilen)
• ease-in: Yavaş başla, hızlı bitir (çıkışlar için)
• ease-in-out: Yavaş başla, yavaş bitir (döngüler için)
• linear: Sabit hız (genellikle kaçın)

[COMPARISON] ❌ Linear: Robotik, doğal değil ✅ ease-out: Doğal, responsive hisseder [/COMPARISON]

12 Disney Prensibi (UX'e Uyarlanmış)

1. Squash & Stretch: Element büyür/küçülür
2. Anticipation: Hareketten önce hazırlık
3. Staging: Dikkat yönlendirme
4. Follow Through: Hareket sonrası momentum
5. Slow In/Out: Easing kullanımı
6. Arcs: Doğrusal değil, eğrisel hareket
7. Secondary Action: Ana hareketle destekleyici
8. Timing: Süre ve hız
9. Exaggeration: Abartı (dikkatli)
10. Solid Drawing: Tutarlı görsel
11. Appeal: Çekicilik

---

İyi Örnekler

Facebook Like

• Trigger: Tıklama
• Feedback: Kalp animasyonu, renk değişimi
• Karakter: Eğlenceli, keyifli

Slack Mesaj Gönderme

• Trigger: Enter veya tıklama
• Feedback: Mesaj yukarı kayar, timestamp görünür
• Durum: Gönderiliyor → Gönderildi

iPhone Silent Mode

• Trigger: Fiziksel switch
• Feedback: Titreşim + görsel banner
• Multimodal: Dokunsal + görsel

Gmail Geri Al

• Trigger: Email gönder
• Feedback: "Gönderildi" toast + "Geri al" butonu
• Loop: 5 saniye içinde geri alınabilir

Stripe Ödeme Formu

• Real-time validation
• Kart tipi otomatik algılama
• Smooth error feedback
• Success animasyonu

---

Performans Dikkat Noktaları

GPU-Friendly Özellikler

Sadece şu özellikleri animasyonla:

• transform (translate, scale, rotate)
• opacity

Kaçınılması gerekenler:

• width, height (layout tetikler)
• top, left (layout tetikler)
• box-shadow (pahalı)

60fps Hedefi

Akıcı animasyon için 60fps gerekli. Her frame 16ms.

prefers-reduced-motion

Animasyon hassasiyeti olan kullanıcılar için:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

---

Sık Yapılan Hatalar

1. Fazla animasyon

[COMPARISON] ❌ Her element animasyonlu, göz yorucu ✅ Önemli aksiyonlarda, ölçülü animasyon [/COMPARISON]

2. Çok yavaş animasyon

500ms+ animasyonlar sabırsızlık yaratır. Hızlı olsun.

3. Tutarsız timing

Bir yerde 200ms, başka yerde 600ms. Tutarlı ol.

4. Feedback eksikliği

Buton tıklandı ama hiçbir şey olmadı. Her aksiyona yanıt ver.

5. Erişilebilirliği unutmak

Animasyon hassasiyeti olanları düşün. reduced-motion desteği ekle.

6. Amaçsız animasyon

"Cool görünüyor" yetmez. Her animasyonun amacı olmalı.

---

Tasarım Araçları

[TABLE] | Araç | Özellik | |------|---------| | Figma | Smart Animate, prototype | | Principle | Detaylı animasyon | | ProtoPie | Sensör ve logic desteği | | After Effects | Export için Lottie | | Framer | Kod + tasarım | [/TABLE]

Handoff için

• Lottie (JSON animasyon)
• Protopie (spec export)
• Video/GIF referans

---

---

---

İlgili İçerikler

Önceki: Accessibility Temelleri

Sonraki: UX Writing Temelleri (yakında)

İlgili konular:

• Prototype Nedir?
• UI Animasyon Prensipleri (yakında)
• Motion Design Temelleri (yakında)

İlgili Roadmap: UI Designer Roadmap → Interaction Design

---

Kaynaklar

Derinleşmek istersen:

• Microinteractions - Dan Saffer (Kitap, temel kaynak)
• The Role of Animation in UX - NNGroup (İngilizce, 8 dk)
• Material Motion - Google (İngilizce, motion ilkeleri)
• UI Animation Newsletter (İngilizce, haftalık ilham)