Bir web sitesini mouse ile kontrol edersiniz, ancak bir mobil uygulamaya fiziksel olarak "dokunursunuz". İşte bu yüzden mobil tasarımın hissi (Feel), görünümünden (Look) daha önemlidir. Kullanıcının yaptığı her harekete karşılık beynin beklediği o anlık fiziksel veya görsel tepkiye Mikro Etkileşim (Micro-Interaction) diyoruz.

Mikro Etkileşim Nerelerde Kullanılır?

1. Durum Geri Bildirimi (System Status)

Bir ödeme butonuna bastığınızda hiçbir şey olmazsa, paranın çekilip çekilmediğini bilemez ve panikle butona 3 kez daha basarsınız. Oysa butona basıldığında butonun içindeki yazının 0.3 saniyede zarifçe bir "Yükleniyor" ikonuna dönüşmesi (State Change), kullanıcıya "Seni anladım, şu an çalışıyorum" mesajı verir. Bu, kusursuz bir mikro etkileşimdir.

2. Skeleton Screens (İskelet Ekranlar)

Veriler sunucudan çekilirken boş beyaz bir sayfanın ortasına sıkıcı bir kum saati (Spinner) koymak yerine; içeriklerin geleceği kutuların yerini tutan ve hafifçe parlayıp sönen gri iskelet kutular (Skeleton Screen) tasarlanır. Bu illüzyon sayesinde beynimiz, uygulamanın olduğundan %30 daha hızlı yüklendiğini hisseder.

3. Haptic Feedback (Dokunsal Titreşim)

Görsel animasyonların ötesinde, kullanıcının parmağına verilen ufak titreşimler mobil deneyimin zirvesidir. Apple Taptic Engine veya Android Haptics kullanılarak; örneğin "Yanlış Şifre" girildiğinde ekranın sağa sola sallanmasıyla eşzamanlı olarak telefonun 2 kez sertçe titremesi, kullanıcının duruma anında adapte olmasını sağlar.

Lottie Animasyonları
Eskiden bir butona "Kalp atışı" veya "Konfeti" animasyonu eklemek için yazılımcılar yüzlerce satır kod yazar ve uygulamanın boyutunu şişirirlerdi. Airbnb'nin "Lottie" kütüphanesi sayesinde, After Effects'te tasarlanan bir animasyon saniyeler içinde JSON formatında uygulamaya aktarılıp, sıfır kod yazarak 60 FPS hızında çalıştırılabilmektedir.

Ölçüyü Kaçırmamak

Animasyonlar, yemeğin tuzu gibidir. Eğer sayfa her açıldığında ekranın 4 bir yanından menüler uçarak geliyorsa, kullanıcı "Bırakın da işimi yapayım" diyerek sinirlenir. Bir animasyonun süresi insan algısının alt sınırı olan 200ms ile 400ms arasında (Blink of an eye) olmalıdır. Daha uzun animasyonlar sistemi hantal gösterir.

Premium Bir Hissiyat Tasarlayalım

Uygulamanızı sıradanlıktan kurtaracak sıvı geçişler, Lottie entegrasyonları ve haptic feedback tasarımları için uzmanlarımızla tanışın.

UX Tasarımı İste