Arayüz Animasyonlarında Fiziğin Payı ve Sınırı

Bir nesnenin ekranda aniden yer değiştirmesi kafa karıştırır. Aynı nesne kayarak gittiğinde kullanıcı nereden nereye gittiğini görür, aradaki ilişkiyi kurmak için düşünmek zorunda kalmaz. Animasyonun işi süslemek değil, bu bağı kurmaktır. Fizik kuralları burada işe yarıyor çünkü herkes onları çocukluktan beri biliyor, ama aynı kurallar sınırsız uygulandığında arayüz ağırlaşır.

Nesneler ışınlanmaz

İnsan, nesnelerin nasıl davrandığını okulda öğrenmez. Bir cisim dışarıdan kuvvet gelmeden hareket etmez. Üstü örtülünce yok olmaz. Başka bir cisme çarptığında onu iter. Arayüz bu üç beklentiye uyduğunda kullanıcı ekranı okumak için ayrıca çaba harcamaz.

Pratikteki karşılığı basit. Bir panel açılacaksa, açılmadan önce nerede durduğu görünsün: sağdan gelen menü sağ kenardan çıksın, ekranın ortasında belirmesin. Kapanırken de geldiği yere dönsün. Kullanıcı böylece menünün bir yerde durduğunu öğrenir ve her açışta onu yeniden aramaz.

Easing: hiçbir şey tam hızda başlamaz

Masada ittiğiniz kutu önce ivmelenir, sonra sürtünmeyle yavaşlar. Ekranda sabit hızlı geçiş bu yüzden mekanik durur; kullanıcı çoğu zaman nedenini adlandıramaz ama fark eder.

Üç eğri işin büyük kısmını görür. Ekrandan çıkan öğeler yavaş başlayıp hızlanır, ekrana giren öğeler hızlı girip yavaşlar, yer değiştiren öğeler ikisini birleştirir. Girişte yavaşlamanın sebebi kullanıcının ilgisinin öğenin duracağı yerde olması: hareket hızlı başlar, gözün yakalayacağı noktada durulur. Çıkışta ise tam tersi geçerli, çünkü artık kimse o öğeyi izlemiyor.

Hareketin sebebi görünmeli

Kullanıcı bir yere dokunur, bir şey olur. Animasyon bu iki olayı birbirine bağlar. Butona basınca altındaki alanın açılması, bir kartı sürükleyince komşularının aralanması, silinen satırın yerini kapatması. Hepsinde hareketin kaynağı ekranda görünüyor.

Tersi de var: tetikleyicisi olmayan hareket. Sayfa yüklenirken sırayla belirip yukarı kayan kartlar hiçbir kullanıcı eylemine cevap vermiyor, sadece içeriğin okunmasını geciktiriyor.

Material Design ne ekledi

Material Design hareketi görsel efekt olarak değil, anlam taşıyan bir katman olarak ele alır. Öğeler bir z ekseninde durur, gölgeler hangisinin üstte olduğunu söyler, bir kart açıldığında yeni bir ekran gelmez, o kart büyüyerek ekrana dönüşür.

Kılavuzun en işe yarar kısmı süre önerileri. Küçük bir alanın değişimi 100 ms civarında, ekran içindeki geçişler 200-300 ms bandında, tam ekran geçişler 400 ms'e kadar. Bu sayılar keyfi değil, gözün hareketi takip edip kaybetmediği aralığa oturuyor. (Kâğıt metaforunun kendisini, yani her şeyin kâğıt gibi katlanıp yığılmasını biraz abartılı buluyorum, ama süre tablosu tartışmasız iyi.)

Animasyonun faturası

Buraya kadar anlatılanların hepsi animasyon lehine. Sınırı da söylemek gerek: animasyon süresi, kullanıcının beklediği süredir.

300 ms'lik bir geçiş tek seferde kimseyi rahatsız etmez. Aynı geçiş günde elli kez tekrarlanan bir işlemin ortasındaysa, kullanıcı her gün on beş saniyesini ekranın kendini toparlamasını izleyerek harcıyor. Buradan çıkan kural, ne kadar sık tekrarlanıyorsa o kadar kısa olmasıdır. Uygulamanın ilk açılışındaki geçiş 400 ms olabilir; listeye satır eklerken kullanılan geçiş 150 ms'i aşmamalı.

Bir de hiç animasyon istemeyen kullanıcılar var. Vestibüler duyarlılığı olan kişilerde kayan ve ölçeklenen geçişler baş dönmesi yapabiliyor, işletim sistemlerindeki hareketi azalt ayarı da bunun için duruyor. Tarayıcı tarafında karşılığı hazır:

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

Bu beş satır, kullanıcının sistem ayarını okuyup bütün geçişleri kapatır. Üçüncü parti bir kütüphaneye, ayar ekranına, kullanıcıya sorulacak bir soruya gerek yok. Animasyon bittiğinde tetiklenen bir mantık kurduysanız orada bir adım daha lazım: geçiş süresi sıfıra yakın olsa da olay tetiklendiği için kod çalışmaya devam eder, ama süre sıfırlanırsa hiç tetiklenmez. Bu yüzden 0 değil 0.01ms yazılıyor.