موشن باید تجربه را توضیح دهد، نه اینکه آن را گروگان بگیرد.

صفحه باید قبل از اجرای تایم‌لاین هم قابل فهم باشد.

تیتر، پاراگراف، لینک و ساختار صفحه باید به‌صورت HTML واقعی وجود داشته باشند. انیمیشن می‌تواند آن‌ها را ظاهر کند، به هم وصل کند و ترتیب بدهد؛ اما نباید تنها راه دسترسی کاربر یا موتور جست‌وجو به محتوا باشد.

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

• تیتر و بخش‌بندی معنایی
• لینک واقعی با href
• محتوای خوانا بدون انیمیشن
• متادیتای canonical در HTML اولیه

رقص دسکتاپ را داخل یک مستطیل کوچک فشار ندهید.

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

ایده بصری می‌تواند ثابت بماند، اما زمان‌بندی و هندسه تغییر کند. وفاداری یعنی حفظ منظور؛ نه حفظ تمام مختصات دسکتاپ.

• سکانس کوتاه‌تر و اسکرول امن‌تر
• کنترل مناسب لمس
• چیدمان مقاوم در برابر نوار مرورگر
• آزمایش جداگانه راست‌به‌چپ و حالت افقی

هر افکت سنگین باید جای خودش را توجیه کند.

تصویر بزرگ، قاب دستگاه، بخش پین‌شده، blur، ویدئو و transformهای چندلایه همگی از منابع یک دستگاه استفاده می‌کنند. لحظه‌هایی را انتخاب کنید که داستان را جلو می‌برند و باقی بخش‌ها را سبک‌تر نگه دارید.

از تصویر واکنش‌گرا، اندازه مشخص، lazy loading پایین صفحه، حرکت مبتنی بر transform و پاک‌سازی درست بعد از پایان سکانس استفاده کنید. نسخه ساخته‌شده را اندازه بگیرید؛ نه فقط روان‌ترین لپ‌تاپ تیم را.

حرکت کمتر و ورود مستقیم هم بخشی از طراحی‌اند.

ممکن است کاربر حرکت کمتر بخواهد، مستقیم وارد صفحه داخلی شود، با کیبورد حرکت کند یا از تاریخچه مرورگر به یک بخش برگردد. سایت نباید محتوا را پشت یک اجرای نمایشی زندانی کند.

موشن خوب می‌داند کجا کنار برود. محصول اصلی همان رابط است؛ انیمیشن فقط یکی از راه‌های توضیح آن است.

• رعایت prefers-reduced-motion
• ترتیب منطقی فوکوس
• پرهیز از گیر اسکرول
• چیدمان پایدار بعد از تغییر اندازه
• آزمایش لینک مستقیم و بارگذاری دوباره