Анимация когда-то задумывалась просто для украшения. Но поскольку технологии совершенствуются и интернет-соединение ускоряется, дизайнеры стараются охватить ее практические преимущества.
В этой статье будет рассказано об одном конкретном использовании анимации — маркетинг-анимации или продающей анимации для вовлечения аудитории и клиентов.
Несмотря на то, что такая анимация не предназначена для улучшения удобства пользования, она может произвести на пользователя впечатление и дать ему определенный контекст.
Дизайнеры могут использовать этот тип анимации следующими способами:
1. Продемонстрировать мастерство
Люди действительно замечают детали. Внимание, уделенное разработке анимации, заставляет сайты или приложения выглядеть более продуманными и проработанными. Визуальная стимуляция поднимает удовольствие от использования на новый уровень.
Анимация экрана загрузки
Анимация загрузки – один из старейших способов ее использования, который, как предполагается, отвлекает пользователя во время загрузки. Но даже этот тип анимации может продемонстрировать высокое качество продукта.
Например, когда пользователь запускает приложение Uber, он сразу замечает анимированную каплю, которая превращается в контакт на карте. Эта анимация не идеальна, но воздействует на зрение пользователя и показывает, где он должен сфокусироваться.
Этот быстрый вводный момент производит приятное первое впечатление и подталкивает пользователя к дальнейшему взаимодействию.
Анимация подписи
Некоторые компании идут еще дальше и используют анимацию в качестве отличительной особенности бренда.
MailChimp – одна из компаний, которые делают именно так. Компания занимает техническую нишу, создает и осуществляет email-кампании, но использование анимации преобразовывает эту сухую задачу в интересный опыт.
Служба добавляет маленькие и приятные неожиданности на протяжении всего пути потребителя, и делает передачу электронных писем намного увлекательнее.
2. Лучшее объяснение информации
Анимационные эффекты помогают яснее донести смысл своего послания. Используя анимацию, можно упростить сложные идеи или процессы, сделать их удобоваримыми забавным графическим способом, вовлечь аудиторию и клиентов.
Интерактивная анимация
Анимация способна подчеркнуть преимущества продукта. Bellroy – компания, которая продает кошельки. Они говорят, что стремятся к тонкому дизайну, чтобы уменьшить выпирание кармана. В примере ниже видно, как анимация от Bellroy ясно указывает на свойства продукта и демонстрирует его преимущества.
Всплывающая анимация
Всплывающая анимация очень практична для предоставления дополнительной информации о продуктах. Этот тип анимации делает открытие менее резким и добавляет сайту некоторое очарование при создании интернет-магазина.
Повествующая анимация
Повествующий потенциал анимации может усилить эмоциональную связь с интерфейсом, который в ином случае выглядел бы невзрачным. Некоторые типичные примеры сторителлинга – страницы, которые показывают новый продукт, “собирая” его на глазах пользователя.
Например, страница, посвященная Mac Pro на сайте Apple, показывает, что находится внутри, когда пользователь прокручивает вниз:
Повествующие анимации могут также вдохнуть жизнь и сделать интереснее длинную прокрутку. Вместо широко распространенных параллакс-анимаций можно выбрать что-то более тонкое. Стоит рассмотреть разделение сайта на “блоки” с возможностью прокрутки. В каждом блоке можно представлять контент посредством анимаций.
Анимации в примере ниже от сайта Le Mugs заставляют “ожить” простые художественные иллюстрации.
3. Подтолкнуть пользователей к дальнейшим шагам
Использование анимации будет влиять на глаза пользователей, а следовательно, может управлять тем, где они сосредотачивают свое внимание. Человеческое зрение естественным образом реагирует на движение, и это делает анимацию идеальным инструментом для управления вниманием пользователя.
Обратить внимание пользователя
Движущиеся элементы – мощный инструмент для привлечения внимания. Если цель состоит в том, чтобы привлечь внимание пользователя к одному элементу из нескольких или к обновленной информации, тогда анимация добьется цели.
Пока нет многих других конкурирующих элементов на экране, даже малейшее движение способно захватить внимание.
Сайт Space Needle Сиэтла использует эту тонкость в своих целях: он привлекает внимание к инструкциям с помощью маленьких, но эффективных анимированных стрелок.
Поощрять действие пользователя
Прекрасная анимация и интерактивные эффекты поощряют пользователей кликать. Отдельного внимания стоит дизайн сайта “Chekhov is Alive”, показанный ниже. Он так и просит кликнуть, чтобы найти своего персонажа.
Выводы для размышления
Анимация – как обоюдоострый меч. При неправильном использовании она может все испортить.
Следует избегать анимации, которая отвлекает пользователя от задачи. В мире онлайн-продаж и маркетинга отвлечение может означать конец бизнеса.
Очень важным аспектом для рассмотрения при разработке является частота, с которой анимация будет появляться в течение одного сеанса пользователя. Анимация может показаться милой в первый раз, когда пользователь видит ее, но после 100-й попытки она просто раздражает, особенно если у нее нет другой цели, кроме того, чтобы “радовать глаз”.
Есть много элементов интерфейса, которые можно анимировать одновременно и забавно, и с пользой для бизнеса. Чтобы маркетинговая анимация сработала, у нее должны быть и стиль, и цель.
