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

Анимацию можно разделить на три вида:

Анимированные объекты – самые простые варианты анимации. Это могут быть кнопки призыва к действию, курсор, который двигается, кнопка со стрелкой «вверх-вниз».

Анимированные изображения – это рекламные баннеры в движении.

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

Анимированный текст – это анимированный заголовок или текст в виде бегущей строки.

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

Для чего используют анимацию

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

Автор: Thomas Bogner

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

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

Как использовать анимацию в дизайне сайта

1. Всего должно быть в меру

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

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

2. Анимировать все нельзя остановить

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

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

3. Продолжительность анимации

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

Основным аспектом для подбора и вариаций использования анимации на сайте является целевая аудитория. Для молодежи анимированные эффекты и креатив будут интересны, а вот старшее поколение скорее будет ждать простоту и экономию времени на покупках, например. Если ваша ЦА — старшее поколение, то идеально использовать анимации при ожидании загрузки. Это как проявление заботы о пользователе, вы просто не даете ему скучать. Также полезно использовать анимацию на объектах, которые приведут посетителя к конечной цели.