Hareket ve Mikro Etkileşimler: Animasyon Ne Zaman Yardım Eder, Ne Zaman Zarar?

Animasyonun Ya Bir İşi Vardır Ya da Orada İşi Yoktur

Her animasyon için faydalı test basittir: kullanıcı sonrasında, öncesinde anlamadığı neyi anlıyor? Cevap yoksa hareket süstür ve bir arayüzdeki süs, her ziyaretçinin her ziyarette ödediği bir maliyettir.

Bu, durağan sayfa savunusu değildir. Anlam taşıyan hareket savunusudur ve bu da oldukça kısa bir işler listesine karşılık gelir.

Animasyonun Meşru Olarak Yaptığı Dört Şey

Birincisi, bir şeyin nereden geldiğini göstermektir. Bastığınız butondan açılan bir panel, ikisinin bağlantılı olduğunu ve kapattığınızda nereye gideceğini söyler. Aynı panelin anında belirmesi ise bunu sizin çıkarmanızı gerektirir.

İkincisi, eylemi onaylamaktır. Basıldığında tepki veren bir buton, insanların tekrar basmasına yol açan tereddüt anını ortadan kaldırır. Üçüncüsü ilerlemeyi iletmektir; iki saniyelik bir beklemeyi, geri bildirimsiz bir saniyeden kısa hissettiren şey budur. Dördüncüsü dikkati yönlendirmektir — her şey dururken tek bir öğeyi hareket ettirmek bir arayüzün sahip olduğu en güçlü sinyaldir; tam da bu yüzden idareli kullanılmalıdır.

Süre ve Yumuşatma Zevk Değil Anlamdır

Arayüz hareketi dar bir bantta yaşar. Kabaca saniyenin onda biriyle üçte biri arası “tepkisel” okunur; daha uzunu beklemeye benzemeye başlar ve yarım saniyede animasyon kişiyi bilgilendirmez, geciktirir. Büyük nesneler küçüklerden biraz daha uzun sürebilir; çünkü bu, ağırlığın davranışına uyar.

Yumuşatma da anlam taşır. Giren bir şey varırken yavaşlamalı, çıkan bir şey hızlanarak uzaklaşabilir; doğrusal hareket ise mekanik görünür, çünkü fiziksel dünyada neredeyse hiçbir şey öyle hareket etmez.

Ziyaretçi Kaybettiren Hatalar

En yaygını içerik üzerindeki giriş animasyonudur. Ziyaretçi bir şey okumaya gelmiştir ve metin, bölüm bölüm, 800 milisaniyede belirir. İlk seferinde zariftir. Üçüncü sayfada engeldir; geri dönen bir müşteri içinse günlük bir vergidir.

İkincisi, kullanıcıyla kavga edecek biçimde kaydırmaya bağlanmış harekettir. Kaydırmayı ele geçirmek ya da bir animasyon oynarken bölümü sabitlemek, insanların sayfada gezinmek için güvendiği tek kontrolü elinden alır. Biri fiyatlarınıza ulaşmak istiyorsa site onunla pazarlık etmemelidir.

Etkileşimi Geciktiren Animasyon

En kötü kategori girdiyi engelleyen harekettir. Animasyonu bitmeden kullanılamayan bir menü, girişi sırasında tıklamaları yok sayan bir pencere, geçiş ortasında tepki vermeyen bir kaydırıcı — bunların her biri hızlı bir arayüzü bozuk hissettirir; çünkü tepkisellik animasyonun sonundan değil, niyetin ilk anından itibaren yargılanır.

Öğeleri görünür olur olmaz etkileşimli yapın ve yeni bir etkileşimin devam eden animasyonu kesmesine izin verin. Tek başına bu kural, algılanan ağırlığın çoğunu düzeltir.

Performans Tasarımın Parçasıdır

Animasyon bedava değildir. Tarayıcının düzeni yeniden hesaplamasını gerektiren özellikler pahalıdır ve bu maliyet, tasarımın onaylandığı makinede değil, ziyaretçilerinizin çoğunun kullandığı orta seviye cihazlarda takılma olarak görünür.

Dönüşüm ve saydamlık özelliklerini tercih edin, aynı anda hareket eden öğe sayısını az tutun ve simülatörde değil gerçek bir orta seviye telefonda test edin. Ağır hareket yüklenmeyle de kötü etkileşir: sayfa hâlâ kendini kurarken çalışan bir animasyon, Core Web Vitals rehberimizdeki metriklere yansır.

Yüklenme Durumları da Harekettir

