Arayüz Animasyonlarında Dikkat, Anlatım ve Süre Kararları
Hareket, arayüzde en pahalı öğedir. Kullanıcının bakışını kendine çeker ve bunu izin istemeden yapar, bu yüzden animasyon kararı estetik bir karar değil, dikkat bütçesiyle ilgili bir karardır. Bir geçiş eklemeden önce üç sorunun cevabı belli olmalı: ne kadar sürecek, bir oturumda kaç kez görülecek, hareketten fiziksel olarak rahatsız olan kullanıcıda ne yapacak.
Periferik hareket bir uyarıdır, dekorasyon değil
Göz merkezde detay görür, kenarda hareket görür. Retinanın çevresindeki hücreler renk ve keskinlik konusunda zayıftır, ama konum değişimine çok hızlı tepki verir. Arayüzdeki pratik sonucu şu: ekranın kenarında beliren bir öğe, kullanıcı ona bakmıyorken de fark edilir.
Köşeden kayarak gelen canlı destek balonu tam bu yüzden işe yarar. Aynı mekanizma tersine de çalışır. Dönen bir ikon ya da nefes alıp veren bir buton, kullanıcı formu doldururken arka planda çalışmaya devam ederse okumayı böler. Kenardaki hareket "buraya bak" demektir; bunu sürekli söylerse kullanıcı ya bakmayı bırakır ya da sekmeyi kapatır.
Geçiş, iki durum arasındaki ilişkiyi anlatır
Ekranda bir şey değiştiğinde kullanıcı iki soruyu birlikte sorar: bu aynı öğe mi yoksa yenisi mi, ve neden şimdi değişti? Geçişin işi bu iki sorunun cevabını taşımaktır. Adres formunda "fatura adresim farklı" kutusu işaretlendiğinde yeni alanlar bir anda belirirse sayfa sıçramış gibi görünür; aynı alanlar yükseklik açılarak gelirse kullanıcı hem kendi tıklamasının sonucunu hem o alanların nereye bağlı olduğunu görür.
Silme işlemi daha keskin bir örnek. Listeden bir satır kaldırıldığında alttaki satırlar animasyonsuz yukarı zıplarsa hangi satırın gittiği gözden kaçar ve kullanıcı yanlış kaydı sildiğini sanar. 200 milisaniyelik bir kapanma bu belirsizliği kaldırır, çünkü bilgiyi metin değil hareketin kendisi verir.
0,1 saniye animasyonun süresi değil, cevabın gecikmesi
Yaygın tavsiye, kullanıcının aksiyonundan sonra sonucun 0,1 saniye içinde görünmesi. Doğru bir eşik, ama sık yanlış yere uygulanıyor. Nielsen'in yanıt süresi sınırlarında 100 milisaniye, sistemin anlık algılandığı üst değerdir; 1 saniye ise düşünce akışının kopmadığı sınır. İkisi de animasyonun ne kadar süreceğini söylemez, sistemin ne kadar sessiz kalabileceğini söyler.
Aradaki fark önemli, çünkü 100 milisaniyede tamamlanan bir hareket hareket olarak okunmaz. Ara kareler takip edilemez, sonuç kare atlaması gibi görünür ve animasyonun anlatacağı ilişki kaybolur. İşleyen kural iki parçalı: tıklamanın ilk görsel karşılığı 100 milisaniyenin altında başlar, hareket 150 ile 300 milisaniye arasında tamamlanır. Bunlar çelişmez, biri gecikmeyi biri süreyi ölçer.
Süreyi tek seferde değil, oturum boyunca çarpın
Animasyon süresi tasarım dosyasında tek bir geçiş olarak değerlendirilir; kullanıcıda ise tekrar sayısıyla çarpılıp birikir. Menü açılışına 250 milisaniye verdiğinizi düşünün. Yoğun bir kullanıcı bunu bir oturumda kırk kez açıyorsa, on saniyesi menünün açılmasını beklemekle geçiyor demektir.
Bu çarpma işlemi hangi animasyonun kısalacağını da söyler. Nadir görülen, tek yönlü hareketler rahatça 400 milisaniye sürebilir: ilk kayıt tamamlandığında çıkan onay ekranı gibi. Günde yüzlerce kez tekrarlanan geçişlerde, açılır menüde, sekme değişiminde, tooltip'te 150 milisaniyenin üstüne çıkmanın bir karşılığı yok. Sık tekrarlanan geçişi yavaşlatmak, bir arayüzü ağır hissettirmenin en kolay yolu.
Hareketi kapatma yolu bırakın
Animasyon yazılarının çoğunun atladığı yer burası. Vestibüler bozukluğu olan kullanıcılarda geniş ölçekli parallax, zoom ve kaydırma hareketleri baş dönmesi ve mide bulantısı yapar. Bu bir zevk tercihi değil, fizyolojik bir tepki, dolayısıyla "animasyonu sevmeyen çıkar" diye geçiştirilemez. İşletim sistemleri bunun için bir ayar tutuyor, tarayıcı da onu CSS'e taşıyor:
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }}Ek kütüphane gerekmiyor, sorgunun tam tanımı MDN'de duruyor (hazır temaların çoğunda hâlâ bulunmaması tuhaf). Süreleri topluca sıfırlamak yerine hareketi opaklık geçişine indirmek daha iyi sonuç verir: kayma ve ölçek değişimi kalkar, durumun değiştiği bilgisi ekranda kalır.