UX'te Animasyon: Ne Zaman Bilgi Taşır, Ne Zaman Bekletir

Animasyon arayüzde iki iş yapar: bilgi taşır ya da bekletir. Aradaki fark efektin ne kadar zarif olduğunda değil, hareketin kullanıcının o an sorduğu bir soruya cevap verip vermediğinde. Ayrımı pratikte süresine ve neyi anlattığına bakarak yaparsınız.

Hareket bir soruya cevap veriyorsa kalır

Kullanıcının arayüzde sorduğu sorular sınırlı: tıklamam işledi mi, şimdi neredeyim, bu şey tıklanabilir mi, geldiğim yere nasıl dönerim. Animasyonun meşru işi bu sorulardan birine cevap vermek.

• Geri bildirim: butona basıldığında renk ya da gölge geçişi, isteğin alındığını söyler.
• Durum değişimi: kalem ikonunun onay ikonuna dönüşmesi, düzenleme modundan kayıt moduna geçildiğini gösterir.
• Yön ve hiyerarşi: detaya girerken içeri, geri dönerken dışarı doğru hareket, kullanıcıya nerede olduğunu hatırlatır.

Bu listenin dışında kalan her hareket dekorasyondur. Dekorasyon yasak değil, ama bedava da değil.

Süre bütçesi

Mikro geri bildirimlerde 100 ile 200 milisaniye arası çalışır; bu aralıkta hareket fark edilir ama beklenmez. Panel ve sayfa geçişlerinde 300 ms üstüne çıkmak arayüzü yavaş hissettirmeye başlar.

150 ms süren düz bir geçişi, 400 ms süren yaylı ve zıplamalı bir animasyondan daha güvenilir buluyorum: ikincisi ilk gösterimde etkileyici, onuncu tekrarda engel.

Asıl mesele bedelin birikmesi. Beş adımlık bir akışta her adıma 300 ms geçiş koyduğunuzda, işini bitiren kullanıcı bir buçuk saniyeyi sırf beklemekle geçirir. Tek seferde küçük bir sayı, aynı akıştan günde kırk kez geçen operasyon kullanıcısı için değil.

Sayfada kalma süresi yanılgısı

Animasyonun sayfada geçirilen süreyi artırdığı sık söylenir ve bu olumlu bir metrik gibi sunulur. Oysa animasyonu beklerken geçen saniye de aynı süreye yazılır. İlgiyle beklemeyi tek bir sayaç ölçüyorsa, o sayaç size arayüzün iyi olduğunu söyleyemez.

Etkileşimi gerçekten ölçmek istiyorsanız görev tamamlanma oranına ve tamamlanma süresine bakın. Geçiş sürelerini yarıya indirip ikisinin de düzeldiğini görüyorsanız cevabınızı almışsınız demektir.

Erişilebilirlik üç satırlık iş

Hareket bazı kullanıcılarda baş dönmesi ve bulantı yapar. İşletim sistemlerinin bunun için bir ayarı var, tarayıcıya da taşınıyor ve karşılığını yazmak birkaç satır tutuyor:

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

Kaba bir çözüm ve olduğu gibi kullanılabilir. Daha iyisi, anlam taşıyan geçişleri kısaltıp korumak, dekoratif olanları tamamen kapatmak. Hangisinin hangisi olduğunu ilk bölümde zaten ayırdınız.

Kötüye kullanım ve kapatma testi

Dikkat çekmek için titreyen ikon, iptal düğmesini geciktiren geçiş: bunlar karanlık desenlerin hareketli sürümü. Bilgi taşımıyorlar, kullanıcının kararını sıkıştırıyorlar.

Kontrolün kolay yolu, tüm animasyonları kapatıp arayüze yeniden bakmak. Ekran hâlâ anlaşılıyorsa animasyon doğru yerde duruyordur. Anlaşılmıyorsa bilgiyi hareketin içine gömmüşsünüz, orada kalmamalı.