Geçen sonbahar bir fintech müşterimizin mobil uygulamasında para transferi akışını yeniden tasarladık. Fonksiyonel olarak hiçbir şey değişmedi — aynı adımlar, aynı API, aynı süre. Değişen tek şey şuydu: "Gönder" butonuna basıldığında ekran donmak yerine buton önce hafifçe küçülüyor, ardından bir ilerleme halkasına dönüşüyor ve işlem tamamlanınca kısa bir onay animasyonuyla yeşile dönüyordu. Toplam 600 milisaniyelik bir koreografi. Sonraki ay destek hattına gelen "param gitti mi, gitmedi mi?" çağrıları yüzde 40 azaldı. Kod tarafında iki günlük iş; çağrı merkezi maliyetinde kalıcı düşüş.
Mikro etkileşim dediğimiz şey tam olarak bu: ürünün büyük resmini değiştirmeyen ama kullanıcının o anki sorusuna — "dokundum mu?", "çalışıyor mu?", "bitti mi?" — anında cevap veren küçük tasarım anları.
Kullanıcı animasyon istemez, cevap ister
Mikro etkileşim konuşmaları genelde yanlış yerden başlıyor: "Uygulamaya biraz hareket katalım." Hareket katmak amaç değildir; hatta amaçsız hareket, düpedüz gürültüdür. İyi mikro etkileşimin arkasında her zaman kullanıcının zihnindeki bir soru vardır ve etkileşim o soruyu kelimesiz cevaplar.
Transfer butonundaki animasyonu tekrar düşünün. Küçülme, "dokunuşunu aldım" diyor. İlerleme halkası, "çalışıyorum, tekrar basma" diyor. Yeşil onay, "bitti, içiniz rahat olsun" diyor. Üç cevap, sıfır kelime. Aynı bilgiyi metinle vermeye kalksanız kullanıcı okumaz; modal ile verseniz akışı kesersiniz. Mikro etkileşim, arayüzün beden dilidir — ve beden dili olmayan arayüz, yüzü olmayan bir muhatapla konuşmak gibi hissettirir.
Bu çerçeveyi kurunca "nereye animasyon koyalım" sorusu da kendiliğinden çözülüyor: kullanıcının belirsizlik yaşadığı her an bir adaydır, gerisi değildir.
300 milisaniyenin altı his, üstü bekleme
Süre konusunda yıllar içinde netleşen kuralımız şu: geri bildirim animasyonları 200-400 milisaniye bandında yaşamalı. Bunun altı algılanmaz, üstü ise kullanıcıyı bekletmeye başlar. Bir müşterimizin tasarım ajansından gelen ilk taslakta sepete ekleme animasyonu 1,2 saniyeydi — ürün görseli zarif bir yay çizerek sepet ikonuna uçuyordu. Vitrin videosunda büyüleyiciydi. Ama günde yirmi ürün ekleyen gerçek bir kullanıcı için bu, günde 24 saniye zorunlu seyir demekti. Testte kullanıcıların animasyon bitmeden ikinci ürüne dokunmaya çalıştığını, dokunuşların yutulduğunu gördük. Süreyi 350 milisaniyeye indirip dokunuşları animasyon sırasında da kabul ettiğimizde şikâyet bitti.
Tek cümlelik kural: mikro etkileşim kullanıcıdan hızlı olmalı, kullanıcıyı asla bekletmemeli.
Easing eğrisi de süre kadar konuşulmayı hak ediyor. Doğrusal bir hareket, gözün beklediği fizik kurallarına uymadığı için ucuz ve mekanik hissettirir; gerçek dünyada hiçbir nesne sabit hızla harekete başlayıp aniden durmaz. Hızlanarak çıkan, yavaşlayarak yerine oturan bir eleman aynı sürede çok daha "doğal" algılanıyor. Bunu müşteriye anlatmanın en kısa yolu, aynı animasyonu iki eğriyle yan yana göstermek; farkı herkes hissediyor, kimse adlandıramıyor. Zaten mikro etkileşim tasarımının tanımı da bir bakıma bu: herkesin hissedip kimsenin adlandıramadığı şeyleri bilinçli tasarlamak.
Bir de tekrar faktörü var. Kullanıcının günde bir kez gördüğü onboarding animasyonu cömert olabilir; günde elli kez gördüğü liste geçişi neredeyse görünmez olmalı. Tasarım incelemelerinde artık her animasyon önerisinin yanına "günlük görülme sıklığı" yazdırıyoruz. Bu tek sütun, kaç tane gösterişli fikri daha eskiz aşamasında emekliye ayırdı, sayamam.
Hata anı, mikro etkileşimin asıl sınavı
Mutlu yol animasyonları kolay kısım. Mikro etkileşimlerin gerçek değeri işler ters gittiğinde ortaya çıkıyor. Yanlış şifre girildiğinde alanın kısa bir kafa sallama hareketiyle titremesi (fiziksel dünyadaki "hayır" jestinin ekrana çevirisi), formda hatalı alana otomatik kaydırma ve odaklanma, bağlantı koptuğunda üstten süzülen ve bağlantı gelince kendini kapatan ince bir şerit... Bunların hiçbiri hata mesajının yerine geçmiyor; mesajın fark edilmesini ve doğru yere bakılmasını sağlıyor.
Araç takip panelimizde yaşadığımız bir örnek anlatayım. Kullanıcılar rapor filtresini değiştirip "sonuç yok" ekranı gördüğünde, bunun bir hata mı yoksa gerçekten boş sonuç mu olduğunu ayırt edemiyor ve sayfayı yeniliyordu. Çözüm bir animasyon bile sayılmaz: filtre değiştiğinde tablo içeriği 150 milisaniyelik bir soluklaşma-belirme geçişiyle güncellenir oldu. O minicik geçiş, "sorgu çalıştı ve cevap bu" bilgisini taşıyordu. Sayfa yenileme oranı o ekranda üçte bire indi. Bazen mikro etkileşimin işi yeni bilgi vermek değil, değişimin gerçekleştiğini görünür kılmak.
Tasarımcının hayali, geliştiricinin frame bütçesi
Mikro etkileşimlerin ekip içinde iki düşmanı var: onları "cila" sanıp sprint sonuna atan planlama alışkanlığı ve performans maliyetini hesaba katmayan tasarım teslimatları. İkisine de aynı çözümü uyguluyoruz: mikro etkileşimler bizde component kütüphanesinin parçası. Buton, form alanı, liste, bildirim — her bileşen dokunma, yükleme, hata ve başarı durumlarıyla birlikte, süreleri ve easing eğrileri tanımlanmış olarak yaşıyor. Yeni ekran yapan geliştirici animasyon "eklemiyor"; animasyonlu bileşeni kullanıyor. Böylece ürün genelinde tutarlılık da bedavaya geliyor — kullanıcı, uygulamanın her köşesinde aynı dilin konuşulduğunu hissediyor.
Performans tarafında ise kırmızı çizgimiz net: hiçbir mikro etkileşim ana thread'de layout tetiklememeli, düşük segment cihazda 60 fps'nin altına düşen animasyon ya sadeleşir ya silinir. Takılan bir onay animasyonu, olmayan onay animasyonundan kötüdür; güven vermek için koyduğunuz şey güvensizlik üretir.
Ölçüm konusunda da fintech vakasından öğrendiğimiz bir pratik var: mikro etkileşim değişikliklerini mümkün olduğunca tek başına yayınlamak. Aynı sürümde hem akışı hem animasyonları değiştirirseniz, destek çağrılarındaki düşüşün hangisinden geldiğini asla bilemezsiniz. Transfer butonu değişikliği bilinçli olarak yalnız gitti; yüzde 40'lık düşüşü gönül rahatlığıyla o 600 milisaniyeye yazabilmemizin sebebi bu. Küçük dokunuşların etkisini kanıtlayamazsanız, bir sonraki bütçe toplantısında ilk kesilen kalem yine onlar oluyor.
(Erişilebilirlik notu: işletim sisteminin "hareketi azalt" tercihine saygı duymayı unutmayın. Vestibüler rahatsızlığı olan kullanıcılar için o zarif geçişler kelimenin tam anlamıyla baş dönmesi demek. Bizde bu tercih açıkken animasyonlar yumuşak soluklaşmalara iniyor.)
Ses ve titreşim de bu ailenin üyeleri, gözden kaçmasınlar. Fintech uygulamasındaki onay animasyonuna eşlik eden tek ve kısa bir titreşim darbesi, testlerde kullanıcıların "işlem gerçekleşti" güvenini görsel geri bildirimin tek başına verdiğinden daha yukarı taşıdı — parmak, gözden önce ikna oluyor. Ama dozu kaçırmayın; her dokunuşta titreyen uygulama, cebinizde sürekli konuşan biri kadar yorucu.
Transfer butonu vakasının bana hatırlattığı şeyle bitireyim: kullanıcılar hiçbir zaman "mikro etkileşimleriniz ne güzel" demez. "Bu uygulama bir tuhaf, güven vermiyor" ya da "bilmiyorum, bu daha... sağlam hissettiriyor" derler. O "sağlam his", yüzlerce küçük cevabın toplamıdır. Ürününüzün beden diline dışarıdan bir göz gerekiyorsa konuşalım; bir günlük bir arayüz turunda, kullanıcının cevapsız kalan sorularını listelemek çoğu zaman mümkün.