Рух може пояснити продукт за дві секунди або на дві секунди сховати заголовок. Різниця в тому, чи працює він на контент.
Анімація — найпомітніша частина сучасного сайту, і з нею найлегше переборщити. У нас простий тест: якщо прибрати рух, чи стане сторінку важче зрозуміти? Якщо ні — це декорація, і вона має бути легкою.
Для чого потрібен рух
- Вести увагу: око стежить за тим, що рухається, тож анімація може провести від заголовка до дії.
- Пояснювати: показати, як працює продукт — процес, «до і після» — швидше, ніж описати.
- Давати відгук: кнопка реагує, форма підтверджує. Дрібниця, але інтерфейс відчувається надійним.
- Задавати порядок: контент, що з’являється по черзі, підказує, що читати першим.
- Передавати характер: те, як рухаються елементи, — частина бренду, як шрифт і колір.
Де він заважає
- Контент чекає на анімацію, перш ніж його можна прочитати. Текст має читатись одразу.
- Перехоплення скролу: сторінка рухається у своєму темпі, а не в темпі відвідувача.
- Усе анімується одночасно. Коли рухається все, ніщо не виділяється.
- Важкі ефекти на телефонах — там, де більшість відвідувачів і найслабша продуктивність.
- Довгі заставки на сторінці, куди заходять не вперше.
Чекліст перед запуском
- Заголовок і головну дію видно протягом першої секунди.
- Сторінка лишається плавною на середньому телефоні, а не лише на ноутбуці дизайнера.
- З увімкненим у системі «зменшенням руху» сайт працює і нічого не сховано.
- Для кожної анімації є причина, яку можна сказати одним реченням.
У Heroes of Digital анімація веде історію головної сторінки. Такого балансу ми прагнемо в роботі з моушном.
Рух дешевше запланувати, ніж додати. Вирішіть на етапі дизайну, що рухається і навіщо: вбудовувати анімацію в готову верстку довше, і це видно.
