انیمیشن با هدف: کجا کمک می‌کند، کجا مزاحم است
انیمیشن در رابط کاربری یک ابزار ارتباطی است، نه تزئین. معیار ساده‌ای دارد: اگر حذفش کنید و چیزی گنگ‌تر نشود، لازم نبوده است.
سه کاری که حرکت درست انجام می‌دهد
اول، رابطه نشان می‌دهد: وقتی پنجره‌ای از دکمه‌ای باز می‌شود و به همان دکمه برمی‌گردد، کاربر می‌فهمد این دو به هم مربوط‌اند. دوم، تغییر را قابل دنبال کردن می‌کند: وقتی فهرست دوباره مرتب می‌شود، جابه‌جایی تدریجی نشان می‌دهد چه چیزی کجا رفت. سوم، بازخورد می‌دهد: کاربر می‌فهمد کلیکش ثبت شده.
مدت زمان
برای تغییر حالت‌های کوچک مثل تغییر رنگ دکمه، حدود ۱۵۰ تا ۲۵۰ میلی‌ثانیه. برای ورود و خروج عناصر بزرگ‌تر، تا حدود ۴۰۰ میلی‌ثانیه. بالاتر از این، حرکت به کندی حس می‌شود — به‌خصوص برای کاربری که روزی بیست بار همان کار را می‌کند.
تست ساده: کار را ده بار پشت سر هم انجام دهید. انیمیشنی که بار اول دلنشین بود و بار دهم کلافه‌کننده است، طولانی است.
منحنی شتاب
حرکت خطی مصنوعی به نظر می‌رسد. چیزی که وارد می‌شود باید سریع شروع کند و آرام بایستد. چیزی که خارج می‌شود می‌تواند سریع‌تر تمام شود، چون کاربر دیگر منتظرش نیست.
منحنی‌های فنری و جهشی جای خودشان را دارند، ولی در رابط‌های کاری معمولاً حس بازیگوشی می‌دهند که با لحن محصول نمی‌خواند.
چه چیزی را نباید متحرک کرد
چیزی که کاربر منتظرش است تا کارش را ادامه دهد. اگر بعد از زدن دکمه، نیم ثانیه انیمیشن اجرا شود و بعد صفحه عوض شود، شما نیم ثانیه به هر تعامل اضافه کرده‌اید.
احترام به تنظیم کاهش حرکت
بخشی از کاربران به دلیل سرگیجه یا حساسیت، در سیستم‌عاملشان کاهش حرکت را روشن می‌کنند. رعایت این تنظیم یک قاعدهٔ ساده در CSS است و نادیده گرفتنش برای آن کاربر واقعاً ناخوشایند است.
کاهش حرکت به معنای حذف کامل نیست؛ می‌توانید جابه‌جایی را بردارید و فقط محو شدن را نگه دارید.