Micro-interaction Nedir?
Micro-interaction, kullanıcının yaptığı bir aksiyona verilen küçük ama anlamlı görsel veya hareket tepkisi. Buton tıklandığında hafifçe küçülmesi, başarılı bir işlemde check ikonu animasyonu, pull-to-refresh sırasında dönen spinner. Bunların hepsi micro-interaction. Tek başlarına önemsiz gibi görünürler ama toplamda uygulamanın "hissi"ni belirlerler.
Neden Bu Kadar Etkili?
- Kullanıcıya aksiyonunun alındığını doğrular
- Bekleme süresini daha katlanılır kılar
- Uygulamaya kişilik katar
- Hata ve başarı durumlarını sezgisel şekilde iletir
- "Ucuz" bir yatırımla premium hissiyat yaratır
Lottie Animasyonlar
Lottie, After Effects'te tasarlanan animasyonları JSON formatında mobilde çalıştıran bir kütüphane. Airbnb tarafından geliştirildi ve 2026'da hala en yaygın animasyon formatı.
Avantajları
- Vektör tabanlı: her ekran boyutunda keskin
- JSON formatı: GIF'e kıyasla çok daha küçük dosya boyutu
- Programatik kontrol: hız, yön, belirli frame aralığı
- Platform bağımsız: iOS, Android, React Native, Web
| Senaryo | Ornek |
|---|---|
| Onboarding | Sayfa geçiş animasyonları |
| Empty state | Boş liste illüstrasyonu |
| Loading | Custom loading spinner |
| Başarı/Hata | Checkmark, X animasyonu |
Lottie animasyonları genelde hafiftir ama karmaşık composition'lar performansı düşürebilir. Animasyon dosyası 50KB'ı geçiyorsa gözden geçirin.
React Native Reanimated 4
Reanimated 4 (2025 sonu stabil) React Native'de performanslı animasyonun standart kütüphanesi. Animasyonlar UI thread'de çalışır, JS thread bloke olmaz, 60fps garanti altındadır.
Spring Animasyonları
Spring (yay) animasyonlar doğal hareket hissi verir. Sabit duration yerine fizik tabanlı parametreler kullanılır:
- damping: Sönümleme (düşük = daha fazla salınım)
- stiffness: Yay sertliği (yüksek = hızlı hareket)
- mass: Kütle (yüksek = daha yavaş tepki)
Spring animasyonlar timing animasyonlardan her zaman daha doğal hissedilir. Bottom sheet, card flip, list item ekleme/çıkarma gibi yerlerde spring tercih edin.
Layout Animations
- entering: FadeIn, SlideInRight, ZoomIn, BounceIn
- exiting: FadeOut, SlideOutLeft, ZoomOut
- layout: LinearTransition (liste sıralaması değişince otomatik animasyon)
iOS Animasyon Yaklaşımları
SwiftUI
- withAnimation {} bloğu ile basit kullanım
- .spring(), .easeInOut, .linear gibi hazır curve'ler
- matchedGeometryEffect ile shared element transition
- PhaseAnimator ile çoklu aşamalı animasyonlar (iOS 17+)
UIKit
- UIView.animate ile klasik animasyon
- UIViewPropertyAnimator ile interaktif animasyon
- 2026'da yeni projeler SwiftUI tercih etmeli
Android Compose Animasyonlar
Jetpack Compose'un animasyon API'ları oldukça zengin:
- animateXAsState: Tek bir değeri animate etmek (renk, boyut, pozisyon)
- AnimatedVisibility: Giriş/çıkış animasyonları (fadeIn, slideIn)
- AnimatedContent: İçerik değişiminde geçiş animasyonu
- Animatable: Düşük seviye kontrol, coroutine tabanlı
- InfiniteTransition: Sonsuz tekrarlayan animasyonlar (pulse, rotate)
Yaygın Micro-interaction Patternleri
Skeleton Loading ve Shimmer
Veri yüklenirken gerçek layout'un gri placeholder'larla gösterilmesi. Shimmer efekti (soldan sağa kayan parlak çizgi) yüklemenin aktif olduğunu hissettirir. Kullanıcı boş ekran yerine yakında dolacak bir yapı görür.
Buton Press Feedback
- Scale down (0.95-0.97 arası) + opacity azalması
- Haptic feedback ile birleştirilmeli
- Animasyon süresi 100-150ms olmalı
- Disabled state'te animasyon olmamalı
Pull-to-Refresh
- Custom animasyonlar ile markalaşma fırsatı
- Lottie ile branded refresh animasyonu
- Threshold değeri çok düşük olmasın (yanlışlıkla tetiklenir)
Success/Error State
- Başarı: Yeşil check animasyonu + hafif bounce
- Hata: Kırmızı X + shake animasyonu (sola-sağa titreme)
- Animasyon süresi 600-800ms (çok kısa olursa fark edilmez)
Performans Kriterleri
60fps hedefi her zaman birincil öncelik:
- JS thread'de ağır hesaplama yapma (Reanimated worklet kullan)
- Opacity ve transform animasyonları GPU hızlandırmalı
- Shadow animasyonundan kaçının (çok pahalı)
- Aynı anda 3-4'ten fazla animasyon çalıştırmayın
- Profiling: React Native'de Perf Monitor, iOS'ta Instruments, Android'de GPU Profiler
Tasarım Prensipleri
- Her animasyonun bir amacı olmalı (dekorasyon değil, iletişim)
- Süre: 200-500ms arası ideal (100ms altı fark edilmez, 1s üstü sıkıcı)
- Easing: Linear neredeyse hiç kullanmayın, ease-out çoğu durum için doğru seçim
- Tutarlılık: Benzer aksiyonlar benzer animasyon almalı
- Reduce Motion: iOS ve Android'in erişilebilirlik ayarını kontrol edin ve animasyonları basitleştirin veya kapatın
- Abartmayın: Her yere animasyon koymak uygulamayı yorucu hissettirir
Micro-interaction'lar uygulamanızın ruhudur. Kullanıcı fark etmese bile yokluğunu hisseder. Amacı olmayan animasyon eklemek yerine, her etkileşimi bir "geri bildirim anı" olarak düşünün.