Опишите ваш проект
Наши специалисты свяжутся с вами в ближайшее время
Отправив запрос вы получаете:
  • Письмо или звонок от нашего менеджера
  • Оценку своего проекта
  • Личную встречу, при необходимости
  • Конфиденциальность гарантирована!
Ваш менеджер
Маргарита Кулешова
С удовольствием ответим на все ваши вопросы
Мобильный
Задать вопрос
Юзабилити

Создание анимации для сайта — часть успешности проекта

Artjoker Блог Юзабилити Создание анимации для сайта — часть успешности проекта

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

Нет, статья не о том, что заанимированные котики захватят мир. Мы поговорили со специалистами из Artjoker: Яниной — дизайнером и Наталией — руководителем отдела product-дизайна, чтобы рассказать о том, как анимация может повлиять на успешность проекта.

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

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

Казалось бы — какой толк от котика, машущего лапкой при нажатии. Все до смешного просто — люди любят взаимодействие и готовы играться с этим котиком. Они запомнят его надолго, а потом еще и расскажут друзьям. «Анимация часто используется для вау-эффекта. Например, есть задача: “Сделать креативный дизайн сайта”. Как всегда, слово “креативный” каждый понимает по-своему. В таких задачах мы прорабатываем не только графику. Сильно помогает анимация сайта.

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

Янина кивнула и продолжила ответ коллеги: «Да, это не скучная статичная графика, а уже интерактивчик, из-за которого все выглядит живенько. Анимация действительно может использоваться для привлечения внимания и вовлечения пользователя. Еще она нужна, чтобы показать как работает какая-либо фича».

Как понять, что анимация необходима?

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

Яна продолжила: «Статичной картинкой ты не объяснишь человеку, что подразумевает определенная иллюстрация или фотография. Нужно показывать историю, флоу работы. Также анимация может понадобиться для привлечения внимания к ключевому объекту. Если говорить о вау-эффекте, он не всегда необходим, но иногда его использование смотрится круто».

Может ли анимация выступать инструментом для повышения конверсии?

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

«Сразу в голову пришел сайт дизайн-агентства — если потенциальные клиенты видят, что у ребят крутой дизайн и анимация, у них точно повысится конверсия. Также полезно, если при помощи эффектов мы лучше объясним пользу продукта, особенности его использования или другие детали», — дополнила Янина.

Отдельного упоминания стоит вопрос со скоростью загрузки страниц веб-ресурса. CSS-анимацию часто используют для прелоадеров, которые помогают сократить время до «первого контакта» пользователя с контентом, что существенно снижает процент отказов. Множество людей просто закрывают вкладку, если сайт грузится дольше трех секунд. Анимация может помочь в этом или усугубить ситуацию в зависимости от профессионализма исполнителя.

Насколько анимация влияет на юзабилити?

Создание анимации для веб сайта — это процесс, который должен проходить под лозунгом: «Не навреди». Дополняя картинку еле-заметными деталями — переходами, пульсацией, появлением тени или иначе добавляя интерактива, можно вызвать у посетителя интерес и ощущение целостности, завершенности.

«Хорошо, когда за нажатием кнопочки следует ответное действие. Существуют разные виды эффектов. Можно поставить просто крутящийся-летающий фон, но есть задачи и на взаимодействие пользователя с дизайном. Тогда кнопка превращается в новый элемент, потом появляется надпись — это супер-пупер», — подтвердила дизайнерка.

Актуальна ли Flash-анимация?

Если вы решили сделать флеш анимацию для сайта в 2019 году, что-то пошло не так. Эта технология давно мертва и ее пора списывать со счетов. Яна поделилась своей историей: «По-моему, этой технологией сейчас вообще никто не пользуется. Помню, у нас еще в универе была разработка флеш анимации, а потом нам через два года сказали: “Все, ребятки, сворачиваемся”, — давно это было... Flash мертв. Все используют After Effects».

Все, ребятки, сворачиваемся.

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

Насколько распространена 3D анимация в вебе?

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

Создать 3D анимацию на сайте можно в программах:

  • after effects;
  • 3ds Max (в основном, используется для разработки игр);
  • Cinema 4D.

«Если на сайте есть 3D-анимация, чуваки вообще офигенно крутые. Как по мне, она чаще встречается на сайтах дизайн-агентств и в продуктовом дизайне. Например, создается объемная модель велосипеда, чтобы показать его в движении. 3D-анимация распространена, но больше как графический элемент — объемная картинка/иллюстрация или просто объект в качестве бэкграунда. По крайней мере, именно это мне встречается», — дополняет Яна.

Если на сайте есть 3D-анимация, чуваки вообще офигенно крутые.

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

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

А уже полноценно создать gif анимацию для сайта можно при помощи:

  • Photoshop
  • Principle
  • After Effects
  • Cinema 4D (для 3D-анимации).

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

Мы с радостью сделаем бесплатную оценку вашего проекта
Или просто загрузите файл с презентацией или описанием
Максим Садовский
Менеджер по работе с клиентами
Максим Садовский