Çoğu sitedeki en değerli animasyon, insanlar beklerken çalışandır. Gelecek şeyin biçimini gösteren bir iskelet, algılanan beklemeyi bir dönen simgeden daha çok azaltır; çünkü okura bir şeyin geldiğini ve kabaca ne olduğunu söyler. Dönen simge yalnızca sitenin meşgul olduğunu söyler.

Yaklaşımı süreye uydurun. Bir saniyenin altında, belirip kaybolan bir yükleyici parıltısı yerine hiçbir şey göstermemek genelde daha iyidir. Birkaç saniyeyi aşınca insanların harekete değil ilerlemeye ihtiyacı olur; on saniyeyi aşınca ise bir tahmine ya da yaptıklarını kaybetmeden çıkabilecekleri bir yola.

Azaltılmış Hareket Bir Nezaket Değil Zorunluluktur

Bazı insanlar için paralaks, büyük kayan geçişler ve döngüsel arka plan hareketi gerçek fiziksel rahatsızlık yaratır — mide bulantısı, baş dönmesi ya da daha kötüsü. İşletim sistemleri bunun için bir ayar sunar ve buna uymak bir incelik değil, doğrudan bir erişilebilirlik yükümlülüğüdür.

Buna uymak tüm hareketi kaldırmak demek değildir. Vestibüler tetikleyicileri — ekran boyunca büyük hareket, paralaks, dönme — sade bir geçiş ya da anında değişimle değiştirmek, herkese yardım eden küçük geri bildirim animasyonlarını korumak demektir. Bu, erişilebilirlik rehberimizdeki diğer gerekliliklerin yanına aittir.

Otomatik Oynatma ve Döngüsel Arka Planlar

Sürekli hareket eden her şey, dikkat için kendi içeriğinizle yarışır ve yarışmayı hiç bırakmaz. Başlıkların arkasındaki döngüsel video arka planları en net örnektir: bant genişliği tüketirler, metin kontrastını öngörülemez biçimde düşürürler ve okuru, yapmasını istediğiniz tek şey için daha çok çabalamaya zorlarlar.

Uygulamadan Sağ Çıkması

Hareket, bir tasarımın maketle canlı site arasında en çok kaybolan ya da bozulan parçasıdır; çünkü durağan bir dosya onu tarif edemez. Süreleri, yumuşatmaları ve tetikleyicileri şartnamenin parçası olarak yazın ve bir videodan onaylamak yerine tarayıcıda gözden geçirin.

Tasarım sisteminde küçük bir süre ve yumuşatma kümesini standartlaştırmak, her yeni sayfanın kendi kurallarını icat etmesini engeller; kimsenin nedenini söyleyemediği ama tutarsız hissettiren siteleri üreten şey tam olarak budur. İki nokta da tasarım kalite kontrolü rehberimizdeki teslim disiplininin parçasıdır.

Üzerine Gelme Herkeste Yoktur

Ziyaretçilerinizin büyük bölümü, üzerine gelmenin var olmadığı dokunmatik ekranlardadır; dolayısıyla yalnızca bu durumla taşınan her anlam, onlara hiç ulaşmayan anlamdır. Bir kart eylemini yalnızca üzerine gelince gösteriyorsa, telefonda o eylem ya görünmezdir ya da ilk dokunuşta kazara tetiklenir.

Önce dokunma davranışını tasarlayın, üzerine gelmeyi ise işaretçisi olanlar için bir iyileştirme sayın. Aynısı klavye kullanıcıları için de geçerlidir: en az üzerine gelme durumu kadar net, görünür bir odak durumuna ihtiyaç duyarlar ve animasyonlu bir bileşen onları unuttuğunda bunu ilk fark edenler onlardır.

Makul Bir Başlangıç Duruşu

Hiç animasyonsuz başlayın ve yalnızca kullanıcının gerçekten sorduğu bir soruya cevap verdiği yere ekleyin: bu nereden geldi, işe yaradı mı, ne kadar sürecek, nereye bakmalıyım? Geri kalan her şey kaldırılmaya adaydır.

Hareket markanız için merkezîyse bütçeyi her bölüme dağıtmak yerine düşünülmüş tek bir yere harcayın — bir açılış bölümü, imza niteliğinde bir geçiş. Ölçülülük özgüven olarak okunur. Bu muhakemenin arayüzünüze uygulanmasını isterseniz UI/UX ekibimiz hareketi bitirme pası değil etkileşim şartnamesinin parçası sayar ve site büyüdükçe tutarlı kalması için tasarım sistemine yerleştirir.