4 причины использовать анимацию в веб-дизайне

Об анимации говорят так: «она засоряет страницу и мешает работать с контентом». Я тоже так думал, пока не разобрался глубже. На самом деле, анимация помогает управлять вниманием и удерживать пользователя на странице. Также объясняет сложное просто и делает шоу. Вот 4 полезных действия анимации.

1. Управление вниманием

Эволюционно сложилось, что глаз замечает движение на фоне статики.

Это игра для котов. Если пушистый увидит шарик, он начнет за ним охотится

Cпособность различать движущиеся объекты на статичном фоне используют для маркетинговых целей. Когда нужно привлечь к чему-то внимание, например, к специальной цене или показать рост трафика.

Внимание пользователя направлено на анимированный график

Заказчику важно показать спеццену или сделать на чём-то акцент. Когда дизайнер с этим справляется, это дорогого стоит.

Анимация помогает управлять вниманием

2. Объяснение за доли секунды

Анимация помогает объяснить пользователю информацию за доли секунды. Вот примеры, сами решайте, что лучше решает задачу — текст или анимация:

С помощью нашей методики, ваши вложения окупятся на 60%

Или так

Дизайнер управляет вниманием и объясняет. Если 60% сделать статикой, внимание перейдет на биткоин

А вот ещё:

Когда вы нажмете в окошке папки знак « — », окно свернётся — откроется рабочий стол.

Или так

А вот так нудная инструкция, превращается в захватывающий сторителлинг:

Анимация помогает объяснять сложное просто

3. Удержание внимания

Человеку интересно взаимодействовать с предметом. Люди настраивают тряску на отключение будильника, перетаскивают иконки в папки, а ты сейчас скролишь статью, чтобы читать дальше. Это называется взаимодействием с интерфейсом.

Человеку интересно крутить, перетаскивать и взаимодействовать с интерфейсом, как с реальным объектом

Человеку интересно крутить, перетаскивать и взаимодействовать с интерфейсом, как с реальным объектом

Анимация помогает удерживать внимание

4. Шоу

В шоу нет прагматики — чистое развлекалово. Оно иногда необходимо, потому что люди любят зрелища: смотрят выступления акробатов, взрывы фейерверков, авиашоу.

Шоу не происходят каждый день, иначе это всех задолбит. Тоже самое с шоу в анимации. Человека раздражает постоянное мелькание на экране, поэтому — не перегружай.

Дизайнер развлекает пользователя, пока тот ждет входа в приложение

Анимация развлекает

Сколько это стоит

Цена зависит от запросов клиента. Обычно, когда мне надо анимировать макет — я добавляю 1 500 рублей за один экран к цене проекта.

• Если анимирую 10 экранов, цена вырастет на 15 000 рублей.
• Если делаю 10 экранов с микроанимацией, цена вырастает на 30 000 рублей.

Алексей Костенков для WDi, практикующий веб-дизайнер и автор курса «Анимация»