Easing, süre ve bir arayüzün hissi

Fiziksel dünyada hiçbir şey bir anda hızlanıp bir anda durmaz. Kapı açılırken ivmelenir, fincan masaya yavaşlayarak konur. Ekranda bir öğe baştan sona aynı hızla ilerlediğinde beynimiz bunu mekanik bulur; nedenini söyleyemesek de bir şeylerin “ucuz” durduğunu hissederiz.

Arayüzde hareket süs değildir. Bir öğenin nereden geldiğini, nereye gittiğini ve neyin değiştiğini anlatır. Bunu iyi yapmanın iki aracı var: easing ve süre.

Easing nedir?

Easing, hareketin zaman içindeki hız değişimidir. Bir grafikte yatay eksen zamanı, dikey eksen ilerlemeyi gösterir. Düz bir çizgi sabit hız demektir; eğri ne kadar dikse o anda hareket o kadar hızlıdır.

CSS’te bu eğri cubic-bezier(x1, y1, x2, y2) ile iki kontrol noktası verilerek tanımlanır:

• Ease-out (hızlı başla, yavaş bitir): ekrana giren öğeler için. Kullanıcıya hemen tepki verir, yerine yumuşakça oturur.
• Ease-in (yavaş başla, hızlı bitir): ekrandan çıkan öğeler için. Kalkış yapar ve gözden kaybolur.
• Ease-in-out: ekranda A noktasından B noktasına taşınan öğeler için.
• Doğrusal (linear): yalnızca sürekli hareketlerde; ilerleme çubuğu, dönen yükleniyor ikonu, renk döngüsü.

Süre: kısa mı, uzun mu?

Süre için başlangıç noktası, insanın tepki algısıdır. Jakob Nielsen’in 1993’te tanımladığı üç sınır bugün de geçerliliğini koruyor.

Arayüz geçişlerinin çoğu bu yüzden 0,1 ile 1 saniye arasında yaşar. Hangi değerin seçileceğini ise hareketin kapladığı alan belirler: küçük bir öğe kısa bir mesafeyi hızlı geçer, büyük bir yüzeyin ekranı kaplaması daha uzun sürer. Bu siteyi tasarlarken kullandığımız süreler bu ilkeyi izliyor.

İkinci bir ilke daha var: çıkış, girişten kısadır. Kullanıcı bir menüyü kapattığında onun kaybolmasını izlemek istemez; asıl ilgilendiği, arkasındaki içeriktir. Aynı öğelerin açılış ve kapanış sürelerini yan yana koyunca fark netleşiyor.

İmza eğrisi

Bu sitedeki hareketlerin çoğunda aynı eğriyi kullanıyoruz: cubic-bezier(0.625, 0.05, 0, 1). Hareket bir an toparlanır, sonra kararlı ve hızlı bir şekilde ilerler ve uzun, sakin bir yavaşlamayla yerine oturur. Demoda “Miova” eğrisini seçip doğrusal referansla karşılaştırdığınızda bu karakteri görebilirsiniz.

Aynı eğriyi üst barın daralmasında, butonlarda, slider’larda, logonun animasyonunda ve bu yazıdaki grafiklerin açılışında kullanmak, siteye tek bir el değmiş gibi bir bütünlük verir. Kullanıcı eğrinin adını bilmez ama tutarlılığı hisseder.

Hareketi azaltma tercihi

Bazı kullanıcılar için ekrandaki büyük hareketler baş dönmesi ya da mide bulantısı demektir. İşletim sistemlerinin “hareketi azalt” ayarı tarayıcıya prefers-reduced-motion olarak ulaşır ve buna saygı göstermek gerekir: kayma, paralaks ve büyük ölçek değişimlerini kaldırın, gerekiyorsa yalnızca kısa bir opaklık geçişi bırakın. Bu yazıdaki grafikler ve sayaçlar da bu ayar açıksa animasyonsuz, doğrudan son hâlleriyle görünür.

Performans tarafını da unutmayın: animasyonları transform ve opacity ile yapın. width, height, top ya da left üzerinden yapılan animasyonlar her karede sayfa düzenini yeniden hesaplatır ve özellikle mobilde takılır.

Kısa bir kontrol listesi

• Giren öğeye ease-out, çıkan öğeye ease-in.
• Küçük öğe kısa, büyük yüzey uzun sürer.
• Kapanış, açılıştan kısa olur.
• Günde yüz kez görülen harekete daha az süre verin, gerekirse hiç vermeyin.
• Hareket bir şey anlatmıyorsa kaldırın.