Мікроанімації в інтерфейсі: де допомагають, а де заважають

Анімація в інтерфейсі майже завжди обговорюється як питання смаку: комусь подобається, комусь ні. Насправді в неї є перевірювані функції, і саме за ними видно, коли вона працює, а коли просто присутня.

Правило, до якого зводиться все далі: анімація має пояснювати, що сталося, а не прикрашати те, що й так зрозуміло.

Що робить анімацію корисною

Спільне у всіх п’яти: анімація відповідає на питання, яке в людини виникло. Прибрати її – і з’явиться невизначеність.

Де вона заважає

• Поява блоків при прокрутці. Найпоширеніший випадок. При швидкій прокрутці людина бачить порожні місця замість контенту, а пошуковий робот може не дочекатися появи.
• Анімація на кожному елементі. Коли рухається все, не виділяється нічого.
• Довгі переходи між сторінками. Півсекунди затримки на кожному кліку – це кілька хвилин на місяць у постійного користувача.
• Паралакс на довгих сторінках. Ускладнює орієнтацію й у частини людей викликає фізичний дискомфорт.
• Автопрокрутка каруселей. Забирає контроль: людина не встигла прочитати, слайд змінився.
• Анімація замість швидкості. Красивий індикатор не робить очікування коротшим, він робить його помітнішим.

Скільки має тривати

Тут є робочі орієнтири, які рідко порушують випадково:

Практичне правило: якщо анімацію помічають як анімацію, вона занадто довга. Виняток – момент, коли ви навмисно привертаєте увагу, наприклад до помилки.

Ще одна деталь: поява має бути повільнішою за зникнення. Елемент, що з’являється, треба помітити, а той, що зникає, – уже ні.

Технічна сторона, яка визначає плавність

Анімації бувають дешеві й дорогі з погляду браузера, і від цього залежить, чи буде рух плавним на слабкому телефоні.

• Дешево: зміна прозорості й перетворення – зсув, масштаб, поворот. Браузер обробляє їх окремо, не перераховуючи сторінку.
• Дорого: зміна розмірів, відступів, позиції через координати, тіней. Кожен кадр змушує браузер перераховувати верстку.

Практично це означає: той самий візуальний ефект зсуву блока можна зробити двома способами, і один буде плавним на будь-якому пристрої, а другий смикатиметься на бюджетному телефоні. Різниця не помітна на комп’ютері розробника, тому й проходить непоміченою.

Повага до налаштувань

В операційних системах є налаштування зменшеного руху, яке вмикають ті, кому анімація заважає фізично.

Один запит у стилях дозволяє вимкнути або спростити анімації для цих людей. Це не окрема версія сайту, це кілька рядків, і саме вони відділяють коректну реалізацію від некоректної.

Важливо: вимкнення руху не означає прибрати зворотний зв’язок. Кнопка все одно має показувати, що натиснута, просто без плавного переходу.

Чекліст перед запуском

1. Кожна анімація відповідає на питання «що сталося». Якщо питання немає, анімація не потрібна.
2. Реакції на дотик – до 150 мс, переходи – до 400 мс.
3. Анімуються тільки прозорість і перетворення.
4. Налаштування зменшеного руху враховано.
5. Усе, що рухається саме, можна зупинити.
6. Контент видно навіть якщо анімація не спрацювала.
7. Перевірено на дешевому телефоні, а не тільки на робочому комп’ютері.

Шостий пункт критичний: якщо блок з’являється тільки після спрацювання скрипта, а скрипт не завантажився, сторінка виявиться порожньою. Правильний підхід – контент видно за замовчуванням, анімація лише додає плавності.

Хороша мікроанімація непомітна: людина просто розуміє, що відбувається, і не замислюється чому. Погана помітна одразу – або тому, що заважає, або тому, що милується собою. Перевірка проста: заберіть анімацію й подивіться, чи стало гірше. Якщо ні, вона була декорацією.