Сайты и приложения стали неотъемлемой частью нашей жизни. И чем живее ваш сервис, тем больше у него шансов закрепиться в обиходе пользователей и стать неотъемлемой частью жизни. Но как же добиться эффекта условного физического контакта с цифровым сервисом. Тут на помощь приходит анимация. Екатерина Попова, старший веб-дизайнер 
Demis Group , рассказала Sostav, как с помощью анимации увеличить конверсию на сайте и цифровом сервисе.
Прикоснуться к миру онлайн
В физическом мире любой элемент, с которым мы взаимодействуем, дает отклик на наше действие. В целом физика природы устроена так, что все окружение находится в непрерывном движении: мы идем по траве, она проминается под нашими ступнями, если мы проведем рукой по водной глади, то она пойдет рябью, сама планета находится в непрерывном движении. Именно этого пользователи и ждут от цифровых сервисов — движения, отклика, ощущения физического контакта. И решить эту задачу способна анимация.
Анимация в дизайне — это переход элемента от одного состояния к другому. По сути это физическое изменение состояния объекта в цифровом пространстве. Анимация поможет сделать сайт или сервис более удобным, а работу с ним — приятнее. Анимационные элементы помогают сгладить переходы между изменениями состояния интерфейса, сделать их более живыми и похожими на физический мир, создать эффект непрерывности происходящего.
Виды анимации
Есть два ключевых вида: микро- и макроанимация. Функциональная или микроанимация — анимация отдельных элементов интерфейса, короткое, динамическое изменение состояния объекта для лучшей ориентации на сайте. Благодаря настройке микроанимции на сайте мы сможем направлять внимание пользователя к необходимому действию, давать подсказку по связям между отдельными элементами.
Наиболее частые элементы интерфейса, в которых необходимо применять анимацию:
- навигация по сайту — переход с одного уровня навигации на другой;
- изменение состояний — любые изменения состояния системы, например, при переходе от светлой темы интерфейса к тёмной;
- поля для ввода данных — акцент для пользователя, подсказка правильности действий при вводе информации (подсвечивание ошибки, готовности заполнения и так далее);
- состояния системы — сюда относится обновление контента, загрузка информации и так далее;
- уведомления и подсказки — подсвечивание дополнительной информации или ошибки;
- кнопки — призыв к действию, изменение состояния при ховере, клике.
Макроанимация — анимация целых блоков, служит больше для создания настроения, презентации, сторителлинга и не имеет функциональной составляющей. Основное место применения — лендинги или презентационные сайты. Основная цель — привлечь внимание пользователя, добавить изюминки в проект, передать определенные эмоции. Выбирая добавлять данный тип анимации на сайт или нет, в первую очередь нужно отталкиваться от целей компании и конкретного ресурса. Для сайтов, направленных на функциональность, стоит избегать большого количества макроанимаций или же отказаться от них вовсе, тщательнее проработав микроанимацию.
Принципы использования анимации
Чтобы анимация работала в положительную сторону и действительно оживляла сайт, повышая уровень юзабилити и облегчая взаимодействие с интерфейсом, важно соблюдать несколько ключевых принципов.
Не вводить в заблуждение
Используя анимацию для элементов интерфейса, важно делать акцент на задаче этого элемента. Мы не используем анимацию просто для украшения, она должна выполнять определенные функции. С помощью анимации можно создать визуальную иерархию на сайте, определенную последовательность действий. Так, если мы говорим об ошибке, то придав анимации резкости мы с большей вероятностью передадим нужный посыл.
Не отвлекать
Добавляя анимацию, важно помнить про реакцию человека на любое движение, поэтому стоит грамотно настроить анимацию, чтобы она не отвлекала от основного контента и не вызывала замешательства. При этом все движения и приемы анимации должны быть просты и понятны пользователю, не вводить в заблуждение, помогать считывать функцию анимированного элемента.
Быть живой
Анимация должна быть естественной, соответствовать законам физики. В природе отсутствует линейное движение, большие и тяжелые объекты двигаются медленнее маленьких и легких, если элементы связаны между собой, то движение одного элемента влечет движение другого и так далее. Существует 12 принципов анимации, разработанные Уолтом Диснеем, они не устарели до сих пор, так как в них заложена ключевая информация, как сделать анимацию естественной:
- сжатие и растяжение;
- подготовка или упреждение;
- сценичность;
- от позы к позе;
- сквозное движение и захлёст;
- смягчение начала и завершения движения;
- дуги;
- дополнительное действие (выразительная деталь);
- расчет времени;
- преувеличение, утрирование;
- четкий рисунок;
- привлекательность.
Быть доступной
При добавлении и настройке анимации важно учитывать, чтобы она не создавала проблем у людей с ограниченными возможностями. Нужно обеспечить на сайте возможность отключения анимации или альтернативный способ предоставления информации для тех, кто не может воспринимать информацию в анимированном виде.
Основные типы анимации
Анимация взаимодействия
Данный тип анимации используется для отображения отклика на действия пользователя, чтобы донести факт того, что действие успешно совершено или же не выполнено. Пользователи могут не заметить статичные изменения из-за выпадания фокуса внимания, как следствие могут дублировать действия или наоборот не выполнить его. Например, обновление счетчика корзины при добавлении товара, сообщение об успешной отправке формы или загрузке файла. Еще одним отличным примером является анимация выезжающего или разворачивающегося бургер-меню.
Анимация навигации
Зачастую пользователю бывает сложно сориентироваться, в каком месте сайта он сейчас находится, особенно это касается мобильных устройств, где размер экрана ограничен, и информация подается частями. Пользователь пытается найти подсказку в хлебных крошках, определить по меню и так далее. Тут анимация как раз упростит навигацию по сайту, сделает ее более понятной. Сама по себе она не сможет заменить видимую навигацию, но существенно упрощает ее восприятие, делая проще движение по структуре сайта.
Например, при заполнении формы можно использовать скользящую анимацию, показывающую движение в нужном направлении, или настроить анимацию появления меню с той стороны, где находится иконка. Существенно помогает анимация скролла для ориентации на странице с якорными ссылками, чтобы показать, что пользователь все еще находится на одной странице.
Анимация структуры
Данный вид анимации используется при загрузке страницы для отображения какркаса контента, что дает пользователю ощущение быстроты загрузки, так как по итогу информация перед пользователем появляется сразу, а дополнительная анимированная каркасная анимация показывает, что на странице есть контент.
Анимация для направления
С помощью анимации мы можем провести пользователя по определенному сценарию на сайте, как следствие — совершить необходимое действие. Анимированные элементы с большей вероятностью привлекут внимание, и именно это мы можем использовать, настраивая анимацию на те элементы, на которые нужно обратить внимание пользователя.
Так, элементы, которые скользят по поверхности лендинга или меняют положение на странице любым другим способом, но с некоторой хорошо заметной пользователю скоростью, привлекут внимание быстрее и надежнее, чем объекты, медленно исчезающие, оставаясь при этом неподвижными.
Конечно, есть много ключевых составляющих успешного сервиса: наличие полной и достаточной информации о продукте/услуге, современный качественный и чистый дизайн, грамотно проработанное юзабилити, актуальность и качество самого продукта. Анимация не является панацеей, но она позволит усилить эффект и дополнить остальные элементы сайта или цифрового сервиса, повышая удовлетворенность пользователей и результат взаимодействия.