Анимация в веб-дизайне: зачем и когда использовать?

Автор: Елизавета Гуменюк

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

Слово «анимация» происходит от древне-латинского слова «анима», что означает “душа”. Попытки вдохнуть жизнь в статичные искусственные объекты появились тысячи и тысячи лет назад, когда Пигмалион попытался разбудить свое творение – статую очаровательной Галатеи.

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

КАК ПОЯВИЛАСЬ АНИМАЦИЯ В ВЕБ-ДИЗАЙНЕ?

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

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

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

УЛУЧШЕНИЕ ЮЗАБИЛИТИ С АНИМАЦИЕЙ

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

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

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

ETECHEVENT – САЙТ С АНИМИРОВАННЫМИ ЭЛЕМЕНТАМИ

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

ИНТЕРАКТИВНЫЙ САЙТ APPS

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

ИСПОЛЬЗОВАНИЕ АНИМАЦИИ В МАТЕРИАЛЬНОМ ДИЗАЙНЕ

Анимация в веб-дизайне — это хороший ход, который может оказаться чрезвычайно полезным, если не используется только в декоративных целях. UI и UX дизайнеры сейчас часто используют анимацию для совершенствования своего рабочего процесса. Даже Гугл понимает важность такого движения для юзабилити. Так и появился материальный дизайн.

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

В своем «Руководстве по материальному дизайну» Google утверждает, что движение может сообщить пользователям, что объект легкий, тяжелый, гибкий, и даже большой или маленький. Анимация должна быть использована, чтобы предоставить пользователям больше понимания того, какова природа объекта, а, следовательно, как он может и должен быть использован в дизайне.

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

СОВЕТЫ ПО АНИМАЦИИ, ИСПОЛЬЗУЕМОЙ НА ВЕБ-САЙТАХ

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

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

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

Убедитесь, что ваша анимация отзывчива. Отзывчивость веб-сайта является обязательной, если вы хотите добиться успеха. А если он работает и отлично смотрится только на экране рабочего стола — вы можете проиграть битву за пользователей. Существует множество инструментов, которые позволяют создавать отзывчивую анимацию (например, Adobe After Effects или Invision) и сайтостроители (Webflow и MotoCMS), которые включают отзывчивые анимированные эффекты в свой рабочий процесс. Они предлагают различные виды анимации, которые могут использоваться внутри сайта, улучшить его юзабилити и дизайн.

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

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

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

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

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