حرکت با هدف

اضافه کردن انیمیشن به یک رابط کاربری کار ساده‌ای است؛ توجیه کردنش سخت. یک حرکت خوب می‌تواند به کاربر بگوید کجاست و چه تغییر کرده، و یک حرکت بد می‌تواند او را چند لحظه معطل نمایشی کند که هیچ چیز به فهمش اضافه نمی‌کند. فرق این دو در یک کلمه است: هدف.

حرکت باید به یک سؤال جواب بدهد

هر انیمیشن مفید، بی‌صدا به یکی از این سؤال‌ها پاسخ می‌دهد:

• این از کجا آمد؟ پنجره‌ای که از دل همان دکمه‌ای باز می‌شود که رویش زدید، رابطه‌ی علت و معلول را نشان می‌دهد.
• چه چیزی تغییر کرد؟ ردیفی که پس از ذخیره لحظه‌ای روشن می‌شود، چشم را به همان نقطه می‌برد.
• از اینجا به کجا می‌شود رفت؟ جابه‌جایی نرم بین دو صفحه، حس پیوستگی مسیر را حفظ می‌کند.

اگر انیمیشنی به هیچ‌کدام از این سؤال‌ها جواب نمی‌دهد، به احتمال زیاد فقط تزئین است. تزئین همیشه بد نیست، ولی باید آگاهانه و با دانستن هزینه‌اش انتخاب شود.

زمان، بخشی از طراحی است

بیشتر حرکت‌های رابط کاربری باید بین ۱۵۰ تا ۳۰۰ میلی‌ثانیه طول بکشند. کوتاه‌تر از این، چشم تغییر را دنبال نمی‌کند؛ طولانی‌تر، کاربر حس می‌کند منتظرش گذاشته‌اند. منحنی حرکت هم مهم است: عنصری که وارد می‌شود بهتر است سریع شروع کند و آرام بایستد، و عنصری که خارج می‌شود برعکس.

قاعده‌ی ساده‌ای که همیشه به آن برمی‌گردم: هر چه کاربر یک تعامل را بیشتر تکرار کند، حرکتش باید کوتاه‌تر و کم‌صداتر باشد. منویی که روزی صد بار باز می‌شود، جای نمایش نیست.

کجا باید بی‌حرکت ماند

سکون هم یک تصمیم طراحی است. در ابزارهای پرجزئیات، داشبوردهایی که هر ثانیه به‌روز می‌شوند و کارهایی که سرعت در آن‌ها حیاتی است، خویشتن‌داری از هر جلوه‌ای ارزشمندتر است.

برای بعضی کاربران حرکت زیاد فقط آزاردهنده نیست؛ واقعاً باعث سرگیجه و حالت تهوع می‌شود. تنظیم prefers-reduced-motion را یک مسیر اصلی در طراحی بدانید، نه وصله‌ای که آخر کار اضافه می‌شود.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

اگر حذف یک انیمیشن کار را شفاف‌تر کند، آن انیمیشن از اول کمکی نمی‌کرد.

یک آزمون سرانگشتی

پیش از اضافه کردن هر حرکت، از خودتان بپرسید:

1. بدون این حرکت، تغییر ناگهانی و گیج‌کننده به نظر می‌رسد؟
2. کاربر به خاطر این حرکت حتی یک لحظه منتظر می‌ماند؟
3. اگر کاربر حرکت را خاموش کرده باشد، چیزی از معنا از دست می‌رود؟

اگر جواب اول «بله» و دو جواب بعدی «نه» بود، آن حرکت جایش را به دست آورده است.

اول هدف، بعد ظرافت. همین ترتیب است که حرکت را صادق نگه می‌دارد و رابط را زنده، بی‌آنکه شلوغ شود.