Ця студія любить рух. На нашій власній головній сторінці є canvas-анімація. Тож сприймайте це як зізнання, а не лекцію: більшість анімацій, які ми випустили в перші роки, коштували нашим клієнтам грошей.
Не декоративних. Тих, що стоять на шляху — поява перед формою, модалка на 400 мс, згасання, викликане прокруткою, між читачем і кнопкою, яку він прийшов натиснути.
Що ми вимірюємо зараз
До і після будь-якої роботи з рухом ми фіксуємо час до першої взаємодії з головним CTA — не завантаження сторінки, а скільки часу минає від приходу до моменту, коли відвідувач реально може діяти. З цього вийшло два правила, і ми їх відтоді не порушували.
- Нічого не анімується між користувачем і головною дією. Форми, кнопки й ціни присутні. Вони не «прибувають».
- Анімація відгуку — до 200 мс, переходи — до 300 мс. Усе повільніше отримує письмове обґрунтування поруч.
Анімація безкоштовна, коли рухається поряд з користувачем, і дорога в ту мить, коли рухається перед ним.
Прояви при прокрутці заслуговують окремої згадки
Fade-in при прокрутці — найбільш копійований ефект у вебі і найлегший, щоб зіпсувати. Два постійні збої: контент, що ніколи не з’являється, бо спостерігач не спрацьовує при швидкій прокрутці, і прояви, застосовані до тексту, який відвідувач саме намагається прочитати.
Наше правило: прояв може відбутися лише раз, має завершитись за 800 мс і ніколи не повинен блокувати те, до чого відвідувач прокручував спеціально.
Частина про доступність не опційна
Рух — не просто естетична перевага для всіх. Паралакс і масштабний рух можуть спричиняти нудоту й запаморочення у людей із вестибулярними порушеннями. Кожна операційна система тепер має налаштування «зменшити рух», і врахувати його — одна медіа-запит.
Якщо ваш сайт ігнорує `prefers-reduced-motion`, частина відвідувачів закриває вкладку з причин, які ваша аналітика ніколи не пояснить.