Ноябрь 22, 2016

Анимация на сайте: как оживить неживое?

Вдохните жизнь в свой лэндинг

или еще немного анимации

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

Анимация — действительно чудо и часто красота невероятная. Но это лишь ее поверхностные достоинства. За спецэффектами, которые можно навесить на свой лэндинг, стоят глубокие взрослые смыслы, о которых надо задумываться и говорить. Давайте же это и сделаем.

Одно из определений анимации в Википедии гласит:

Анимация — процесс придания способности двигаться и/или видимости жизни объектам и мёртвым телам в выдуманных мирах художественных произведений и играх жанра фэнтези.

По сути, анимация — это один из методов оживить то, что живым не является. Например, элементы сайта или лэндинга.

Зачем нужна анимация на сайте?

Затягивает: повышает вовлеченность и желание продолжать взаимодействие

Невозможно отвести взгляд от овечки из этого прелоудера. Ждешь до последнего, пока она не смывается из кадра по окончанию загрузки.

Оживляет: создает ощущение реальности происходящего, погружает в новый мир и позволяет стать частью этого мира через интерактив.

История с бутылкой на сайте водки «Валенки» выглядит очень реалистично благодаря ее анимационным приключениям.

Объясняет: повышает юзабилити посадки и понимание функционала.

За счет ховеров при наведении на позиции в ассортименте Dunlop мы четко понимаем, что происходит и какие возможности перед нами открываются .

Развлекает: создает эффект игры, формирует приятные ощущения от пользования.

Бегая мышкой по сайту Herbal Essence, ощущаешь себя в компьютерной игре, кишащей интерактивом.

Концентрирует: сохраняет внимание читателя, такое дорогое в перегруженном информацией мире.

Обратите внимание, как завораживает эта бегущая по центру спираль. Без нее пользователь навряд ли дождался бы момента эффектного слипания наушников.

Подтверждает: помогает раскрыть смыслы.

Возьмем простой реальный пример из нашей работы по упаковке франшизы «Гонки Героев». Задача стояла в выражении идеи быстрого роста проекта без утяжеления посадки. В качестве решения взяли за базу обычный столбиковый график роста. Но, чтобы его оживить и пронизать идеей продукта, использовали два простых приема: наложили анимацию роста на график и подложили под него фото с сигналом стремления к высотам.

Усиливает: увеличивает эффективность заголовков, повышая заинтересованность с первого экрана.

На инопланетном сайте дизайнерской компании Filippo Bello заголовок каждого проекта очень впечатляюще сопровождается фоновой анимацией и звуком.

5 жизненно важных правил использования анимации

Помните их всегда и никогда о них на забывайте!

Анимация должна подкреплять смыслы

Если нет смысла навешивать ее — не нужно этого делать. Знайте, что неуместная анимация может свести конверсию посадки к нулю. Поэтому развлекайтесь и выражайте себя более бюджетными для бизнеса способами:-)
Эффекты должны соответствовать качествам привычного физического объекта

Что это значит? Если в основе Вашего сайта лежит, например, такой объект, как каталог, то и анимация должна соответствовать его физическим свойствам.

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

Советую еще перед разработкой концепта анимации сайта/посадки подержать в руках тот самый объект, который ляжет в основу. Покрутите, повертите, покидайте. Это поможет не только вспомнить физический свойства этого объекта, но и подкинет Вам интересные идеи для реализации концепта.

На этапе дизайна такие исследовательские работы бывает делать уже поздно. Поэтому, по-хорошему, концепт-объект должен быть выбран одновременно с основной идеей смыслового слоя сайта.

Почему это важно? Потому что человек — существо в некоторых своих проявлениях примитивное и любит, чтобы все было по-привычному, а значит, приятно для инстинктов или безопасно.

Привожу к этому пункту пример с моим любимым объектом — билетиком из упаковки франшизы МозгоБойни. Чтобы показать, какую малую долю составляют в процентном выражении расходы от выручки, мы изобразили билет на игру с отрывающимся через анимацию корешком.

В основе простая идея. Корешок — что-то небольшое и незначительное, что можно откинуть. Главное (более 80% выручки) остается на руках в качестве прибыли.

Подробнее о том, как мы продвигали франшизу «Мозгобойни», Вы можете узнать из статьи «Как продать франшизу, не имеющую очевидной ценности»
Анимация должна соответствовать внутренним целям посетителя

У посетителя Вашего сайта есть четкая душевная цель, которую он намерен достичь, приобретя продукт. Безопасность, удовольствие, приключения, автономность и так далее… Или, возможно, целый комплекс из перечисленного (теорию имплицитных целей Вы можете освежить в памяти по книге Фила Бардена «Взлом маркетинга»).

Поэтому Ваш контент должен полностью соответствовать этому душевному настроению клиента. Не нужно его пугать резкой дерганой анимацией, если клиент хочет с помощью Вашей компании спрятаться от ужасающих реалий жизни. И не стоит усыплять его вездесущей плавной художественной анимацией, если он заядлый любитель экстрима, рыщущий по Вашему сайте в поисках дополнительной порции адреналина.

Вот и пример. Аудитория этой компании явно не стремится к покою и безопасности.

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

Мобильная версия умаляет весь размах души дизайнеров, включая анимацию на сайте. На маленьком экране эффекты, выбранные для десктопа, могут выглядеть как неразборчивое раздражающее дерганье. В этом случае лучше анимацию совсем отключить или разработать ее специально под мобильные устройства.
Спецэффекты не должны ранить конверсию Вашего сайта

Суперважное правило. Уверена, что об этом Вы знаете, поэтому ставлю его в конец.

Если уж Ваш дизайн-концепт кишит анимацией, которую ну никуда не денешь, сядьте на своего разработчика с острой потребностью по оптимизации контента. От него, родимого, зависит, будет ли отрабатывать инвестиции вся эта красота или нет.

Помните, медленную загрузку сайта может позволить себе лишь компания, ориентирующаяся на горячих высокозаинтересованных клиентов.

А что может случиться, если забыть об этих правилах?

Немного ужасов…

Ваш сайт будет смотреться дешево

Раньше для дороговизны сайты обвешивали серебром да золотом, теперь на это золото еще анимации навешивают. Это смотрится дешево.

Ваш клиент не поймет, что Вы хотите ему сказать

При самом плохом раскладе еще и получит порцию стресса, что скажется на его расположенности к вашей компании.

Конверсия посадки/сайта упадет

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

Эффектность анимации мало кого оставляет равнодушным — особенно когда она подобрана со вкусом и смыслом. Если Ваше сердце так же, как мое, замирает при виде этих спецэффектов и сразу возникает желание использовать их на посадке, будьте осторожны. Красота — страшная сила!

А у Вас есть опыт реализации анимации на своем сайте? Расскажите о нем в комментариях!

Мария Чекмарева,сотрудник отдела маркетинга и копирайтинга