Aynı süre, neden farklı hareket hissi verir?

İki düğme aynı mesafeyi aynı sürede katetse bile farklı hissedebilir. Biri aniden başlayıp yavaşça durur; diğeri başta ağır, sonda hızlı hareket eder. Farkı yaratan yalnızca süre değil, değişimin zaman içindeki dağılımıdır.

Hareket tasarımında benim için önemli olan, animasyonun dikkat çekmesi değil, durum değişimini doğal hissettirmesi. Aynı süre içinde farklı hız dağılımları çok farklı bir his verebilir. Fakat her etkileşime dramatik bir giriş eklemeyi tercih etmem. Sık kullanılan bir düğmede kısa ve anlaşılır tepki daha değerli.

Temel fikir

CSS easing fonksiyonları animasyon veya geçiş sırasında değerin nasıl ilerleyeceğini tanımlar. linear sabit ilerlemeyi, ease-in ve ease-out farklı hızlanma davranışlarını temsil eder. Eğrinin kendisi gerçek bir kullanıcı araştırması sonucu veya performans grafiği değildir.

Bir örnek üzerinden

Bir panel açılışında yavaşlayan bitiş hedef konumu hissettirebilir. Fakat sık kullanılan küçük bir düğmede uzun ve gösterişli hareket işlemi geciktirebilir. Aynı mesafe ve süreyi koruyup sadece eğriyi değiştirerek karşılaştır; böylece hangi değişkenin hissi etkilediğini ayırt edersin.

Nereden başlamalı?

Hareketin amacı durum değişimini açıklamak olmalı. Azaltılmış hareket tercihini de hesaba kat. Güzel eğri, kullanıcıyı işlemin sonucunu görmek için bekleten uzun bir animasyonu tek başına haklı çıkarmaz.

Benim yaklaşımım

Bir panel açılışında başlangıcı ve bitişi farklı eğrilerle karşılaştırırdım. Diğer değişkenleri aynı tutmak, hangi hareketin daha uygun olduğunu görmeyi kolaylaştırır. Sonra hareket azaltma tercihinde aynı bilginin görünür kaldığını kontrol ederim. Benim için animasyon, işlevi desteklemeli; işlevin önüne geçmemeli.